閱讀(39.7k) 書簽贊(0) 我要糾錯(cuò)

Android ViewPager的簡(jiǎn)單使用

2023-03-31 13:44 更新

本節(jié)引言：

本節(jié)帶來(lái)的是Android 3.0后引入的一個(gè)UI控件——ViewPager(視圖滑動(dòng)切換工具)，實(shí)在想不到如何來(lái)稱呼這個(gè)控件，他的大概功能：通過(guò)手勢(shì)滑動(dòng)可以完成View的切換，一般是用來(lái)做APP 的引導(dǎo)頁(yè)或者實(shí)現(xiàn)圖片輪播，因?yàn)槭?.0后引入的，如果想在低版本下使用，就需要引入v4 兼容包哦~，我們也可以看到，ViewPager在：android.support.v4.view.ViewPager目錄下~ 下面我們就來(lái)學(xué)習(xí)一下這個(gè)控件的基本用法~ 官方API文檔：ViewPager

1.ViewPager的簡(jiǎn)單介紹

ViewPager就是一個(gè)簡(jiǎn)單的頁(yè)面切換組件，我們可以往里面填充多個(gè)View，然后我們可以左右滑動(dòng)，從而切換不同的View，我們可以通過(guò)setPageTransformer()方法為我們的ViewPager 設(shè)置切換時(shí)的動(dòng)畫效果，當(dāng)然，動(dòng)畫我們還沒學(xué)到，所以我們把為ViewPager設(shè)置動(dòng)畫放到下一章繪圖與動(dòng)畫來(lái)講解！和前面學(xué)的ListView，GridView一樣，我們也需要一個(gè)Adapter (適配器)將我們的View和ViewPager進(jìn)行綁定，而ViewPager則有一個(gè)特定的Adapter—— PagerAdapter！另外，Google官方是建議我們使用Fragment來(lái)填充ViewPager的，這樣可以更加方便的生成每個(gè)Page，以及管理每個(gè)Page的生命周期！給我們提供了兩個(gè)Fragment 專用的Adapter：FragmentPageAdapter和FragmentStatePagerAdapter 我們簡(jiǎn)要的來(lái)分析下這兩個(gè)Adapter的區(qū)別：

FragmentPageAdapter：和PagerAdapter一樣，只會(huì)緩存當(dāng)前的Fragment以及左邊一個(gè)，右邊一個(gè)，即總共會(huì)緩存3個(gè)Fragment而已，假如有1，2，3，4四個(gè)頁(yè)面：
處于1頁(yè)面：緩存1，2
處于2頁(yè)面：緩存1，2，3
處于3頁(yè)面：銷毀1頁(yè)面，緩存2，3，4
處于4頁(yè)面：銷毀2頁(yè)面，緩存3，4
更多頁(yè)面的情況，依次類推~

FragmentStatePagerAdapter：當(dāng)Fragment對(duì)用戶不見得時(shí)，整個(gè)Fragment會(huì)被銷毀，只會(huì)保存Fragment的狀態(tài)！而在頁(yè)面需要重新顯示的時(shí)候，會(huì)生成新的頁(yè)面！

綜上，F(xiàn)ragmentPageAdapter適合固定的頁(yè)面較少的場(chǎng)合；而FragmentStatePagerAdapter則適合于頁(yè)面較多或者頁(yè)面內(nèi)容非常復(fù)雜(需占用大量?jī)?nèi)存)的情況！

2.PagerAdapter的使用

我們先來(lái)介紹最普通的PagerAdapter，如果想使用這個(gè)PagerAdapter需要重寫下面的四個(gè)方法：當(dāng)然，這只是官方建議，實(shí)際上我們只需重寫getCount()和isViewFromObject()就可以了~

getCount():獲得viewpager中有多少個(gè)view

destroyItem():移除一個(gè)給定位置的頁(yè)面。適配器有責(zé)任從容器中刪除這個(gè)視圖。這是為了確保在finishUpdate(viewGroup)返回時(shí)視圖能夠被移除。

而另外兩個(gè)方法則是涉及到一個(gè)key的東東：

instantiateItem(): ①將給定位置的view添加到ViewGroup(容器)中,創(chuàng)建并顯示出來(lái) ②返回一個(gè)代表新增頁(yè)面的Object(key),通常都是直接返回view本身就可以了,當(dāng)然你也可以自定義自己的key,但是key和每個(gè)view要一一對(duì)應(yīng)的關(guān)系

isViewFromObject(): 判斷instantiateItem(ViewGroup, int)函數(shù)所返回來(lái)的Key與一個(gè)頁(yè)面視圖是否是代表的同一個(gè)視圖(即它倆是否是對(duì)應(yīng)的，對(duì)應(yīng)的表示同一個(gè)View),通常我們直接寫 return view == object!

使用示例1：最簡(jiǎn)單用法

運(yùn)行效果圖：

關(guān)鍵部分代碼：

好的，代碼寫起來(lái)也是非常簡(jiǎn)單的：首先是每個(gè)View的布局，一式三份，另外兩個(gè)View一樣：

view_one.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:background="#FFBA55"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一個(gè)Page"
        android:textColor="#000000"
        android:textSize="18sp"
        android:textStyle="bold" />
</LinearLayout>

然后編寫一個(gè)自定義個(gè)的PagerAdapter：

MyPagerAdapter.java：

public class MyPagerAdapter extends PagerAdapter {
    private ArrayList<View> viewLists;

    public MyPagerAdapter() {
    }

    public MyPagerAdapter(ArrayList<View> viewLists) {
        super();
        this.viewLists = viewLists;
    }

    @Override
    public int getCount() {
        return viewLists.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(viewLists.get(position));
        return viewLists.get(position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(viewLists.get(position));
    }
}

接著到Activity了，和以前學(xué)的ListView非常類似：

OneActivity.java：

public class OneActivity extends AppCompatActivity{

    private ViewPager vpager_one;
    private ArrayList<View> aList;
    private MyPagerAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_one);
        vpager_one = (ViewPager) findViewById(R.id.vpager_one);

        aList = new ArrayList<View>();
        LayoutInflater li = getLayoutInflater();
        aList.add(li.inflate(R.layout.view_one,null,false));
        aList.add(li.inflate(R.layout.view_two,null,false));
        aList.add(li.inflate(R.layout.view_three,null,false));
        mAdapter = new MyPagerAdapter(aList);
        vpager_one.setAdapter(mAdapter);
    }
}

好的，關(guān)鍵代碼就上述部分，非常容易理解~

使用示例2：標(biāo)題欄——PagerTitleStrip與PagerTabStrip

就是跟隨著ViewPager滑動(dòng)而滑動(dòng)的標(biāo)題咯，這兩個(gè)是官方提供的，一個(gè)是普通文字，一個(gè)是帶有下劃線，以及可以點(diǎn)擊文字可切換頁(yè)面，下面我們來(lái)寫個(gè)簡(jiǎn)單的例子~

運(yùn)行效果圖：

關(guān)鍵代碼實(shí)現(xiàn)：

這里兩者的區(qū)別僅僅是布局不一樣而已，其他的都一樣：

PagerTitleStrip所在Activtiy的布局： activity_two.xml：

<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:layout_height="48dp"
        android:background="#CCFF99"
        android:gravity="center"
        android:text="PagerTitleStrip效果演示"
        android:textColor="#000000"
        android:textSize="18sp" />

    <android.support.v4.view.ViewPager
        android:id="@+id/vpager_two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center">

        <android.support.v4.view.PagerTitleStrip
            android:id="@+id/pagertitle"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_gravity="top"
            android:textColor="#FFFFFF" />
   </android.support.v4.view.ViewPager>

</LinearLayout>

而PagerTabStrip所在的布局：

activity_three.xml：

<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:layout_height="35dp"
        android:background="#C0C080"
        android:gravity="center"
        android:text="PagerTabStrip效果演示"
        android:textSize="18sp" />

    <android.support.v4.view.ViewPager
        android:id="@+id/vpager_three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center">

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pagertitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top" />
     </android.support.v4.view.ViewPager>
</LinearLayout>

接下來(lái)的兩者都一樣了，我們先來(lái)編寫一個(gè)自定義的PagerAdapter，除了前面重寫的四個(gè)方法外，我們需要另外重寫一個(gè)方法：getPageTitle()，這個(gè)設(shè)置標(biāo)題的~ 代碼如下：

MyPagerAdapter2.java：

/**
 * Created by Jay on 2015/10/8 0008.
 */
public class MyPagerAdapter2 extends PagerAdapter {
    private ArrayList<View> viewLists;
    private ArrayList<String> titleLists;

    public MyPagerAdapter2() {}
    public MyPagerAdapter2(ArrayList<View> viewLists,ArrayList<String> titleLists)
    {
        this.viewLists = viewLists;
        this.titleLists = titleLists;
    }

    @Override
    public int getCount() {
        return viewLists.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(viewLists.get(position));
        return viewLists.get(position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(viewLists.get(position));
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return titleLists.get(position);
    }
}

最后是Activity部分，兩個(gè)都是一樣的：

TwoActivity.java：

/**
 * Created by Jay on 2015/10/8 0008.
 */
public class TwoActivity extends AppCompatActivity {

    private ViewPager vpager_two;
    private ArrayList<View> aList;
    private ArrayList<String> sList;
    private MyPagerAdapter2 mAdapter;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_two);
        vpager_two = (ViewPager) findViewById(R.id.vpager_two);
        aList = new ArrayList<View>();
        LayoutInflater li = getLayoutInflater();
        aList.add(li.inflate(R.layout.view_one,null,false));
        aList.add(li.inflate(R.layout.view_two,null,false));
        aList.add(li.inflate(R.layout.view_three, null, false));
        sList = new ArrayList<String>();
        sList.add("橘黃");
        sList.add("淡黃");
        sList.add("淺棕");
        mAdapter = new MyPagerAdapter2(aList,sList);
        vpager_two.setAdapter(mAdapter);
    }
}

好了，非常簡(jiǎn)單，有疑問(wèn)的話，自己下demo看看就懂了~

使用示例3：ViewPager實(shí)現(xiàn)TabHost的效果：

當(dāng)然，示例2很多時(shí)候，只是中看不中用，實(shí)際開發(fā)中我們可能需要自行定制這個(gè)標(biāo)題欄，下面我們就來(lái)寫個(gè)簡(jiǎn)單的例子來(lái)實(shí)現(xiàn)TabHost的效果，如果你不知道TabHost是什么鬼的話，那么，請(qǐng)看效果圖！

運(yùn)行效果圖：

實(shí)現(xiàn)邏輯解析：

下面我們來(lái)講解下實(shí)現(xiàn)上述效果的邏輯，然后貼代碼：

首先是布局：頂部一個(gè)LinearLayout，包著三個(gè)TextView，weight屬性都為1，然后下面跟著一個(gè)滑塊的ImageView，我們?cè)O(shè)置寬度為match_parent；最底下是我們的ViewPager，這里可能有兩個(gè)屬性你并不認(rèn)識(shí)，一個(gè)是：flipInterval：這個(gè)是指定View動(dòng)畫間的時(shí)間間隔的！
而persistentDrawingCache：則是設(shè)置控件的繪制緩存策略，可選值有四個(gè)：

none：不在內(nèi)存中保存繪圖緩存；

animation:只保存動(dòng)畫繪圖緩存；

scrolling：只保存滾動(dòng)效果繪圖緩存；

all：所有的繪圖緩存都應(yīng)該保存在內(nèi)存中；

可以同時(shí)用2個(gè)，animation|scrolling這樣~

布局代碼：activity_four.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="48dp"
        android:background="#FFFFFF">

        <TextView
            android:id="@+id/tv_one"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="橘黃"
            android:textColor="#000000" />

        <TextView
            android:id="@+id/tv_two"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="淡黃"
            android:textColor="#000000" />

        <TextView
            android:id="@+id/tv_three"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="淺棕"
            android:textColor="#000000" />
    </LinearLayout>

    <ImageView
        android:id="@+id/img_cursor"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:scaleType="matrix"
        android:src="https://atts.w3cschool.cn/attachments/image/cimg/>

    <android.support.v4.view.ViewPager
        android:id="@+id/vpager_four"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:layout_weight="1.0"
        android:flipInterval="30"
        android:persistentDrawingCache="animation" />

</LinearLayout>

接著到我們的Activity了，我們來(lái)捋下思路：

Step 1：我們需要讓我們的移動(dòng)塊在第一個(gè)文字下居中，那這里就要算一下偏移量：先獲得圖片寬度pw，然后獲取屏幕寬度sw，計(jì)算方法很簡(jiǎn)單：
offset(偏移量) = ((sw / 3)-pw) / 2 //屏幕寬/3 - 圖片寬度，然后再除以2，左右嘛！
然后我么你調(diào)用setImageMatrix設(shè)置滑塊當(dāng)前的位置：
同時(shí)我們也把切換一頁(yè)和兩頁(yè)，滑塊的移動(dòng)距離也算出來(lái)，很簡(jiǎn)單：
one = offset 2 + pw;
two = one 2;

Step 2：當(dāng)我們滑動(dòng)頁(yè)面時(shí)，我們的滑塊要進(jìn)行移動(dòng)，我們要為ViewPager添加一個(gè) OnPageChangeListener事件，我們需要對(duì)滑動(dòng)后的頁(yè)面來(lái)做一個(gè)判斷，同時(shí)記錄滑動(dòng)前處于哪個(gè)頁(yè)面，下面自己畫了個(gè)圖，可能更容易理解吧！

PS:太久沒寫字，字很丑，能看清就好，字丑人美，哈哈~

嗯，如果還是不能理解的話，自己動(dòng)手畫畫圖就知道了，下面上代碼：

FourActvitiy.java：

/**
 * Created by Jay on 2015/10/8 0008.
 */
public class FourActivity extends AppCompatActivity implements View.OnClickListener,
        ViewPager.OnPageChangeListener {

    private ViewPager vpager_four;
    private ImageView img_cursor;
    private TextView tv_one;
    private TextView tv_two;
    private TextView tv_three;

    private ArrayList<View> listViews;
    private int offset = 0;//移動(dòng)條圖片的偏移量
    private int currIndex = 0;//當(dāng)前頁(yè)面的編號(hào)
    private int bmpWidth;// 移動(dòng)條圖片的長(zhǎng)度
    private int one = 0; //移動(dòng)條滑動(dòng)一頁(yè)的距離
    private int two = 0; //滑動(dòng)條移動(dòng)兩頁(yè)的距離

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_four);
        initViews();
    }

    private void initViews() {
        vpager_four = (ViewPager) findViewById(R.id.vpager_four);
        tv_one = (TextView) findViewById(R.id.tv_one);
        tv_two = (TextView) findViewById(R.id.tv_two);
        tv_three = (TextView) findViewById(R.id.tv_three);
        img_cursor = (ImageView) findViewById(R.id.img_cursor);

        //下劃線動(dòng)畫的相關(guān)設(shè)置：
        bmpWidth = BitmapFactory.decodeResource(getResources(), R.mipmap.line).getWidth();// 獲取圖片寬度
        DisplayMetrics dm = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);
        int screenW = dm.widthPixels;// 獲取分辨率寬度
        offset = (screenW / 3 - bmpWidth) / 2;// 計(jì)算偏移量
        Matrix matrix = new Matrix();
        matrix.postTranslate(offset, 0);
        img_cursor.setImageMatrix(matrix);// 設(shè)置動(dòng)畫初始位置
        //移動(dòng)的距離
        one = offset * 2 + bmpWidth;// 移動(dòng)一頁(yè)的偏移量,比如1->2,或者2->3
        two = one * 2;// 移動(dòng)兩頁(yè)的偏移量,比如1直接跳3

        //往ViewPager填充View，同時(shí)設(shè)置點(diǎn)擊事件與頁(yè)面切換事件
        listViews = new ArrayList<View>();
        LayoutInflater mInflater = getLayoutInflater();
        listViews.add(mInflater.inflate(R.layout.view_one, null, false));
        listViews.add(mInflater.inflate(R.layout.view_two, null, false));
        listViews.add(mInflater.inflate(R.layout.view_three, null, false));
        vpager_four.setAdapter(new MyPagerAdapter(listViews));
        vpager_four.setCurrentItem(0);          //設(shè)置ViewPager當(dāng)前頁(yè)，從0開始算

        tv_one.setOnClickListener(this);
        tv_two.setOnClickListener(this);
        tv_three.setOnClickListener(this);

        vpager_four.addOnPageChangeListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.tv_one:
                vpager_four.setCurrentItem(0);
                break;
            case R.id.tv_two:
                vpager_four.setCurrentItem(1);
                break;
            case R.id.tv_three:
                vpager_four.setCurrentItem(2);
                break;
        }
    }

    @Override
    public void onPageSelected(int index) {
        Animation animation = null;
        switch (index) {
            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;
        }
        currIndex = index;
        animation.setFillAfter(true);// true表示圖片停在動(dòng)畫結(jié)束位置
        animation.setDuration(300); //設(shè)置動(dòng)畫時(shí)間為300毫秒
        img_cursor.startAnimation(animation);//開始動(dòng)畫
    }

    @Override
    public void onPageScrollStateChanged(int i) {

    }

    @Override
    public void onPageScrolled(int i, float v, int i1) {

    }
}

嗯，關(guān)于動(dòng)畫可能你并不熟悉，沒事，下一章我們帶大家一起扣~

3.ViewPager結(jié)合Fragment示例

嗯，在前面講解Fragment的時(shí)候我們就講解了一個(gè)使用示例： Android基礎(chǔ)入門教程——5.2.4 Fragment實(shí)例精講——底部導(dǎo)航欄+ViewPager滑動(dòng)切換頁(yè)面這里就不再詳述了，有興趣的點(diǎn)下鏈接看看即可~

4.代碼示例下載

ViewPagerDemo.zip

本節(jié)小結(jié)：

關(guān)于ViewPager，限于篇幅，有些地方并沒有講到，其他的大家需要自己查閱文檔了~

另外，上面也說(shuō)了，ViewPager的動(dòng)畫我們會(huì)在下一章講解！好的，就說(shuō)這么多~

嗯，國(guó)慶前曾說(shuō)會(huì)在國(guó)慶假期里完成整個(gè)系列，結(jié)果一篇都沒寫，實(shí)在抱歉... 因?yàn)槊米舆^(guò)來(lái)玩了，So，你懂的~，會(huì)加快進(jìn)度~，爭(zhēng)取早日進(jìn)階！

以上內(nèi)容是否對(duì)您有幫助：

← Android 菜單(Menu)

Android DrawerLayout(官方側(cè)滑菜單)的簡(jiǎn)單使用 →

寫筆記

我要補(bǔ)充

Android ViewPager的簡(jiǎn)單使用

本節(jié)引言：

1.ViewPager的簡(jiǎn)單介紹

2.PagerAdapter的使用

使用示例1：最簡(jiǎn)單用法

使用示例2：標(biāo)題欄——PagerTitleStrip與PagerTabStrip

使用示例3：ViewPager實(shí)現(xiàn)TabHost的效果：

3.ViewPager結(jié)合Fragment示例

4.代碼示例下載

本節(jié)小結(jié)：

推薦文章

推薦教程

推薦課程