用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

仿微信小程序下拉組件

Rolan 2019-8-29 00:26

code小生,一個專注 Android 領域的技術平臺公眾號回復Android加入我的安卓技術群作者:colinWong鏈接:https://www.jianshu.com/p/739bb01eee80聲明:本文已獲colinWong授權發表,轉發等請聯系原作者授權15634428195 ...

code小生,一個專注 Android 領域的技術平臺

公眾號回復 Android 加入我的安卓技術群

作者: colinWong

鏈接: https://www.jianshu.com/p/739bb01eee80

聲明: 本文已獲 colinWong

授權發表,轉發等請聯系原作者授權

1563442819594.gif

設計思路

1.自定義個組件類似RelativeLayout

2.可以內部放子View,然后就是滑動主體在前,小程序View在后

3.重寫dispatchTouchEvent 控制這兩個子View的位置

4.加上臨界點回彈動畫

5.手勢判斷(慣性效果)

1.繼承RelativeLayout

如果要從新寫一個GroupView組件需要measure → layout → draw 很多細節要處理也不一定處理的好。所以直接用系統提供的RelativeLayout

        public class MoreHeadLayout extends RelativeLayout {
        ...
}

2.內部子View 結構

就兩個,如下圖

image.png
    private View mHeadView;
    private NewNestedScrollView mBodyView;
   void init(){
        mHeadView = findViewById(R.id.head_layout);//view為head
        mBodyView = findViewById(R.id.body_layout);
    }

xml中的代碼

image.png

3.重寫dispatchTouchEvent

這一步主要是做控制手指滑動跟隨,就是bodyView跟隨你的手指滑動

先寫一個方法,就是控制bodyView縱坐標的位置

   private void setMarginTop(int offY) {
        RelativeLayout.LayoutParams paramsBody = (LayoutParams) mBodyView.getLayoutParams();
        int marginTop = paramsBody.topMargin - offY;
        if (marginTop < 0) {
            marginTop = 0;
        } else if (marginTop > mHeadView.getHeight()) {
            marginTop = mHeadView.getHeight();
        }
        paramsBody.topMargin = marginTop;
        mBodyView.setLayoutParams(paramsBody);
    }

再計算滑動距離,然后調用setMarginTop 方法

 @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        int y = (int) ev.getRawY();
        int offY = lastY - y;
        lastY = y;
        switch (ev.getAction()) {
             ...
            case MotionEvent.ACTION_MOVE:
              if (isBodyTop && headViewVisible()) {
                    setMarginTop((int) (offY * damp));
                    return true;
                }

                if (isBodyTop && offY < 0) {
                    setMarginTop((int) (offY * damp));
                    return true;
                }
                break;
              ...
    }

這樣bodyView 就可以跟隨手指動了,若需要一些阻尼效果可以添加系數damp,就是bodyView移動的距離等于手指滑動的距離乘以系數damp。

4.臨界點與回彈

先寫一個動畫方法,該動畫方法就是bodyView 從開始的高度移動到結束的高度。

private ValueAnimator mAnim;
   /**
     * 收起或打開動畫
     *
     * @param start 開始高度
     * @param end   結束高度
     * @param time  動畫時間
     */
    public void startAnimator(int start, int end, long time) {

        if (mAnim != null && mAnim.isRunning()) {
            mAnim.cancel();
        }
        mAnim = ValueAnimator.ofInt(start, end);
        mAnim.setDuration(time);
        mAnim.setTarget(mBodyView);
        mAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int currentValue = (Integer) animation.getAnimatedValue();
                RelativeLayout.LayoutParams params = (LayoutParams) mBodyView.getLayoutParams();
                params.topMargin = currentValue;
                mBodyView.setLayoutParams(params);
            }
        });
        mAnim.start();

    }

然后設置一個觸發的臨界點

    private float closeOrOpen = 0.4f;//動畫關閉還是打開的點(相對于頭部高度的比例)

觸發時機例如手指抬起事件

            case MotionEvent.ACTION_UP:
            ...
             if (mBodyView.getTop() < mHeadView.getHeight() * closeOrOpen) {
                        startAnimator(mBodyView.getTop(), 0);//收起動畫
                    } else {
                        startAnimator(mBodyView.getTop(), mHeadView.getMeasuredHeight());//打開動畫

                    }

5.手勢判斷(慣性效果)

添加手勢判斷會有更好的使用體驗效果,方法如下

    private GestureDetector mGestureDetector;

    mGestureDetector = new GestureDetector(getContext(), new MoreGestureListener());

 class MoreGestureListener implements GestureDetector.OnGestureListener {

        @Override
        public boolean onDown(MotionEvent e) {
            mIsHaveScrolled = false;
            return false;
        }

        @Override
        public void onShowPress(MotionEvent e) {

        }

        @Override
        public boolean onSingleTapUp(MotionEvent e) {
            return false;
        }

        @Override
        public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
            mIsHaveScrolled = true;
            return false;
        }

        @Override
        public void onLongPress(MotionEvent e) {

        }

        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
            //當頭部顯示并且向上fling時候關閉頭部(慣性視覺)
            if (mBodyView.getTop() > 0 && velocityY < 0) {
                startAnimator(mBodyView.getTop(), 0);
            }
            return false;
        }
    }

在dispatchTouchEvent 方法里每個事件下面把事件傳進去

                mGestureDetector.onTouchEvent(ev);//為什么不放在最前面,因為會比關閉/打開動畫先觸發

其他

大概的雛形就是這樣可以擴展其他功能如,三個小點或者震動、headView跟隨bodyView 移動等

附上用例地址

https://github.com/collinWong/wx_drawer

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: code小生 來自: 微信公眾號
不朽的浪漫援彩金
29选7走势分析 下载大众麻将免费安装 海量数据股票走势 个人转让二手麻将机 快三走势图河北 我要做河北麻将代理 白姐四不像必中一肖图 湖南闲来麻将 黑龙江福彩36选7走势图 南京麻将50算法 上海十一选五走势图一定牛 北京小赛车开奖结果 河北排列7开奖奖金 金蟾千炮捕鱼破解版 江西抚州麻将优乐江西抚州麻将馆 河内5分彩平台app