ANDROID BottomNavigationBar底部導航欄的實現(xiàn)示例
更新時間：2017年10月23日 09:02:22 作者：張瑾瑜
本篇文章主要介紹了ANDROID BottomNavigationBar底部導航欄的實現(xiàn)示例，非常具有實用價值，需要的朋友可以參考下
第一種介紹的就是使用開源庫，因為使用開源庫最簡單，也更加的符合我們的審美標準，同時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屬性中的內(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,"關注").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
- 在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：如果設置的Mode為MODE_FIXED，將使用BACKGROUND_STYLE_STATIC 。如果Mode為MODE_SHIFTING將使用BACKGROUND_STYLE_RIPPLE。
BACKGROUND_STYLE_STATIC：點擊的時候沒有水波紋效果
BACKGROUND_STYLE_RIPPLE：點擊的時候有水波紋效果
2.初始化導航條條目
需要幾個就添加幾個，包含圖片和圖片下方代表的文字以及設定被選中時產(chǎn)生效果的顏色。
復制代碼 代碼如下:
mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.icon_index,"首頁").setActiveColorResource(R.color.red))；
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的條目設置上
復制代碼 代碼如下:
mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.icon_love,"關注").setActiveColorResource(R.color.yellow).setBadgeItem(badgeItem))；
4.初始化Fragment
在activity_main.xml當中有一個FrameLayout，這個需要當導航條條目發(fā)生改變時，對應著發(fā)生改變。
setDefaultFragment()：當活動打開時，事先顯示哪個fragment
FragmentManager fm = getSupportFragmentManager();
FragmentTransaction transaction = fm.beginTransaction();
indexFragment = new IndexFragment();
transaction.replace(R.id.fragment_container, indexFragment);
transaction.commit();
下面則為下面的導航條目綁定監(jiān)聽事件
mBottomNavigationBar.setTabSelectedListener(this);
onTabSelected():當選中的導航條目發(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;
}
// 事務提交
transaction.commit();
總結
代碼和解析都在上方，初學者一定要仔細的使用，方能很好的掌握。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Android編程實現(xiàn)簡單設置按鈕顏色的方法,涉及Android控件布局與屬性設置相關操作技巧,需要的朋友可以參考下2017-03-03
Android?ContentObserver?監(jiān)聽短信思路詳解
ContentObserver允許在Android中監(jiān)控特定數(shù)據(jù)的變化,可用于短信等應用的數(shù)據(jù)監(jiān)聽,開發(fā)者可通過繼承ContentObserver并實現(xiàn)onChange方法來定義當目標內(nèi)容變化時的響應行為,感興趣的朋友一起看看吧2024-09-09
Android Studio配置(Android Studio4.1為例)
這篇文章主要介紹了Android Studio配置(Android Studio4.1為例),文中通過圖文介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
View 的繪制是在 ViewRoot 的 performTraversals() 開始的，它歷經(jīng) measure(測量), layout(布局), draw(繪制) 三個流程將 View 顯示在屏幕上。2021-05-05
Android程序有很多Activity，比如說主窗口A，調(diào)用了子窗口B，如果在B中直接finish(), 接下里顯示的是A。在B中如何關閉整個Android應用程序呢?本人總結了幾種比較簡單的實現(xiàn)方法2016-02-02
這篇文章主要介紹了Retrofit之OKHttpCall源碼分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
android 在linux下刷機，我們只需要下載相應的zip包，然后一條命令就可以完成，本文給大家介紹的非常詳細，感興趣的朋友一起看看吧2016-09-09
這篇文章主要為大家介紹了Android開發(fā)島嶼數(shù)量算法示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要為大家介紹了Android中WebView這一控件的基礎應用，例如：播放音樂，播放視頻等，文中的示例代碼講解詳細，對于我們了解WebView很有幫助，需要的同學可以學習一下2021-12-12
詳解如何在Android Studio中添加RecyclerView-v7支持包
本篇文章主要介紹了詳解如何在Android Studio中添加RecyclerView-v7支持包，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-02-02