ANDROID BottomNavigationBar底部導(dǎo)航欄的實現(xiàn)示例

更新時間：2017年10月23日 09:02:22 作者：張瑾瑜

本篇文章主要介紹了ANDROID BottomNavigationBar底部導(dǎo)航欄的實現(xiàn)示例，非常具有實用價值，需要的朋友可以參考下

第一種介紹的就是使用開源庫，因為使用開源庫最簡單，也更加的符合我們的審美標(biāo)準(zhǔn)，同時BottomNavigationBar還是符合當(dāng)前的Material Design標(biāo)準(zhǔn)的。

效果展示

依賴

compile'com.ashokvarma.android:bottom-navigation-bar:1.2.0'

布局文件

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">

  <FrameLayout
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"/>

  <com.ashokvarma.bottomnavigation.BottomNavigationBar
    android:id="@+id/bottom_navigation_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"/>

</LinearLayout>

對于下面將要使用到四個Fragment里面的布局文件

1.fragment_index.xml
2.fragment_map.xml
3.fragment_love.xml
4.fragment_person.xml

只需要將其中的android:text屬性中的內(nèi)容進行修改以做區(qū)分

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:gravity="center">

  <TextView
    android:text="主頁"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

</LinearLayout>

Java代碼

public class MainActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener {

  BottomNavigationBar mBottomNavigationBar;
  private IndexFragment indexFragment;
  private MapFragment mapFragment;
  private LoveFragment loveFragment;
  private PersonFragment personFragment;
  private BadgeItem badgeItem;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initBadge();
    setDefaultFragment();
    InitNavigationBar();
  }

  private void InitNavigationBar() {
    mBottomNavigationBar = (BottomNavigationBar)findViewById(R.id.bottom_navigation_bar);
    mBottomNavigationBar.setTabSelectedListener(this);
    mBottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING);
    mBottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);
    mBottomNavigationBar
        .addItem(new BottomNavigationItem(R.drawable.icon_index,"首頁").setActiveColorResource(R.color.red))
        .addItem(new BottomNavigationItem(R.drawable.icon_map,"地圖").setActiveColorResource(R.color.blue))
        .addItem(new BottomNavigationItem(R.drawable.icon_love,"關(guān)注").setActiveColorResource(R.color.yellow).setBadgeItem(badgeItem))
        .addItem(new BottomNavigationItem(R.drawable.icon_person,"個人").setActiveColorResource(R.color.green))
        .setFirstSelectedPosition(0)
        .initialise();
  }

  public void initBadge()
  {
    badgeItem = new BadgeItem()
          .setBorderWidth(2)
          .setBorderColor("#ff0000")
          .setBackgroundColor("#ff0000")
          .setGravity(Gravity.RIGHT| Gravity.TOP)
          .setText("2")
          .setTextColor("#ffffff")
          .setAnimationDuration(2000)
          .setHideOnSelect(true);
  }
  private void setDefaultFragment() {
    FragmentManager fm = getSupportFragmentManager();
    FragmentTransaction transaction = fm.beginTransaction();
    indexFragment = new IndexFragment();
    transaction.replace(R.id.fragment_container, indexFragment);
    transaction.commit();
  }

  @Override
  public void onTabSelected(int position) {
    Log.d("onTabSelected", "onTabSelected: " + position);
    FragmentManager fm = getSupportFragmentManager();
    FragmentTransaction transaction = fm.beginTransaction();
    switch (position) {
      case 0:
        if (indexFragment == null) {
          indexFragment = new IndexFragment();
        }
        transaction.replace(R.id.fragment_container, indexFragment);
        break;
      case 1:
        if (mapFragment== null) {
          mapFragment = new MapFragment();
        }
        transaction.replace(R.id.fragment_container, mapFragment);
        break;
      case 2:
        if (loveFragment == null) {
          loveFragment = new LoveFragment();
        }
        transaction.replace(R.id.fragment_container,loveFragment);
        break;
      case 3:
        if (personFragment == null) {
          personFragment = new PersonFragment();
        }
        transaction.replace(R.id.fragment_container,personFragment);
        break;
      default:
        break;
    }
    // 事務(wù)提交
    transaction.commit();
  }

  @Override
  public void onTabUnselected(int position) {
    Log.d("onTabUnselected", "onTabUnselected: " + position);
  }

  @Override
  public void onTabReselected(int position) {
    Log.d("onTabReselected", "onTabReselected: " + position);
  }
}

代碼分析

1.初始化導(dǎo)航條樣式

對于Mode和BackgroundStyle各有3種選擇

Mode

在xml代碼使用android:bnbMode屬性
在Java代碼中使用setMode方法

MODE_DEFAULT：如果Item的個數(shù)<=3就會使用MODE_FIXED模式，否則使用MODE_SHIFTING模式。
MODE_FIXED：填充模式，未選中的Item會顯示文字，沒有換擋動畫。
MODE_SHIFTING：換擋模式，未選中的Item不會顯示文字，選中的會顯示文字。在切換的時候會有一個像換擋的動畫。

BackgroundStyle

在xml代碼使用android:bnbBackgroundStyle屬性
在Java代碼中使用setBackgroundStyle方法

BACKGROUND_STYLE_DEFAULT：如果設(shè)置的Mode為MODE_FIXED，將使用BACKGROUND_STYLE_STATIC 。如果Mode為MODE_SHIFTING將使用BACKGROUND_STYLE_RIPPLE。
BACKGROUND_STYLE_STATIC：點擊的時候沒有水波紋效果
BACKGROUND_STYLE_RIPPLE：點擊的時候有水波紋效果

2.初始化導(dǎo)航條條目

需要幾個就添加幾個，包含圖片和圖片下方代表的文字以及設(shè)定被選中時產(chǎn)生效果的顏色。

復(fù)制代碼代碼如下:

mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.icon_index,"首頁").setActiveColorResource(R.color.red))；

3.初始化Badge

badgeItem = new BadgeItem().setBorderWidth(2)//邊框?qū)挾?
          .setBorderColor("#ff0000")//邊框顏色
          .setBackgroundColor("#ff0000")//背景顏色
          .setGravity(Gravity.RIGHT| Gravity.TOP)//顯示位置
          .setText("2")//顯示文字
          .setTextColor("#ffffff")//文字顏色
          .setAnimationDuration(2000)//漸退、漸出的時間
          .setHideOnSelect(true);//選中時是否消失

然后為特定需要設(shè)置Badge的條目設(shè)置上

復(fù)制代碼代碼如下:

mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.icon_love,"關(guān)注").setActiveColorResource(R.color.yellow).setBadgeItem(badgeItem))；

4.初始化Fragment

在activity_main.xml當(dāng)中有一個FrameLayout，這個需要當(dāng)導(dǎo)航條條目發(fā)生改變時，對應(yīng)著發(fā)生改變。

setDefaultFragment()：當(dāng)活動打開時，事先顯示哪個fragment

FragmentManager fm = getSupportFragmentManager();
    FragmentTransaction transaction = fm.beginTransaction();
    indexFragment = new IndexFragment();
    transaction.replace(R.id.fragment_container, indexFragment);
    transaction.commit();

下面則為下面的導(dǎo)航條目綁定監(jiān)聽事件

mBottomNavigationBar.setTabSelectedListener(this);

onTabSelected():當(dāng)選中的導(dǎo)航條目發(fā)生改變時

FragmentManager fm = getSupportFragmentManager();
    FragmentTransaction transaction = fm.beginTransaction();
    switch (position) {
      case 0:
        if (indexFragment == null) {
          indexFragment = new IndexFragment();
        }
        transaction.replace(R.id.fragment_container, indexFragment);
        break;
      case 1:
        if (mapFragment== null) {
          mapFragment = new MapFragment();
        }
        transaction.replace(R.id.fragment_container, mapFragment);
        break;
      case 2:
        if (loveFragment == null) {
          loveFragment = new LoveFragment();
        }
        transaction.replace(R.id.fragment_container,loveFragment);
        break;
      case 3:
        if (personFragment == null) {
          personFragment = new PersonFragment();
        }
        transaction.replace(R.id.fragment_container,personFragment);
        break;
      default:
        break;
    }
    // 事務(wù)提交
    transaction.commit();

總結(jié)

代碼和解析都在上方，初學(xué)者一定要仔細(xì)的使用，方能很好的掌握。

源碼：BottomBarOne_jb51.rar

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: