目前底部导航栏目前基本上每个App必备的。一般被放到首页的，作为用来显示App整个内容的框架。
1.BottomNavigationBar+ViewPager+Fragment 的实现。
Activity 代码：
public class MainActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener, ViewPager.OnPageChangeListener {
private ViewPager mViewPager;
private BottomNavigationBar mBottomNavigationBar;
private TextBadgeItem mTextBadgeItem; //添加角标
private List<Fragment> mList; //ViewPager的数据源
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main_example_3);
initBottomNavigationBar();
initViewPager();
}
//初始化ViewPager
private void initViewPager() {
mList = new ArrayList<>();
mList.add(BlankFragment.newInstance("首页"));
mList.add(BlankFragment.newInstance("音乐"));
mList.add(BlankFragment.newInstance("电影"));
mList.add(BlankFragment.newInstance("邮箱"));
mViewPager = findViewById(R.id.viewPager);
mViewPager.addOnPageChangeListener(this);
FragmentAdapter fragmentAdapter = new FragmentAdapter(getSupportFragmentManager(), mList);
mViewPager.setAdapter(fragmentAdapter); //视图加载适配器
}
//初始化底部导航条
private void initBottomNavigationBar() {
mBottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
mBottomNavigationBar.setTabSelectedListener(this);
mTextBadgeItem = new TextBadgeItem()
.setHideOnSelect(true) //设置被选中时隐藏角标
.setBackgroundColor(Color.RED)
.setText("49");
/**
* 设置模式
* 1、BottomNavigationBar.MODE_DEFAULT 默认
* 如果Item的个数<=3就会使用MODE_FIXED模式，否则使用MODE_SHIFTING模式
*
* 2、BottomNavigationBar.MODE_FIXED 固定大小
* 填充模式，未选中的Item会显示文字，没有换挡动画。
*
* 3、BottomNavigationBar.MODE_SHIFTING 不固定大小
* 换挡模式，未选中的Item不会显示文字，选中的会显示文字。在切换的时候会有一个像换挡的动画
*/
mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
/**
* 设置背景的样式
* 1、BottomNavigationBar.BACKGROUND_STYLE_DEFAULT 默认
* 如果设置的Mode为MODE_FIXED，将使用BACKGROUND_STYLE_STATIC 。
* 如果Mode为MODE_SHIFTING将使用BACKGROUND_STYLE_RIPPLE。
*
* 2、BottomNavigationBar.BACKGROUND_STYLE_STATIC 导航条的背景色是白色，
* 加上setBarBackgroundColor（）可以设置成你所需要的任何背景颜色
* 点击的时候没有水波纹效果
*
* 3、BottomNavigationBar.BACKGROUND_STYLE_RIPPLE 导航条的背景色是你设置的处于选中状态的
* Item的颜色（ActiveColor），也就是setActiveColorResource这个设置的颜色
* 点击的时候有水波纹效果
*/
mBottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
//设置导航条背景颜色
//在BACKGROUND_STYLE_STATIC下，表示整个容器的背景色。
// 而在BACKGROUND_STYLE_RIPPLE下，表示选中Item的图标和文本颜色。默认 Color.WHITE
mBottomNavigationBar.setBarBackgroundColor(R.color.colorPrimaryDark);
//选中时的颜色,在BACKGROUND_STYLE_STATIC下，表示选中Item的图标和文本颜色。
// 而在BACKGROUND_STYLE_RIPPLE下，表示整个容器的背景色。默认Theme's Primary Color
//mBottomNavigationBar.setActiveColor(R.color.black);
//未选中时的颜色，表示未选中Item中的图标和文本颜色。默认为 Color.LTGRAY
//mBottomNavigationBar.setInActiveColor("#FFFFFF");
mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_home_black_24dp, "首页")
.setActiveColorResource(R.color.white))
.addItem(new BottomNavigationItem(R.drawable.ic_audiotrack_black_24dp, "音乐")
.setActiveColorResource(R.color.white))
.addItem(new BottomNavigationItem(R.drawable.ic_desktop_mac_black_24dp, "电影")
.setActiveColorResource(R.color.white).setBadgeItem(mTextBadgeItem))
.addItem(new BottomNavigationItem(R.drawable.ic_mail_outline_black_24dp, "邮件")
.setActiveColorResource(R.color.white))
.setFirstSelectedPosition(0)
.initialise(); //所有的设置需在调用该方法前完成
//如果使用颜色的变化不足以展示一个选项Item的选中与非选中状态，
// 可以使用BottomNavigationItem.setInActiveIcon()方法来设置。
// new BottomNavigationItem(R.drawable.ic_home_black_24dp, "首页")//这里表示选中的图片
// .setInactiveIcon(ContextCompat.getDrawable(this,R.mipmap.ic_launcher));//非选中的图片
}
@Override
public void onTabSelected(int position) {
//tab被选中
mViewPager.setCurrentItem(position);
}
@Override
public void onTabUnselected(int position) {
}
@Override
public void onTabReselected(int position) {
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//ViewPager滑动
mBottomNavigationBar.selectTab(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
Fragment 代码：
public class BlankFragment extends Fragment {
public BlankFragment() {
// Required empty public constructor
Log.e("BlankFragment", "constructor");
}
public static BlankFragment newInstance(String s) {
Bundle args = new Bundle();
args.putString("BlankFragment", s);
BlankFragment fragment = new BlankFragment();
fragment.setArguments(args);
return fragment;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fragment_blank, container, false);
TextView textView = view.findViewById(R.id.tv);
Bundle bundle = getArguments();
String args = bundle.getString("BlankFragment");
textView.setText(args);
Log.e("BlankFragment", "onCreateView");
return view;
}
}
FragmentAdapter 代码：
public class FragmentAdapter extends FragmentPagerAdapter {
private List<Fragment> mFragmentList;
public FragmentAdapter(FragmentManager fm, List<Fragment> mFragmentList) {
super(fm);
this.mFragmentList = mFragmentList;
}
@Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
@Override
public int getCount() {
return mFragmentList.size();
}
}
2.BottomNavigationBar+Fragment 的实现。
Activity代码：
public class MainActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener {
private BottomNavigationBar mBottomNavigationBar;
private BlankFragment mBlankFragment1, mBlankFragment2, mBlankFragment3, mBlankFragment4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main_example_4);
mBottomNavigationBar = findViewById(R.id.bottom_navigation_bar);
//小图标
ShapeBadgeItem shapeBadgeItem = new ShapeBadgeItem()
.setShapeColorResource(R.color.colorPrimary)
.setGravity(Gravity.TOP | Gravity.END)
.setHideOnSelect(false);
//消息小图标
TextBadgeItem textBadgeItem = new TextBadgeItem()
.setBorderWidth(4)
.setBackgroundColorResource(R.color.colorAccent)
.setAnimationDuration(200)
.setText("6")
.setHideOnSelect(false);
mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
// mBottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING);
mBottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
// mBottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);
mBottomNavigationBar.setBarBackgroundColor(android.R.color.holo_blue_light);//set background color for navigation bar
//选中颜色 图标和文字 setActiveColorResource会覆盖setActiveColor设置的效果
mBottomNavigationBar.setActiveColor(R.color.colorAccent);//选中颜色 图标和文字
mBottomNavigationBar.setInActiveColor(android.R.color.white);//unSelected icon color
//设置图片与文字item1
BottomNavigationItem bottomNavigationItem1 = new BottomNavigationItem(R.drawable.ic_add_shopping_cart_black_24dp, "Shop");
// bottomNavigationItem1.setInactiveIcon(ContextCompat.getDrawable(this, R.mipmap.ic_launcher));
bottomNavigationItem1.setBadgeItem(shapeBadgeItem);
//设置图片与文字item2
BottomNavigationItem bottomNavigationItem2 = new BottomNavigationItem(R.drawable.ic_directions_bike_black_24dp, "Riding");
// bottomNavigationItem2.setInactiveIcon(ContextCompat.getDrawable(this, R.mipmap.ic_launcher));
bottomNavigationItem2.setBadgeItem(textBadgeItem);
//设置图片与文字item3
BottomNavigationItem bottomNavigationItem3 = new BottomNavigationItem(R.drawable.ic_filter_vintage_black_24dp, "Flower");
// bottomNavigationItem3.setInactiveIcon(ContextCompat.getDrawable(this, R.mipmap.ic_launcher));
bottomNavigationItem3.setBadgeItem(textBadgeItem);
//设置图片与文字item4
BottomNavigationItem bottomNavigationItem4 = new BottomNavigationItem(R.drawable.ic_notifications_black_24dp, "Notice");
// bottomNavigationItem4.setInactiveIcon(ContextCompat.getDrawable(this, R.mipmap.ic_launcher));
bottomNavigationItem4.setBadgeItem(textBadgeItem);
//添加item
mBottomNavigationBar.addItem(bottomNavigationItem1);
mBottomNavigationBar.addItem(bottomNavigationItem2);
mBottomNavigationBar.addItem(bottomNavigationItem3);
mBottomNavigationBar.addItem(bottomNavigationItem4);
//设置默认选中按钮
mBottomNavigationBar.setFirstSelectedPosition(0);
//所有的设置需在调用该方法前完成
mBottomNavigationBar.initialise();
// mBottomNavigationBar
// .addItem(new BottomNavigationItem(R.drawable.icon_one, R.string.tab_one)/*.setActiveColorResource(R.color.green)*/.setBadgeItem(textBadgeItem))
// .addItem(new BottomNavigationItem(R.drawable.icon_two, R.string.tab_two)/*.setActiveColorResource(R.color.orange)*/)
// .addItem(new BottomNavigationItem(R.drawable.icon_three, R.string.tab_three)/*.setActiveColorResource(R.color.lime)*/)
// .addItem(new BottomNavigationItem(R.drawable.icon_four, R.string.tab_four))
// .setFirstSelectedPosition(0)
// .initialise();
mBottomNavigationBar.setTabSelectedListener(this);
setDefaultFragment();
}
private void setDefaultFragment() {
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
mBlankFragment1 = BlankFragment.newInstance("First Fragment");
mBlankFragment2 = BlankFragment.newInstance("Second Fragment");
mBlankFragment3 = BlankFragment.newInstance("Third Fragment");
mBlankFragment4 = BlankFragment.newInstance("Forth Fragment");
transaction.replace(R.id.frame_layout_content, mBlankFragment1).commit();
}
@Override
public void onTabSelected(int position) {
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
switch (position) {
case 0:
if (mBlankFragment1 == null) {
mBlankFragment1 = BlankFragment.newInstance("First Fragment");
}
transaction.replace(R.id.frame_layout_content, mBlankFragment1);
break;
case 1:
if (mBlankFragment2 == null) {
mBlankFragment2 = BlankFragment.newInstance("Second Fragment");
}
transaction.replace(R.id.frame_layout_content, mBlankFragment2);
break;
case 2:
if (mBlankFragment3 == null) {
mBlankFragment3 = BlankFragment.newInstance("Third Fragment");
}
transaction.replace(R.id.frame_layout_content, mBlankFragment3);
break;
case 3:
if (mBlankFragment4 == null) {
mBlankFragment4 = BlankFragment.newInstance("Forth Fragment");
}
transaction.replace(R.id.frame_layout_content, mBlankFragment4);
break;
}
transaction.commit();
}
@Override
public void onTabUnselected(int position) {
}
@Override
public void onTabReselected(int position) {
}
}
Fragment代码同上。
3.BottomNavigationView+Fragment 的实现。
Activity代码：
public class MainActivity extends AppCompatActivity implements BottomNavigationView.OnNavigationItemSelectedListener {
private BottomNavigationView mBottomNavigationView, mBottomNavigationView1;
private BlankFragment mBlankFragment1, mBlankFragment2, mBlankFragment3;
private FragmentManagerHelper mFragmentManagerHelper;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main_example_2);
mFragmentManagerHelper = new FragmentManagerHelper(getSupportFragmentManager(), R.id.frame_layout_content);
mBottomNavigationView = findViewById(R.id.nav_view);
//设置初始选中项
// BottomNavigationUtils.setItem(mBottomNavigationView, 0);
//设置是否开启平移动画及文字显示方式
BottomNavigationUtils.openAnimation(mBottomNavigationView, false, LABEL_VISIBILITY_AUTO);
mBottomNavigationView.setOnNavigationItemSelectedListener(this);
setDefaultFragment();
//使用代码添加 MenuItem
addItem();
}
private void addItem() {
mBottomNavigationView1 = findViewById(R.id.nav_view1);
Menu menu = mBottomNavigationView1.getMenu();
//均衡分布
menu.setQwertyMode(true);
menu.add(0, 0, 0, "测试零");
menu.add(0, 1, 1, "测试一");
menu.add(0, 2, 2, "测试二");
for (int i = 0; i < 3; i++) {
MenuItem item = menu.findItem(i);
item.setIcon(R.drawable.ic_home_black_24dp);
}
}
private void setDefaultFragment() {
// FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
mBlankFragment1 = BlankFragment.newInstance("First Fragment");
mBlankFragment2 = BlankFragment.newInstance("Second Fragment");
mBlankFragment3 = BlankFragment.newInstance("Third Fragment");
// transaction.replace(R.id.frame_layout_content, mBlankFragment1).commit();
mFragmentManagerHelper.add(mBlankFragment1);
}
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
// FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
int itemId = item.getItemId();
switch (itemId) {
case R.id.navigation_home:
if (mBlankFragment1 == null) {
mBlankFragment1 = BlankFragment.newInstance("First Fragment");
}
// transaction.replace(R.id.frame_layout_content, mBlankFragment1);
mFragmentManagerHelper.switchFragment(mBlankFragment1);
break;
case R.id.navigation_dashboard:
if (mBlankFragment2 == null) {
mBlankFragment2 = BlankFragment.newInstance("Second Fragment");
}
// transaction.replace(R.id.frame_layout_content, mBlankFragment2);
mFragmentManagerHelper.switchFragment(mBlankFragment2);
break;
case R.id.navigation_notifications:
if (mBlankFragment3 == null) {
mBlankFragment3 = BlankFragment.newInstance("Third Fragment");
}
// transaction.replace(R.id.frame_layout_content, mBlankFragment3);
mFragmentManagerHelper.switchFragment(mBlankFragment3);
break;
}
// transaction.commit();
return true;
}
}
Fragment代码同上。