目前底部導航欄目前基本上每個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代碼同上。