1. 程式人生 > >Android —頁面下拉重新整理(ListView與SwipeRefreshLayout)

Android —頁面下拉重新整理(ListView與SwipeRefreshLayout)

  相信大家在使用淘寶的時候應該都看到過下拉重新整理的效果。這種效果看起來會感覺比較難做,一起來看下下拉重新整理。

ListView

這裡寫圖片描述
思路:
通過FrameLayout底層為下拉重新整理的Header,上面一層是ListView,監聽手指滑動設定動畫效果,移動ListView。
使用:
1、編寫ListView頂部下拉重新整理的header

<?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" >
<TextView android:layout_width="match_parent" android:gravity="center" android:layout_height="wrap_content" android:text="下拉重新整理" /> </LinearLayout>

2、ListView(後面將會進行動態新增)

<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:background="#ffffff">
</ListView>

3、自定義FrameLayout動態新增ListView與header

public class
MyFrameLayout extends FrameLayout{
ListView listview; public MyFrameLayout(Context context) { super(context); } public MyFrameLayout(Context context, AttributeSet attrs) { super(context, attrs); //先建立LayoutInflater 用於獲得佈局 LayoutInflater inflater=(LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); //新增頂部佈局 View header=inflater.inflate(R.layout.header, null); //向佈局中新增header(下拉載入) addView(header); //ListView的Adapter ArrayAdapter<String> adapter=new ArrayAdapter<String>(context, android.R.layout.simple_list_item_1,new String[]{"a","b","c","d","e","f","g","h","i","j","k","l","m","n"}); listview=(ListView) inflater.inflate(R.layout.mylistview, null); listview.setAdapter(adapter); //向佈局中新增ListView addView(listview); } //攔截事件 @Override public boolean onInterceptTouchEvent(MotionEvent ev) { if(ev.getAction()==MotionEvent.ACTION_DOWN){ } if(listview.getFirstVisiblePosition()==0){ View firstview=listview.getChildAt(listview.getFirstVisiblePosition()); if(firstview.getY()>=0){ return true; } } return super.onInterceptTouchEvent(ev); } //設定動畫時使用 private float oldy; //處理事件 @Override public boolean onTouchEvent(MotionEvent event) { Log.d("onTouchEvent", ""+super.onTouchEvent(event)); switch (event.getAction()) { case MotionEvent.ACTION_DOWN: //手指落下監聽 oldy=event.getY(); case MotionEvent.ACTION_MOVE: float y=event.getY(); float distance=y-oldy; //設定listview移動 listview.setTranslationY(listview.getTranslationY()+distance); oldy=y; invalidate(); return true; case MotionEvent.ACTION_UP: //手指擡起時,設定動畫效果,使ListView回到頂部 ObjectAnimator.ofFloat(listview, "translationY", listview.getTranslationY(),0).setDuration(300).start(); break; default: break; } return super.onTouchEvent(event); } }

4、佈局引用

<?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" >
    <com.example.administrator.myapplication2.MyFrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
    </com.example.administrator.myapplication2.MyFrameLayout>

</LinearLayout>

5、在MainActivity中使用該佈局即可。

SwipeRefreshLayout

這裡寫圖片描述
  實際上Android已經為我們實現一種下拉重新整理,那就是通過SwipeRefreshLayout,看下新出的SwipeRefreshLayout的實現方式。
使用:
1、佈局
注:SwipeRefreshLayout類似於ScrollView,內部只能有一個元件。

<?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" >

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

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

</LinearLayout>

2、MainActivity

public class MainActivity extends Activity {
    private SwipeRefreshLayout refresh;
    private ListView mlistview;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        mlistview=(ListView) findViewById(R.id.listview2);
        refresh=(SwipeRefreshLayout) findViewById(R.id.swiperefresh);
        ArrayAdapter<String> adapter=new ArrayAdapter<String>(getApplicationContext(), android.R.layout.simple_list_item_1,new String[]{"a","b","c","d","e","f","g","h","i","j","k","l","m","n"});
        mlistview.setAdapter(adapter);
        //設定監聽事件
        refresh.setOnRefreshListener(new OnRefreshListener() {

            @Override
            public void onRefresh() {

                refresh.setRefreshing(false);
            }
        });

    }

}