Android开发(13)：ViewPager2使用

ViewPager2使用

ViewPager2+Fragment

1. gradle添加ViewPager2依赖

   dependencies {
       implementation "androidx.viewpager2:viewpager2:1.0.0"
   }
   

2. layout布局中添加控件

   <androidx.viewpager2.widget.ViewPager2
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:id="@+id/viewPager">
   androidx.viewpager2.widget.ViewPager2>
   

3. 编写自定义MyFragmentPagerAdapter类

   1. 先继承FragmentStateAdapter类
   2. 定义一个字段List fragmentList用于存放实例化的fragment列表，同时在构造方法中初始化
   3. 在createFragment(int position)中返回相应的fragmentList.get(position)
   4. 在getItemCount()中返回fragmentList.size()

4. 编写各个界面Fragment（方便演示仅用一个Fragment多个实例来显示）

   1. 新建一个BlankFragment，AndroidStudio会初始化好模板
   2. 进行修改（获取传入参数并设置到text上

   若不用一个Fragment，该步骤仅需要写好各个Fragment即可

5. Activity中编写

   1. 根据布局ID获取ViewPager2对象
   2. 实例化一个Fragment列表（步骤4中），里面放入实例化好的Fragment
   3. 实例化 自定义Adapter对象
   4. 给ViewPager2对象设置Adapter

到目前的效果便完成了ViewPager2和Fragment的联动

ViewPager2+Fragment+Tab

在上述项目中修改

1. 编写table界面xml，新建4个Tab按钮

   1. 编写drawable背景值，设置选中和非选中颜色改变

2. 将table界面包含进main的布局xml

   <include layout="@layout/layout_table"/>
   

3. 修改Activity

   1. 添加tab的控件，和tab图片的控件对象
   2. 在initTabView()中初始化控件，设置tabs的点击事件（同时切换viewpager），并且设置第一个控件选中
   3. 在initViewPager()中添加viewpager.registerOnPageChangeCallback();
   4. 在onPageSelected(int position)回调方法中调用changeTab(position);方法
   5. 编写changeTab(position)方法

单独ViewPager2

新建一个dviewpager包

1. 新建ShowActivity，布局中添加ViewPager2控件，在OnCreate方法中为其注册Adapter
2. 为ViewPager2新建一个布局layout_viewpager
3. 新建MyViewPagerAdapter类，并在步骤一中注册上去

直接在AndroidManifest.xml中改变Activity入口来查看

代码展示

MainActivity

package com.forgotten.viewpagertest;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager2.widget.ViewPager2;

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

public class MainActivity extends AppCompatActivity {

    // ViewPager2控件对象
    private ViewPager2 viewpager;

    // 设置Tab的控件
    private LinearLayout[] tabs = new LinearLayout[4];

    // Tab的4个图像
    private ImageView[] tabImgs = new ImageView[4];
    // 保存当前tab
    private ImageView currentTab;


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

        // 初始化Tab
        initTabView();

        // 初始化ViewPager
        initViewPager();
    }

    private void initTabView() {
        // 寻找tab控件ID
        tabs[0] = findViewById(R.id.tab_lt);
        tabs[1] = findViewById(R.id.tab_txl);
        tabs[2] = findViewById(R.id.tab_fx);
        tabs[3] = findViewById(R.id.tab_wd);

        // 寻找tab图片控件ID
        tabImgs[0] = findViewById(R.id.iv_tab_lt);
        tabImgs[1] = findViewById(R.id.iv_tab_txl);
        tabImgs[2] = findViewById(R.id.iv_tab_fx);
        tabImgs[3] = findViewById(R.id.iv_tab_wd);

        // 编写一个点击事件监听
        View.OnClickListener listener = new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                switch (view.getId()) {
                    case R.id.tab_lt:
                        // 设置第二个参数可以让其不经过中间页面
                        viewpager.setCurrentItem(0, false);
                        break;
                    case R.id.tab_txl:
                        viewpager.setCurrentItem(1, false);

                        break;
                    case R.id.tab_fx:
                        viewpager.setCurrentItem(2, false);

                        break;
                    case R.id.tab_wd:
                        viewpager.setCurrentItem(3, false);

                        break;
                }
            }
        };

        // 对每个tab进行注册点击事件
        for (LinearLayout tab : tabs) {
            tab.setOnClickListener(listener);
        }

        // 设置当前选中tab（默认选中第一个tab）
        currentTab = tabImgs[0];
        // 设置选中
        currentTab.setSelected(true);

    }

    private void initViewPager() {
        // 获取ID赋值
        viewpager = findViewById(R.id.viewPager);

        List<Fragment> fragments = new ArrayList<>();
        // fragments
        fragments.add(BlankFragment.newInstance("聊天"));
        fragments.add(BlankFragment.newInstance("通讯录"));
        fragments.add(BlankFragment.newInstance("发现"));
        fragments.add(BlankFragment.newInstance("我"));

        // 实例化 自定义Adapter
        MyFragmentPagerAdapter myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), getLifecycle(), fragments);
        // 设置Adapter
        viewpager.setAdapter(myFragmentPagerAdapter);
        viewpager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                super.onPageScrolled(position, positionOffset, positionOffsetPixels);
            }

            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
                changeTab(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                super.onPageScrollStateChanged(state);
            }
        });
    }

    /**
     * 随着pager改变更改tab显示
     *
     * @param position pager下标
     */
    private void changeTab(int position) {
        // 设置当前选中tab为不选中
        currentTab.setSelected(false);
        // 设置新的当前tab
        currentTab = tabImgs[position];
        // 选中当前tab
        currentTab.setSelected(true);
    }
}

更多文件代码请查看AndroidDevelopmentPractice/ViewPagerTest at main · Forgo7ten/AndroidDevelopmentPractice (github.com)，下载即为可运行的AndroidStudio项目源码，欢迎star