1、导入依赖包
implementation 'com.android.support:design:28.0.0'
2、编写布局
activity_main.xml代码：
此处特别注意设置app:labelVisibilityMode="labeled"，
不然底部标题不会显示
image.png
设置后效果图：
image.png
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="@+id/include_toolbar"
layout="@layout/toolbar" />
<!--<include layout="@layout/container" />-->
<android.support.v4.view.ViewPager
android:id="@+id/vp_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toTopOf="@+id/bottom_navigation"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
</android.support.v4.view.ViewPager>
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_navigation"
style="@style/Widget.Design.BottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:background="@color/c_F5F5F5"
app:elevation="16dp"
app:itemTextColor="@color/selector_tab_color"
app:labelVisibilityMode="labeled"
app:layout_behavior="com.hzy.wanandroid.widget.behavior.BottomNavigationBehavior"
app:menu="@menu/bottom_navigation_main" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
bottom_navigation_main.xml 代码：
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_home"
android:enabled="true"
android:icon="@drawable/bt_tab_one_selector"
android:title="首页"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_project"
android:enabled="true"
android:icon="@drawable/bt_tab_two_selector"
android:title="项目"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_system"
android:enabled="true"
android:icon="@drawable/bt_tab_three_selector"
android:title="体系"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_navi"
android:enabled="true"
android:icon="@drawable/bt_tab_four_selector"
android:title="导航"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_pub"
android:enabled="true"
android:icon="@drawable/bt_tab_five_selector"
android:title="公众号"
app:showAsAction="ifRoom" />
</menu>
bt_tab_one_selector.xml 代码：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--选中时的图片背景-->
<item android:state_selected="true" android:drawable="@drawable/hy_b" />
<item android:state_checked="true" android:drawable="@drawable/hy_b" />
<item android:drawable="@drawable/hy_a"></item>
</selector>
3、代码设置
①、除去自带效果,此处设置主要用于selector文件内不同图片的颜色改变，不按照系统给的颜色去变化。
mBtNavi.setItemIconTintList(null);//除去自带效果
②、BottomNavigationView设置ViewPagerAdapter
mViewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(), fragments);
mVpMain.setAdapter(mViewPagerAdapter);
mVpMain.setOffscreenPageLimit(4);
ViewPagerAdapter 代码：
package com.hzy.wanandroid.adapter;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.PagerAdapter;
import java.util.ArrayList;
import java.util.List;
public class ViewPagerAdapter extends FragmentPagerAdapter {
private List<Fragment> mFragments;
private List<String> listTitle = new ArrayList<>();
public ViewPagerAdapter(FragmentManager fm, List<Fragment> mFragments) {
super(fm);
this.mFragments = mFragments;
}
public ViewPagerAdapter(FragmentManager fm, List<Fragment> mFragments, List<String> listTitle) {
super(fm);
this.mFragments = mFragments;
this.listTitle = listTitle;
}
@Override
public Fragment getItem(int position) {
return mFragments.get(position);
}
@Override
public int getCount() {
return mFragments.size();
}
@Override
public CharSequence getPageTitle(int position) {
return listTitle.get(position);
}
@Override
public int getItemPosition(Object object) {
return PagerAdapter.POSITION_NONE;
}
public void recreateItems(List<Fragment> fragmentList, List<String> titleList) {
this.mFragments = fragmentList;
this.listTitle = titleList;
notifyDataSetChanged();
}
}
③、设置页面滑动和底部点击关联
private void initListener() {
mBtNavi.setOnNavigationItemSelectedListener(item -> {
switch (item.getItemId()) {
case R.id.action_home:
NaviTab(0);
break;
case R.id.action_project:
NaviTab(1);
break;
case R.id.action_system:
NaviTab(2);
break;
case R.id.action_navi:
NaviTab(3);
break;
case R.id.action_pub:
NaviTab(4);
break;
}
return true;
});
mVpMain.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
mBtNavi.getMenu().getItem(position).setChecked(true);
toolbar.setTitle(mTitleStrs[position]);
//写滑动页面后做的事，使每一个fragmen与一个page相对应
}
@Override
public void onPageScrollStateChanged(int i) {
}
});
}
/**
* 点击Navigation切换Tab
*
* @param position
*/
private void NaviTab(int position) {
mVpMain.setCurrentItem(position);
toolbar.setTitle(mTitleStrs[position]);
}
总结，整体要注意：
在activity_main.xml代码内：
app:labelVisibilityMode="labeled"
和MainActivity内
mBtNavi.setItemIconTintList(null);//除去自带效果，在xml内设置无效。
参考文章：
https://blog.csdn.net/xyx2999/article/details/82839197
https://blog.csdn.net/qq_24577109/article/details/83505354
网友评论