Material Design 下实现 Bottom Navigation+ViewPager 的联动效果

在现代 Web 设计中，Material Design 成为了许多 UI 设计师的首选。Bottom Navigation+ViewPager 联动效果则成为了使用 Material Design 的前端开发者们常用的设计模式之一。它可以在底部导航栏和页面视图之间更好地实现交互和导航。本文将介绍如何使用 Material Design 实现 Bottom Navigation+ViewPager 的联动效果。

什么是 Bottom Navigation+ViewPager 联动效果？

Bottom Navigation+ViewPager 联动效果是指，向用户显示一行底部导航，以便快速导航站点的不同部分。当用户选择不同的底部导航标签时，设置与其对应的 ViewPager 将显示关联页面的内容。同时，ViewPager 在滑动时，底部导航栏也会跟随相应的移动。

底部导航的实现通常通过编写布局 XML 文件并将底部导航小部件引入布局文件，进而设置为固定的底部视图。ViewPager 是一个支持无限滑动的 UI 控件。使用 ViewPager 来实现底部导航栏可以帮助我们动态地在同一页面上切换不同的子视图和页面。

如何实现 Bottom Navigation+ViewPager 联动效果？

让我们来一步一步地看看如何实现 Bottom Navigation+ViewPager 联动效果。下面是实现步骤：

1. 创建一个 XML 布局文件，其中包含一个 ViewPager 和一个 BottomNavigationView。

<androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

1. 在你的活动 / 片段中定义 BottomNavigationView 和 ViewPager。

private BottomNavigationView bottomNavigationView;
private ViewPager viewPager;

1. 实例化 BottomNavigationView 和 ViewPager，以及适配器和视图列表。

bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation_view);
viewPager = (ViewPager) findViewById(R.id.view_pager);
BottomNavigationAdapter adapter = new BottomNavigationAdapter(getSupportFragmentManager());
List<Fragment> fragmentList = new ArrayList<>();
fragmentList.add(new Fragment1());
fragmentList.add(new Fragment2());
fragmentList.add(new Fragment3());
adapter.setFragmentList(fragmentList);
viewPager.setAdapter(adapter);

1. 将适配器分配给 ViewPager。

viewPager.setAdapter(adapter);

1. 使用 addOnPageChangeListener() 方法来设置与 ViewPager 线性布局关联的 BottomNavigationView。

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }

    @Override
    public void onPageSelected(int position) {
        bottomNavigationView.getMenu().getItem(position).setChecked(true);
    }

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

1. 为 BottomNavigationView 的菜单项设置监听器，并将它们与 ViewPager 上相应的页面关联起来。

bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.item1:
                viewPager.setCurrentItem(0);
                break;
            case R.id.item2:
                viewPager.setCurrentItem(1);
                break;
            case R.id.item3:
                viewPager.setCurrentItem(2);
                break;
        }
        return false;
    }
});

1. 在适配器中实例化注册的 Fragment。

public class BottomNavigationAdapter extends FragmentPagerAdapter {
    private List<Fragment> fragmentList;

    public void setFragmentList(List<Fragment> fragmentList) {
        this.fragmentList = fragmentList;
    }

    public BottomNavigationAdapter(FragmentManager fragmentManager) {
        super(fragmentManager);
    }

    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }

    @Override
    public int getCount() {
        return fragmentList.size();
    }
}

到此，我们已经完成了 Bottom Navigation+ViewPager 的联动效果的实现。我们已经实现了一个与底部导航栏和页面视图之间的动态交互，让用户可以更方便地使用应用程序。

总结

本文详细介绍了如何使用 Material Design 实现 Bottom Navigation+ViewPager 的联动效果。可以发现，它是一种非常有用的技术，以实现现代 Web 设计，使用户更便利地了解和浏览站点的不同部分。通过对这种技术的深入学习，你可以更好地了解现代 UI 设计，从而提高你的设计和开发技能。希望这篇文章对你们有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6594149deb4cecbf2d8a6622