一、專案的匯入

在build引入：

implementation 'com.android.support:design:26.1.0'

後面的版本號根據SDK的版本改寫如：

implementation 'com.android.support:appcompat-v7:26.1.0'則使用“26.1.0”

二、現在我們可以用一個例子來說明：

1.先activity_main.xml進行佈局的設定如下：

    <android.support.design.widget.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="bottom"
        android:id="@+id/bv"
        android:background="#e4e4e4"
        app:menu="@menu/test_menu">

    </android.support.design.widget.BottomNavigationView>
 

2.為了實現以上的效果，先要進行每個tab的佈局以及程式碼的編寫：

tab.xml的佈局如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Tab la"
        android:gravity="center"
        android:textColor="#f00"/>

</LinearLayout>
 

由於我們有4個介面，所以就要進行建立4個這樣的佈局，只是顯示的字型的顏色不同，其實就是為了顯示效果不一樣；由於比較懶就不一 一貼出。

2.TabFragment程式碼的編寫，其實也是很簡單；主要是實現顯示每個fragment就OK了

public class Tab1Fragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState){

        View view = inflater.inflate(R.layout.tab_1,null);
        return view;
    }
}
 

這樣Fragment已經建立完成，接下來要建立個menu的佈局，此menu的檔案命名為test_menu,so在使用的時候則是app:test_menu；

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/item_tab1"
        android:icon="@mipmap/tab1"
        android:title="微信"/>

    <item
        android:id="@+id/item_tab2"
        android:icon="@mipmap/tab2"
        android:title="通訊錄"/>

    <item
        android:id="@+id/item_tab3"
        android:icon="@mipmap/tab3"
        android:title="發現"/>

    <item
        android:id="@+id/item_tab4"
        android:icon="@mipmap/tab4"
        android:title="我"/>

</menu>

3.建立viewPager的介面卡，BottomAdapter

public class BottomAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragments = new ArrayList<>();

    public BottomAdapter(FragmentManager fm){
        super(fm);
    }
    @Override
    public Fragment getItem(int position){
        return fragments.get(position);
    }
    @Override
    public int getCount(){
        return fragments.size();
    }
    public void addFragment(Fragment fragment){
        fragments.add(fragment);
    }
}

7.為了完成最終的效果，則在activity_main.xml中加上了ViewPager的佈局如下：

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/vp">

    </android.support.v4.view.ViewPager>

8.最後放出最後的大招，MainActivity的完整程式碼如下：

public class MainActivity extends AppCompatActivity {

    private BottomNavigationView mBv;
    private ViewPager mVp;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView(){
        mBv = (BottomNavigationView)findViewById(R.id.bv);
        mVp = (ViewPager) findViewById(R.id.vp);

        BottomNavigationViewHelper.disableShiftMode(mBv);

        mBv.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.item_tab1:
                        mVp.setCurrentItem(0);
                        return true;

                    case R.id.item_tab2:
                        mVp.setCurrentItem(1);
                        return true;

                    case R.id.item_tab3:
                        mVp.setCurrentItem(2);
                        return true;

                    case R.id.item_tab4:
                        mVp.setCurrentItem(3);
                        return true;


                }

                return false;
            }
        });

        setupViewPage(mVp);

        mVp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                mBv.getMenu().getItem(position).setChecked(true);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    private void setupViewPage(ViewPager viewPager){
        BottomAdapter adapter = new BottomAdapter(getSupportFragmentManager());
        adapter.addFragment(new TabFragment());
        adapter.addFragment(new Tab1Fragment());
        adapter.addFragment(new Tab2Fragment());
        adapter.addFragment(new Tab3Fragment());
        viewPager.setAdapter(adapter);
    }

}

在這裡MainActivity中用到了BottomNavigationViewHelper進行動畫效果的設定，二這個類的程式碼如下：

public class BottomNavigationViewHelper {

    public static void disableShiftMode(BottomNavigationView view){
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView,false);
            shiftingMode.setAccessible(false);
            for (int i = 0;i < menuView.getChildCount();i++){
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                item.setShiftingMode(false);
                item.setChecked(item.getItemData().isChecked());
            }
        }catch (NoSuchFieldException e){
            Log.e("bnHelper","unable to get shift mode field",e);
        }catch (IllegalAccessException e){
            Log.e("bnHelper","unable to change value shift mode",e);

        }
    }
}

老鐵們到這裡，這個簡單的使用例子已經完成了。

現在總結下這個BottomNavigationView的一些其他的問題：底部Bottom選項，最少為3項，超過3項之後,BottomNavigationView會自動使用本身控制元件的自帶動畫屬性，同時最多好像為5項

這只是簡單的使用，也許會有後續。。。。。