Android底部导航的实现 BottomNavigationView+Fragment

  • Post author:
  • Post category:其他



效果演示


在这里插入图片描述



获取代码



步骤一:

注入依赖

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;
            }
        });
    }
}

本文或有不足之处,请大家及时指正!



版权声明:本文为weixin_45728219原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。