带有ViewPager2的选项卡布局介绍

简介

选项卡布局是Android开发中常见的UI组件，常用于切换不同的界面或功能。ViewPager2是AndroidX中新增的ViewPager组件，其具有更高的性能和更强的灵活性。本文将介绍如何结合ViewPager2使用选项卡布局。

实现步骤

1. 在布局文件中添加TabLayout和ViewPager2组件。TabLayout用于显示选项卡，ViewPager2用于显示不同的页面。

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
 
<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

2. 在Activity或Fragment中获取TabLayout和ViewPager2实例，并为ViewPager2设置适配器。

// 获取TabLayout和ViewPager2实例
TabLayout tabLayout = findViewById(R.id.tabLayout);
ViewPager2 viewPager = findViewById(R.id.viewPager);
 
// 为ViewPager2设置适配器
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager(), getLifecycle());
viewPager.setAdapter(adapter);
 
// 将TabLayout和ViewPager2连接起来
new TabLayoutMediator(tabLayout, viewPager,
    (tab, position) -> tab.setText("Tab " + (position + 1))
).attach();

3. 编写适配器。适配器负责为ViewPager2提供不同的页面。

public class ViewPagerAdapter extends FragmentStateAdapter {
 
    public ViewPagerAdapter(@NonNull FragmentManager fragmentManager,
            @NonNull Lifecycle lifecycle) {
        super(fragmentManager, lifecycle);
    }
 
    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return new MyFragment();
    }
 
    @Override
    public int getItemCount() {
        return 5;
    }
}

4. 编写页面Fragment。每个页面都需要一个对应的Fragment。

public class MyFragment extends Fragment {
 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View root = inflater.inflate(R.layout.fragment_my, container, false);
        // TODO: 在这里编写页面UI逻辑
        return root;
    }
}

示例代码

完整的示例代码请参考GitHub。

总结

通过结合ViewPager2使用选项卡布局，可以实现更加灵活高效的界面切换效果。在实际开发中，可以根据需求结合其他控件和特效来进一步优化用户体验。

代码片段

public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // 获取TabLayout和ViewPager2实例
        TabLayout tabLayout = findViewById(R.id.tabLayout);
        ViewPager2 viewPager = findViewById(R.id.viewPager);
 
        // 为ViewPager2设置适配器
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager(), getLifecycle());
        viewPager.setAdapter(adapter);
 
        // 将TabLayout和ViewPager2连接起来
        new TabLayoutMediator(tabLayout, viewPager,
            (tab, position) -> tab.setText("Tab " + (position + 1))
        ).attach();
    }
 
    public static class ViewPagerAdapter extends FragmentStateAdapter {
 
        public ViewPagerAdapter(@NonNull FragmentManager fragmentManager,
                @NonNull Lifecycle lifecycle) {
            super(fragmentManager, lifecycle);
        }
 
        @NonNull
        @Override
        public Fragment createFragment(int position) {
            return new MyFragment();
        }
 
        @Override
        public int getItemCount() {
            return 5;
        }
    }
 
    public static class MyFragment extends Fragment {
 
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            View root = inflater.inflate(R.layout.fragment_my, container, false);
            // TODO: 在这里编写页面UI逻辑
            return root;
        }
    }
}