Android底部导航栏的实现（BottomNavigationView），结合ViewPage

最新推荐文章于 2024-05-08 16:15:02 发布

Sean_Word

最新推荐文章于 2024-05-08 16:15:02 发布

阅读量371

点赞数

文章标签： android

本文链接：https://blog.csdn.net/Sean_Word/article/details/134633809

版权

在res文件夹新建 menu菜单

首页底部tab栏用 BottomNavigationView，我们可以创建一个menu文件来给tab栏按钮设置样式。BottomNavigationView 控件引用该menu，来显示底边按钮。

步骤：右键res文件夹 -> New -> Dirctory -> 命名 “menu” -> 右键menu文件夹 -> New -> Menu Resource File.

命名 bottom_nav_menu.xml

在该布局文件中，我设置了标题和图片资源

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

    <item android:id="@+id/word"
        android:icon="@drawable/word"
        android:title="单词"/>
    <item android:id="@+id/study"
        android:icon="@drawable/study_"
        android:title="学习"/>
    <item android:id="@+id/store"
        android:icon="@drawable/store"
        android:title="商城"/>
    <item android:id="@+id/mine"
        android:icon="@drawable/mine"
        android:title="我的"/>
</menu>

主活动的xml文件

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@android:color/white"
        app:labelVisibilityMode="labeled"
        app:menu="@menu/buttom_navigatin_view" />

这一行代码引用类我们刚刚的menu布局文件

app:menu="@menu/buttom_navigatin_view"

主活动完整的xml代码

这里我用了约束布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <androidx.viewpager.widget.ViewPager
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintVertical_weight="1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/bottom_navigation"
        android:id="@+id/viewpager"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@android:color/white"
        app:labelVisibilityMode="labeled"
        app:itemTextColor="@drawable/bottom_navigation"
        app:itemIconTint="@drawable/bottom_navigation"
        app:layout_constraintTop_toBottomOf="@+id/viewpager"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/buttom_navigatin_view" />


</androidx.constraintlayout.widget.ConstraintLayout>

应用

接下来我创建了四个碎片

为ViewPage新建适配器

新建一个ViewPageAdapter，代码如下：

public class ViewPageAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragments;

    public ViewPageAdapter(@NonNull FragmentManager fm, List<Fragment> fragments) {
        super(fm);
        this.fragments = fragments;
    }

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

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

主活动代码

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private BottomNavigationView bottomNavigationView;
    private ViewPageAdapter adapter;
    private List<Fragment> fragments;

    private SearchView searchView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation);

        initUI();
        initWords();
    }

private void initUI(){
        fragments = new ArrayList<>();
        fragments.add(new Fragment_Word());
        fragments.add(new Fragment_Study());
        fragments.add(new Fragment_Store());
        fragments.add(new Fragment_Mine());
        adapter = new ViewPageAdapter(getSupportFragmentManager(),fragments);
        viewPager.setAdapter(adapter);
        viewPager.setOffscreenPageLimit(4);
    }
}

页面，底部按钮双向绑定

光这样还不够，我们还要实现页面和底部按钮的绑定

ViewPage绑定ButtonNavigation代码：

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

            }

            @Override
            public void onPageSelected(int position) {
                switch (position){
                    case 0:
                        bottomNavigationView.setSelectedItemId(R.id.word);
                        break;
                    case 1:
                        bottomNavigationView.setSelectedItemId(R.id.study);
                        break;
                    case 2:
                        bottomNavigationView.setSelectedItemId(R.id.store);
                        break;
                    case 3:
                        bottomNavigationView.setSelectedItemId(R.id.mine);
                        break;
                }
            }

buttonNavigation绑定ViewPage代码：

bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                if (item.getItemId() == R.id.word)
                    viewPager.setCurrentItem(0);
                if (item.getItemId() == R.id.study)
                    viewPager.setCurrentItem(1);
                if (item.getItemId() == R.id.store)
                    viewPager.setCurrentItem(2);
                if (item.getItemId() == R.id.mine)
                    viewPager.setCurrentItem(3);
                return true;
            }
        });

完整的InitUI（）代码如下：

private void initUI(){
        fragments = new ArrayList<>();
        fragments.add(new Fragment_Word());
        fragments.add(new Fragment_Study());
        fragments.add(new Fragment_Store());
        fragments.add(new Fragment_Mine());
        adapter = new ViewPageAdapter(getSupportFragmentManager(),fragments);
        viewPager.setAdapter(adapter);
        viewPager.setOffscreenPageLimit(4);
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                switch (position){
                    case 0:
                        bottomNavigationView.setSelectedItemId(R.id.word);
                        break;
                    case 1:
                        bottomNavigationView.setSelectedItemId(R.id.study);
                        break;
                    case 2:
                        bottomNavigationView.setSelectedItemId(R.id.store);
                        break;
                    case 3:
                        bottomNavigationView.setSelectedItemId(R.id.mine);
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                if (item.getItemId() == R.id.word)
                    viewPager.setCurrentItem(0);
                if (item.getItemId() == R.id.study)
                    viewPager.setCurrentItem(1);
                if (item.getItemId() == R.id.store)
                    viewPager.setCurrentItem(2);
                if (item.getItemId() == R.id.mine)
                    viewPager.setCurrentItem(3);
                return true;
            }
        });
    }

效果图

ButtonNavigation效果图

Sean_Word

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android底部导航栏的实现（BottomNavigationView），结合ViewPage

首页底部tab栏用 BottomNavigationView，我们可以创建一个menu文件来给tab栏按钮设置样式。BottomNavigationView 控件引用该menu，来显示底边按钮。步骤：右键res文件夹 -> New -> Dirctory -> 命名 “menu” -> 右键menu文件夹 -> New -> Menu Resource File.光这样还不够，我们还要实现页面和底部按钮的绑定。这一行代码引用类我们刚刚的menu布局文件。在该布局文件中，我设置了标题和图片资源。
复制链接

扫一扫