Android LinearLayout实现下拉刷新

效果图

实现思路

一般刷新给ListView设置addHeaderView，这里我们可以模仿着这种方式实现可刷新的LinearLayout。然而LinearLayout并没有提供addHeaderView方法，既然不提供那么我们自己addView添加第一个View为我们下拉刷新的布局不就成了嘛。这里将添加的第一个View称为HeadView。初始化的时候隐藏HeadView，然后重写onTouchEvent()，实现自己的下拉刷新逻辑。如果想增加自己的一些动画，修改代码添加上动画的代码即可。开打！开打！

RefreshLinearLayout的具体实现

/** * Created by dongyk on 2016/6/24. */public class RefreshLinearLayout extends LinearLayout {    private final String TAG = this.getClass().getSimpleName();    private Context mContext;    private View mHeadView;    private TextView mTv;    private int mHeadViewHeight = 50;//单位dp    private int mStartX;    private int mStartY;    private int mEndX;    private int mEndY;    private int dx;    private int dy;    /**     * 是否正在刷新标志位     */    private boolean isRefresh;    public RefreshLinearLayout(Context context) {        this(context,null);    }    public RefreshLinearLayout(Context context, AttributeSet attrs) {        this(context, attrs,0);    }    public RefreshLinearLayout(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        mContext = context;        forceVertival();        addHeadView();        onComplete();    }    /**     * 强制设置垂直方向     */    private void forceVertival() {        if (getOrientation() == LinearLayout.HORIZONTAL){            setOrientation(LinearLayout.VERTICAL);        }    }    /**     * 增加头布局文件     */    private void addHeadView() {        LayoutInflater inflater = LayoutInflater.from(mContext);        mHeadView = inflater.inflate(R.layout.head_refresh_linearlayout,null);        mHeadViewHeight = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, (float) mHeadViewHeight, mContext.getResources().getDisplayMetrics());        LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, mHeadViewHeight);        mHeadView.setLayoutParams(params);        this.addView(mHeadView);        mTv = (TextView)(mHeadView.findViewById(R.id.tv_head_refresh));    }    /**     * 隐藏HeadView     */    public void onComplete(){        setHeadViewPaddingTop(mHeadViewHeight);    }    /**     *     * @param paddingTop 隐藏的高度     */    private void setHeadViewPaddingTop(int paddingTop){        if(paddingTop > mHeadViewHeight){            new IllegalArgumentException("paddingTop must < HeadViewHeight ");        }        setPadding(getPaddingLeft(),-paddingTop,getPaddingRight(),getPaddingBottom());    }    @Override    public boolean onTouchEvent(MotionEvent event) {        switch (event.getAction()){            case MotionEvent.ACTION_DOWN:                mStartX = (int) event.getX();                mStartY = (int) event.getY();                break;            case MotionEvent.ACTION_MOVE:                mEndX = (int) event.getX();                mEndY = (int) event.getY();                dx = Math.abs(mEndX - mStartX);                dy = mEndY - mStartY;                if (0 < dy && dy < mHeadViewHeight && dy>dx){                    setHeadViewPaddingTop(mHeadViewHeight - dy );                    mTv.setText("下拉加载数据");                }else if(dy >= mHeadViewHeight && dy>dx){                    setHeadViewPaddingTop(0);                    isRefresh = true;                    mTv.setText("松开即可刷新");                }                break;            case MotionEvent.ACTION_UP:                if (isRefresh) {                    setHeadViewPaddingTop(0);                    mTv.setText("正在刷新");                    if (mIRefreshListener != null){                        mIRefreshListener.onStart();                        mIRefreshListener.onLoading();                        mIRefreshListener.onEnd();                    }                    isRefresh = false;                } else {                    onComplete();                }                break;            default:                break;        }        return true;    }    private IRefreshListener mIRefreshListener;    public interface IRefreshListener{        void onStart();        void onLoading();        void onEnd();    }    public void setIRefreshListener(IRefreshListener mIRefreshListener) {        this.mIRefreshListener = mIRefreshListener;    }}

控件取名为RefreshLinearLayout。可以看到RefreshLinearLayout继承LinearLayout。在三个互相调用的构造函数最后我们首先设置RefreshLinearLayout的布局方向为VERTICAL，如果是横向，应该是左滑刷新，下拉刷新难免太傻了点。之后填充HeadView设置参数没撒好说的。花3s扫一下即可。紧接着调用了onComplete()方法，在暴露的公共方法onComplete()方法中调用setHeadViewPaddingTop()参数为HeadView的高mHeadViewHeight。需要注意下这个方法。

    /**     *     * @param paddingTop 隐藏的高度     */    private void setHeadViewPaddingTop(int paddingTop){        if(paddingTop > mHeadViewHeight){            new IllegalArgumentException("paddingTop must < HeadViewHeight ");        }        setPadding(getPaddingLeft(),-paddingTop,getPaddingRight(),getPaddingBottom());    }

可以看到setHeadViewPaddingTop()中仅仅调用了setPadding()方法。

setPadding(getPaddingLeft(),-paddingTop,getPaddingRight(),getPaddingBottom());

由于下拉刷新的存在，所以这里禁止了布局文件中android:paddingTop=""的属性。而且在paddingTop的位置，设置的是参数的负值。正常设置padding是正值，因此产生内容和控件的距离。如果padding是负值，那么显示效果为内容大于控件，多余部分则会被隐藏。由于给setHeadViewPaddingTop()传递的参数为HeadViewHeight，因此实现了隐藏HeadView的效果。

然后再onTouchEvent()中随着手势不断改变HeadView隐藏的高度，即可达到下拉刷新的效果。在ACTION_UP中根据标志位isRefresh判断是否执行相应的操作。为此还需要一些回调方法，这里统一写在IRefreshListener接口中。

    private IRefreshListener mIRefreshListener;    public interface IRefreshListener{        void onStart();        void onLoading();        void onEnd();    }    public void setIRefreshListener(IRefreshListener mIRefreshListener) {        this.mIRefreshListener = mIRefreshListener;    }

在ACTION_UP中依次调用了onStart()、onLoading()和onEnd()方法。除此之外，还暴露了一个onComplete()方法，用于收起HeadView。至此，RefreshLinearLayout分析完毕。下面看个简单实现的Demo。

运用示例

    private void initRefreshListener() {        ll_refresh.setIRefreshListener(new RefreshLinearLayout.IRefreshListener() {            @Override            public void onStart() {                Log.i("RefreshLinearLayout", "onStart");                tv.setText("onStart");            }            @Override            public void onLoading() {                Log.i("RefreshLinearLayout", "onLoading");                tv.setText("onLoading");                 getNetWorkData();            }            @Override            public void onEnd() {                tv.setText("onEnd");                Log.i("RefreshLinearLayout", "onEnd");            }        });    }    /**     * 模拟网络获取数据     */    private void getNetWorkData(){        new Thread(new Runnable() {            @Override            public void run() {                try {                    Thread.sleep(2*1000);                    myHandler.sendEmptyMessage(EMPTY_MSG);                } catch (InterruptedException e) {                    e.printStackTrace();                }            }        }).start();    }    private MyHandler myHandler;    class MyHandler extends Handler{        @Override        public void handleMessage(Message msg) {            super.handleMessage(msg);            if (msg.what == EMPTY_MSG){                ll_refresh.onComplete();            }        }    }

在onLoading()中执行getNetWorkData()方法模拟网络请求，在Handler中调用onComplete()方法收起HeadView。这里的Handler可能会造成内存泄露，完善点可以在onDestroy()中添加myHandler.removeCallbacksAndMessages(null)。感兴趣可以详见内存泄露简介、典型情景及检测解决。