300字范文 > 导航组件—Android应用中使用ViewPager2创建滑动视图

导航组件—Android应用中使用ViewPager2创建滑动视图

时间：2023-05-18 22:47:48

文章目录

一、概述二、使用步骤2.1 步骤一：在Activity或Fragment布局文件中添加ViewPager22.2 步骤二：创建ViewPager2每一个页面的视图Fragment2.3 步骤三：构建适配器（FragmentStateAdapter ）2.4 步骤四：在Activity或Fragment中初始化设置ViewPager22.5 步骤五（进阶）：ViewPager2与BottomNavigationView组合实现底部导航栏滑动视图三、参考资料四、结束语

一、概述

ViewPager2滑动视图允许您通过水平手指手势或滑动在同级屏幕（例如标签页）之间进行导航。此导航模式也称为“水平分页”。

二、使用步骤

2.1 步骤一：在Activity或Fragment布局文件中添加ViewPager2

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

2.2 步骤二：创建ViewPager2每一个页面的视图Fragment

2.3 步骤三：构建适配器（FragmentStateAdapter ）

package com.microdot.demo.adapter;import androidx.annotation.NonNull;import androidx.appcompat.app.AppCompatActivity;import androidx.fragment.app.Fragment;import androidx.viewpager2.adapter.FragmentStateAdapter;import java.util.ArrayList;public class MainFragmentAdapter extends FragmentStateAdapter {private ArrayList<Fragment> mViewPager2FragmentArrayList = new ArrayList<androidx.fragment.app.Fragment>();public MainFragmentAdapter(@NonNull AppCompatActivity appCompatActivity,ArrayList<Fragment> viewPager2FragmentArrayList) {super(appCompatActivity);mViewPager2FragmentArrayList = viewPager2FragmentArrayList;}@NonNull@Overridepublic Fragment createFragment(int position) {return mViewPager2FragmentArrayList.get(position);}@Overridepublic int getItemCount() {return mViewPager2FragmentArrayList.size();}}

2.4 步骤四：在Activity或Fragment中初始化设置ViewPager2

import com.microdot.demo.fragment.main.AddressBookFragment;import com.microdot.demo.fragment.main.HomeFragment;import com.microdot.demo.fragment.main.MessageFragment;import com.microdot.demo.fragment.main.PersonalCenterFragment;import java.util.ArrayList;public class MainActivity extends AppCompatActivity {// 声明ArrayList<Fragment>用于ViewPager2private ArrayList<Fragment> mViewPager2FragmentArrayList = new ArrayList<androidx.fragment.app.Fragment>();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 使用binding视图绑定功能/** 通过视图绑定功能，您可以更轻松地编写可与视图交互的代码。在模块中启用视图绑定之后，系统会为该模块中的每个 XML 布局文件生成一个绑定类。* 绑定类的实例包含对在相应布局中具有 ID 的所有视图的直接引用。* */binding = ActivityMainBinding.inflate(getLayoutInflater());View view = binding.getRoot();setContentView(view);//1.构建①bottomnavigation与②mainactivity中的fragments的交互方式2：// 通过①bottomnavigation点击事件监听器(OnNavigationItemSelectedListener)与②ViewPager2与registerOnPageChangeCallback实现交互// 向ArrayList<Fragment>中添加元素mViewPager2FragmentArrayList.add(new HomeFragment());mViewPager2FragmentArrayList.add(new MessageFragment());mViewPager2FragmentArrayList.add(new AddressBookFragment());mViewPager2FragmentArrayList.add(new PersonalCenterFragment());// 为viewPager2Main设置Adapterbinding.viewPager2Main.setAdapter(new MainFragmentAdapter(this, mViewPager2FragmentArrayList));// viewPager2Main page默认设置为HomeFragmentbinding.viewPager2Main.setCurrentItem(0);}}

本段代码中使用了视图绑定（binding）的功能，如想了解相关内容，请转至：

/weixin_44193930/article/details/121979673

2.5 步骤五（进阶）：ViewPager2与BottomNavigationView组合实现底部导航栏滑动视图

import com.google.android.material.bottomnavigation.BottomNavigationView;import com.microdot.demo.R;import com.microdot.demo.adapter.MainFragmentAdapter;import com.microdot.demo.databinding.ActivityMainBinding;import com.microdot.demo.fragment.main.AddressBookFragment;import com.microdot.demo.fragment.main.HomeFragment;import com.microdot.demo.fragment.main.MessageFragment;import com.microdot.demo.fragment.main.PersonalCenterFragment;import java.util.ArrayList;public class MainActivity extends AppCompatActivity {// 声明TAGprivate static final String TAG = "MainActivity";private static final String TAG_log_d = "MainActivity";// 声明接发消息的包裹对象private Bundle bundle_send_message = new Bundle(); // 声明一个发送消息的包裹对象private Bundle bundle_receive_message = new Bundle(); // 声明一个接收消息的包裹对象// 声明binding用于视图绑定功能private ActivityMainBinding binding;// 声明ArrayList<Fragment>用于ViewPager2private ArrayList<Fragment> mViewPager2FragmentArrayList = new ArrayList<androidx.fragment.app.Fragment>();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 使用binding视图绑定功能/** 通过视图绑定功能，您可以更轻松地编写可与视图交互的代码。在模块中启用视图绑定之后，系统会为该模块中的每个 XML 布局文件生成一个绑定类。* 绑定类的实例包含对在相应布局中具有 ID 的所有视图的直接引用。* */binding = ActivityMainBinding.inflate(getLayoutInflater());View view = binding.getRoot();setContentView(view);//1.构建①bottomnavigation与②mainactivity中的fragments的交互方式2：// 通过①bottomnavigation点击事件监听器(OnNavigationItemSelectedListener)与②ViewPager2与registerOnPageChangeCallback实现交互// 向ArrayList<Fragment>中添加元素mViewPager2FragmentArrayList.add(new HomeFragment());mViewPager2FragmentArrayList.add(new MessageFragment());mViewPager2FragmentArrayList.add(new AddressBookFragment());mViewPager2FragmentArrayList.add(new PersonalCenterFragment());// 为viewPager2Main设置Adapterbinding.viewPager2Main.setAdapter(new MainFragmentAdapter(this, mViewPager2FragmentArrayList));// viewPager2Main page默认设置为HomeFragmentbinding.viewPager2Main.setCurrentItem(0);// 为viewPager2Main设置监听事件registerOnPageChangeCallback，onPageSelected，用于改变bottomNavigationViewMain的SelectedItembinding.viewPager2Main.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {@Overridepublic void onPageSelected(int position) {super.onPageSelected(position);switch (position) {case 0:binding.bottomNavigationViewMain.setSelectedItemId(R.id.item_bottomnav_home);break;case 1:binding.bottomNavigationViewMain.setSelectedItemId(R.id.item_bottomnav_message);break;case 2:binding.bottomNavigationViewMain.setSelectedItemId(R.id.item_bottomnav_addressbook);break;case 3:binding.bottomNavigationViewMain.setSelectedItemId(R.id.item_bottomnav_personalCenter);break;default:break;}}});// 为bottomNavigationViewMain设置监听事件setOnNavigationItemSelectedListener，onNavigationItemSelected，用于改变viewPager2Main的CurrentItembinding.bottomNavigationViewMain.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {@SuppressLint("NonConstantResourceId")@Overridepublic boolean onNavigationItemSelected(@NonNull MenuItem item) {switch (item.getItemId()) {case R.id.item_bottomnav_home:// 点击底部导航home选项的响应事件binding.viewPager2Main.setCurrentItem(0);return true;case R.id.item_bottomnav_message:// 点击底部导航message选项的响应事件binding.viewPager2Main.setCurrentItem(1);return true;case R.id.item_bottomnav_addressbook:// 点击底部导航addressbook选项的响应事件binding.viewPager2Main.setCurrentItem(2);return true;case R.id.item_bottomnav_personalCenter:// 点击底部导航personalCenter选项的响应事件binding.viewPager2Main.setCurrentItem(3);return true;default:break;}return false;}});}}

本段代码中使用了底部导航栏（BottomNavigationView），如想了解相关内容，请转至：

/weixin_44193930/article/details/121977853