2. 程式人生 > >通過ViewGroup實現下拉重新整理和上拉載入，2018/2/12 06

通過ViewGroup實現下拉重新整理和上拉載入，2018/2/12 06

阿新 • • 發佈：2019-02-08

為了重新瞭解一下自定義ViewGroup，自己實現了一個下拉重新整理view，衝突的解決Recyclerview滾動到底部和頂部的處理全部放在了父view 中，滾動實現使用的是Scroller，所以使整個控制元件還有類似ios的彈性效果，程式碼很簡單，使用也很簡單，重新整理的頭佈局和腳佈局都可以在佈局檔案中直接新增，處理。
其中內容也可以不是Recyclerview，直接寫在佈局裡就行，佈局效果類似LinearLayout 但只能是豎直方向堆疊。
初始化佈局等程式碼：

private Scroller mScroller;
    private RecyclerView mRecyclerView;
    private
 
 RefreshListener mListener;

    private int mTotalHeight; //子view加在一起總高度
    private  HashMap<Integer,Integer> mViewMarginTop; //所有子view marginTop距離
    private  HashMap<Integer,Integer> mViewMarginBottom;//所有子view marginBottom距離
    private float mStartY;//手指落下位置 移動之後更新
    private float mStartX;
    private
 
 int mMoveHeight; //移動的總高度
    private int mState; // 重新整理狀態
    private static  int NORMAL=0; // 正常狀態
    private static  int REFRESH=1; // 重新整理中
    private static  int LOAD=2; //上拉載入中
    private boolean isPull; //是否拖動中
    private int mCanScrollDistance=-1; //可拖動最遠距離
    private boolean mCanLoadMore;//可否上拉載入

    public
 
 RefreshLayout(Context context) {
        this(context,null);
    }

    public RefreshLayout(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public RefreshLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mViewMarginTop= new HashMap<>();
        mViewMarginBottom= new HashMap<>();
        mScroller = new Scroller(context);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        for (int i = 0; i < getChildCount(); i++) {
            //測量每一個子
            measureChild(getChildAt(i),widthMeasureSpec,heightMeasureSpec);
        }
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int paddingLeft = getPaddingLeft();
        int paddingRight = getPaddingRight();
        int layoutWidth = getMeasuredWidth();
        mTotalHeight=t;//初始化高度
        for (int i = 0; i < getChildCount(); i++) {
            View view = getChildAt(i);
            if (view.getVisibility() != GONE) {
                LayoutParams layoutParams = (LayoutParams) view.getLayoutParams();
                int viewHeight = view.getMeasuredHeight();
                int viewWidth = view.getMeasuredWidth();
                if (i != 0) {
                    mTotalHeight += viewHeight;
                    if (mViewMarginTop.get(i) != null) {//總高度加上子view距離上方的距離
                        mTotalHeight += mViewMarginTop.get(i);
                    }
                }
                if(layoutParams.mCenter) {
                    int marginHorizontal = (layoutWidth - viewWidth-getPaddingLeft()-getPaddingRight()) / 2;
                    if(mTotalHeight>getMeasuredHeight()) {//如果子view總高度大於父控制元件總高度則最大值為父控制元件高度
                        int viewMarginBottom=0;
                        if (mViewMarginBottom.get(i) != null) {
                            viewMarginBottom = mViewMarginBottom.get(i);
                        }
                        if((mTotalHeight-viewHeight)>=getMeasuredHeight()) {//判斷如果子view在父控制元件高度之外 繪製的位置
                            view.layout(l + marginHorizontal + getPaddingLeft(), mTotalHeight - viewHeight, viewWidth + marginHorizontal + l + getPaddingLeft(), mTotalHeight);
                        }else {
                            view.layout(l + marginHorizontal + getPaddingLeft(), mTotalHeight - viewHeight, viewWidth + marginHorizontal + l + getPaddingLeft(), getMeasuredHeight() - viewMarginBottom);
                        }
                    }else{
                        view.layout(l + marginHorizontal + getPaddingLeft(), mTotalHeight - viewHeight, viewWidth + marginHorizontal + l + getPaddingLeft(), mTotalHeight);
                    }
                }else{
                    if(mTotalHeight>getMeasuredHeight()) {//如果子view總高度大於父控制元件總高度則最大值為父控制元件高度
                        int viewMarginBottom=0;
                        if (mViewMarginBottom.get(i) != null) {
                             viewMarginBottom = mViewMarginBottom.get(i);
                        }
                        if((mTotalHeight-viewHeight)>=getMeasuredHeight()) {//判斷如果子view在父控制元件高度之外 繪製的位置
                            view.layout(l + paddingLeft, mTotalHeight - viewHeight, viewWidth + l + paddingLeft + paddingRight, mTotalHeight);
                        }else{
                            view.layout(l + paddingLeft, mTotalHeight - viewHeight, viewWidth + l + paddingLeft + paddingRight, getMeasuredHeight() - viewMarginBottom);
                            mTotalHeight=getMeasuredHeight() - viewMarginBottom;
                        }
                    }else{
                        view.layout(l + paddingLeft, mTotalHeight - viewHeight, viewWidth + l + paddingLeft + paddingRight, mTotalHeight);
                    }
                }
                if (mViewMarginBottom.get(i) != null) {//總高度加上子view距離下方的距離
                    mTotalHeight += mViewMarginBottom.get(i);
                }
            }
        }

    }

獲取子view屬性，和自定義屬性，其中自定義屬性需要在values資料夾下建立attrs資原始檔，僅僅只取了幾個處理了一下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="Refresh_Layout">
        <attr name="center_horizontal" format="boolean" />
    </declare-styleable>
</resources>
@Override
    protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {
        return p instanceof LayoutParams;
    }

    @Override
    protected ViewGroup.LayoutParams generateLayoutParams(ViewGroup.LayoutParams p) {
        return super.generateLayoutParams(p);
    }

    @Override
    public ViewGroup.LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new LayoutParams(getContext(),attrs);
    }

    /**
     * 自定義LayoutParams 新增自定義屬性
     * 並可以獲取到子view的屬性
     */
    private  class LayoutParams extends ViewGroup.LayoutParams {
        private boolean mCenter;
        private LayoutParams(Context c, AttributeSet attrs) {
            super(c, attrs);
            for (int i = 0; i < attrs.getAttributeCount(); i++) {
                String attributeName = attrs.getAttributeName(i);
                String attributeValue = attrs.getAttributeValue(i);
                switch (attributeName){
                    case "layout_marginTop"://單位px 儲存所有子view marginTop高度
                        if(attributeValue.length()>2) {
                            mViewMarginTop.put(getChildCount(),(int) Double.parseDouble(attributeValue.substring(0, attributeValue.length() - 2)));
                        }
                        break;
                    case "layout_marginBottom"://單位px 儲存所有子view marginBottom高度
                        if(attributeValue.length()>2) {
                            mViewMarginBottom.put(getChildCount(),(int) Double.parseDouble(attributeValue.substring(0, attributeValue.length() - 2)));
                        }
                        break;
                    case "center_horizontal"://自定義屬性水平居中
                        mCenter = Boolean.valueOf(attributeValue);
                        break;
                }
            }
        }
    }

之後是觸控事件的處理：

@Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                if (mScroller != null && !mScroller.isFinished()) {
                    mScroller.abortAnimation();
                }
                mStartY = event.getRawY();
                mStartX = event.getRawY();
                super.dispatchTouchEvent(event);
                return true;
            case MotionEvent.ACTION_MOVE:
                if(Math.abs(mMoveHeight)>mCanScrollDistance && mCanScrollDistance>0){//判斷是否到達設定的極限滾動距離
                    return true;
                }
                int round = Math.round(mStartY - event.getRawY());
                int roundX = Math.round(mStartX - event.getRawX());
                if(mListener!=null){
                    mListener.moveDy(round);
                }
                if(Math.abs(roundX)>Math.abs(round)){//保證橫向能夠滾動
                    mStartY -= round;
                    mStartX -= roundX;
                    return super.dispatchTouchEvent(event);
                }
                if(mRecyclerView!=null) {
                    if (!mRecyclerView.canScrollVertically(-1)) {//豎直方向recyclerView可否下拉
                        if (round < 0) {
                            isPull = true;
                            dealMove(round,event);
                            return true;
                        }
                    }
                    if (!mRecyclerView.canScrollVertically(1)) {//豎直方向recyclerView可否上拉
                        if (round > 0) {//上拉
                            isPull = true;
                            dealMove(round,event);
                            return true;
                        }
                    }
                    if (mState == REFRESH || isPull) {//重新整理狀態，拖動狀態下攔截，自己處理移動
                        dealMove(round,event);
                        return true;
                    }
                    if(mMoveHeight>0){//如果底部view還在顯示則下拉是從底部view開始
                        dealMove(round,event);
                        return true;
                    }
                    mStartY -= round;
                    mStartX -= roundX;
                }else{
                    dealMove(round,event);
                    return true;
                }
                break;
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                isPull=false;
                int height = getChildAt(0).getHeight();
                if(mMoveHeight<0 || mState == REFRESH) {
                    if (-mMoveHeight > height && mState == NORMAL) { // 正常狀態下下拉超過第一個view高度，改為重新整理狀態
                        mState = REFRESH;
                        if (mListener != null) {
                            mListener.refresh();
                        }
                        smoothScrollBy( -mMoveHeight - height);
                    } else if (mMoveHeight > height / 2 && mState == REFRESH) {//重新整理狀態下移動到第一個view顯示小於一半會滾到到正常顯示狀態
                        mState = NORMAL;
                        smoothScrollBy( -mMoveHeight + height);
                    } else {
                        smoothScrollBy( -mMoveHeight);
                    }
                    mMoveHeight = 0;
                }else{
                    if(mMoveHeight>mTotalHeight-getMeasuredHeight()) {//判斷上拉載入
                        if(mCanLoadMore) {
                            mState = LOAD;
                            if(mListener!=null){
                                mListener.loadMore();
                            }
                        }
                        if(mTotalHeight>getMeasuredHeight()) {
                            //滾動到最後一個view顯示的位置
                            smoothScrollBy(-mMoveHeight + mTotalHeight - getMeasuredHeight());
                            //計算滾回到最後一個view顯示位置需要移動的距離
                            mMoveHeight = mTotalHeight - getMeasuredHeight();
                        }else{
                            smoothScrollBy( -mMoveHeight );
                            mMoveHeight = 0;
                        }
                    }
                }
                super.dispatchTouchEvent(event);
                return true;
        }
        return super.dispatchTouchEvent(event);
    }
    /**
     * 處理拖動 的高度計算和回撥
     */
    private void dealMove(int round, MotionEvent event) {
        mMoveHeight += round;
        if(mListener!=null) {
            if (Math.abs(mMoveHeight) > getChildAt(0).getHeight()) {
                mListener.pullDown();
            }else{
                mListener.pullUp();
            }
        }
        smoothScrollBy( round);
        mStartY = event.getRawY();
        mStartX = event.getRawX();
    }

    /**
     * 滑動到指定位置
     * @param dy 豎直方向偏移量
     */
    private void smoothScrollBy(int dy) {
        mScroller.startScroll(mScroller.getFinalX(), mScroller.getFinalY(), 0, dy);
        postInvalidate();
    }

最後是事件的監聽回撥 和方法呼叫:

public abstract class RefreshListener {
    abstract  void refresh();
     void pullUp(){

     }
     void pullDown(){

     }
     void loadMore(){

     }

     void moveDy(int dy){

     }
}
/**
     * 如果含有recyclerView需要繫結之後才能滾動
     */
    public void bindRecyclerView(RecyclerView recyclerView){
        mRecyclerView=recyclerView;
    }

    /**
     * 重新整理完成呼叫
     */
    public void refreshComplete(){
        if(mState==REFRESH) {
            int height = getChildAt(0).getHeight();
            mState = NORMAL;
            smoothScrollBy( -mMoveHeight + height);
            mMoveHeight = 0;
        }
    }

    /**
     * 上拉載入完成呼叫
     * @param type 0為還有資料需要載入 1 為資料全部載入完成
     */
    public void loadComplete(int type){
        if(mState==LOAD) {
            mState = NORMAL;
            if(type==0) {
                smoothScrollBy(-mMoveHeight);
                mMoveHeight = 0;
            }else{
                //滾動到最後一個view顯示的位置
                smoothScrollBy( -mMoveHeight + mTotalHeight - getMeasuredHeight());
                //計算滾回到最後一個view顯示位置需要移動的距離
                mMoveHeight =mTotalHeight - getMeasuredHeight();
            }
        }
    }

    /**
     * 最大可彈性滾動的距離
     * @param scrollDistance 距離單位px
     */
    public void canScrollDistance(int scrollDistance){
        mCanScrollDistance=scrollDistance;
    }

    /**
     * 繫結重新整理狀態監聽
     */
    /**
     * 繫結重新整理狀態監聽
     */
    public void setRefreshListener(RefreshListener listener,boolean canLoadMore){
        mListener=listener;
        mCanLoadMore=canLoadMore;
    }

最後別忘了Scroller要想滾動需要呼叫的方法：

@Override
    public void computeScroll() {
        if (mScroller.computeScrollOffset()) {
            scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            postInvalidate();
        }
    }

使用：

    <com.zqb.refreshlayout.RefreshLayout
        android:id="@+id/refresh_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10px"
        android:paddingRight="200px">

        <RelativeLayout
            android:id="@+id/header_content"
            android:layout_width="match_parent"
            android:layout_height="150px">

            <LinearLayout
                android:id="@+id/header_text_layout"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:gravity="center"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/header_hint_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/header_hint_refresh_loading"
                    android:textSize="13sp"/>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="3dp">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/header_hint_refresh_time"
                        android:textSize="14sp"/>

                    <TextView
                        android:id="@+id/header_hint_time"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="無記錄"
                        android:textSize="12sp"/>
                </LinearLayout>
            </LinearLayout>
        </RelativeLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimaryDark"
            android:paddingBottom="40px"
            android:paddingTop="20px"
            android:text="sfhsdkfh "/>

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

        </android.support.v7.widget.RecyclerView>

        <TextView
            android:text="載入中...."
            android:id="@+id/load_text_view"
            app:center_horizontal="true"
            android:layout_width="250px"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimaryDark"
            android:paddingBottom="40px"
            android:paddingTop="20px"/>
    </com.zqb.refreshlayout.RefreshLayout>
mRecyclerView =  findViewById(R.id.recycler_view);
        mRefreshLayout = findViewById(R.id.refresh_layout);
        mHeaderHintTextView = findViewById(R.id.header_hint_text);
        mLoadTextView = findViewById(R.id.load_text_view);
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        mRecyclerView.setLayoutManager(linearLayoutManager);
        mAdapter = new MyAdapter();
        mRecyclerView.setAdapter(mAdapter);
        mRefreshLayout.bindRecyclerView(mRecyclerView);
        mRefreshLayout.setRefreshListener(new RefreshListener() {
            @Override
            void refresh() {
                mHeaderHintTextView.setText(R.string.header_hint_refresh_loading);
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        mRefreshLayout.refreshComplete();
                    }

                }, 2000);
            }

            @Override
            void pullUp() {
                mHeaderHintTextView.setText(R.string.header_hint_refresh_normal);
            }

            @Override
            void pullDown() {
                mHeaderHintTextView.setText(R.string.header_hint_refresh_ready);
            }

            @Override
            void loadMore() {
                super.loadMore();
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        if(mCount>30) {
                            mLoadTextView.setText("載入完畢");
                            mRefreshLayout.loadComplete(1);
                        }else {
                            mCount += 10;
                            mAdapter.notifyDataSetChanged();
                            mRefreshLayout.loadComplete(0);
                        }
                    }

                }, 2000);
            }
        },false);

忘了加下拉減速效果了，之後有時間補上
GitHub上原始碼地址

相關推薦

通過ViewGroup實現下拉重新整理和上拉載入，2018/2/12 06

為了重新瞭解一下自定義ViewGroup，自己實現了一個下拉重新整理view，衝突的解決Recyclerview滾動到底部和頂部的處理全部放在了父view 中，滾動實現使用的是Scroller，所以使整個控制元件還有類似ios的彈性效果，程式碼很簡單，使用也很簡

史上最全的使用RecyclerView實現下拉重新整理和上拉載入更多

前言：            縱觀多數App，下拉重新整理和上拉載入更多是很常見的功能，但是谷歌官方只有一個SwipeRefreshLayout用來下拉重新整理，上拉載入更多還要自己做。      本篇文章基於RecyclerView簡單封裝了這兩個操作，下拉重

template-web.js 結合dropload.min.js下拉外掛實現下拉重新整理和上拉載入

//引入js,所需要的js已經上傳到個人資源 <script type="text/javascript" src="/web/home/js/template-web.js"></script> <link href="/web/h

自定義ListView實現下拉重新整理和上拉載入

實現ListView的下拉重新整理和上拉載入，需要先新增headerView和footerView,通過在拖動的過程中，控制頭尾佈局的paddingTop實現。先把paddingTop設為負值，來隱藏header，在下拉的過程中，不斷改變headerView的p

Flutter如何實現下拉重新整理和上拉載入更多

效果 下拉重新整理 如果實現下拉重新整理，必須藉助RefreshIndicator，在listview外面包裹一層RefreshIndicator，然後在RefreshIndicator裡面實現onRefresh方法。 body: movie

當scrollview巢狀多個recyclerview時如何實現整個頁面的下拉重新整理和上拉載入

最近做的一個專案中有個佈局比較複雜一點，整個頁面是個srollview裡面又嵌套了幾個recycview,剛開始是有的滑動衝突卡頓的問題，通過如下方法解決了 mRecyclerView.setLayoutManager(new GridLayoutManager(getContext(),

手把手教你實現RecyclerView的下拉重新整理和上拉載入更多

個人原創，轉載請註明出處http://blog.csdn.net/u012402124/article/details/78210639 2018年10月25日更新 讓大家花費時間看文章卻沒有解決需求，隨著bug的增多內心的愧疚感逐漸增強，但幾個月前的程式

自定義RecyclerView實現下拉重新整理和上拉載入

2）尾部佈局（上拉載入部分）：refresh_recyclerview_footer.xml<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:andro

使用SwipeRefreshLayout和RecyclerView實現仿“簡書”下拉重新整理和上拉載入

package com.leohan.refresh;import android.os.Bundle;import android.os.Handler;import android.support.v4.widget.SwipeRefreshLayout;import android.support.v7

自定義RecyclerView實現下拉重新整理和上拉載入（第一種實現方式）

說明：該自定義RecyclerView只適用於layoutManager為LinearLayoutManager的情況，使用的還是RecyclerView.Adapter。效果圖使用1、編寫layout檔案<?xml version="1.0" encoding="ut

iOS UIScrollView 的下拉重新整理和上拉載入的實現

iOS UIScrollView的下拉重新整理和上拉載入的實現 下面我簡單的說一說iOS UIScrollView的下拉重新整理和上拉載入的實現。 首先匯入第三方庫： MJRefre

ionic2下拉重新整理和上拉載入功能實現

先看程式碼： <!--預設顯示出來的資料--> <ion-list> <ion-item *ngFor="let i of items">{{i}}</ion-item> </ion-list> <

Android簡單實現下拉重新整理和上拉重新整理

先把佈局檔案裡面新增一個ListView控制元件， <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.a

使用PullToRefresh實現下拉重新整理和上拉載入

PullToRefresh是一套實現非常好的下拉重新整理庫，它支援： 1.ListView 2.ExpandableListView 3.GridView 4.WebView 等多種常用的需要重新整理的View型別，而且使用起來也十分方便。 （下載地址：https://gi

XRecyclerView的下拉重新整理和上拉載入的實現

2.設定xrecyclerview的屬性 LinearLayoutManager manager = new LinearLayoutManager(this); mRecyclerView.

H5下拉重新整理和上拉載入實現原理淺析 （轉載）

前言 在移動端H5網頁中，下拉重新整理和上拉載入更多資料的互動方式出現頻率很高，開源社群也有很多類似的解決方案，如iscroll，pulltorefresh.js庫等。下面是對這兩種常見互動基本實現原理的闡述。 實現原理 下拉重新整理 實現下拉重新整理主要分為三步

採用SwipeFreshLayout+Recyclerview實現下拉重新整理和上拉載入更多以及CoordinatorLayout的引入

       之前都是採用PullToRefresh進行下拉重新整理和下拉載入，現在採用谷歌自己的控制元件SwipeFreshLayout，配合Recyclerview來實現這一效果。使用SwipeRefreshLayout可以實現下拉重新整理，前提是佈局裡需要包裹一個可以

微信小程式下拉重新整理和上拉載入

example One:如果所有頁面都要開啟下拉重新整理功能： aap.json中： "window":{       "enablePullDownRefresh":true, //開啟下拉重新整理功能       "navigatio

android smartRefresh下拉重新整理和上拉載入

1.遠端依賴  compile 'com.scwang.smartrefresh:SmartRefreshLayout:1.0.5.1' 2.佈局中使用 <com.scwang.smartrefresh.layout.SmartRefreshLayout androi

MUi下拉重新整理和上拉載入click事件失效問題

今天應用MUi的上拉載入更多方法後，發現給li元素註冊點選click事件沒有反應。 最後折騰半個小時發現一個方法，用mui.on( )新增事件監聽，用tap代替click事件即可解決 mui("#ulId").on("tap","li",function(){ // 邏輯程式碼