第一種介紹的就是使用開源庫，因為使用開源庫最簡單，也更加的符合我們的審美標準，同時BottomNavigationBar還是符合當前的Material Design標準的。
效果展示
依賴
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屬性中的內容進行修改以做區分
<?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,"關注").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; } // 事務提交 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.初始化導航條樣式
對于Mode和BackgroundStyle各有3種選擇
Mode
MODE_DEFAULT：如果Item的個數<=3就會使用MODE_FIXED模式，否則使用MODE_SHIFTING模式。
MODE_FIXED：填充模式，未選中的Item會顯示文字，沒有換擋動畫。
MODE_SHIFTING：換擋模式，未選中的Item不會顯示文字，選中的會顯示文字。在切換的時候會有一個像換擋的動畫。
BackgroundStyle
BACKGROUND_STYLE_DEFAULT：如果設置的Mode為MODE_FIXED，將使用BACKGROUND_STYLE_STATIC 。如果Mode為MODE_SHIFTING將使用BACKGROUND_STYLE_RIPPLE。
BACKGROUND_STYLE_STATIC：點擊的時候沒有水波紋效果
BACKGROUND_STYLE_RIPPLE：點擊的時候有水波紋效果
2.初始化導航條條目
需要幾個就添加幾個，包含圖片和圖片下方代表的文字以及設定被選中時產生效果的顏色。
3.初始化Badge
badgeItem = new BadgeItem().setBorderWidth(2)//邊框寬度 .setBorderColor("#ff0000")//邊框顏色 .setBackgroundColor("#ff0000")//背景顏色 .setGravity(Gravity.RIGHT| Gravity.TOP)//顯示位置 .setText("2")//顯示文字 .setTextColor("#ffffff")//文字顏色 .setAnimationDuration(2000)//漸退、漸出的時間 .setHideOnSelect(true);//選中時是否消失然后為特定需要設置Badge的條目設置上
4.初始化Fragment
在activity_main.xml當中有一個FrameLayout，這個需要當導航條條目發生改變時，對應著發生改變。
setDefaultFragment()：當活動打開時，事先顯示哪個fragment
FragmentManager fm = getSupportFragmentManager(); FragmentTransaction transaction = fm.beginTransaction(); indexFragment = new IndexFragment(); transaction.replace(R.id.fragment_container, indexFragment); transaction.commit();
下面則為下面的導航條目綁定監聽事件
mBottomNavigationBar.setTabSelectedListener(this);
onTabSelected():當選中的導航條目發生改變時
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; } // 事務提交 transaction.commit();總結
代碼和解析都在上方，初學者一定要仔細的使用，方能很好的掌握。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
