Android底部导航的实现 BottomNavigationView+Fragment

效果演示

获取代码

步骤一：

注入依赖com.google.android.material:material:1.2.1

步骤二：

在res资源文件夹下新建一个menu文件夹，创建底部导航的菜单

• 根据情况创建对应数量的item标签
• 为item创建id、icon和title属性
  • icon是底部导航所要显示的图标
  • title是底部导航图标下面的文字

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:id="@+id/nav_home"
    android:title="HOME"
    android:icon="@drawable/home"/>
<item
    android:id="@+id/nav_message"
    android:title="MESSAGE"
    android:icon="@drawable/message"/>
<item
    android:id="@+id/nav_me"
    android:title="ME"
    android:icon="@drawable/me"/>
    <item
        android:id="@+id/nav_test"
        android:title="TEST"
        android:icon="@drawable/me"/>
</menu>

步骤三：

• 在布局页面引入com.google.android.material.bottomnavigation.BottomNavigationView控件
• 关于控件的属性
  • app:labelVisibilityMode="labeled"取消定义三个以上按钮文字不显示的效果
  • app:itemBackground="@null" 取消水波纹的效果
  • app:itemIconTint设置图标的颜色
  • app:itemTextColor设置字体的颜色
  • app:menu="@menu/bottom_nav_menu"将menu引入

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

    <RelativeLayout
        android:id="@+id/main_con"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="60dp" />


    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#FFFFFF"
        app:menu="@menu/bottom_nav_menu"
        app:labelVisibilityMode="labeled"
        app:itemBackground="@null"
        android:layout_alignParentBottom="true"/>

</RelativeLayout>

tips：

按钮自带点击颜色变换的效果和 color文件中的colorPrimary保持一致，如果想改变点击后的颜色变换需要自定义selector文件，然后在控件中使用app:itemIconTint、 app:itemTextColor进行设置

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#FF0000"/>
<item android:state_checked="false" android:color="#8E8E8E"/>
</selector>

app:itemIconTint="@drawable/nav_selector"
app:itemTextColor="@drawable/nav_selector"

步骤四：

• 创建所需要的fragment并创建对应的fragment类
• 在fragment类中重写onCreateView方法，返回对应的布局视图

public class MessageFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.message_fragment,container,false);
        return view;
    }
}

步骤五：

• 获取对应的布局和控件
• 创建一个存放fragment的集合
• 创建一个碎片管理类并开启一个事务
• 使用碎片事务类中的add()方法将碎片添加到活动当中并使用commit()提交事务
• 使用碎片事务类中的replace()方法将对应的碎片进行显示
• 对底部导航控件进行事件监听：setOnNavigationItemSelectedListener对MenuItme编号的switch判断，使用碎片事务类中的show()和hide()方法对碎片进行替换 最好使用show()和hide()方法

public class MainActivity extends AppCompatActivity {

    List<Fragment> fragmentList = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获取底部导航
        BottomNavigationView bottomNavigationView = findViewById(R.id.nav);
        /*
        * 建立存储碎片的集合
        * 将所有的碎片放到集合当中
        * 获取FragmentManager通过getSupportFragmentManager获得
        * 添加提交
        * */
        fragmentList.add(new HomeFragment());
        fragmentList.add(new MessageFragment());
        fragmentList.add(new MeFragment());
        fragmentList.add(new TestFragment());

        final FragmentManager fragmentManager = getSupportFragmentManager();
        fragmentManager.beginTransaction()
                .add(R.id.main_con,fragmentList.get(0),"HOME")
                .add(R.id.main_con,fragmentList.get(1),"MESSAGE")
                .add(R.id.main_con,fragmentList.get(2),"ME")
                .add(R.id.main_con,fragmentList.get(3),"TEST")
                .commit();
        fragmentManager.beginTransaction()
                .hide(fragmentList.get(1))
                .hide(fragmentList.get(2))
                .commit();
        /*fragmentManager.beginTransaction()
                .replace(R.id.main_con,fragmentList.get(0))
                .commit();*/

        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.nav_home:
                        fragmentManager.beginTransaction()
                                .hide(fragmentList.get(1))
                                .hide(fragmentList.get(2))
                                .hide(fragmentList.get(3))
                                .show(fragmentList.get(0))
                                .commit();
                        /*fragmentManager.beginTransaction()
                                .replace(R.id.main_con,fragmentList.get(0))
                                .commit();*/
                        return true;
                    case R.id.nav_message:
                        fragmentManager.beginTransaction()
                                .hide(fragmentList.get(2))
                                .hide(fragmentList.get(3))
                                .hide(fragmentList.get(0))
                                .show(fragmentList.get(1))
                                .commit();
                        /*fragmentManager.beginTransaction()
                                .replace(R.id.main_con,fragmentList.get(1))
                                .commit();*/
                        return true;
                    case R.id.nav_me:
                        fragmentManager.beginTransaction()
                        	    .hide(fragmentList.get(3))
                                .hide(fragmentList.get(1))
                                .hide(fragmentList.get(0))
                                .show(fragmentList.get(2))
                                .commit();
                        /*fragmentManager.beginTransaction()
                                .replace(R.id.main_con,fragmentList.get(2))
                                .commit();*/
                        return true;

                    case R.id.nav_test:
                    	 fragmentManager.beginTransaction()
                                .hide(fragmentList.get(1))
                                .hide(fragmentList.get(0))
                                .hide(fragmentList.get(2))
                                .show(fragmentList.get(3))
                                .commit();
                       /* fragmentManager.beginTransaction()
                                .replace(R.id.main_con,fragmentList.get(3))
                                .commit();*/
                        return true;
                }
                return false;
            }
        });
    }
}

本文或有不足之处，请大家及时指正！