Android ViewPager使用

来源：互联网发布：个性化菜单软件编辑：程序博客网时间：2024/06/06 19:17

android ViewPager使用（实现横向分页浏览）

参考：
Creating Swipe Views with Tabs：https://developer.android.com/training/implementing-navigation/lateral.html
FragmentPagerAdapter：https://developer.android.com/reference/android/support/v4/app/FragmentPagerAdapter.html
FragmentStatePagerAdapter：https://developer.android.com/reference/android/support/v4/app/FragmentStatePagerAdapter.html
第十七章-ViewPager切换界面：http://wiki.jikexueyuan.com/project/twenty-four-Scriptures/view-pager.html
使用ViewPager实现屏幕滑动：http://wiki.jikexueyuan.com/project/android-training-geek/screen-slide.html
按钮控制 ViewPager 的左右翻页：http://wiki.jikexueyuan.com/project/android-actual-combat-skills/button-control-viewpager-page-turning.html
使用Tabs创建Swipe视图：http://wiki.jikexueyuan.com/project/android-training-geek/lateral.html

使用 android.support.v4.view.ViewPager 可以实现左右页面切换功能

主要内容

ViewPager 基本介绍
ViewPager + FragmentPagerAdapter + Fragment
ViewPager + FragmentStatePagerAdapter + Fragment
ViewPager + FragmentPagerAdapter + Fragment + TabLayout
完整工程代码链接

`ViewPager` 基本介绍

参考：

ViewPager
Fragment
PagerAdapter
FragmentPagerAdapter
FragmentStatePagerAdapter

ViewPager 是一个布局管理器，允许用户左右切换页面，通常与 Fragment 进行交互，以更方便管理每个页面的生命周期，它需要使用 PagerAdapter 绑定 ViewPager 和 Fragment

FragmentPagerAdapter 和 FragmentStatePagerAdapter 是 PagerAdapter 的子类，每个类都提供了合适的方法

`ViewPager + FragmentPagerAdapter + Fragment`

FragmentViewPager 表示每个页面均为 Fragment，当考虑使用少数静态 Fragment 页面时，使用它，否则，考虑使用 FragmentStatePagerAdapter

FragmentViewPager 是一个抽象类，需要子类继承使用，必须实现 getItem(int) 和 getCount() 方法

activity_main.xml 中放置 ViewPager 以及 4 个按钮

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:padding="8dp"    tools:context="com.zj.viewpagerdemo.view.MainActivity">    <android.support.v4.view.ViewPager        android:id="@+id/view_pager"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_weight="1" />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal">        <Button            android:id="@+id/btn_first"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="first" />        <Button            android:id="@+id/btn_left"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="left" />        <Button            android:id="@+id/btn_right"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="right" />        <Button            android:id="@+id/btn_last"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:text="last" />    </LinearLayout></LinearLayout>

MainAcivity.java 实现 ViewPager 以及按钮，4 个按钮用于左右切换界面，以及直接跳转最开始和最后面的界面

public class MainActivity extends BaseActivity implements MainContract.View, View.OnClickListener {    private static final String TAG = MainActivity.class.getSimpleName();    private ViewPager viewPager;    private Button btnFirst;    private Button btnLeft;    private Button btnRight;    private Button btnLast;    ...    private MainAdapter adapter;    ...     ...    @Override    public void initViews() {        viewPager = (ViewPager) findViewById(R.id.view_pager);        btnFirst = (Button) findViewById(R.id.btn_first);        btnLeft = (Button) findViewById(R.id.btn_left);        btnRight = (Button) findViewById(R.id.btn_right);        btnLast = (Button) findViewById(R.id.btn_last);        adapter = new MainAdapter(getSupportFragmentManager());        viewPager.setAdapter(adapter);        btnFirst.setOnClickListener(this);        btnLeft.setOnClickListener(this);        btnRight.setOnClickListener(this);        btnLast.setOnClickListener(this);    }    ...    ...    @Override    public void onClick(View v) {        int index = viewPager.getCurrentItem();        int maxNUM = 5;        Log.d(TAG, "onClick: index = " + index + " maxNUM = " + maxNUM);        switch (v.getId()) {            case R.id.btn_first:                viewPager.setCurrentItem(0);                break;            case R.id.btn_left:                viewPager.setCurrentItem(index - 1);                break;            case R.id.btn_right:                viewPager.setCurrentItem(index + 1);                break;            case R.id.btn_last:                viewPager.setCurrentItem(maxNUM - 1);                break;        }    }}

MainAdapter 类继承 FragmentPagerAdapter，继承了函数 getItem(int) 以及 getCount（Note：getCount 必须返回正确的页面数）

public class MainAdapter extends FragmentPagerAdapter {    private static final String[] Tabs = {"first", "left", "middle", "right", "last"};    public MainAdapter(FragmentManager fm) {        super(fm);    }    @Override    public Fragment getItem(int position) {        return MainFragment.newInstance(Tabs[position]);    }    @Override    public int getCount() {        return Tabs.length;    }}

MainFragment.java 显示一个文本框，布局文件代码不再展示

public class MainFragment extends Fragment {    private TextView textView;    private String status;    public static MainFragment newInstance(String status) {        MainFragment fragment = new MainFragment();        Bundle bundle = new Bundle();        bundle.putString("status", status);        fragment.setArguments(bundle);        return fragment;    }    @Override    public void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        status = getArguments().getString("status");    }    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {//        return super.onCreateView(inflater, container, savedInstanceState);        View view = LayoutInflater.from(container.getContext()).inflate(R.layout.fragment_main, container, false);        textView = (TextView) view.findViewById(R.id.text_view);        textView.setText("#Fragment: " + status);        return view;    }}

运行画面：

`ViewPager + FragmentStatePagerAdapter + Fragment`

PagerAdapter 的实现之一，同样表示每个页面均为 Fragment，FragmentStatePagerAdapter 同时处理 Fragment 的状态保存和恢复

当需要展示许多个页面时，推荐使用 FragmentStatePagerAdapter。当页面不可见时，整个 Fragment 将被销毁，仅保留其状态

FragmentStatePagerAdapter 是抽象类，需要继承使用，同样需要实现 getItem(int) 和 getCount 方法

将上面的代码中的 FragmentPagerAdapter 改成 FragmentStatePagerAdapter 即可，不再展示代码

`ViewPager + FragmentPagerAdapter + Fragment + TabLayout`

之前使用按钮来对 ViewPager 进行跨页面跳转，使用 TabLayout 可以实现更好更方便的展示

参考： android.support.design.widget.TabLayout

需要添加依赖库：com.android.support:design

在 app->build.gradle 中，加入：

dependencies {    ...    compile 'com.android.support:design:25.3.1'}

Note:当前最新版本

activity_main2.xml 中仅需添加一个 TabLayout 和 ViewPager 即可

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="com.zj.viewpagerdemo.view.Main2Activity">    <android.support.design.widget.TabLayout        android:id="@+id/tab_layout"        android:layout_width="match_parent"        android:layout_height="wrap_content" />    <android.support.v4.view.ViewPager        android:id="@+id/view_pager"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_weight="1" /></LinearLayout>

Main2Activity.java 中需要将 TabLayout 和 ViewPager 进行绑定

public class Main2Activity extends AppCompatActivity implements Main2Contract.View {    private TabLayout tabLayout;    private ViewPager viewPager;    ...    private Main2Adapter adapter;    ...    @Override    public void initViews() {        tabLayout = (TabLayout)findViewById(R.id.tab_layout);        viewPager = (ViewPager)findViewById(R.id.view_pager);        adapter = new Main2Adapter(this, getSupportFragmentManager());        viewPager.setAdapter(adapter);        tabLayout.setupWithViewPager(viewPager);        tabLayout.setTabMode(TabLayout.MODE_FIXED);    }    ...}

Main2Adapter.java 中除了需要继承 getCount 和 getItem(int) ，还需要实现函数 getPageTitle(int)，将每页标题传给 TabLayout

public class Main2Adapter extends FragmentPagerAdapter {    private Context context;    public static String[] Tabs;    public Main2Adapter(Context context, FragmentManager fm) {        super(fm);        this.context = context;        Tabs = context.getResources().getStringArray(R.array.arrays);    }    @Override    public Fragment getItem(int position) {        return MainFragment.newInstance(Tabs[position]);    }    @Override    public int getCount() {        return Tabs.length;    }    @Override    public CharSequence getPageTitle(int position) {//        return super.getPageTitle(position);        return Tabs[position];    }}

Fragment 复用 MainFragment.java，仅显示单个文本

运行画面：