【Android】 ViewPager2+Tablayout实现滑动分页

喜欢ヅ旅行 2023-07-06 08:45 92阅读 0赞

#### 前言 ####

ViewPager2是ViewPager的一个升级版，如果我们想要在项目中联动使用，我们需要导入如下依赖

> implementation ‘androidx.viewpager2:viewpager2:1.0.0-alpha01’  
> implementation “com.google.android.material:material:1.1.0-beta01”

需要注意的是，viewPager2是AndroidX库下的Widget，所以请从support库过渡到AndroidX库。

#### 创建一个xml布局 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4OTg0MQ_size_16_color_FFFFFF_t_70]

<?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=".activity.settingActivity">
    
        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
    
            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Monday" />
    
            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tuesday" />
    
            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Wednesday" />
        </com.google.android.material.tabs.TabLayout>
    
        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="horizontal" />
    </LinearLayout>

#### 创建一个FragmentStateAdapter ####

public class ScreenSlidePagerAdapter extends FragmentStateAdapter {
        
        private int NUM_PAGES = 3;
        public ScreenSlidePagerAdapter(FragmentActivity fa) {
        
            super(fa);
        }
    
        @Override
        public Fragment createFragment(int position) {
        
    
            switch (position)
            {
        
                case 0:
                    return new OneFragment();
    
                case 1:
                    return new TwoFragment();
    
                default:
                    return new ThreeFragment();
    
            }
        }
    
        @Override
        public int getItemCount() {
        
            return NUM_PAGES;
        }
    }

#### 在Activity中绑定 ####

public class settingActivity extends AppCompatActivity {
        
    
        @BindView(R.id.pager)
        ViewPager2 pager;
    
        @BindView(R.id.tablayout)
        TabLayout tabLayout;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_setting);
            ButterKnife.bind(this);
    
            pager.setAdapter(new ScreenSlidePagerAdapter(this));
            new TabLayoutMediator(tabLayout, pager, true,new TabLayoutMediator.TabConfigurationStrategy(){
        
    
                @Override
                public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
        
                    tab.setText("hello"+position);
                }
            }).attach();
    
        }
    }

上面`@BindView`是`ButterKnife`框架的使用，作用是去除类似于findviewById这类的模板化代码。

经过上面的配置，我们就通过ViewPager2+Tablayout两个组件实现了滑动分页

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4OTg0MQ_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4OTg0MQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200217105421769.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4OTg0MQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4OTg0MQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200217110002717.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4OTg0MQ==,size_16,color_FFFFFF,t_70