美文网首页
最简单的Pull-To-Refresh实例

最简单的Pull-To-Refresh实例

作者: 大大世界 | 来源:发表于2016-06-22 16:25 被阅读207次

    例子是一个原型操作, 所以特殊功能都可以基于此进行添加。
    突出两点:
    1: UI 布局
    onMeasure 处理Header和Content的大小
    onLayout 处理Header和Content的位置
    实际下拉过程中, 是没有回调onLayout方法。
    而是通过 mHeaderView.offsetTopAndBottom(3); 设置偏移位置。
    通过invalidate();进行刷新。
    PS:
    offsetTopAndBottom方法设置View的位置, 不会造成View的重绘,代码里可以看见通过RenderNode.offsetTopAndBottom来实现的。(Draw绘制完的东西保存在RenderNode里面,所以位置的修改可以直接修改RenderNode)
    invalidate 绘制当前的ViewTree, 这里的目的上让上面设置的RenderNode生效。

    2: 事件传递
    事件传递的关键是方法 canScrollVertically 的理解。
    PS:
    对于一些普通的布局, 例如 LinearLayout 是不能在其内部直接添加一个 ListView
    原因的话很简单 LinearLayout 没有重写 canScrollVertically 方法。

    最开始就碰到canScrollVertically 这个问题困扰了两天。 后来读了源码, 才了解如果有特殊需求需要重写canScrollVertically .

    package com.gank.demo.views.pulltorefresh;
    
    import android.content.Context;
    import android.graphics.Color;
    import android.util.AttributeSet;
    import android.util.Log;
    import android.view.Gravity;
    import android.view.MotionEvent;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.TextView;
    
    /**
     * Created by GankLi on 2016/6/20.
     */
    
    public class UILayout extends ViewGroup {
    
        private static final String TAG = "Gank";
    
        private TextView mHeaderView;
        private View mContentView;
    
        private boolean mIsPulling = false;
        private int mHeaderOffset = 0;
        private static final float OFFSET_Y = 20.0f;
        private float mBeginX;
        private float mBeginY;
        private int mTotal = 0;
    
        public UILayout(Context context, AttributeSet attrs) {
            super(context, attrs);
            //Header
            initHeaderVIew(context);
        }
    
        public UILayout(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            //Header
            initHeaderVIew(context);
        }
    
        void initHeaderVIew(Context context){
            mHeaderView = new TextView(context);
            mHeaderView.setText("下拉刷新");
            mHeaderView.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
            mHeaderView.setGravity(Gravity.CENTER);
            mHeaderView.setBackgroundColor(Color.parseColor("#4b4b4b"));
            addView(mHeaderView);
        }
    
        @Override
        protected void onFinishInflate() {
            int size = getChildCount();
            Log.w(TAG, "Size: " + size);
            for (int i = 0; i < size; i++) {
                View child = getChildAt(i);
                Log.w(TAG, "View: " + child);
                if (!(child instanceof TextView)) {
                    mContentView = child;
                }
            }
            super.onFinishInflate();
        }
    
        /**
         * 设置 Head 和 Content 的大小
         */
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            Log.w(TAG, "---------------------Begin - onMeasure----------------------");
            Log.w(TAG, "1: HSpec: " + MeasureSpec.toString(heightMeasureSpec) + " WSpec: " + MeasureSpec.toString(widthMeasureSpec) + " H: " + getMeasuredHeight() + " W: " + getMeasuredWidth());
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            Log.w(TAG, "2: HSpec: " + MeasureSpec.toString(heightMeasureSpec) + " WSpec: " + MeasureSpec.toString(widthMeasureSpec) + " H: " + getMeasuredHeight() + " W: " + getMeasuredWidth());
            widthMeasureSpec = MeasureSpec.makeMeasureSpec(getMeasuredWidth() - getPaddingRight() - getPaddingLeft(), MeasureSpec.EXACTLY);
            heightMeasureSpec = MeasureSpec.makeMeasureSpec(getMeasuredHeight() - getPaddingTop() - getPaddingBottom(), MeasureSpec.EXACTLY);
            Log.w(TAG, "HSpec: " + MeasureSpec.toString(heightMeasureSpec) + " WSpec: " + MeasureSpec.toString(widthMeasureSpec) + " Head - HSpec: " + MeasureSpec.toString(MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)));
            mContentView.measure(widthMeasureSpec, heightMeasureSpec);
            mHeaderView.measure(widthMeasureSpec, MeasureSpec
                    .makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
            Log.w(TAG, "---------------------End - onMeasure----------------------");
        }
    
        /**
         * 设置 Head 和 Content 的位置
         */
        @Override
        protected void onLayout(boolean changed, int l, int t, int r, int b) {
            Log.w(TAG, "=============Begin - onLayout=============");
            Log.w(TAG, "changed: " + changed + "(" + l + "," + t + ") - (" + r + "," + b + ")");
            if (mContentView == null) {
                return;
            }
            int height = getMeasuredHeight();
            int width = getMeasuredWidth();
    
            Log.w(TAG, "H: " + height + " W: " + width);
            Log.w(TAG, "mContentView:  (0," + mHeaderOffset + ") - (" + width + "," + (height + mHeaderOffset) + ")");
            Log.w(TAG, "mHeaderView:  (0," + (mHeaderView.getMeasuredHeight() + mHeaderOffset) + ") - (" + width + "," + mHeaderOffset + ")");
    
            mContentView.layout(0, mHeaderOffset, width, height + mHeaderOffset);
            mHeaderView.layout(0, mHeaderOffset - mHeaderView.getMeasuredHeight(), width, mHeaderOffset);
            Log.w(TAG, "=============End - onLayout=============");
        }
    
        /**
         *  根据触摸, 显示下拉操作
         */
        @Override
        public boolean dispatchTouchEvent(MotionEvent ev) {
            int action = ev.getAction();
            switch (action) {
                case MotionEvent.ACTION_DOWN: //按下的时候,记录位置
                    mBeginX = ev.getX();
                    mBeginY = ev.getY();
                    mTotal = 0;
                    mIsPulling = false;
                    Log.w(TAG, "==ACTION_DOWN== (" + mBeginX + "," + mBeginY + ")");
                    super.dispatchTouchEvent(ev);
                    return true;
                case MotionEvent.ACTION_MOVE: //
                    float offesty = ev.getY() - mBeginY;
                    if (!mIsPulling) {
                        if (offesty > OFFSET_Y) {
                            boolean canScrollUp = mContentView.canScrollVertically(-1);
                            if (canScrollUp) {//可以继续上滑
                                return super.dispatchTouchEvent(ev);
                            }else{//出发下拉逻辑
                                mIsPulling = true;
                                mHeaderOffset = (int) (offesty - OFFSET_Y);
                                mHeaderView.setVisibility(VISIBLE);
                                invalidate();
                                return true;
                            }
                        }
                    } else {//处理下拉操作
                        mHeaderOffset = (int) (offesty - OFFSET_Y);
                        mTotal += 3;
                        mHeaderView.offsetTopAndBottom(3);
                        mContentView.offsetTopAndBottom(3);
                        invalidate();
                        return true;
                    }
                    //Log.w(TAG, "====ACTION_MOVE==== (" + mBeginX + "," + mBeginY + ")" + " Offset: " + mHeaderOffset + " Pulling: " + mIsPulling);
                    return super.dispatchTouchEvent(ev);
                case MotionEvent.ACTION_UP: //点击释放的时候, 下拉返回
                    mHeaderOffset = 0;
                    if (mIsPulling) {
                        mHeaderView.offsetTopAndBottom(-mTotal);
                        mContentView.offsetTopAndBottom(-mTotal);
                        invalidate();
                        mIsPulling = false;
                        return true;
                    }
                    Log.w(TAG, "==ACTION_UP== (" + ev.getX() + "," + ev.getY() + ")");
                    return super.dispatchTouchEvent(ev);
            }
            return super.dispatchTouchEvent(ev);
        }
    }
    

    使用方式

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <com.gank.demo.views.pulltorefresh.UILayout
            android:id="@+id/activity_pull"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
            <ScrollView
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/test"/>
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/test"/>
                </LinearLayout>
            </ScrollView>
    
        </com.gank.demo.views.pulltorefresh.UILayout>
    </FrameLayout>
    

    相关文章

      网友评论

          本文标题:最简单的Pull-To-Refresh实例

          本文链接:https://www.haomeiwen.com/subject/pmhndttx.html