Android进阶之路 - BottomNavigationView的使用与问题处理方案底部导航的实现之一为Bottom

底部导航的实现之一为BottomNavigationView，乃是design库下的一款控件，或为Android 5.0的一种，同时根据某篇博文介绍说sdk25以后才可以使用，最好高于25.1，因为有一些问题没有处理好 ~

闲话不多唠，此篇文章是根据多篇博文，进行总结性的一篇记录，其中的知识点都已经手动敲打过一次，请继续前行！

Effect :
这里写图片描述

1.build 引入

 compile 'com.android.support:design:25.3.1'

2.BottomNavigationView控件引用

    <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/first_menu"
    />

3.对应第二步的‘app:menu="@menu/first_menu"’属性，res - menu - 创建对应的menu文件

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/item_tab1"
        android:icon="@drawable/tab1"
        android:title="2018" />
    <item
        android:id="@+id/item_tab2"
        android:icon="@mipmap/tab_2_a"
        android:title="我们"
        />
    <item
        android:id="@+id/item_tab3"
        android:icon="@mipmap/tab_3_a"
        android:title="继续" />

    <item
        android:id="@+id/item_tab4"
        android:icon="@mipmap/tab_4_a"
        android:title="前行" />

</menu>

4.如上文的icon属性使用的非mipmap而是drawable的状态选取属性，在res - drawable创建文件 tab1.xml (如使用的是mipmap的死图片，此条可忽略)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@mipmap/tab_6_b"/>
    <item android:state_checked="false" android:drawable="@mipmap/tab_6_a"/>
</selector>

5.创建ViewPager承载的Fragment，因内部代码相同，可直接Copy，Tab1Fragment：

package com.example.yongliu.bottomnavigationview;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * author  yongliu
 * date  2018/2/1.
 * desc:
 */

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;
    }
}

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">

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

6.ViewPager的适配器，BottomAdapter：

package com.example.yongliu.bottomnavigationview;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;
import java.util.List;

/**
 * author  yongliu
 * date  2018/2/2.
 * desc:
 */

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);
    }
}

完整代码

MainActivity

package com.example.yongliu.bottomnavigationview;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;

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);

        //这里可true是一个消费过程，同样可以使用break，外部返回true也可以
        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;
            }
        });

        //数据填充
        setupViewPager(mVp);
        //ViewPager监听
        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) {

            }
        });

        //禁止ViewPager滑动
        //        mVp.setOnTouchListener(new View.OnTouchListener() {
        //                    @Override
        //                    public boolean onTouch(View v, MotionEvent event) {
        //                        return true;
        //                    }
        //                });
    }

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

activity_main

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:background="#FFF"
    android:orientation="vertical"
    android:layout_height="match_parent"
    tools:context="com.example.yongliu.bottomnavigationview.MainActivity">

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

    <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/first_menu"
    />
    <!--app:itemIconTint="@drawable/bottom_navigation_selector"-->
    <!--app:itemTextColor="@drawable/bottom_navigation_selector"-->

</LinearLayout>

所遇问题归纳

注意：底部Bottom选项，最少为3项，超过3项之后,BottomNavigationView会自动使用本身控件的自带动画属性，同时最多好像为5项，目前没有进行验证

问题：当底部Button超过三个之后，自带动画效果

需求：取消原有动画效果，常规显示

解决方式：

创建BottomNavigationViewHelper类，进行disableShiftMode方法调用

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);
                //noinspection RestrictedApi
                item.setShiftingMode(false);
                // set once again checked value, so view will be updated
                //noinspection RestrictedApi
                item.setChecked(item.getItemData().isChecked());
            }
        } catch (NoSuchFieldException e) {
            Log.e("BNVHelper", "Unable to get shift mode field", e);
        } catch (IllegalAccessException e) {
            Log.e("BNVHelper", "Unable to change value of shift mode", e);
        }
    }

设置BottomNavigationView展示类型

 BottomNavigationView mBv = (BottomNavigationView) findViewById(R.id.bv);
 //调用上面的类进行设置
 BottomNavigationViewHelper.disableShiftMode(mBv);

问题：因为使用的是ViewPager ，所以自带滑动效果

需求：禁止ViewPager自带滑动效果

解决方式：

        //禁止ViewPager滑动
//        mVp.setOnTouchListener(new View.OnTouchListener() {
//                    @Override
//                    public boolean onTouch(View v, MotionEvent event) {
//                        return true;
//                    }
//                });

需求：当选项卡为三项，且中间的选项卡我们用到自己的样式

解决方式：

	//menu中第二项我们设置icon，title为空
    <item
        android:id="@+id/navigation_center"
        android:icon="@null"
        android:title="" />

设置 item 之后，使用线性布局，以权重的方式，进行图片替换（关于这一点我没有进行具体校验）。

需求：修改底部Icon与text颜色

解决方式：

 app:itemIconTint="@drawable/colortext"
 app:itemTextColor="@drawable/colortext"

colortext ：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="#f00"/>
    <item android:state_checked="false" android:color="#957"/>
</selector>

有帮助的博文