PagerBottomTabStrip 是一個(gè)基本按谷歌Material Design規(guī)范完成的安卓底部導(dǎo)航欄控件
官方設(shè)計(jì)規(guī)范：https://www.google.com/design/spec/components/bottom-navigation.html
1、前言
（1）底部選擇菜單功能應(yīng)該是大多app都會(huì)用到的，實(shí)現(xiàn)方式也有很多種，比較笨的方法可以自定義一個(gè)xml，下方布局樣式，每次點(diǎn)擊不同按鈕時(shí)跳轉(zhuǎn)到不同activity，這個(gè)activity重新加載一下底部菜單
（2）今天介紹一個(gè)網(wǎng)上比較流行的底部菜單PagerBottomTabStrip功能，主要是這個(gè)菜單樣式比價(jià)好看，而且點(diǎn)擊時(shí)有點(diǎn)擊效果，感覺還是不錯(cuò)的，而且也可以在菜單上加數(shù)字顯示。功能算是比較全的吧。在GitHub上有2000多個(gè)star，所以選擇它作為項(xiàng)目的底部菜單：https://github.com/tyzlmjj/PagerBottomTabStrip。
（3）當(dāng)然還有一個(gè)框架也不錯(cuò)，可以參考：https://github.com/ogaclejapan/SmartTabLayout
（4）效果圖：
2、底部導(dǎo)航菜單功能代碼
1、首先需要引用包：
compile 'me.majiajie:pager-bottom-tab-strip:2.2.5'
2、然后寫一個(gè)主的activity和底部點(diǎn)擊進(jìn)入的兩個(gè)Fragment：
class MainBottomTabActivity : BaseActivity() { private val mFragments = ArrayList<Fragment>() var number:Int=8 override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.main_bottom_tab) //初始化Fragment initFragment() //初始化底部Button initBottomTab() } /** * 初始化四個(gè)導(dǎo)航頁面 */ fun initFragment(){ mFragments!!.add(TabBar1Fragment()) mFragments!!.add(TabBar2Fragment()) mFragments!!.add(TabBar1Fragment()) //默認(rèn)選中第一個(gè) val transaction = supportFragmentManager.beginTransaction() transaction!!.add(R.id.frameLayout, mFragments[0]) transaction.commitAllowingStateLoss() } fun initBottomTab(){ //這里要特別注意，pager_bottom_tab.custom()這句話就是選擇自己需要的樣式 val navigationController = pager_bottom_tab.custom() .addItem(newItem(R.drawable.ic_restore_gray_24dp, R.drawable.ic_restore_teal_24dp, "消息")) .addItem(newItem(R.drawable.ic_favorite_gray_24dp, R.drawable.ic_favorite_teal_24dp, "工作")) .addItem(newItem(R.drawable.ic_nearby_gray_24dp, R.drawable.ic_nearby_teal_24dp, "我的")) .build() //設(shè)置消息數(shù) navigationController.setMessageNumber(1, number) //設(shè)置顯示小圓點(diǎn) navigationController.setHasMessage(0, true) //底部按鈕的點(diǎn)擊事件監(jiān)聽 navigationController.addTabItemSelectedListener(object : OnTabItemSelectedListener { override fun onSelected(index: Int, old: Int) { val transaction = supportFragmentManager.beginTransaction() transaction.replace(R.id.frameLayout, mFragments[index]) transaction.commitAllowingStateLoss() if(index==0){ navigationController.setHasMessage(0, false) }else if(index==1){ navigationController.setMessageNumber(1, --number) } } override fun onRepeat(index: Int) {} }) } //創(chuàng)建一個(gè)Item private fun newItem(drawable: Int, checkedDrawable: Int, text: String): BaseTabItem { val normalItemView = NormalItemView(this) normalItemView.initialize(drawable, checkedDrawable, text) normalItemView.setTextDefaultColor(Color.GRAY) normalItemView.setTextCheckedColor(-0xff6978) return normalItemView }}3、頂部導(dǎo)航功能
（1）定義activity的style
android:theme="@style/AppTheme"<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="android:windowBackground">@drawable/splash_bg</item> <item name="colorPrimary">@color/white</item> <item name="colorPrimaryDark">@color/black</item> <item name="colorAccent">@color/blue</item> <item name="actionBarSize">48dip</item> <item name="android:textColorPrimary">@color/black</item> <item name="toolbarNavigationButtonStyle">@style/myToolbarNavigationButtonStyle</item></style>
（2）自定義頂部top.xml
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/top_all" android:layout_width="match_parent" android:background="@color/white" android:orientation="vertical" android:focusable="true" android:focusableInTouchMode="true" android:layout_height="wrap_content"> <LinearLayout android:id="@+id/top_navigation" android:layout_width="fill_parent" android:layout_height="40dp" android:orientation="horizontal" android:background="@color/grey" android:gravity="center_vertical"> <!--上方導(dǎo)航條返回按鈕--> <LinearLayout android:id="@+id/back_btn" android:layout_width="0dp" android:layout_weight="1" android:orientation="horizontal" android:gravity="center_vertical" android:layout_marginLeft="10dp" android:layout_height="match_parent"> <ImageView android:layout_width="wrap_content" android:src="@drawable/back_btn" android:layout_marginLeft="5dp" android:layout_height="wrap_content" /> </LinearLayout> <TextView android:id="@+id/navication_text" android:layout_width="0dp" android:layout_weight="5" android:layout_height="match_parent" android:layout_gravity="center" android:gravity="center" android:text="首頁" android:textColor="@color/font_title" android:textSize="17dp"/> <!--文字顯示--> <TextView android:id="@+id/second_transfer_text" android:layout_width="0dp" android:layout_weight="1" android:gravity="center" android:text="提交" android:textColor="@color/blue" android:visibility="invisible" android:textSize="@dimen/text_size_14" android:layout_height="match_parent" /> </LinearLayout> <TextView android:layout_width="match_parent" android:background="@color/blue" android:layout_height="@dimen/px_2" /></LinearLayout>
(3)在BaseActivity中寫方法
protected void setTitle(Object title,Boolean right,Object rightContent) { try { TextView titleText=findViewById(R.id.navication_text); titleText.setText((String)title); //顯示右側(cè)的文字按鈕 if(right){ TextView rightText=findViewById(R.id.second_transfer_text); rightText.setVisibility(View.VISIBLE); rightText.setText((String)rightContent); } } catch (Exception e) { e.printStackTrace(); }}/** * 設(shè)置點(diǎn)擊左上角的返回事件.默認(rèn)是finish界面 */protected void registerBack() { LinearLayout llLeft = findViewById(R.id.back_btn); llLeft.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { BaseActivity.this.finish(); } });}（4）繼承BaseActivity，xml包含includetop.xml然后直接執(zhí)行方法
<include layout="@layout/top"/>setTitle("首頁",false,null)registerBack()4、總結(jié)
（1）好了，一個(gè)簡(jiǎn)單的底部菜單導(dǎo)航欄就做好了，是不是要比自己寫挨個(gè)的點(diǎn)擊事件要簡(jiǎn)單許多呢。
（2）在上里面的代碼中我們使用了矢量圖<Vector>功能，實(shí)現(xiàn)標(biāo)準(zhǔn)是美工提供.svg文件，通過studio直接轉(zhuǎn)為xml文件的圖片，優(yōu)勢(shì)是可伸縮和完美放大，體積小，需要知道一下。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
