Android菜鳥的成長筆記（27）——ViewPager的使用

ViewPager是Android 3.0以上可以使用的API。

一、ViewPager能幹什嗎？

1、5.0中連帶滑動用ViewPager可以輕鬆實現。

2、實作類別似於新浪微博的導航引導介面。

3、實現其他導航或菜單。

二、ViewPager的使用

1、添加布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" ><android.support.v4.view.ViewPager    android:id="@+id/viewpager"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_gravity="center"/>  </LinearLayout>

2、載入要顯示的布局檔案（View）

        LayoutInflater lf = getLayoutInflater().from(this);        view1 = lf.inflate(R.layout.layout_0, null);        view2 = lf.inflate(R.layout.layout_1, null);        view3 = lf.inflate(R.layout.layout_2, null);

3、建立View集合

        mListViews = new ArrayList<View>();        mListViews.add(view1);        mListViews.add(view2);        mListViews.add(view3);

4、建立PagerAdapter

ViewPager的適配器是PagerAdapter，要實現PagerAdapter至少要實現以下方法：

（1）instantiateItem(ViewGroup, int)//添加

（2）destroyItem(ViewGroup, int, Object)     //刪除

（3）getCount()

（4）isViewFromObject(View, Object)

    private class MyPageAdapter extends PagerAdapter {    private List<View> mListViews;        public MyPageAdapter(List<View> mListViews) {this.mListViews = mListViews;}        /**     * 刪除頁卡     */    @Override    public void destroyItem(View container, int position, Object object) {    ((ViewPager) container).removeView(mListViews.get(position));    }            /**     * 執行個體化頁卡     */    @Override    public Object instantiateItem(View container, int position) {    ((ViewPager)container).addView(mListViews.get(position));    return mListViews.get(position);    }        /**     * 返回頁卡的數量     */@Overridepublic int getCount() {return mListViews.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1; //官方提示這樣寫}        }

5、配置適配器

mViewPager.setAdapter(new MyPageAdapter(mListViews));

全部代碼如下：

package com.example.viewpagetest;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.LayoutInflater;import android.view.View;public class MainActivity extends Activity {private List<View> mListViews;private View view1;private View view2;private View view3;private ViewPager mViewPager;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);                mViewPager = (ViewPager) findViewById(R.id.viewpager);                //載入要顯示的選項卡        LayoutInflater lf = getLayoutInflater().from(this);        view1 = lf.inflate(R.layout.layout_0, null);        view2 = lf.inflate(R.layout.layout_1, null);        view3 = lf.inflate(R.layout.layout_2, null);              mListViews = new ArrayList<View>();        mListViews.add(view1);        mListViews.add(view2);        mListViews.add(view3);                mViewPager.setAdapter(new MyPageAdapter(mListViews));            }        private class MyPageAdapter extends PagerAdapter {    private List<View> mListViews;        public MyPageAdapter(List<View> mListViews) {this.mListViews = mListViews;}        /**     * 刪除頁卡     */    @Override    public void destroyItem(View container, int position, Object object) {    ((ViewPager) container).removeView(mListViews.get(position));    }            /**     * 執行個體化頁卡     */    @Override    public Object instantiateItem(View container, int position) {    ((ViewPager)container).addView(mListViews.get(position));    return mListViews.get(position);    }        /**     * 返回頁卡的數量     */@Overridepublic int getCount() {return mListViews.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1; //官方提示這樣寫}        }}

各個頁面代碼：

<?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">  <TextView     android:layout_width="match_parent"    android:layout_height="match_parent"    android:text="1"    android:gravity="center"    android:textSize="120sp"    android:textColor="#33b5e5"    /></LinearLayout>

運行效果：

三、實現的菜單聯動

android.support.v4.view包中的介面和類如下：

從上面圖片中我們可以看到PagerTabStrip和PagerTitleStrip

從字面意思上理解，PagerTabStrip是可以點擊的導航選項卡，而PagerTitleStrip是不能互動的（點擊）的導航選項卡。

下面我們修改布局檔案如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" ><android.support.v4.view.ViewPager    android:id="@+id/viewpager"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_gravity="center">    <android.support.v4.view.PagerTabStrip        android:id="@+id/pagertab"        android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_gravity="top"/>    </android.support.v4.view.ViewPager></LinearLayout>

layout_gravity可以設定Tab的位置

修改MainActvity

        mTitleList = new ArrayList<String>();        mTitleList.add("聊天");        mTitleList.add("發現");        mTitleList.add("通訊錄");

在PagerAdapter中添加下面代碼：

@Overridepublic CharSequence getPageTitle(int position) {return mTitleList.get(position);}

貼出全部代碼，如下：

package com.example.viewpagetest;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.LayoutInflater;import android.view.View;public class MainActivity extends Activity {private List<String> mTitleList;private List<View> mListViews;   private ViewPager mViewPager;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);                mViewPager = (ViewPager) findViewById(R.id.viewpager);                //載入要顯示的選項卡        LayoutInflater lf = getLayoutInflater().from(this);        View view1 = lf.inflate(R.layout.layout_0, null);        View view2 = lf.inflate(R.layout.layout_1, null);        View view3 = lf.inflate(R.layout.layout_2, null);              mListViews = new ArrayList<View>();        mListViews.add(view1);        mListViews.add(view2);        mListViews.add(view3);                mTitleList = new ArrayList<String>();        mTitleList.add("聊天");        mTitleList.add("發現");        mTitleList.add("通訊錄");                        mViewPager.setAdapter(new MyPageAdapter(mListViews));            }        private class MyPageAdapter extends PagerAdapter {    private List<View> mListViews;        public MyPageAdapter(List<View> mListViews) {this.mListViews = mListViews;}        /**     * 刪除頁卡     */    @Override    public void destroyItem(View container, int position, Object object) {    ((ViewPager) container).removeView(mListViews.get(position));    }            /**     * 執行個體化頁卡     */    @Override    public Object instantiateItem(View container, int position) {    ((ViewPager)container).addView(mListViews.get(position));    return mListViews.get(position);    }        /**     * 返回頁卡的數量     */@Overridepublic int getCount() {return mListViews.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1; //官方提示這樣寫}/** * 設定Tab */@Overridepublic CharSequence getPageTitle(int position) {return mTitleList.get(position);}    }}

運行效果：

上面雖然有了Tab，並能隨著頁面的切換改變，但是這個並不是我們要達到的效果。下面我們自己做一個靜態Tab底部和一個動畫來實現。

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:background="#eeeeee"    android:orientation="vertical" >    <LinearLayout        android:id="@+id/linearLayout1"        android:layout_width="fill_parent"        android:layout_height="32.0dip"        android:background="#eeeeee" >        <TextView            android:id="@+id/text1"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_weight="1.0"            android:gravity="center"            android:text="聊天"            android:textColor="#000000"            android:textSize="16.0dip" />        <TextView            android:id="@+id/text2"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_weight="1.0"            android:gravity="center"            android:text="發現"            android:textColor="#000000"            android:textSize="16.0dip" />        <TextView            android:id="@+id/text3"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_weight="1.0"            android:gravity="center"            android:text="通訊錄"            android:textColor="#000000"            android:textSize="16.0dip" />    </LinearLayout>    <ImageView        android:id="@+id/cursor"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:scaleType="matrix"        android:src="@drawable/a"/><ImageView    android:layout_width="match_parent"    android:layout_height="1px"    android:background="#cccccc"/>    <android.support.v4.view.ViewPager        android:id="@+id/vPager"        android:layout_width="wrap_content"        android:layout_height="0dp"        android:layout_gravity="center"        android:layout_weight="1.0"        android:flipInterval="30"        android:background="#ffffff"        android:persistentDrawingCache="animation" /></LinearLayout>

package com.example.wuye001;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.graphics.BitmapFactory;import android.graphics.Matrix;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.util.DisplayMetrics;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.view.animation.Animation;import android.view.animation.TranslateAnimation;import android.widget.ImageView;import android.widget.TextView;import android.widget.Toast;public class MainActivity extends Activity {private ViewPager viewPager;//頁卡內容private ImageView imageView;// 動畫圖片private TextView textView1,textView2,textView3;private List<View> views;// Tab頁面列表private int offset = 0;// 動畫圖片位移量private int currIndex = 0;// 當前頁卡編號private int bmpW;// 動畫圖片寬度private View view1,view2,view3;//各個頁卡@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);InitImageView();InitTextView();InitViewPager();}private void InitViewPager() {viewPager=(ViewPager) findViewById(R.id.vPager);views=new ArrayList<View>();LayoutInflater inflater=getLayoutInflater();view1=inflater.inflate(R.layout.layout_0, null);view2=inflater.inflate(R.layout.layout_1, null);view3=inflater.inflate(R.layout.layout_2, null);views.add(view1);views.add(view2);views.add(view3);viewPager.setAdapter(new MyViewPagerAdapter(views));viewPager.setCurrentItem(0);viewPager.setOnPageChangeListener(new MyOnPageChangeListener());} /**  *  初始化頭標  */private void InitTextView() {textView1 = (TextView) findViewById(R.id.text1);textView2 = (TextView) findViewById(R.id.text2);textView3 = (TextView) findViewById(R.id.text3);textView1.setOnClickListener(new MyOnClickListener(0));textView2.setOnClickListener(new MyOnClickListener(1));textView3.setOnClickListener(new MyOnClickListener(2));}/** * 初始化動畫，這個就是頁卡滑動時，下面的橫線也滑動的效果，在這裡需要計算一些資料 */private void InitImageView() {imageView= (ImageView) findViewById(R.id.cursor);bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.a).getWidth();// 擷取圖片寬度DisplayMetrics dm = new DisplayMetrics();getWindowManager().getDefaultDisplay().getMetrics(dm);int screenW = dm.widthPixels;// 擷取解析度寬度offset = (screenW / 3 - bmpW) / 2;// 計算位移量Matrix matrix = new Matrix();matrix.postTranslate(offset, 0);imageView.setImageMatrix(matrix);// 設定動畫初始位置}/**  *      * 頭標點擊監聽 3 */private class MyOnClickListener implements OnClickListener{        private int index=0;        public MyOnClickListener(int i){        index=i;        }public void onClick(View v) {viewPager.setCurrentItem(index);}}public class MyViewPagerAdapter extends PagerAdapter{private List<View> mListViews;public MyViewPagerAdapter(List<View> mListViews) {this.mListViews = mListViews;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(mListViews.get(position));}@Overridepublic Object instantiateItem(ViewGroup container, int position) { container.addView(mListViews.get(position), 0); return mListViews.get(position);}@Overridepublic int getCount() {return  mListViews.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0==arg1;}}    public class MyOnPageChangeListener implements OnPageChangeListener{    int one = offset * 2 + bmpW;// 頁卡1 -> 頁卡2 位移量int two = one * 2;// 頁卡1 -> 頁卡3 位移量public void onPageScrollStateChanged(int arg0) {}public void onPageScrolled(int arg0, float arg1, int arg2) {}public void onPageSelected(int arg0) {/*兩種方法，這個是一種，下面還有一種，顯然這個比較麻煩Animation animation = null;switch (arg0) {case 0:if (currIndex == 1) {animation = new TranslateAnimation(one, 0, 0, 0);} else if (currIndex == 2) {animation = new TranslateAnimation(two, 0, 0, 0);}break;case 1:if (currIndex == 0) {animation = new TranslateAnimation(offset, one, 0, 0);} else if (currIndex == 2) {animation = new TranslateAnimation(two, one, 0, 0);}break;case 2:if (currIndex == 0) {animation = new TranslateAnimation(offset, two, 0, 0);} else if (currIndex == 1) {animation = new TranslateAnimation(one, two, 0, 0);}break;}*/Animation animation = new TranslateAnimation(one*currIndex, one*arg0, 0, 0);//顯然這個比較簡潔，只有一行代碼。currIndex = arg0;animation.setFillAfter(true);// True:圖片停在動畫結束位置animation.setDuration(300);imageView.startAnimation(animation);}        }}

運行效果：