PullToRefresh（下拉重新整理）

阿新 • • 發佈：2018-12-14

1. 匯入PullToRefresh

1.1 修改library的build.gradle中的sdk版本 //修改前 compileSdkVersion 16 buildToolsVersion “27.0.3”

  defaultConfig {
    minSdkVersion 4
    targetSdkVersion 4
  }
 
  //修改後
  compileSdkVersion 27
  buildToolsVersion "27.0.3"

  defaultConfig {
    minSdkVersion 15
    targetSdkVersion 27
  }

1.2 Clear Project後會報如下錯誤，修改原始碼：“PullToRefreshWebView” 錯誤: 找不到符號符號: 方法 floor(float) 位置: 類 FloatMath

  FloatMath.floor -> Math.floor

1.3 選中自己的工程，例如：“app”然後滑鼠右鍵“open Moduel settings”匯入庫

1.4 修改layout佈局檔案，新增PullToRefresh控制元件替換ListView即可

2. 第三方控制元件：上拉載入、下拉重新整理控制元件

2.1 匯入第三方外掛庫 Android-PullToRefresh-master.zip

2.2 在佈局檔案中使用第三方外掛 com.handmark.pulltorefresh.library.PullToRefreshListView

2.3 自定義介面卡(BaseAdapter)提供資料

2.4 非同步任務查詢資料(AsyncTask) 2.4.1 AsyncTask定義了三種泛型型別 Params，Progress和Result。 Params 啟動任務執行的輸入引數，比如HTTP請求的URL。 Progress 後臺任務執行的百分比。 Result 後臺執行任務最終返回的結果，比如String 2.4.2 非同步載入資料最少要重寫以下這兩個方法 doInBackground(Params…) 後臺執行，比較耗時的操作都可以放在這裡 onPostExecute(Result) 相當於Handler 處理UI的方式，在這裡面可以使用在doInBackground 得到的結果處理操作UI –注：此方法中再通知介面卡和控制元件 myBaseAdapter.notifyDataSetChanged();// 通知介面卡資料已改變 plv_main_plv1.onRefreshComplete();// 通知控制元件資料已經載入完畢

2.5 給PullToRefreshListView設定相關屬性 plv_main_1.setMode(Mode.BOTH);// 設定重新整理模式 Mode.BOTH：同時支援上拉下拉 Mode.PULL_FROM_START：只支援下拉Pulling Down Mode.PULL_FROM_END：只支援上拉Pulling Up

  plv_main_1.getLoadingLayoutProxy().setPullLabel("上拉重新整理...");// 剛下拉時，顯示的提
  plv_main_1.getLoadingLayoutProxy().setRefreshingLabel("正在載入...");// 重新整理時
  plv_main_1.getLoadingLayoutProxy().setReleaseLabel("放開重新整理...");// 下來達到一定距離時，顯示的提示 
  
  github、碼雲
  核心：
  1、新建Android的project
  2、將第三方工程匯入到project中
  3、由於現有的開發module的sdk與匯入的庫的sdk版本不一樣，所以需要修改
  4、在開發的module中引入庫依賴
  5、啟動module報錯的原因，jdk高版本移除了些東西。
  
  
  6、改變listview為PullToRefreshListView 
  7、載入資料來源
  8、給PullToRefreshListView設定相關屬性，給下拉元件新增監聽
  9、回撥函式中，通知介面卡資料載入完畢

在MainActivity裡
package com.example.a0918_a09;

import android.content.Context;
import android.os.AsyncTask;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;


import com.handmark.pulltorefresh.library.PullToRefreshBase;
import com.handmark.pulltorefresh.library.PullToRefreshListView;

import java.util.List;

public class MainActivity extends AppCompatActivity {
    private List<Book> data;
    private MyBaseAdapter adapter;
    private PullToRefreshListView lv_main_bookList;
    private int page=1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        lv_main_bookList=findViewById(R.id.lv_main_bookList);
        getViews();
        this.data=new BookDao().list(page);
        adapter=new MyBaseAdapter((LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE));
        lv_main_bookList.setAdapter(adapter);
        lv_main_bookList.setOnRefreshListener(new PullToRefreshBase.OnRefreshListener<ListView>() {
            @Override
            public void onRefresh(PullToRefreshBase<ListView> refreshView) {
                new MyTask().execute();
            }
        });
    }

    class MyTask extends AsyncTask{

        @Override
        protected Object doInBackground(Object[] objects) {//往Java端請求資料
            try {
                Thread.sleep(2000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
            page++;
            data.addAll(new BookDao().list(page));
            return null;
        }

        @Override
        protected void onPostExecute(Object o) {
            super.onPostExecute(o);
            adapter.notifyDataSetChanged();// 通知介面卡資料已改變
            lv_main_bookList.onRefreshComplete();// 通知控制元件資料已經載入完畢
        }
    }

    private void getViews() {

        lv_main_bookList.setMode(PullToRefreshBase.Mode.PULL_FROM_END);
        lv_main_bookList.getLoadingLayoutProxy().setPullLabel("上拉重新整理...");// 剛下拉時，顯示的提
        lv_main_bookList.getLoadingLayoutProxy().setRefreshingLabel("正在載入...");// 重新整理時
        lv_main_bookList.getLoadingLayoutProxy().setReleaseLabel("放開重新整理...");// 下來達到一定距離時，顯示的提示
    }

    //自定義介面卡先要獲取到解析器才能解析資原始檔
    public class MyBaseAdapter extends BaseAdapter{
        public class ViewHolder{
            ImageView iv_listviewitem_image;
            TextView tv_listviewitme_title;
            TextView tv_listviewitme_author;
            TextView tv_listviewitme_price;
            TextView tv_listviewitme_publish;
            TextView tv_listviewitme_remark;
        }
        //佈局解析器，用來把layout佈局檔案解析成一個View物件，不可以直接new，需要使用系統服務獲取
        private LayoutInflater inflater;

        public MyBaseAdapter(LayoutInflater inflater) {
            this.inflater = inflater;
        }
        //資料的長度
        @Override
        public int getCount() {
            return data.size();
        }
        //當前獲取的項
        @Override
        public Object getItem(int i) {
            return data.get(i);
        }
        //當前解析的第幾條資料的索引
        @Override
        public long getItemId(int i) {
            return i;
        }
        //用解析器把裡面的資料，資源解析出來，把資料填充view裡才能展示出來
        //view是指螢幕遮擋的檢視
        @Override
        public View getView(int i, View view, ViewGroup viewGroup) {
            View v=view;
            if(v==null){
                ViewHolder vh=new ViewHolder();
//                Log.i("test","position:"+i);
                v=inflater.inflate(R.layout.listview_item,null);
                vh.iv_listviewitem_image= v.findViewById(R.id.iv_listviewitem_image);
                vh.tv_listviewitme_title= v.findViewById(R.id.tv_listviewitme_title);
                vh.tv_listviewitme_author= v.findViewById(R.id.tv_listviewitme_author);
                vh.tv_listviewitme_price = v.findViewById(R.id.tv_listviewitme_price);
                vh.tv_listviewitme_publish = v.findViewById(R.id.tv_listviewitme_publish);
                vh.tv_listviewitme_remark = v.findViewById(R.id.tv_listviewitme_remark);
                v.setTag(vh);//儲存控制元件

            }
            ViewHolder vh = (ViewHolder) v.getTag();//傳值
            Book book = data.get(i);
            vh.iv_listviewitem_image.setImageResource(book.getImage());
            vh.tv_listviewitme_title.setText(book.getTitle());
            vh.tv_listviewitme_author.setText(book.getAuthor());
            vh.tv_listviewitme_price.setText(book.getPrice()+"");
            vh.tv_listviewitme_publish.setText(book.getPublish());
            vh.tv_listviewitme_remark.setText(book.getRemark());

            return v;
        }
    }
}

在activity_main.xml裡
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 

xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <com.handmark.pulltorefresh.library.PullToRefreshListView
        android:id="@+id/lv_main_bookList"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">
    </com.handmark.pulltorefresh.library.PullToRefreshListView>
</android.support.constraint.ConstraintLayout>

在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="wrap_content"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/iv_listviewitem_image"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3"
        android:padding="10dp"
        android:scaleType="fitXY"
        android:src="@drawable/book1" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="6"
        android:orientation="vertical"
        android:padding="10dp" >

        <TextView
            android:id="@+id/tv_listviewitme_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="狂人攝影日記"
            android:textColor="@color/red"
            android:textSize="20sp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:text="書本作者："
                android:textColor="@color/black" />

            <TextView
                android:id="@+id/tv_listviewitme_author"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:text="阿劉" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:text="書本價格："
                android:textColor="@color/black" />

            <TextView
                android:id="@+id/tv_listviewitme_price"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:text="$123"
                android:textColor="@color/black" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:text="    出版社："
                android:textColor="@color/black" />

            <TextView
                android:id="@+id/tv_listviewitme_publish"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:text="電子出版社"
                android:textColor="@color/black" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:text="書本簡介："
                android:textColor="@color/black" />

            <TextView
                android:id="@+id/tv_listviewitme_remark"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:ellipsize="end"
                android:maxLines="2"
                android:text="很冷的一個冬天很冷的一個冬天很冷的一個冬天很冷的一個冬天很冷的一個冬天很冷的一個冬天很冷的一個冬天很冷的一個冬天很冷的一個冬天很冷的一個冬天"
                android:textColor="@color/black" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:orientation="horizontal" >
	
            <ImageButton
                android:id="@+id/bt_listviewitme_btn1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:layout_weight="1"
                android:src="@drawable/btn_shopping" />

            <ImageButton
                android:id="@+id/bt_listviewitme_btn2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:layout_weight="1"
                android:src="@drawable/btn_accounts" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

PullToRefresh（下拉重新整理）

1. 匯入PullToRefresh

2. 第三方控制元件：上拉載入、下拉重新整理控制元件

PullToRefresh（下拉重新整理）

微信小程式scroll-view（滾動元件）與onPullDownRefresh（下拉重新整理）

微信小程式--刷臉認證（人臉識別，上拉載入，下拉重新整理）

RecyclerView詳解（基本使用+解決複用+新增HEAD和FOOT+上拉載入更多+下拉重新整理）以及ExpandableListView的簡單使用

小程式禁止頁面拉動（非禁止小下拉重新整理）

Android——（上下拉重新整理）

彈出式選單（下拉選單）實現——PopupMenu

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

Jenkins中動態獲取git分支（下拉框）

Android基礎----Spanner（下拉列表）

android：ListView下拉重新整理上拉載入更多（PullToRefresh框架抽取）

微信小程式——下拉重新整理（分頁）

Material Design 實戰之第五彈 —— 下拉重新整理（SwipeRefreshLayout）

Flutter 擴充套件NestedScrollView （三）下拉重新整理的解決

ionic學習（十一）：頁面下拉重新整理(Refresher)

十月專案小結（Recycler下拉重新整理，上拉分頁載入）

微信小程式學習（18） —— 上拉載入和下拉重新整理

React Native 一個小專案其中一些主要功能實現（頂部導航欄（可滑動）,網路解析，上拉重新整理，下拉載入）

微信小程式學習筆記四（持續更新）---征服scroll-view下拉重新整理

Vant list 與better-scroll與下拉重新整理（其實是上拉載入）

PullToRefresh（下拉重新整理）

1. 匯入PullToRefresh

2. 第三方控制元件：上拉載入、下拉重新整理控制元件

相關推薦