2015年6月29日 星期一

Android-下拉更新視窗(Refresh ListView)

更新
20151213 : 新增 SwipeRefreshLayout 教學
20160318 : 新增 ListView 、GridView 更新問題

現在 UI 畫面不管是 ListView、 GridView 有做更新已經見怪不怪了
現在就來以原生的方法實作

1 . 把要更新的內容加載在 SwipeRefreshLayout 內
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v4.widget.SwipeRefreshLayout 
        android:id="@+id/swipe_container" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" >

        <GridView
            android:id="@+id/gridView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:numColumns="3" >
        </GridView>
   
    </android.support.v4.widget.SwipeRefreshLayout>

</RelativeLayout>


2 . 在 Activity 宣告並且監聽動作
package com.example.refreshview;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v4.widget.SwipeRefreshLayout.OnRefreshListener;
import android.widget.Toast;

public class MainActivity extends Activity implements OnRefreshListener{

    SwipeRefreshLayout mSwipeLayout;

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

        mSwipeLayout = (SwipeRefreshLayout) findViewById(R.id.swipe_container);  
        mSwipeLayout.setOnRefreshListener(this);  
        mSwipeLayout.setColorSchemeColors(Color.RED);

    }

    @Override
    public void onRefresh() {

        // 模仿更新 ( 2秒
        Handler handler = new Handler();
        handler.postDelayed(new Runnable(){

            @Override
            public void run() {

                // 結束更新動畫
                mSwipeLayout.setRefreshing(false);
                Toast.makeText(MainActivity.this, "Refresh Success", Toast.LENGTH_SHORT).show();        

            }}, 2000);

    }
}


遇到的問題
當 ListView 、 GridView 向上滑動看資訊
但 向下滑動 竟然觸發到更新元件

解法 :
mListView.setOnScrollListener(new AbsListView.OnScrollListener() {  
  @Override
  public void onScrollStateChanged(AbsListView view, int scrollState) {

  }

  @Override
  public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
    int topRowVerticalPosition = 
      (mListView == null || mListView.getChildCount() == 0) ? 
        0 : mListView.getChildAt(0).getTop();
    swipeContainer.setEnabled(firstVisibleItem == 0 && topRowVerticalPosition >= 0);
  }
});


參考資料 : 如何使用下拉更新(SwipeRefreshLayout)
參考資料 : SwipeRefreshLayout with ListView done right

KeyWork : XListView
一般ListView
相關連結 : 位置

多種ListView GridView TextView
但要匯入SDK

相關連結 : 位置

看起來挺實用的但是限定AndroidStudio
實作過,超方便
但是下拉的圖示很尷尬..
Phoenix

沒有留言:

張貼留言