第一種介紹的就是使用開源庫，因?yàn)槭褂瞄_源庫最簡單，也更加的符合我們的審美標(biāo)準(zhǔn)，同時(shí)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>
對(duì)于下面將要使用到四個(gè)Fragment里面的布局文件
1.fragment_index.xml
2.fragment_map.xml
3.fragment_love.xml
4.fragment_person.xml
只需要將其中的android:text屬性中的內(nèi)容進(jìn)行修改以做區(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,"個(gè)人").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)航條樣式
對(duì)于Mode和BackgroundStyle各有3種選擇
Mode
MODE_DEFAULT：如果Item的個(gè)數(shù)<=3就會(huì)使用MODE_FIXED模式，否則使用MODE_SHIFTING模式。
MODE_FIXED：填充模式，未選中的Item會(huì)顯示文字，沒有換擋動(dòng)畫。
MODE_SHIFTING：換擋模式，未選中的Item不會(huì)顯示文字，選中的會(huì)顯示文字。在切換的時(shí)候會(huì)有一個(gè)像換擋的動(dòng)畫。
BackgroundStyle
BACKGROUND_STYLE_DEFAULT：如果設(shè)置的Mode為MODE_FIXED，將使用BACKGROUND_STYLE_STATIC 。如果Mode為MODE_SHIFTING將使用BACKGROUND_STYLE_RIPPLE。
BACKGROUND_STYLE_STATIC：點(diǎn)擊的時(shí)候沒有水波紋效果
BACKGROUND_STYLE_RIPPLE：點(diǎn)擊的時(shí)候有水波紋效果
2.初始化導(dǎo)航條條目
需要幾個(gè)就添加幾個(gè)，包含圖片和圖片下方代表的文字以及設(shè)定被選中時(shí)產(chǎn)生效果的顏色。
3.初始化Badge
badgeItem = new BadgeItem().setBorderWidth(2)//邊框?qū)挾? .setBorderColor("#ff0000")//邊框顏色 .setBackgroundColor("#ff0000")//背景顏色 .setGravity(Gravity.RIGHT| Gravity.TOP)//顯示位置 .setText("2")//顯示文字 .setTextColor("#ffffff")//文字顏色 .setAnimationDuration(2000)//漸退、漸出的時(shí)間 .setHideOnSelect(true);//選中時(shí)是否消失然后為特定需要設(shè)置Badge的條目設(shè)置上
4.初始化Fragment
在activity_main.xml當(dāng)中有一個(gè)FrameLayout，這個(gè)需要當(dāng)導(dǎo)航條條目發(fā)生改變時(shí)，對(duì)應(yīng)著發(fā)生改變。
setDefaultFragment()：當(dāng)活動(dòng)打開時(shí)，事先顯示哪個(gè)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ā)生改變時(shí)
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ì)的使用，方能很好的掌握。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
