2. 程式人生 > >繼承SwipeRefreshLayout實現上拉載入更多功能

繼承SwipeRefreshLayout實現上拉載入更多功能

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

Android 的SwipeRefreshLayout是一個比較好的下拉重新整理控制元件，現在已經有越來越多的企業開始使用這個控制元件了。但是遺憾的是這個控制元件並沒有上拉載入更多的功能，所以自己抽空，根據網上已有的例子，自己寫了一個。

首先必須要做的是建立一個類繼承SwipeRefreshLayout，這裡我把它命名為：XZHRefreshLayout

/**
 * TODO:Created by XuZhenhao on 2016/12/6.
 */

public class XZHRefreshLayout extends SwipeRefreshLayout {


    private boolean isLoading = false;

    private ListView mListView;

    private View mListFooter;

    private OnLoadListener mLoadListener;


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

    public XZHRefreshLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        //這裡初始化FooterView，並給裡面的一個菊花圖片新增一個動畫
        mListFooter = LayoutInflater.from(context).inflate(R.layout.list_footer, null, false);
        Animation anim = AnimationUtils.loadAnimation(context, R.anim.img_animation);
        LinearInterpolator lin = new LinearInterpolator();
        anim.setInterpolator(lin);
        mListFooter.findViewById(R.id.progress_iv).startAnimation(anim);
    }

    //這裡set回撥函式
    public void setOnLoadListener(OnLoadListener loadListener) {
        this.mLoadListener = loadListener;
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        //這裡判斷ViewGroup裡面是不是有個子View，並且第一個是不是ListView
        int childCount = getChildCount();
        if (childCount > 0) {
            View child = getChildAt(0);
            if (child instanceof ListView) {
                mListView = (ListView) child;

            }
        }

    }

    //用於新增和移除FooterView
    public void setLoad(boolean isLoad) {
        isLoading = isLoad;
        if (isLoad) {

            mListView.addFooterView(mListFooter);
        } else {

            mListView.removeFooterView(mListFooter);
        }
    }

    //記錄手指觸控式螢幕幕的上一個Y座標值
    private float lastY;

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        int action = ev.getAction();
        float currentY = ev.getY();
        switch (action) {
            case MotionEvent.ACTION_DOWN:

                break;
            case MotionEvent.ACTION_MOVE:
                //如果當前的Y座標小於上一個Y座標的值說明是向上滑動，，並且子ListView不為null，並且沒有FooterView
                if (currentY < lastY && mListView != null && mListView.getFooterViewsCount() == 0) {
                    //如果當前listView的最後一個item的position等於可見範圍內最後一個item的position，
                    //並且螢幕中的item總數小於11,當前沒有載入FooterView
                    if (mListView.getAdapter().getCount() - 1 == mListView.getLastVisiblePosition() 
                        && mListView.getChildCount() >= 11 && !isLoading) {
                        setLoad(true);//新增FooterView
                        mLoadListener.onLoad();//執行回撥函式
                    }
                }
                break;
        }
        lastY = currentY;
        return super.onInterceptTouchEvent(ev);
    }
    
    //回撥
    public interface OnLoadListener {

        void onLoad();
    }
}

最核心的程式碼已經實現了，網上有很多Demo是在onScroll方法中實現的，但是我發現在滑動到底部時，onScroll方法一直在執行，那麼這樣的話會導致我們一直的執行回撥函式，因為這裡的回撥函式是用來載入資料的，從而會導致不停地獲取資料，不停的新增和移除FooterView，並且導致ListView的點選事件失效，所以我將其移到了onInterceptTouchEvent(MotionEvent ev)裡面去執行。



下面上Activity的程式碼:

public class MessageListActivity extends AppCompatActivity {


    private Toolbar SMSToolbar;
    private XZHRefreshLayout refreshLayout;
    private ListView lvSMSList;
    private MessageListAdapter adapter;
    private List smsList;
    private MRLTDao dao;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_message_list);

        initData();
        initView();
    }


    /**
     * TODO: 初始化控制元件
     */
    private void initView() {

        SMSToolbar = (Toolbar) findViewById(R.id.sms_list_toolbar);
        SMSToolbar.setTitle("簡訊列表");
        SMSToolbar.setNavigationIcon(ContextCompat.getDrawable(this, R.mipmap.btn_back));
        SMSToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });
        //實現我們自定義的下拉重新整理控制元件
        refreshLayout = (XZHRefreshLayout) findViewById(R.id.refresh_sms_ly);
        refreshLayout.setColorSchemeColors(ContextCompat.getColor(this, android.R.color.holo_blue_bright),
                ContextCompat.getColor(this, android.R.color.holo_green_light),
                ContextCompat.getColor(this, android.R.color.holo_orange_light),
                ContextCompat.getColor(this, android.R.color.holo_red_light));
        //監聽下拉重新整理事件
        refreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        smsList.clear();
                        smsList.addAll(dao.querySMSALL(0));
                        adapter.notifyDataSetChanged();
                        refreshLayout.setRefreshing(false);
                    }
                }, 1500);
            }
        });
        //我們寫的回撥函式，在裡面做查詢資料的方法
        refreshLayout.setOnLoadListener(new XZHRefreshLayout.OnLoadListener() {
            @Override
            public void onLoad() {
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        //我這裡是用了一個Sqlite，大家可以根據自己的實際應用在這裡做資料的查詢，相信大家一般都不可能會有問題。
                        if (dao != null && smsList != null) {
                            List<SmsEntity> datas = dao.querySMSALL(smsList.size());
                            if (datas.size() > 0) {//如果查詢到有資料，就新增到資料來源裡面去。
                                smsList.addAll(datas);
                                adapter.notifyDataSetChanged();
                            }else{//如果沒有資料，就彈一個吐司
                                MyToast.show(MessageListActivity.this,"沒有更多資料!");
                            }
                        }
                        refreshLayout.setLoad(false);

                    }
                }, 1000);

            }
        });

        lvSMSList = (ListView) findViewById(R.id.sms_list_lv);
        adapter = new MessageListAdapter(this, smsList);
        lvSMSList.setAdapter(adapter);
        lvSMSList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                SmsEntity entity = (SmsEntity) adapter.getItem(position);
                showSMSDialog(entity);
            }
        });

    }

    /**
     * TODO: 初始化資料
     */
    private void initData() {
        if (smsList == null)
            smsList = new ArrayList<>();
        if (dao == null)
            dao = new MRLTDao(getApplicationContext());
        smsList = dao.querySMSALL(0);

    }


    @Override
    protected void onDestroy() {

        super.onDestroy();
    }
    //點選item彈一個Dialog，顯示當前Item的內容
    private void showSMSDialog(SmsEntity entity) {
        if (entity == null) {
            return;
        }
        final AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setTitle(entity.getSendcode());
        builder.setMessage("接收時間："+entity.getCreate_time()+"\n"+entity.getContent());
        builder.setPositiveButton("知道了", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                dialog.cancel();
            }
        });
        builder.create().show();

    }
}

總的來說Activity裡面完全沒有啥技術含量，只是有可能程式碼寫的其醜無比。

下面上XML：

1.Activity的XML檔案

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_message_list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.yihuacomputer.sdmrlt.ui.MessageListActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/sms_list_toolbar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/cpb_blue"
        app:titleTextColor="@color/cpb_white" />
<com.yihuacomputer.sdmrlt.ui.view.XZHRefreshLayout
    android:id="@+id/refresh_sms_ly"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/sms_list_toolbar">
    <ListView
        android:id="@+id/sms_list_lv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="12dp"
        android:paddingRight="12dp"
        android:scrollbars="none">

    </ListView>
</com.yihuacomputer.sdmrlt.ui.view.XZHRefreshLayout>


</RelativeLayout>

2.ListView的Item的XML 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:paddingBottom="4dp"
    android:paddingTop="4dp"
    android:weightSum="10">

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@mipmap/will" />

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="9"
        android:layout_marginLeft="4dp">

        <TextView
            android:id="@+id/item_sms_rvd_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/colorPrimaryDark"
            android:maxLength="15"
            android:textSize="16sp" />
        <TextView
            android:id="@+id/item_sms_time_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/colorPrimaryDark"
            android:textSize="16sp"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true" />

        <TextView
            android:id="@+id/item_sms_content_tv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/item_sms_rvd_tv"
            android:maxLines="1"
            android:textColor="@color/menu_fragment_background"
            android:textSize="14sp" />
    </RelativeLayout>
</LinearLayout>

3.FooterView的XML檔案 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="45dp"
    android:gravity="center"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/progress_iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/gpu" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="正在載入..."/>

</LinearLayout>

所有的XML檔案裡面就用到了兩個Image，大家隨便去找兩個就可以了，我是解壓了手機QQ的App後這裡面找的。

好了所有的東西基本已經實現，大家還可以在這個基礎上擴充套件一下，比如加一個動畫，讓FooterView被移除的時候好看一點，不要那麼突兀的就消失了，如果大家實現了，希望能留個言讓我學習學習！！！公司沒有錄屏工具，我就不上圖了。

相關推薦

繼承SwipeRefreshLayout實現上拉載入更多功能

Android 的SwipeRefreshLayout是一個比較好的下拉重新整理控制元件，現在已經有越來越多的企業開始使用這個控制元件了。但是遺憾的是這個控制元件並沒有上拉載入更多的功能，所以自己抽空，根據網上已有的例子，自己寫了一個。 首先必須要做的是建立一個類繼承SwipeRefresh

自定義SwipeRefreshLayout實現上拉載入更多並自帶系統的下拉重新整理

/** * Created by lzy on 2017/6/6 0006. */ public class MySwipeRefreshLayout extends SwipeRefreshLayout{ private final TextView mFoo

js_原生js實現上拉載入更多的功能。

    1 //--------------上拉載入更多--------------- 2 //獲取滾動條當前的位置 3 function ge

讓Android Support V4中的SwipeRefreshLayout支援上拉載入更多

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

vue基於mint-ui元件loadmore實現上拉載入更多，下拉重新整理功能

這個是模擬手機寫的簡單樣式，不要在意這些細節，為了撐滿容器每次載入十二   那就開始程式碼了  ==》 先安裝 mint-ui 在main.js中引入mint-ui的css樣式：  import 'mint-ui/lib/style.css' 在

js如何實現上拉載入更多...

我們在專案中經常使用到下拉載入更多，之前要麼是底部寫載入按鈕，要麼是引入外掛。今天終於有時間手寫一個了，之前感覺挺麻煩，明白原理後，其實很簡單... scrollTop：滾動視窗的高度距離window頂部的距離，它會隨著往上滾動而不斷增加，初始值是0，它是一個變化的值； clientHeight:它是一

RecycleView的封裝實現上拉載入更多，可以在有多種RecycleView的佈局，特別有listview存在時使用。

在我們開發app的時候，列表元件總是最常用的。目前下拉重新整理和上拉載入的元件有很多。Github一搜索，大部分的開源專案都只實現了下拉重新整理而沒有上拉載入，也有部分專案把上拉載入更多實現了，但是這樣做其實並不好，因為在app實際的執行中當戶滑動到底部就應該自動載入下一頁的內容（決大部分app都是這樣做的

解決AppBarLayout 與SwipeRefreshLayout RecyclerView 上拉載入更多導致的延遲

import android.content.Context; import android.support.design.widget.AppBarLayout; import android.support.design.widget.CoordinatorLayout;

React-實現上拉載入更多

1. 寫在前面 我最開始糾結當用戶滑動時onTouchMove事件會不停的執行去調介面，於是我僥倖的想只用onTouchEnd事件去判 斷使用者是否滑到最底部，但是這種方法應用到專案中才發現點選的時候也會觸發onTouchEnd，實際應用並不理想。

ListView，GridView和ScrollVIew巢狀實現上拉載入更多

這個問題找了好幾天，網上沒有直接的答案，今天寫在這裡希望能幫到人，剛寫部落格，樣式什麼的就不看了，簡單易懂好貼上才是你們需要的！ 不對的地方請在評論指正，謝謝！ 首先說下ListView，GridView和ScrollVIew巢狀問題，自定義一個ListView或GridV

Android使用RecyclerView實現上拉載入更多，下拉重新整理,分組顯示

專案地址：點選開啟連結（https://github.com/MrGaoGang/luckly_recyclerview） 使用RecyclerView封裝headerview,footerView,並實現上拉載入更多，下拉重新整理，分組功能(新增上拉載入和下拉

自定義ListView下拉重新整理上拉載入更多功能

本篇的自定義listview包含下拉重新整理和上拉載入更多都是自定義。如果你想把重新整理的圖片做的更炫只需要更換下圖片加上適當的動畫就OK咯！由於沒有合適的圖片就用了個粗糙的。不好看請見諒。 //部分程式碼(都做了註釋): /** * @author: ZQF_

使用SwipeRefreshLayout和RecyclerView實現下拉重新整理上拉載入更多

效果圖: 檔案目錄 佈局檔案 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/

Android中ListView下拉重新整理上拉載入更多效果實現

  在Android開發中，下拉重新整理和上拉載入更多在很多app中都會有用到，下面就是具體的實現的方法。 首先，我們自定義一個RefreshListView來繼承與ListView，下面是程式碼： package com.example.downrefresh; import

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

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

better-scroll實現下拉重新整理、上拉載入更多（巨簡單...）

1、廢話少說，先看看移動端的列表頁面 （1）正常瀏覽 （2）下拉重新整理中 （3）下拉重新整理結束 （4） 上拉載入 （5）上拉 載入中 3、網上也有一些基本使用教程，這裡就不一一累贅，下

下拉重新整理，上拉載入更多的SwipeRefreshLayout（可自定義動畫）

為啥重複搞，搞得還沒人家好，因為除了需求，還有理解。我是這麼認為的。 因為懶所以寫出來留作自用，以後就是修修改改了。 打造自己的“下拉重新整理，上拉載入更多，自定義動畫及佈局”控制元件 （拷貝SwipeRefreshLayout原始碼進行修改） 不鬥圖的碼農你見過

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

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

上拉載入更多之ListView實現

在Android的應用程式中,使用列表來展示內容的應用是最多的。當然,我們從早期的ListView到目前的RecyclerView,列表控制元件的實現更加的優秀。但無論怎樣,我們都會在使用列表控制元件的時候新增下拉重新整理和上拉載入更多。這的效果有多種實現當然也

用Recyclerview實現列表分組、下拉重新整理以及上拉載入更多

為什麼要使用Recyclerview替代ListView等傳統元件 目前的專案中已經逐步拋棄了ListView、GridView以及各種自定義的瀑布流效果的第三方庫了，統一用強大的替代者Recyclerview來實現。一個Recyclerview就解決了上面三