Android常用底部导航栏实现(二)

本文将展示实现底部导航栏的第二种实现方法,第一种方法链接：https://blog.csdn.net/qq_39055743/article/details/81809630

二.BottomNavigationView+ViewPager

与第一种方法不同的是，该方法使用ViewPager作为切换内容的容器。

ViewPager，视图翻页工具。是Android 3.0后引入的一个UI控件，位于v4包中。低版本使用需要导入v4包，现在大多数使用Android studio进行开发，默认导入v7包，v7包含了v4，所以不用导包。

Viewpager使用步骤通过创建adapter给它填充多个view，左右滑动时，切换不同的view。Google官方是建议我们使用Fragment来填充ViewPager的，这样可以更加方便的生成每个Page，以及管理每个Page的生命周期。相较于使用FrameLayout，该控件的优势是能实现左右滑动切换页面的功能，切在实际开发中更常使用到。

ViewPager也常被用作幻灯片的制作，笔者会在以后专门写一篇安卓幻灯片的博客。

实现效果图：

思路：

思路与上一篇文章类似：

1.使用BottomNavigationView制作其底部按钮。

2.在内容区域放上ViewPager，再配置适配器。

3.实现二者的联动。

实现：

1.在主界面activity_main中添加控件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="com.example.lenovo.bottomnavigation.ViewpagerActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bnv_viewpager"/>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bnv_viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/navigation"/>
</RelativeLayout>

2.添加item

在主界面中添加了BottomNavigationView后就要为其设置item项，在item中设置按钮图标和文字

在res目录下新建menu文件夹，在该文件夹下新建menu resource file,命名navigation.xml

navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/homeb"
        android:title="@string/home" />
    <item
        android:id="@+id/navigation_buy"
        android:icon="@drawable/shopb"
        android:title="@string/order" />
    <item
        android:id="@+id/navigation_user"
        android:icon="@drawable/userb"
        android:title="@string/my" />
</menu>

同上篇文章一样，要提前准备6张图片，分别表示按钮的选中和未选中状态，按钮标题提取到strings中

在此都静态设置为未选中状态的图标。

3.创建fragment

在此我们要创建3个不同的fragment

首页：

HeadFragment.java

public class HeadFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        //该View表示该碎片的主界面,最后要返回该view
        View view=inflater.inflate(R.layout.fragment_head,container,false);
        //找到主界面view后，就可以进行UI的操作了。
        //注意：因为主界面现在是view，所以在找寻控件时要用view.findViewById
        TextView textView=view.findViewById(R.id.tv_head);
        //textView.setText("");
        return view;
    }
}

fragment_head.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_head"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="首页"
        android:textSize="30sp" />
</FrameLayout>

再按同样方法创建三个Fragment，这里为了简单起见，只在Fragment界面添加了个TextView

4.设置ViewPager适配器

ViewPagerFragmentAdapter.java

class ViewPagerFragmentAdapter extends FragmentPagerAdapter {

    private Fragment[] fragments;

    public ViewPagerFragmentAdapter(FragmentManager fm,Fragment[] fragments) {
        super(fm);
        this.fragments=fragments;
    }

    @Override
    public Fragment getItem(int position) {
        return fragments[position];
    }

    @Override
    public int getCount() {
        return fragments.length;
    }
}

ViewPager的适配器需要继承FragmentPagerAdapter，其中必须重写两个方法

getItem方法要返回要切换的fragment实例

getCount方法返回的是fragment的总个数

一定要理解适配器这个概念，适配器是和对应控件一起的一种数据配置类。通过重写对应适配器类中的方法，就可以将我们准备的数据相对应的填充到控件中显示出来。

5.MainActivity.java

最后一步，同样的直接上代码：

public class ViewpagerActivity extends AppCompatActivity {


    private BottomNavigationView navigationView;
    private ViewPager viewPager;

    private Fragment[] fragments;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_viewpager);
        //初始化控件
        initView();
        //将各个fragment加入到fragments中
        addFragment();
        //将viewPager和BottomNavigationView的选择事件连接起来
        link();
        //设置viewPager的适配器
        ViewPagerFragmentAdapter adapter = new ViewPagerFragmentAdapter(getSupportFragmentManager(), fragments);
        viewPager.setAdapter(adapter);
        //设置初始的页面项
        navigationView.setSelectedItemId(R.id.navigation_home);
    }

    /**
     * 初始化控件
     */
    private void initView() {
        navigationView = findViewById(R.id.bnv_viewpager);
        viewPager = findViewById(R.id.vp_viewpager);
        //将控件默认的图标隐藏，以显示自定义的按钮图标
        navigationView.setItemIconTintList(null);
    }

    /**
     * 填充fragments
     */
    private void addFragment() {
        fragments = new Fragment[]{
                new HeadFragment(),
                new OrderFragment(),
                new UserFragment()
        };
    }

    /**
     * 将viewPager和BottomNavigationView的事件连接起来
     * 分为两步
     * 1.给viewPager添加监听事件，即viewPager的页面变化时，navigation的选中项跟随变化
     * 2.给navigation添加监听事件，即当navigation的选中项变化时，viewPager的页面跟随变化
     */
    private void link() {
        //给viewPager设置监听事件,使viewPager页面变化时BottomNavigationView的item跟随其变化
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            //以下三个方法是需要重写的父类方法

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                ////当页面滑动,即当前页面滑动时调用
            }

            @Override
            public void onPageSelected(int position) {
                //当viewpager选定(滑动)后调用
                switch (position) {
                    case 0:
                        navigationView.setSelectedItemId(R.id.navigation_home);
                        break;
                    case 1:
                        navigationView.setSelectedItemId(R.id.navigation_buy);
                        break;
                    case 2:
                        navigationView.setSelectedItemId(R.id.navigation_user);
                        break;
                }

            }

            @Override
            public void onPageScrollStateChanged(int state) {
                //当滚动状态发生变化时，比如从滚动变到不滚动时调用
            }
        });

        //配置viewPager的页面随navigation的选中项变化
        navigationView.setOnNavigationItemSelectedListener(
                new BottomNavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                        //每次点击后都将所有图标重置到默认不选中图片
                        resetToDefaultIcon();
                        switch (item.getItemId()) {
                            case R.id.navigation_home:
                                viewPager.setCurrentItem(0);
                                //设置按钮的图标
                                item.setIcon(R.drawable.homea);
                                return true;
                            case R.id.navigation_buy:
                                viewPager.setCurrentItem(1);
                                //设置按钮的图标
                                item.setIcon(R.drawable.shopa);
                                return true;
                            case R.id.navigation_user:
                                viewPager.setCurrentItem(2);
                                //设置按钮的图标
                                item.setIcon(R.drawable.usera);
                                return true;
                        }

                        return false;
                    }
                });
    }

    /**
     * 重置按钮的图片为未选中的图标
     */
    private void resetToDefaultIcon() {
        navigationView.getMenu().findItem(R.id.navigation_home).setIcon(R.drawable.homeb);
        navigationView.getMenu().findItem(R.id.navigation_buy).setIcon(R.drawable.shopb);
        navigationView.getMenu().findItem(R.id.navigation_user).setIcon(R.drawable.userb);
    }

}

代码中的注释都很详细，实现的大概步骤是：

配置好BottomNavigationView和ViewPager-->联系二者

二者的联系又分为：

1.给viewPager添加监听事件，即当viewPager的页面变化时，navigation的选中项跟随变化

2.给navigation添加监听事件，即当navigation的选中项变化时，viewPager的页面跟随变化

完成。

注意：

在使用ViewPager中嵌套ViewPager时可能会发生滑动冲突。