2. 程式人生 > >Android控制元件----關於上拉重新整理上拉載入的自定義控制元件

Android控制元件----關於上拉重新整理上拉載入的自定義控制元件

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

首先需要明白的是，平常用的ListView做不到類似於小說章節閱讀的瀏覽效果，去實現重新整理載入的功能。雖然GitHub上有一些開源庫可以使用，但是這種東西自己如果有時間能夠親歷一遍瞭解的更加透徹，畢竟在很多Android的APP中都有這方面的功能。話不多說，下面我們就開始上程式碼。

首先把頭部尾部的佈局弄好

headview.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation
 
="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/head"
        android:orientation="horizontal"
        android:gravity
 
="center"
        android:padding="5dp">
        <ProgressBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="?android:attr/progressBarStyleInverse"
            android:id="@+id/progressbar"/>
        <TextView
            android:layout_width
 
="wrap_content"
            android:layout_height="wrap_content"
            android:text="正在重新整理。。。。"
            android:id="@+id/update_info"/>

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/update_time"
            />

    </LinearLayout>


</LinearLayout>

footview.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/foot_load"
        android:padding="5dp"
        android:gravity="center">
        <ProgressBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="?android:attr/progressBarStyle"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="載入中。。。。"
            />
    </LinearLayout>

</LinearLayout>

根據這2個介面佈局我們就可以去搭建一個自己的自定義ListView，以此來實現我們想要的效果

下面我們就可以著手自定義的ListView的編寫了

package com.yakir.view;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.widget.AbsListView;
import android.widget.ListView;
import android.widget.ProgressBar;
import android.widget.TextView;

import com.example.t210_06.R;

import java.text.SimpleDateFormat;

/**
 * 自定義listview實現上拉重新整理下拉載入
 */
public class MyListView extends ListView implements AbsListView.OnScrollListener{
    private View footview;
    private View headview;
    private int totaItemCounts;
    private int lasstVisible;
    private int fistVisiable;
    private LoadListener loadListener;
    private int footViewHeight;
    private int headViewHeight;
    private int yload;
    boolean isLoading;
    private TextView updateInfo;
    private TextView updateTime;
    private ProgressBar progressBar;
    public MyListView(Context context) {
        super(context);
        initView(context);
    }
    public MyListView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }

    public MyListView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context);
    }

    private void initView(Context context) {
        //拿到頭佈局xml
        headview=LayoutInflater.from(context).inflate(R.layout.headview,null);
        updateInfo=(TextView)headview.findViewById(R.id.update_info);
        updateTime=(TextView)headview.findViewById(R.id.update_time);
        progressBar=(ProgressBar)headview.findViewById(R.id.progressbar);
        updateTime.setText("更新於："+new SimpleDateFormat("yyyy-MM-dd  HH:mm:ss").format(System.currentTimeMillis()));
        //拿到尾佈局xml
        footview=LayoutInflater.from(context).inflate(R.layout.footview,null);
        //測量footview的高度
        footview.measure(0,0);
        //拿到高度
        footViewHeight=footview.getMeasuredHeight();
        //隱藏view
        footview.setPadding(0,-footViewHeight,0,0);
        headview.measure(0,0);
        headViewHeight=headview.getMeasuredHeight();
        headview.setPadding(0,-headViewHeight,0,0);
        //設定不可見
        // footview.findViewById(R.id.foot_load).setVisibility(View.GONE);
        // headview.findViewById(R.id.head).setVisibility(View.GONE);
        //新增到listview底部
        this.addFooterView(footview);
        //新增到listview頭部
        this.addHeaderView(headview);
        //設定拉動監聽
        this.setOnScrollListener(this);


    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()){
            case MotionEvent.ACTION_DOWN:
                yload=(int)ev.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                int moveY=(int)ev.getY();
                int paddingY=-headViewHeight+(moveY-yload)/2;

                if (paddingY<0){
                    updateInfo.setText("下拉重新整理。。。");
                    progressBar.setVisibility(View.GONE);
                }
                if (paddingY>0){
                    updateInfo.setText("鬆開重新整理。。。");
                    progressBar.setVisibility(View.GONE);
                }

                headview.setPadding(0,paddingY,0,0);

                break;
        }
        return super.onTouchEvent(ev);
    }

    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        if (totaItemCounts==lasstVisible&&scrollState==SCROLL_STATE_IDLE) {
            if (!isLoading) {
                isLoading=true;
                footview.setPadding(0,0,0,0);
                //載入資料
                loadListener.onLoad();

            }
        }
        if (fistVisiable==0){
            headview.setPadding(0,0,0,0);
            updateInfo.setText("正在重新整理。。。");
            progressBar.setVisibility(View.VISIBLE);
            loadListener.pullLoad();
        }
    }



    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        this.fistVisiable=firstVisibleItem;
        this.lasstVisible=firstVisibleItem+visibleItemCount;
        this.totaItemCounts=totalItemCount;

    }
    //載入完成
    public void loadComplete(){
        isLoading=false;
        footview.setPadding(0,-footViewHeight,0,0);
        headview.setPadding(0,-headViewHeight,0,0);


    }
    public void setInterface(LoadListener loadListener){
        this.loadListener=loadListener;

    }
    //介面回撥
    public interface LoadListener{

        void onLoad();
        void pullLoad();


    }
}

然後在外面的主介面佈局裡呼叫這個我們自己寫的外掛就行了

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.yakir.view.MyListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/list_view">
    </com.yakir.view.MyListView>


</RelativeLayout>

MainActivity.java

package com.example.t210_06;

import android.os.Bundle;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.widget.ArrayAdapter;

import com.yakir.view.MyListView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity implements MyListView.LoadListener{
    private MyListView listview;
    private List<Integer>list=new ArrayList<>();
    private ArrayAdapter adapter;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        for (int i=1;i<20;i++){
            list.add(i);
        }
        initView();
        adapter=new ArrayAdapter<>(this,android.R.layout.simple_expandable_list_item_1,list);
        listview.setAdapter(adapter);

    }

    private void initView() {
        listview=(MyListView) findViewById(R.id.list_view);
        listview.setInterface(this);
    }

    @Override
    public void onLoad() {
        //設定三秒延遲模仿延時獲取資料
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                //載入資料
                for (int j=1;j<11;j++){

                    list.add(j);
                }
                //更新 資料
                adapter.notifyDataSetChanged();
                //載入完畢
                listview.loadComplete();

            }
        },3000);


    }

    @Override
    public void pullLoad() {
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                list.clear();
                for (int i=1;i<20;i++){
                    list.add(i+1);
                }
                adapter.notifyDataSetChanged();
                listview.loadComplete();

            }
        },2000);
    }
}

這1點必須注意： 在initView(context)方法中通過LayoutInfalter.from(context).from(你的xml,null);拿到xml。返回一個View物件，ListView中有一個setfootView()方法，使用他可以設定View到ListView的底部,當然做了這兩步是完全不夠的，我們還需要對這個View做一個互動的操作，當用戶滑到底部時這個View顯示，資料載入完畢之後這個View消失。這裡就能通過設定底部檢視的焦點位置去，使其隱藏，當下拉的時候觸發事件就可以達到我們的效果。

相關推薦

Android 高仿 QQ5.0 側滑選單效果 自定義控制元件來襲

上一篇部落格帶大家實現了：Android 自定義控制元件打造史上最簡單的側滑選單 ，有兄弟看了以後說，你這滑動選單過時了呀~QQ5.0的效果還不錯~~嗯，的確，上一篇也承諾過，稍微修改上一篇的程式碼，實現QQ5.0側滑選單~~好了，下面就開始為大家展示寫一個類QQ的側滑有多e

WPF 自定義控制元件的坑（蠢的：自定義控制元件內容不顯示）

原文: WPF 自定義控制元件的坑（蠢的：自定義控制元件內容不顯示） 自定義控制元件不顯示內容 由於工作需要在寫WPF,其中想要實現一些自己的控制元件所以直接自定義了控制元件博主是繼承了ContenControl的控制元件開始寫的但是發現不管設定Content屬性為任何都是不顯示

winfrom載入自定義控制元件、視窗pannel後閃爍問題

我用一個panel當容器，裡面有好多控制元件，載入的時候一直閃爍。 借鑑網友的思路： 視窗初始化介面加入程式碼 this.DoubleBuffered = true;//設定本窗體 SetStyle(ControlStyles.UserPaint, true); SetStyle(ControlStyle

Android控制元件----關於上拉重新整理上拉載入的自定義控制元件

首先需要明白的是，平常用的ListView做不到類似於小說章節閱讀的瀏覽效果，去實現重新整理載入的功能。雖然GitHub上有一些開源庫可以使用，但是這種東西自己如果有時間能夠親歷一遍瞭解的更加透徹，畢竟在很多Android的APP中都有這方面的功能。話不多說，下

Android ListView 下拉重新整理，上拉載入更多，帶動畫 自定義控制元件

之前每次 專案中用到ListView 的 下拉重新整理 以及上拉分頁載入 都是 用的 網上 下載 的 類庫， 使用起來 諸多不便 ，於是 趁著有空 ，自己封裝了ListView 讓其 實現 下拉重新整理，以及分頁載入功能。 以下是 效果圖： 當 滑動到 ListView 頂

自個兒寫Android的下拉重新整理/上拉載入控制元件

前段時間自己寫了一個能夠“通用”的，支援下拉重新整理和上拉載入的自定義控制元件。可能現如今這已經不新鮮了，但有興趣的朋友還是可以一起來看看的。 與通常的View配合使用（比如ImageView） 與ListView配合使用 與Recycl

Android自定義控制元件——ListView的下拉重新整理與上拉載入

1.簡介        無疑，在Android開發中，ListView是使用非常頻繁的控制元件之一，ListView提供一個列表的容易，允許我們以列表的形式將資料展示到介面上，但是Google給我們提供的原生ListView的控制元件，雖然在功能上很強大，但是在使用者體

Android自定義控制元件（一） 下拉重新整理，上拉分頁載入更多(支援ListView, GridView, ScrollView)

        首先說明，這幾篇文章是對一些前輩的成果進行學習後的心得總結。也借這種方式對他們表示謝意。         最近專案中好幾個模組都用到listview和gridview的下拉重新整理，上拉載入更多等功能，而且涉及到圖片的批量下載。水平有限，首先是想到找一些比較

Android自定義控制元件實戰——實現仿IOS下拉重新整理上拉載入 PullToRefreshLayout

         下拉重新整理控制元件，網上有很多版本，有自定義Layout佈局的，也有封裝控制元件的，各種實現方式的都有。但是很少有人告訴你具體如何實現的，今天我們就來一步步實現自己封裝的 PullToRefreshLayout 完美的解決下拉重新整理，上拉載入問題。  

Android打造 ListView GridView等 通用的下拉重新整理 上拉自動載入的元件

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

IOS控制元件系列二---優雅的UITableView的MVC模式設計,支援自定義下拉重新整理/上提載入更多檢視(含swift)

demo效果如下： 本小框架設計原則依舊按照之前的慣例： 1.擴充套件性好，程式碼不冗餘（整個重新整理的頭部與底部程式碼不超過300行）。 2.邏輯清晰。 3.回撥介面清晰。 4.移植性好。 對於擴充套件性本框架擴充套件點如下： 1.框架中的

自定義下拉重新整理上拉載入控制元件（SwipeRefreshLayout + recyclerView）

感覺還可以的star下謝謝！ 效果圖：（效果圖迴圈播放後，總感覺有些詭異！, 可能是gif截的點不對， 在手機上看效果正常的） 我就不講程式碼是如何實現的了。說下實現了什麼內容： 支援自動下拉重新整理 //設定自動下拉重新整理，切記要

android下拉重新整理,上拉載入更多

public class MainActivity extends AppCompatActivity { private RecyclerView mRecyclerview; private ArrayList<Integer> mList = new ArrayL

下拉重新整理上拉載入框架：android-Ultra-Pull-To-Refresh

下拉重新整理上拉載入框架：PtrClassicFrameLayout 1、一個優雅的框架實現下拉重新整理上拉載入，學習來源：點選開啟連結 2、如何使用： 2.1、在專案中引入： compile 'com.shizhefei:MVCHelper-UltraRefresh:1

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

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

Android 列表下拉重新整理上拉載入更多分頁功能

手機app 列表頁很常用，當資料特別多的時候，為了更好地使用者體驗，需要進行分頁處理。那麼分頁功能怎麼做呢？ 看如下核心程式碼 if (mPage == 1 && mList != null) { mList.clear();

Android 下拉重新整理上拉載入PullToRefresh

PullToRefresh 開發者可以使用 PullToRefresh 對各種控制元件實現下拉重新整理或者上拉載入以及可以自定義重新整理和載入部分的檢視。 目前支援：ScrollView，ListView，WebView，RecyclerView。 PullToRefresh的使用步驟

Android自定義控制元件之仿汽車之家下拉重新整理

關於下拉重新整理的實現原理我在上篇文章Android自定義控制元件之仿美團下拉重新整理中已經詳細介紹過了，這篇文章主要介紹錶盤的動畫實現原理 汽車之家的下拉重新整理分為三個狀態： 第一個狀態為下拉重新整理狀態(pull to refresh)，在這個狀

Android ListView 實現下拉重新整理上拉載入

1.簡介        無疑，在Android開發中，ListView是使用非常頻繁的控制元件之一，ListView提供一個列表的容易，允許我們以列表的形式將資料展示到介面上，但是Google給我們提供的原生ListView的控制元件，雖然在功能上很強大，但是在使用

Android ListView下拉重新整理上拉載入

把這兩天的心得記錄下來，以後用到不會忘。 先說下拉重新整理，下拉重新整理我們主要用到了android自帶v4jar包中的一個控制元件SwipeRefreshLayout，如果下面是xml檔案， 如果你在寫報錯的話，換一個最新的v4包就可以了。 <android