ViewPager 全面总结

一、简介

Viewpager，视图翻页工具，提供了多页面切换的效果。Android 3.0后引入的一个UI控件，位于v4包中。低版本使用需要导入v4包，但是现在我们开发的APP一般不再兼容3.0及以下的系统版本，另外现在大多数使用Android studio进行开发，默认导入v7包，v7包含了v4，所以不用导包，越来越方便了。

Viewpager使用起来就是我们通过创建adapter给它填充多个view，左右滑动时，切换不同的view。Google官方是建议我们使用Fragment来填充ViewPager的，这样可以更加方便的生成每个Page，以及管理每个Page的生命周期

Viewpager在Android开发中使用频率还是比较高的，下面开始一起学习吧

二、基本使用

1. xml引用

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>

2. page布局

<?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 xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/text_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FAE8DA"
        android:gravity="center"
        android:text="@string/hello"
        android:textSize="22sp" />

</LinearLayout>

3. 创建适配器

可直接创建PagerAdapter，亦可创建它的子类

package com.lid.viewpager.main.adapter;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.lid.viewpager.R;

import java.util.List;

public class MainViewPagerAdapter extends PagerAdapter {
    private Context mContext;
    private List<String> mData;

    public MainViewPagerAdapter(Context mContext, List<String> mData) // 构造器
    {
        this.mContext = mContext;
        this.mData = mData;
    }

    @Override
    public int getCount() // 根据 mData 的数量，创建 ViewPager 中的页面数量
    {
        return mData.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) // 好像是判断是否重复，如果已经加载了那就不去重复加载
    {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) // 实例化 pager.xml
    {
        View view = View.inflate(mContext, R.layout.pager, null); // 实例化 pager.xml

        TextView textView = view.findViewById(R.id.text_view); // 取得 pager.xml 中的 TextView
        textView.setText(mData.get(position)); // 根据 position 设置 TextView 中的文字

        container.addView(view); // 将实例化的 pager.xml 加入到容器中去, container 就是容器.
        return view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) // 好像是销毁Item用的
    {
        container.removeView((View) object);
    }
}

4. 设置适配器

package com.lid.viewpager.main;

import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.lid.viewpager.R;
import com.lid.viewpager.main.adapter.MainViewPagerAdapter;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

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

        setVp();
    }

    private void setVp() // 配置 ViewPager
    {

        List<String> list = new ArrayList<>();

        for (int i = 0; i < 3; i++) // 填充数据源
        {
            list.add("第" + i + "个View");
        }

        ViewPager vp = findViewById(R.id.view_pager);

        vp.setAdapter(new MainViewPagerAdapter(this, list)); // 设置适配器 ( Set Adapter )
    }
}

效果：

1.gif

码云:

https://gitee.com/giraffer/ViewPager001

5. 标题栏

给Viewpager设置标题栏有一下几种方式：

PagerTabStrip： 带有下划线
PagerTitleStrip： 不带下划线
TabLayout：5.0后推出

5.2 PagerTitleStrip

<?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.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="7">

        <android.support.v4.view.PagerTitleStrip
            android:id="@+id/pager_title"
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:layout_gravity="top"
            android:background="#FFFFFF"
            android:textColor="#FF0000"
            android:textSize="18sp" />

    </android.support.v4.view.ViewPager>

    <Button
        android:id="@+id/start_home"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="@string/start_home" />

</LinearLayout>

5.3 PagerTabStrip

<?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.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pager_tab"
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:layout_gravity="top"
            android:background="#FFFFFF"
            android:textColor="#FF0000" />

    </android.support.v4.view.ViewPager>

</LinearLayout>

5.3 重写PagerAdapter中的getTitle()方法

注意!

    @Override
    public CharSequence getPageTitle(int position) // PagerTitleStrip 的标题就是从这里取到的
    {
        return mData.get(position);
    }

这两种方法作为了解，不常用，项目中还没用到过

效果:

android.support.v4.view.PagerTitleStrip

1.gif

android.support.v4.view.PagerTabStrip

2.gif

码云:

https://gitee.com/giraffer/ViewPager002

三、与Fragment结合使用

与Fragment结合使用其实也一样，只是用Fragment代替原先的View，填充Viewpager；然后就是Adapter不一样，配合Fragment使用的有两个Adapter：FragmentPagerAdapter和FragmentStatePagerAdapter。

相同点：

FragmentPagerAdapter和FragmentStatePagerAdapter都继承自PagerAdapter

不同点：

卸载不再需fragment时，各自采用的处理方法有所不同

FragmentStatePagerAdapter会销毁不需要的fragment。事务提交后， activity的FragmentManager中的fragment会被彻底移除。 FragmentStatePagerAdapter类名中的“state”表明：在销毁fragment时，可在onSaveInstanceState(Bundle)方法中保存fragment的Bundle信息。用户切换回来时，保存的实例状态可用来恢复生成新的fragment

FragmentPagerAdapter有不同的做法。对于不再需要的fragment， FragmentPagerAdapter会选择调用事务的detach(Fragment)方法来处理它，而非remove(Fragment)方法。也就是说， FragmentPagerAdapter只是销毁了fragment的视图， fragment实例还保留在FragmentManager中。因此，FragmentPagerAdapter创建的fragment永远不会被销毁

也就是：在destroyItem()方法中，FragmentStatePagerAdapter调用的是remove()方法，适用于页面较多的情况；FragmentPagerAdapter调用的是detach()方法，适用于页面较少的情况。但是有页面数据需要刷新的情况，不管是页面少还是多，还是要用FragmentStatePagerAdapter，否则页面会因为没有重建得不到刷新

1. 创建Fragment

package com.lid.viewpager.main.fragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.lid.viewpager.R;

public class PagerFragment extends Fragment {
    String mContent;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) // 在 PagerFragment 被Android系统创建的时候,回调此函数.
    {

        View view = inflater.inflate(R.layout.pager_fragment, container, false); // 装载 pager_fragment.xml

        TextView textView = view.findViewById(R.id.pager_fragment_textview); // 获取 TextView
        mContent = (String) getArguments().get("content"); // 取出 String (字符串)
        textView.setText(mContent); // 让 TextView 显示,刚刚取到的String
        return view;
    }
}

2.创建Fragment对应的pager_fragment.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">

    <Button
        android:id="@+id/pager_fragment_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/pager_fragment_button" />

    <TextView
        android:id="@+id/pager_fragment_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/hello" />

</LinearLayout>

3.为Viewpager设置数据和适配器

package com.lid.viewpager.main;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.lid.viewpager.R;
import com.lid.viewpager.main.fragment.PagerFragment;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

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

        setVp();
    }

    private void setVp() // 配置 ViewPager
    {

        final List<PagerFragment> list = new ArrayList<>(); // 创建一个可以盛放 PagerFragment 的 List

        for (int i = 0; i < 5; i++) // 创建五个PagerFragment塞进List
        {

            PagerFragment fragment = new PagerFragment();

            Bundle bundle = new Bundle();
            bundle.putString("content", "第" + i + "个Fragment"); // 给PagerFragment加点料,用Bundle传递个String给新创建的PagerFragment  让五个PagerFragment区分开来

            fragment.setArguments(bundle);
            list.add(fragment); // 塞进List
        }

        ViewPager vp = findViewById(R.id.view_pager);


        vp.setAdapter(new FragmentStatePagerAdapter(getSupportFragmentManager()) // 这里用的匿名类 FragmentStatePagerAdapter
        {

            @Override
            public Fragment getItem(int position) // 按照 position 从 List 中依次取出 PagerFragment
            {
                return list.get(position);
            }

            @Override
            public int getCount() // 返回 List 中 PagerFragment 的总数
            {
                return list.size();
            }

        });
    }
}

效果:

1.gif

码云:

https://gitee.com/giraffer/ViewPager003

最后编辑于：2018.12.09 18:56:17

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 158,233评论 4赞 360
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,013评论 1赞 291
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,030评论 0赞 241
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,827评论 0赞 204
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,221评论 3赞 286
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,542评论 1赞 216
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,814评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,513评论 0赞 198
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,225评论 1赞 241
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,497评论 2赞 244
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 31,998评论 1赞 258
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,342评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 32,986评论 3赞 235
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,055评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,812评论 0赞 194
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,560评论 2赞 271
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,461评论 2赞 266

ViewPager 全面总结

一、简介

二、基本使用

1. xml引用

2. page布局

3. 创建适配器

4. 设置适配器

效果：

码云:

5. 标题栏

5.2 PagerTitleStrip

5.3 PagerTabStrip

5.3 重写PagerAdapter中的getTitle()方法

注意!

效果:

码云:

三、与Fragment结合使用

相同点：

不同点：

1. 创建Fragment

2.创建Fragment对应的pager_fragment.xml

效果:

码云:

推荐阅读更多精彩内容