效果演示
获取代码
步骤一:
注入依赖
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 版权协议,转载请附上原文出处链接和本声明。