底部導航欄使用BottomNavigationBar
阿新 • • 發佈：2018-10-04
rim 默認顏色 ppc 詳解 and 導航 自動 .com stat
1.github地址
https://github.com/zhouxu88/BottomNavigationBar
2.基本使用
2,1添加依賴
implementation ‘com.ashokvarma.android:bottom-navigation-bar:2.0.5‘
2.2布局中使用
<com.ashokvarma.bottomnavigation.BottomNavigationBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/bottom_nav_bar"
android:layout_alignParentBottom="true"
></com.ashokvarma.bottomnavigation.BottomNavigationBar>
2.3代碼中設置
/**
* 導航基礎設置 包括按鈕選中效果 導航欄背景色等
*/
bottomNavigationBar.setTabSelectedListener(this)
.setMode(BottomNavigationBar.MODE_FIXED)
.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC)
.setActiveColor("#ffffff")//選中顏色
.setInActiveColor("#2B2B2B")//未選中顏色
.setBarBackgroundColor("#EDC18E");//導航欄背景色
badgeItem = new TextBadgeItem()
.setBorderWidth(2)
.setTextColor(Color.BLACK)
.setBackgroundColor(Color.RED)
.setText("99");
/**
*添加導航按鈕
*/
bottomNavigationBar.addItem(new BottomNavigationItem(R.mipmap.home,"首頁"))
.addItem(new BottomNavigationItem(R.mipmap.setting,"設置"))
.addItem(new BottomNavigationItem(R.mipmap.menu,"菜單").setInActiveColor("#ffff00"))
.addItem(new BottomNavigationItem(R.mipmap.person,"個人").setBadgeItem(badgeItem))//添加小紅點數據
.initialise();//initialise 一定要放在 所有設置的最後一項
2.4添加監聽
bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {//這裏也可以使用SimpleOnTabSelectedListener
@Override
public void onTabSelected(int position) {//未選中 -> 選中
}
@Override
public void onTabUnselected(int position) {//選中 -> 未選中
}
@Override
public void onTabReselected(int position) {//選中 -> 選中
}
});
3.知識點，用法說明。
3.1設置導航欄模式：setMode（）
setMode() 內的參數有三種模式類型：
MODE_DEFAULT 自動模式：導航欄Item的個數<=3 用 MODE_FIXED 模式，否則用 MODE_SHIFTING 模式
MODE_FIXED 固定模式：未選中的Item顯示文字，無切換動畫效果。
MODE_SHIFTING 切換模式：未選中的Item不顯示文字，選中的顯示文字，有切換動畫效果。
3.2設置導航欄背景模式：setBackgroundStyle（）
setBackgroundStyle() 內的參數有三種樣式 BACKGROUND_STYLE_DEFAULT: 默認樣式 如果設置的Mode為MODE_FIXED，將使用BACKGROUND_STYLE_STATIC，如果Mode為MODE_SHIFTING將使用BACKGROUND_STYLE_RIPPLE。 BACKGROUND_STYLE_STATIC: 靜態樣式 點擊無波紋效果，航條的背景色是白色，加上setBarBackgroundColor（）可以設置成你所需要的任何背景顏色 BACKGROUND_STYLE_RIPPLE: 波紋樣式 點擊有波紋效果，導航條的背景色是你設置的處於選中狀態的 Item的顏色（ActiveColor），也就是setActiveColorResource這個設置的顏色
3.3設置默認顏色
bottomNavigationBar
.setActiveColor("#ff0000") //設置選中的顏色
.setInActiveColor("#FFFFFF")//設置選中的顏色
.setBarBackgroundColor("#000000");//設置bar背景
in-active color:
表示未選中Item中的圖標和文本顏色。默認為 Color.LTGRAY
active color :
在BACKGROUND_STYLE_STATIC下，表示選中Item的圖標和文本顏色。而在BACKGROUND_STYLE_RIPPLE下，表示整個容器的背景色。默認Theme‘s Primary Color
background color :
在BACKGROUND_STYLE_STATIC下，表示整個容器的背景色。而在BACKGROUND_STYLE_RIPPLE下，表示選中Item的圖標和文本顏色。默認 Color.WHITE
3.4定制Item的選中未選中顏色
//設置Item未選中顏色方法 new BottomNavigationItem().setInActiveColorResource(R.color.white)) 或者 new BottomNavigationItem().setInActiveColor() //設置Item選中顏色方法 new BottomNavigationItem().setActiveColorResource()或者 new BottomNavigationItem().setActiveColor()
3.5Icon的定制
如果使用顏色的變化不足以展示一個選項Item的選中與非選中狀態，可以使用BottomNavigationItem.setInActiveIcon()方法來設置。
.addItem(new BottomNavigationItem(R.mipmap.menu,"菜單").setInActiveColor("#ffff00"))
3.6手動隱藏與顯示
bottomNavigationBar.hide();//隱藏 bottomNavigationBar.hide(true);//隱藏是否啟動動畫，這裏並不能自定義動畫 bottomNavigationBar.unHide();//顯示 bottomNavigationBar.hide(true);//隱藏是否啟動動畫，這裏並不能自定義動畫
3.7為Item添加Badge，一般用作消息提醒的
badgeItem = new TextBadgeItem()
.setBorderWidth(2)//Badge的Border(邊界)寬度
.setBorderColor(Color.BLUE)//Badge的Border顏色
.setBackgroundColor(Color.RED)
.setTextColor(Color.BLACK)//文本顏色
.setGravity(Gravity.RIGHT| Gravity.TOP)//位置，默認右上角
.setAnimationDuration(2000)
.setHideOnSelect(true)//當選中狀態時消失，非選中狀態顯示
.setText("99");
shapeBadgeItem=new ShapeBadgeItem()
.setShape(SHAPE_OVAL) //形狀
.setShapeColor(Color.BLUE) //顏色
.setShapeColorResource(R.color.colorPrimaryDark) //顏色，資源文件獲取
.setEdgeMarginInDp(this,0) //距離Item的margin，dp
.setEdgeMarginInPixels(20) //距離Item的margin，px
.setSizeInDp(this,10,10) //寬高，dp
.setSizeInPixels(5,5) //寬高，px
.setAnimationDuration(200) //隱藏和展示的動畫速度，單位毫秒,和setHideOnSelect一起使用
.setGravity(Gravity.LEFT) //位置，默認右上角
.setHideOnSelect(true); //true：當選中狀態時消失，非選中狀態顯示,moren false
4案例
public class MainActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener {
private BottomNavigationBar bottomNavigationBar;
private HomeFragment homeFragment;
private PersonFragment personFragment;
private SettingFragment settingFragment;
private MenuFragment menuFragment;
private FragmentManager fm;
private TextBadgeItem badgeItem;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
bottomNavigationBar=findViewById(R.id.bottom_nav_bar);
fm=getFragmentManager();
initBottomBar();
}
private void initBottomBar() {
/**
* 導航基礎設置 包括按鈕選中效果 導航欄背景色等
*/
bottomNavigationBar.setTabSelectedListener(this)
.setMode(BottomNavigationBar.MODE_FIXED)
.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC)
.setActiveColor("#ffffff")//選中顏色
.setInActiveColor("#2B2B2B")//未選中顏色
.setBarBackgroundColor("#EDC18E");//導航欄背景色
badgeItem = new TextBadgeItem()
.setBorderWidth(2)//Badge的Border(邊界)寬度
.setBorderColor(Color.BLUE)//Badge的Border顏色
.setBackgroundColor(Color.RED)
.setTextColor(Color.BLACK)//文本顏色
.setGravity(Gravity.RIGHT| Gravity.TOP)//位置，默認右上角
.setAnimationDuration(2000)
.setHideOnSelect(true)//當選中狀態時消失，非選中狀態顯示
.setText("99");
/**
*添加導航按鈕
*/
bottomNavigationBar.addItem(new BottomNavigationItem(R.mipmap.home,"首頁"))
.addItem(new BottomNavigationItem(R.mipmap.setting,"設置"))
.addItem(new BottomNavigationItem(R.mipmap.menu,"菜單").setInActiveColor("#ffff00"))
.addItem(new BottomNavigationItem(R.mipmap.person,"個人").setBadgeItem(badgeItem))//添加小紅點數據
.initialise();//initialise 一定要放在 所有設置的最後一項
//設置默認導航欄
homeFragment=HomeFragment.newInstance("首頁");
fm.beginTransaction().replace(R.id.fl,homeFragment).commit();
}
/**
* 設置選中邏輯
*/
@Override
public void onTabSelected(int position) {
FragmentTransaction transaction = fm.beginTransaction();
switch (position){
case 0:
if(homeFragment==null){
homeFragment=new HomeFragment();
}
transaction.replace(R.id.fl,homeFragment);
break;
case 1:
if(settingFragment==null){
settingFragment=new SettingFragment();
}
transaction.replace(R.id.fl,settingFragment);
break;
case 2:
if(menuFragment==null){
menuFragment=new MenuFragment();
}
badgeItem.setText("4");
transaction.replace(R.id.fl,menuFragment);
break;
case 3:
if(personFragment==null){
personFragment=new PersonFragment();
}
transaction.replace(R.id.fl,personFragment);
break;
default:
break;
}
transaction.commit();
}
/**
* 設置未選中邏輯
*/
@Override
public void onTabUnselected(int position) {
}
/**
* 設置釋放邏輯
*/
@Override
public void onTabReselected(int position) {
}
}
參考：
1.Android底部導航 BottomNavigationBar（Google官方）
2.BottomNavigationBar使用詳解
3.安卓 BottomNavigationBar 底部導航欄 最簡單用法詳解
底部導航欄使用BottomNavigationBar