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<Fragment> 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