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

最新推荐文章于 2024-09-22 02:33:28 发布

你的故事丶

最新推荐文章于 2024-09-22 02:33:28 发布

阅读量2k

点赞数 2

分类专栏： Android 文章标签： Android 底部导航栏

本文链接：https://blog.csdn.net/qq_39055743/article/details/81842190

版权

Android 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文将展示实现底部导航栏的第二种实现方法,第一种方法链接：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时可能会发生滑动冲突。

优化：

底部按钮的样式可以进行优化：

思路：不在java代码中更换图标选中和未选中的样式，而是通过xml文件直接设置好图片的各种样式。

在drawable文件夹下新建->drawable resource file ->drawable_home.xml

drawable_home.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--设置选中和未选中的图片,代码中根据setChecked来选择状态-->
    <item android:drawable="@drawable/homea" android:state_checked="true" />
    <item android:drawable="@drawable/homeb" />
</selector>

在此可以设置item选中时样式、触碰时的样式、默认的样式等等

注意：<item android:drawable="@drawable/homeb" /> 代码必须放在最后一行，它表示默认图标，而图标的选择是按顺序从上到下来的，即默认图标找到之后其他图标样式就不会再看了。

建好后就可以直接删掉java代码中更换按钮图片的相关代码了，同样的方法也适用于文字。