底部導航欄使用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