2. 程式人生 > >自定義View（ListView）下拉重新整理

自定義View（ListView）下拉重新整理

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

下拉重新整理的操作流程:

1.使用者手指在ListView頁面按下並下拉

2.出現一個提示View在listView頂部

3.listView內容更新，頂部view顯示後隱藏

具體實現步驟

建立繼承Listview的RefreshListView,並新增頂部提示view

public class RefreshListView extends ListView {
    View header;// 頂部提示View
    public RefreshListView(Context context) {
        super(context);
        initView(context);
    }

    public RefreshListView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }

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

    private void initView(Context context) {
        // LayoutInflater作用是載入佈局
        LayoutInflater inflater = LayoutInflater.from(context);
        header = inflater.inflate(R.layout.header_layout, null);
        this.addHeaderView(header);

        super.setOnScrollListener(this);

    }
}

頂部提示View佈局檔案header_layout.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:orientation="vertical" >
    
   <RelativeLayout 
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:paddingTop="10dip"
       android:paddingBottom="10dip"
       >
       <LinearLayout
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:orientation="vertical"
           android:id="@+id/layout"
           android:layout_centerInParent="true"
           android:gravity="center"
           >
           <!-- 提示文字 -->
           <TextView
               android:id="@+id/tips"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="下拉可以重新整理"
               />
           <!-- 距上次更新至今的時間 -->
           <TextView
               android:id="@+id/time"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               />
          
       </LinearLayout>
       <!-- 箭頭 -->
       <ImageView 
           android:id="@+id/arrow"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_toLeftOf="@id/layout"
           android:src="@drawable/pull_to_refresh_arrow"
           />
       <!-- 更新進度條 -->
       <ProgressBar 
           android:id="@+id/progress"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           style="?android:attr/progressBarStyleSmall"
           android:layout_toLeftOf="@id/layout"
           android:visibility="gone"
           />
   </RelativeLayout>
</LinearLayout>

執行效果圖

預設載入的header是顯示出來的，應該隱藏，程式碼如下

private void initView(Context context){
        //LayoutInflater作用是載入佈局
        LayoutInflater inflater = LayoutInflater.from(context);
        header = inflater.inflate(R.layout.header_layout, null);
        measureView(header);
        headerHeight = header.getMeasuredHeight();
        topPadding(-headerHeight);
        this.addHeaderView(header);
        super.setOnScrollListener(this);
    }
    /**
     * 設定頂部佈局的上邊距
     * @param topPadding
     */
    private void topPadding(int topPadding){
        //設定頂部提示的邊距
        //除了頂部用引數值topPadding外，其他三個用header預設的值
        header.setPadding(header.getPaddingLeft(), topPadding, 
                header.getPaddingRight(), header.getPaddingBottom());
        //使header無效，將來呼叫onDraw()重繪View
        header.invalidate();
    } 
    /**
     * 通知父佈局，佔用的寬和高
     */
    private void measureView(View view){
        //LayoutParams are used by views to tell their parents 
        //how they want to be laid out.
        //LayoutParams被view用來告訴它們的父佈局它們應該被怎樣安排
        ViewGroup.LayoutParams p = view.getLayoutParams();
        if(p==null){
            //兩個引數:width,height
            p = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT);
        }
        //getChildMeasureSpec:獲取子View的widthMeasureSpec、heightMeasureSpec值
        int width = ViewGroup.getChildMeasureSpec(0, 0, p.width);
        int height;
        int tempHeight = p.height;
        if(tempHeight>0){
            height = MeasureSpec.makeMeasureSpec(tempHeight, MeasureSpec.EXACTLY);
        }else{
            height = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
        }
        view.measure(width, height);
    }

效果圖

監聽使用者滑動螢幕操作

1.實現OnScrollListener介面

2.根據使用者按下，移動，擡起手勢來設定不同的響應事件

3.頂部提示View---header有四種狀態

1.正常狀態（NONE）

2.提示使用者下拉可以重新整理（PULL）

3.提示使用者釋放可以重新整理（RELEASE）

4.提示使用者正在重新整理狀態(REFREASH)

public class RefreshListView extends ListView implements OnScrollListener{
        View header;//下拉重新整理時出現的頂部佈局View
    int headerHeight;//header的高度
    int firstVisibleItem;//當前介面第一個可見的item的位置
    
    boolean isFlag;//標誌，是在當前顯示的listView是在listView最頂端時按下額
    int startY;//使用者按下的Y值

        
    int state;//當前狀態
    final int NONE = 0;//正常狀態
    final int PULL = 1;//提示下拉狀態
    final int RELEASE = 2;//提示釋放狀態
    final int REFRESH = 3;//提示正在重新整理狀態


        @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        // TODO Auto-generated method stub
        this.scrollState = scrollState;
    }
    @Override
    public void onScroll(AbsListView view, int firstVisibleItem,
            int visibleItemCount, int totalItemCount) {
        // TODO Auto-generated method stub
        this.firstVisibleItem = firstVisibleItem;
    }
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        // TODO Auto-generated method stub
        switch (ev.getAction()) {
        case MotionEvent.ACTION_DOWN:
            if(firstVisibleItem == 0){
                isFlag = true;//ListView最頂端按下，標誌值設為真
                startY = (int)ev.getY();
            }
            break;
        case MotionEvent.ACTION_MOVE:
            onMove(ev);
            break;
        case MotionEvent.ACTION_UP:
            if(state == RELEASE){
                state = REFRESH;
                //載入資料
                refreshViewByState();
                iRefreshlistener.onRefresh();
            }else if(state == PULL){
                state = NONE;
                isFlag = false;
                refreshViewByState();
            }
            break;
        }
        return super.onTouchEvent(ev);

onMove()方法----根據使用者下拉距離的不同設定不同的響應方法

private void onMove(MotionEvent ev){
        //如果不是最頂端按下，則直接返回
        if(!isFlag){
            return;
        }
        int currentY = (int)ev.getY();//當前的Y值
        int space = currentY - startY;//使用者向下拉的距離
        int topPadding = space - headerHeight;//頂部提示View距頂部的距離值
        switch (state) {
        //正常狀態
        case NONE:
            if(space>0){
                state = PULL;//下拉的距離大於0，則將狀態改為PULL(提示下拉更新)
                refreshViewByState();//根據狀態的不同更新View
            }
            break;
        case PULL:
            topPadding(topPadding);
            if(space>headerHeight+30//下拉的距離大於header的高度加30且使用者滾動螢幕，手指仍在螢幕上
                    &&scrollState == SCROLL_STATE_TOUCH_SCROLL ){
                state = RELEASE;//將狀態改為RELEASE(提示鬆開更新)
                refreshViewByState();
            }
            break;
        case RELEASE:
            topPadding(topPadding);
            if(space<headerHeight+30){//使用者下拉的距離不夠
                state = PULL;         //將狀態改為PULL
                refreshViewByState();
            }else if(space<=0){  //使用者下拉的距離為非正值
                state = NONE;    //將狀態改為NONE
                isFlag = false;  //標誌改為false
                refreshViewByState();
            }
            break;
        }
    }

根據不同狀態，改變使用者介面的顯示

/**
     * 根據當前狀態state,改變介面顯示
     * state:
     *      NONE：無操作
     *      PULL：下拉可以重新整理
     *      RELEASE：鬆開可以重新整理
     *      REFREASH：正在重新整理
     */
    private void refreshViewByState(){
        //提示
        TextView tips = (TextView)header.findViewById(R.id.tips);
        //箭頭
        ImageView arrow = (ImageView)header.findViewById(R.id.arrow);
        //進度條
        ProgressBar progress = (ProgressBar)header.findViewById(R.id.progress);
        //箭頭的動畫效果1，由0度轉向180度，即箭頭由朝下轉為朝上
        RotateAnimation animation1 = new RotateAnimation(0, 180,
                RotateAnimation.RELATIVE_TO_SELF,0.5f,
                RotateAnimation.RELATIVE_TO_SELF,0.5f);
        animation1.setDuration(500);
        animation1.setFillAfter(true);
        //箭頭的動畫效果2，由180度轉向0度，即箭頭由朝上轉為朝下
        RotateAnimation animation2 = new RotateAnimation(180, 0,
                RotateAnimation.RELATIVE_TO_SELF,0.5f,
                RotateAnimation.RELATIVE_TO_SELF,0.5f);
        animation2.setDuration(500);
        animation2.setFillAfter(true);
        
        switch (state) {
        case NONE:                     //正常狀態
            arrow.clearAnimation();    //清除箭頭動畫效果
            topPadding(-headerHeight); //設定header距離頂部的距離
            break;

        case PULL:                                //下拉狀態
            arrow.setVisibility(View.VISIBLE);    //箭頭設為可見
            progress.setVisibility(View.GONE);    //進度條設為不可見
            tips.setText("下拉可以重新整理");           //提示文字設為"下拉可以重新整理"
            arrow.clearAnimation();               //清除之前的動畫效果，並將其設定為動畫效果2
            arrow.setAnimation(animation2);
            break;
 
        case RELEASE:                            //下拉狀態
            arrow.setVisibility(View.VISIBLE);   //箭頭設為可見
            progress.setVisibility(View.GONE);   //進度條設為不可見
            tips.setText("鬆開可以重新整理");          //提示文字設為"鬆開可以重新整理"
            arrow.clearAnimation();              //清除之前的動畫效果，並將其設定為動畫效果2
            arrow.setAnimation(animation1);
            break;

        case REFRESH:                             //更新狀態
            topPadding(50);                       //距離頂部的距離設定為50
            arrow.setVisibility(View.GONE);       //箭頭設為不可見
            progress.setVisibility(View.VISIBLE); //進度條設為可見
            tips.setText("正在重新整理...");            //提示文字設為""正在重新整理..."
            arrow.clearAnimation();                //清除動畫效果
            break;

        }
    }

更新資料 由於RefreshListView中不能直接更新資料，必須設定回撥介面來實現更新資料功能

IRefreshListener iRefreshlistener;//重新整理資料的介面
      ...
       public void setInterface(IRefreshListener listener){
        this.iRefreshlistener = listener;
    }
        /**
     * 重新整理資料介面
     * @author lenovo
     *
     */
    public interface IRefreshListener{
        public void onRefresh();
    }

在MainActivity中實現RefreshListView介面並實現onRefresh()方法

public class MainActivity extends Activity implements IRefreshListener{
   ......
   @Override
    public void onRefresh() {
        // TODO Auto-generated method stub
        //handler設定重新整理延時效果
        Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            
            @Override
            public void run() {
                // TODO Auto-generated method stub
                //獲取最新資料
                getRefreshData();
                //通知介面顯示
                adapter.notifyDataSetChanged();
                //通知listView重新整理資料完畢
                listView.refreshComplete();
            }
        }, 2000);
}

重新整理完成的操作:

public void refreshComplete(){
        state = NONE;   //狀態設為正常狀態
        isFlag = false; //標誌設為false
        refreshViewByState();
        //設定提示更新時間間隔
        Time t = new Time();
        t.setToNow();
        time = t.hour*60+t.minute-updateTime;
        updateTime = t.hour*60+t.minute;
        TextView lastUpdateTime = (TextView)findViewById(R.id.time);
        lastUpdateTime.setText(time+"分鐘前更新");
    }

執行效果圖

相關推薦

自定義View（ListView）下拉重新整理

下拉重新整理的操作流程: 1.使用者手指在ListView頁面按下並下拉 2.出現一個提示View在listView頂部 3.listView內容更新，頂部view顯示後隱藏 具體實現步驟 建立繼承Listview的RefreshListView,並新增頂部提示vi

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

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

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

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

自定義View（1）

點操作：moveTo和lineTo和rLinneTo的理解 1、lineTo 用於進行直線繪製。起點預設為座標原點（左上），如果有path的存在，則是繪製的最後點為基準，座標點對應的（0,0）到lineTo（x,y）的偏移量 比如 /** * 線操作 * lineTo的偏移量相對於原

Android自定義View（三）-Draw原理篇

Android自定義View通常需要經過measure、layout和draw過程。 如果你沒有了解過measure過程，可以先看看這篇文章。 如果你沒有了解過layout過程，可以先看看這篇文章。 一、draw的作用：繪製View檢視 二、draw過程：類似meas

Android 自定義View（一）

前言：可是有時候我們總感覺官方定義的一些基本元件不夠用，自定義元件就不可避免了。那麼如何才能做到像官方提供的那些元件一樣用xml來定義他的屬性呢？ 先總結下自定義View的步驟： 1、自定義View的屬性； 2、在View的構造方法中獲得自定義的屬性。 一、在re

自定義View（三） Matrix的原理解析

Matrix的英文是矩陣的意思，在Android中它起著座標對映、變換的功能。意思就是說我們在自定義view的時候，有時需要對圖表進行縮放、旋轉、轉移、錯切等操作，就需要對圖表的座標進行一定的轉換，此時就是Matrix在後臺起著轉換的作用。Matrix是一個三行三列的矩陣，大概長成下面那樣子，如

自定義View（二）View的事件分發機制原始碼解析

View的事件分發機制是Android中的一個難點，也是非常重要的知識點，充分理解和掌握事件分發機制有助於我們在自定義view的過程中更好地設計和解決事件相關問題。下面我們通過原始碼的角度去分析一下Android是怎麼處理view事件的。 一個事件（比如手指按下螢幕的down事件）首先傳遞到

自定義View（一）View工作原理之測量 measure

在Android中，一個View繪製出來要經過三大流程，分別用measure來測量View的寬高，用layout來確定View在父容器中的位置，最終用draw將View繪製到螢幕上。本章節主要，通過自己的理解來講解一下第一個流程measure的相關知識點。 measure方法在View類中，

Android學習—簡單自定義View（一）

最近手上不忙所以回顧了一下自己今年來所接觸和學習的東西，突然覺得寫部落格真是一個很好的方式，希望自己 可以堅持下去。 自定義View的流程 建立自定義類繼承View，並重寫構造方法，構造方法總共有四種，我們暫時只需要繼承前兩種 public CircleVi

android自定義View（一）、正弦波水波紋

文章目錄 1、正弦曲線知識 2、靜態正弦曲線繪製 3、動態正弦曲線繪製 4、完整原始碼 1、正弦曲線知識 對這個初中知識遺忘了的可以先看看正弦曲線百度百科詞條方便加深理解。

Android自定義view（一），打造絢麗的驗證碼

前言：我相信信念的力量，信念可以支撐起一個人，一個名族，一個國家。正如“人沒有夢想和鹹魚有什麼區別”一樣，我有信念，有理想，所以我正在努力向著夢想前進~。 自定義view，如果是我，我首先要看到自定義view的效果圖，然後再想想怎麼實現這種效果或功能，所以先貼

自定義View（二）

前面說過了，自定義View主要有下面三種： 1.對現有控制元件進行擴充套件 2.通過組合實現新的控制元件 3.重寫View實現全新控制元件 對現有控制元件進行擴充套件 擴充套件了一個TextView，有內外兩個矩形組成。程式碼如下： publ

Android進階之自定義View（1）實現可換行的TextView

         今天來一起學習一下最簡單的自定義view,自己動手寫一個MyTextView,當然不會像系統的TextView那麼複雜，只是實現一下TextView的簡單功能，包括分行顯示及自定義屬性的處理，主要目的是介紹自定義view的實現的基本思路和需要掌握的一些基礎知

android自定義View（2）：實現百分比自適應佈局

android介面適配難是歷史原因，我們只能想辦法解決。github上面已有一些佈局自適應的解決方案，今天我分享的是自定義控制元件：RelativieLayout自適應百分比寬高。直接上菜。 一，實現的效果圖 眼見為實，截圖所示，寬高都是50％，實現了自

Android從零開搞系列：自定義View（9）事件分發+事件攔截（滑動衝突）

我和一幫應屆生同學維護了一個公眾號：IT面試填坑小分隊。旨在幫助應屆生從學生過度到開發者，並且每週樹立學習目標，一同進步！ 寫在前面 今天用了一天的時間去再一次梳理了一遍，事件分發和事件攔截。用了這麼長時間倒不是因為理解深刻，，而是順便看了3

自定義View（一）---View的基礎概念、工作流程以及生命週期的理解

不詩意的女程式猿不是好廚師~ 序：最近在工作中使用到了各種自定義控制元件，也更深刻的理解了自定義控制元件的重要性，所以就建了一個專欄來專門整理自定義控制元件的相關知識。我打算先從理論知識說起，然後再把專案中使用的自定義控制元件整理後寫為部落格發表，並

android 自定義View（完美）

原文連結：http://www.jianshu.com/p/d507e3514b65 一、自定義View，你真的掌握了嗎？ 什麼？你說你掌握了自定義View？來來來，回答老衲如下問題： Google提出View這個概念的目的是什麼？View這個概念與Activtiy、F

淺談安卓自定義view（一）：製作一個最最最簡單的自定義view

對於安卓程式設計師來說，自定義view簡直不要太重要，畢竟有很多功能，譬如圓形頭像這些，用單純的原生非常難以實現，而用自定義view，簡直分分鐘。 在這裡，我嘗試用最簡單方式跟初學者說一下如何自定義一個自己的view~ 首先，最簡單最簡單的自定義view，有

Android 自定義View（基礎）

一：引言 Android的開發中，在移動裝置上展示的所有內容，都是靠一個一個具體的檢視控制元件，按照一定的排列規則展示出來的，這些一個個控制元件，都是系統提供給我們的。但是我們看到，app商店上有些比較炫酷的頁面展示，我們會發現，系統根本沒有提供那些控制元件，