Android底部导航栏最常用的两种写法

先来看看底部导航栏的效果

Android 底部导航栏有很多种写法，例如：

RadioGroup ， Tablayout, TabHost , LinearLayout + ImageView + TextView ，BottomNavigationView

我们就来看最常用的两种底部导航栏的用法

一. LinearLayout + ImageView + TextView

这种是用 LinearLyaout + ImageView + TextView 布局UI, xml 代码如下

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout
        android:id="@+id/fl_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/line"/>
    <View
        android:id="@+id/line"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/colorTextGrey"
        android:layout_above="@+id/ll"
        />
    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:background="@color/bg_white"
        android:orientation="horizontal"
        >
        <LinearLayout
            android:id="@+id/ll_tab1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/iv1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/selector_page1" />
            <TextView
                android:id="@+id/tv1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:gravity="center"
                android:text="@string/menu_bottom_navigation1"
                android:textColor="@color/colorTextGrey"
                android:textSize="11sp" />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/ll_tab2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/iv2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/selector_page2" />
            <TextView
                android:id="@+id/tv2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:gravity="center"
                android:text="@string/menu_bottom_navigation2"
                android:textColor="@color/colorTextGrey"
                android:textSize="11sp" />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/ll_tab3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/iv3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/selector_page3" />
            <TextView
                android:id="@+id/tv3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:gravity="center"
                android:text="@string/menu_bottom_navigation3"
                android:textColor="@color/colorTextGrey"
                android:textSize="11sp" />
        </LinearLayout>
    </LinearLayout>
</android.support.percent.PercentRelativeLayout>

此布局最外层是百分比布局 PercentRelativeLayout （适配各种机型屏幕）, 而后是一个

帧布局 FrameLayout（用于Fragment）,最后就是这个布局的重点：父LinearLayout

<LinearLayout
    android:id="@+id/ll"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true"
    android:background="@color/bg_white"
    android:orientation="horizontal"
   >

这个LinearLayout ，宽为match_paren，高为 50dp , 位于父布局底部，子布局水平排列。

有人就会有疑问了：为什么高为50dp？

因为底部导航栏其实有两种不同标准的高，一个 48dp , 一个 56dp（通过不断积累的经验：这样好看）。

而我给50dp, 算是取个中间整数。

下面看父 LinearLayout 里面的第一个子 LinearLayout

<LinearLayout
    android:id="@+id/ll_tab1"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="vertical">
    <ImageView
        android:id="@+id/iv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/selector_page1" />
    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="2dp"
        android:gravity="center"
        android:text="@string/menu_bottom_navigation1"
        android:textColor="@color/colorTextGrey"
        android:textSize="11sp" />
</LinearLayout>

这个LinearLayout ，宽为0dp，高为 match_paren , 权重为1（为了让子LinearLayout 平分

总LinearLayout 的宽），内容居中，子布局垂直排列：里面有 ImageView 和 TextView。

第一个子LinearLayout效果:

依葫芦画瓢，按第一个子Linearlayout 写第二个子LinearLayout 和第三个子LinearLayout

总效果：

selector_page1 代码：

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

selector_page2，selector_page3依葫芦画瓢

下面看Activity 代码：

public class BottomNavigationActivity1 extends AppCompatActivity {@BindView(R.id.fl_fragment)FrameLayout flFragment;
    @BindView(R.id.iv1)ImageView iv1;
    @BindView(R.id.tv1)TextView tv1;
    @BindView(R.id.ll_tab1)LinearLayout llTab1;
    @BindView(R.id.iv2)ImageView iv2;
    @BindView(R.id.tv2)TextView tv2;
    @BindView(R.id.ll_tab2)LinearLayout llTab2;
    @BindView(R.id.iv3)ImageView iv3;
    @BindView(R.id.tv3)TextView tv3;
    @BindView(R.id.ll_tab3)LinearLayout llTab3;
    Unbinder unbinder;
    Fragment1 fragment1;
    Fragment2 fragment2;
    Fragment3 fragment3;
    private Fragment fragment_now = null;
    private List<ImageView> iv_list;
    private List<TextView> tv_list;

    @Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bottom_navigation1);
        unbinder = ButterKnife.bind(this);
        inint();
    }private void inint() {iv_list = new ArrayList<>();
        tv_list = new ArrayList<>();
        iv_list.add(iv1);
        iv_list.add(iv2);
        iv_list.add(iv3);
        tv_list.add(tv1);
        tv_list.add(tv2);
        tv_list.add(tv3);
        changePageSelect(0);
        changePageFragment(R.id.ll_tab1);
    }@OnClick({R.id.iv1, R.id.ll_tab1, R.id.iv2, R.id.ll_tab2, R.id.iv3, R.id.ll_tab3})public void onViewClicked(View view) {changePageFragment(view.getId());
    }/**
     * 选中的tab 和 没有选中的tab 的图标和字体颜色
     *
     * @param index
     */
    public void changePageSelect(int index) {for (int i = 0; i < iv_list.size(); i++) {if (index == i) {iv_list.get(i).setEnabled(false);
                tv_list.get(i).setTextColor(getResources().getColor(R.color.colorLightRed));
            } else {iv_list.get(i).setEnabled(true);
                tv_list.get(i).setTextColor(getResources().getColor(R.color.colorTextGrey));
            }}}/**
     * 当点击导航栏时改变 fragment
     *
     * @param id
     */
    public void changePageFragment(int id) {switch (id) {case R.id.ll_tab1:case R.id.iv1:if (fragment1 == null) {//减少new fragmnet,避免不必要的内存消耗
                    fragment1 = Fragment1.newInstance();
                }changePageSelect(0);
                switchFragment(fragment_now, fragment1);
                break;
            case R.id.ll_tab2:case R.id.iv2:if (fragment2 == null) {fragment2 = Fragment2.newInstance();
                }changePageSelect(1);
                switchFragment(fragment_now, fragment2);
                break;
            case R.id.ll_tab3:case R.id.iv3:if (fragment3 == null) {fragment3 = Fragment3.newInstance();
                }changePageSelect(2);
                switchFragment(fragment_now, fragment3);
                break;
        }}/**
     * 隐藏显示fragment
     *
     * @param from 需要隐藏的fragment
     * @param to   需要显示的fragment
     */
    public void switchFragment(Fragment from, Fragment to) {if (to == null)return;
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        if (!to.isAdded()) {if (from == null) {transaction.add(R.id.fl_fragment, to).show(to).commit();
            } else {// 隐藏当前的fragment，add下一个fragment到Activity中并显示
                transaction.hide(from).add(R.id.fl_fragment, to).show(to).commitAllowingStateLoss();
            }} else {// 隐藏当前的fragment，显示下一个
            transaction.hide(from).show(to).commit();
        }fragment_now = to;

    }@Overrideprotected void onDestroy() {super.onDestroy();
        //解除绑定
        unbinder.unbind();
    }
}

首先 build.gradle 添加

implementation 'com.jakewharton:butterknife:8.8.1'

用 butterKnife找到控件并设置点击事件，并用List<ImageView> iv_list 将 ImageView add,

List<TextView> tv_list将 TextView add,

然后是fragment

Fragment1 代码：

public class Fragment1 extends Fragment {public Fragment1() {}   public static Fragment1 newInstance() {Fragment1 fragment = new Fragment1();
        return fragment;
    }@Override
    public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);
    }@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {return inflater.inflate(R.layout.fragment_1, container, false);
    }}

Fragment1布局 fragment_1:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一个fragment"
        android:layout_gravity="center"/>
</FrameLayout>

Fragment2， Fragment3 及其布局依葫芦画瓢

然后写changePageSelect() 改变选中的tab 和没有选中的tab 的图标和字体颜色

public void changePageSelect(int index) {for (int i = 0; i < iv_list.size(); i++) {if (index == i) {iv_list.get(i).setEnabled(false);
            tv_list.get(i).setTextColor(getResources().getColor(R.color.colorLightRed));
        } else {iv_list.get(i).setEnabled(true);
            tv_list.get(i).setTextColor(getResources().getColor(R.color.colorTextGrey));
        }}
}

然后写switchFragment() 添加，显示，隐藏 frament

public void switchFragment(Fragment from, Fragment to) {if (to == null)return;
    FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
    if (!to.isAdded()) {if (from == null) {transaction.add(R.id.fl_fragment, to).show(to).commit();
        } else {// 隐藏当前的fragment，add下一个fragment到Activity中并显示
             transaction.hide(from).add(R.id.fl_fragment,to).show(to).commitAllowingStateLoss();
        }} else {// 隐藏当前的fragment，显示下一个
        transaction.hide(from).show(to).commit();
    }fragment_now = to;

}

此方法传入 Fragment form ， Fragment to 。首先判断 Fragment to 是否为 null，

Fragment to为 null 则 return；Fragment to不为 null 往下走得到 FragmnetTranscation transcation。

然后判断 Fragment to 是否添加到Activity,

Fragment to 没有添加到了 Activity 则判断 Fragment form 是否为 null ，

Fragment form 为 null 则将 Fragment to 添加到Activity 中并显示；

Fragment form 不为null 则隐藏Fragment form，将Fragment to 添加到Activity 中并显示；

Fragment to 添加到了 Activity 则隐藏Fragment form，显示 Fragment to;

最后将 Fragment to 赋值给 Fragment fragment_now

最后写changepageFragment() , 调用 changePageSelect() 与 switchFragment() 并给点击事件调用

public void changePageFragment(int id) {switch (id) {case R.id.ll_tab1:case R.id.iv1:if (fragment1 == null) {//减少new fragmnet,避免不必要的内存消耗
                fragment1 = Fragment1.newInstance();
            }changePageSelect(0);
            switchFragment(fragment_now, fragment1);
            break;
        case R.id.ll_tab2:case R.id.iv2:if (fragment2 == null) {fragment2 = Fragment2.newInstance();
            }changePageSelect(1);
            switchFragment(fragment_now, fragment2);
            break;
        case R.id.ll_tab3:case R.id.iv3:if (fragment3 == null) {fragment3 = Fragment3.newInstance();
            }changePageSelect(2);
            switchFragment(fragment_now, fragment3);
            break;
    }
}

@OnClick({R.id.iv1, R.id.ll_tab1, R.id.iv2, R.id.ll_tab2, R.id.iv3, R.id.ll_tab3})
public void onViewClicked(View view) {changePageFragment(view.getId());

}

changepageFragment() 的妙处就是调用 switchFragment() 第一个参数传了 Fragment fragment_now，

这样 Fragment fragment_now() 与 switchFragment() 就通过 Fragment fragment_now 紧密联系起来

到此底部导航栏 LinearLyaout + ImageView + TextView 的写法到此就介绍完毕了！

二. BotoomNavigationView

绝多数app都用底部导航栏，所以 google 爸爸为了方便开发者在 Design Support Library中添加了 BotoomNavigationView控件，我们就不用苦逼的LinearLyaout + ImageView + TextView 布局写法了！

首先 build.gradle 添加

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

然后布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   >
    <FrameLayout
        android:id="@+id/fl_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottomNavigationView"
        />
    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        app:itemIconTint="@drawable/selector_bottom_navigation"
        app:itemTextColor="@drawable/selector_bottom_navigation"
        app:menu="@menu/menu_bottom_navigation"
        />
</android.support.percent.PercentRelativeLayout>

app:itemIconTint 为图标颜色变化， app:itemtextColor 为为文字颜色变化

然后在drawable下创建 selector_bottom_navigantion

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

然后在res 创建 menu文件夹，并在下面创建 menu_bottom_navigation

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/item_1"
        android:icon="@mipmap/img_1"
        android:title="@string/menu_bottom_navigation1"
        />
    <item
        android:id="@+id/item_2"
        android:icon="@mipmap/img_2"
        android:title="@string/menu_bottom_navigation2"
      />

    <item
        android:id="@+id/item_3"
        android:icon="@mipmap/img_3"
        android:title="@string/menu_bottom_navigation3"
        />
</menu>

最后Activity代码

public class BottomNavigationActivity2 extends AppCompatActivity implements BottomNavigationView.OnNavigationItemSelectedListener{@BindView(R.id.fl_fragment)FrameLayout flFragment;
    @BindView(R.id.bottomNavigationView)BottomNavigationView bottomNavigationView;
    Unbinder unbinder;
    Fragment1 fragment1;
    Fragment2 fragment2;
    Fragment3 fragment3;
    private Fragment fragment_now = null;
    @Override
    protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bottom_navigation2);
        unbinder = ButterKnife.bind(this);
        inint();
    }@SuppressLint("NewApi")private void inint() {bottomNavigationView.setOnNavigationItemSelectedListener(this);//设置 NavigationItemSelected 事件监听
        BottomNavigationViewHelper.disableShiftMode(bottomNavigationView);//改变 BottomNavigationView 默认的效果
        //选中第一个item,对应第一个fragment
        bottomNavigationView.setSelectedItemId(R.id.item_1);
    }@Override
    protected void onDestroy() {super.onDestroy();
        unbinder.unbind();
    }//NavigationItemSelected 事件监听
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {changePageFragment(item.getItemId());
        return true;
    }/**
     * 当点击导航栏时改变fragment
     *
     * @param id
     */
    public void changePageFragment(int id) {switch (id) {case R.id.item_1:if (fragment1 == null) { //减少new fragmnet,避免不必要的内存消耗
                    fragment1 = Fragment1.newInstance();
                }switchFragment(fragment_now, fragment1);
                break;
            case R.id.item_2:if (fragment2 == null) {fragment2 = Fragment2.newInstance();
                }switchFragment(fragment_now, fragment2);
                break;
            case R.id.item_3:if (fragment3 == null) {fragment3 = Fragment3.newInstance();
                }switchFragment(fragment_now, fragment3);
                break;
        }}/**
     * 隐藏显示fragment
     *
     * @param from 需要隐藏的fragment
     * @param to   需要显示的fragment
     */
    public void switchFragment(Fragment from, Fragment to) {if (to == null)return;
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        if (!to.isAdded()) {if (from == null) {transaction.add(R.id.fl_fragment, to).show(to).commit();
            } else {// 隐藏当前的fragment，add下一个fragment到Activity中
                transaction.hide(from).add(R.id.fl_fragment, to).commitAllowingStateLoss();
            }} else {// 隐藏当前的fragment，显示下一个
            transaction.hide(from).show(to).commit();
        }fragment_now = to;
    }
}

switchFragment() 与第一种写法一致; changePageFragment() 与第一种写法区别在于没有changePageSelect(), 因为BottomNavigationView 已经在布局app:itemIconTint 与 app:itemtextColor做了这个事。

最后设置 BottomNavigationView 的 item 选择事件监听调用changePageFragment()

public class BottomNavigationActivity2 extends AppCompatActivity implements BottomNavigationView.OnNavigationItemSelectedListener

bottomNavigationView.setOnNavigationItemSelectedListener(this); @Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {changePageFragment(item.getItemId());
    return true;
}

如果BottomNavigationView 的 item >3 则会出现位移效果，而我们不要位移效果怎么办？

BottomNavigationViewHelper.disableShiftMode(bottomNavigationView);

public class BottomNavigationViewHelper {@RequiresApi(api = Build.VERSION_CODES.KITKAT)@SuppressLint("RestrictedApi")public static void disableShiftMode(BottomNavigationView navigationView) {BottomNavigationMenuView menuView = (BottomNavigationMenuView) navigationView.getChildAt(0);
        try {// 利用反射，改变 item 中 mShiftingMode 的值 ,从而改变 BottomNavigationView 默认的效果
            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 itemView = (BottomNavigationItemView) menuView.getChildAt(i);
                itemView.setShiftingMode(false);
                itemView.setChecked(itemView.getItemData().isChecked());
            }} catch (NoSuchFieldException | IllegalAccessException e) {e.printStackTrace();
        }}
}

有人会问：这样为什么可以改变默认大小？

在此先简单分析（以后分析BottomNavigationView源码）：

通过 BottomNavigationView 找到 BottomNavigationMenuView , 在BottomNavigationMenuView 看到

private boolean mShiftingMode = true;

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {final int width = MeasureSpec.getSize(widthMeasureSpec);
    final int count = getChildCount();

    final int heightSpec = MeasureSpec.makeMeasureSpec(mItemHeight, MeasureSpec.EXACTLY);

    if (mShiftingMode) {final int inactiveCount = count - 1;
        final int activeMaxAvailable = width - inactiveCount * mInactiveItemMinWidth;
        final int activeWidth = Math.min(activeMaxAvailable, mActiveItemMaxWidth);
        final int inactiveMaxAvailable = (width - activeWidth) / inactiveCount;
        final int inactiveWidth = Math.min(inactiveMaxAvailable, mInactiveItemMaxWidth);
        int extra = width - activeWidth - inactiveWidth * inactiveCount;
        for (int i = 0; i < count; i++) {mTempChildWidths[i] = (i == mSelectedItemPosition) ? activeWidth : inactiveWidth;
            if (extra > 0) {mTempChildWidths[i]++;
                extra--;
            }}} else {final int maxAvailable = width / (count == 0 ? 1 : count);
        final int childWidth = Math.min(maxAvailable, mActiveItemMaxWidth);
        int extra = width - childWidth * count;
        for (int i = 0; i < count; i++) {mTempChildWidths[i] = childWidth;
            if (extra > 0) {mTempChildWidths[i]++;
                extra--;
            }}}int totalWidth = 0;
    for (int i = 0; i < count; i++) {final View child = getChildAt(i);
        if (child.getVisibility() == GONE) {continue;
        }child.measure(MeasureSpec.makeMeasureSpec(mTempChildWidths[i], MeasureSpec.EXACTLY),
                heightSpec);
        ViewGroup.LayoutParams params = child.getLayoutParams();
        params.width = child.getMeasuredWidth();
        totalWidth += child.getMeasuredWidth();
    }setMeasuredDimension(View.resolveSizeAndState(totalWidth,
                    MeasureSpec.makeMeasureSpec(totalWidth, MeasureSpec.EXACTLY), 0),
            View.resolveSizeAndState(mItemHeight, heightSpec, 0));
}

BottomNavigationMenuView 通过 mShiftingMode 为标识 , measure 它的各子view 的宽高，而宽在不断变化，从而产生位移变化。

有人会问：为什么是item >3 则会出现位移效果？

因为在BottomNavigationMenuView 的 buildMenuView()中的mShiftingMode = mMenu.size() > 3

public void buildMenuView() {removeAllViews();
    if (mButtons != null) {for (BottomNavigationItemView item : mButtons) {mItemPool.release(item);
        }}if (mMenu.size() == 0) {mSelectedItemId = 0;
        mSelectedItemPosition = 0;
        mButtons = null;
        return;
    }mButtons = new BottomNavigationItemView[mMenu.size()];
    mShiftingMode = mMenu.size() > 3;
    for (int i = 0; i < mMenu.size(); i++) {mPresenter.setUpdateSuspended(true);
        mMenu.getItem(i).setCheckable(true);
        mPresenter.setUpdateSuspended(false);
        BottomNavigationItemView child = getNewItem();
        mButtons[i] = child;
        child.setIconTintList(mItemIconTint);
        child.setTextColor(mItemTextColor);
        child.setItemBackground(mItemBackgroundRes);
        child.setShiftingMode(mShiftingMode);
        child.initialize((MenuItemImpl) mMenu.getItem(i), 0);
        child.setItemPosition(i);
        child.setOnClickListener(mOnClickListener);
        addView(child);
    }mSelectedItemPosition = Math.min(mMenu.size() - 1, mSelectedItemPosition);
    mMenu.getItem(mSelectedItemPosition).setChecked(true);
}

如果你想有滑动切换效果，可以添加 ViewPager

build.gradle 添加

implementation 'com.android.support:support-v4:27.0.1'

布局修改为

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   >
    <!--<FrameLayout-->
        <!--android:id="@+id/fl_fragment"-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="match_parent"-->
        <!--android:layout_above="@+id/bottomNavigationView"-->
        <!--/>-->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottomNavigationView" />
    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        app:itemIconTint="@drawable/selector_bottom_navigation"
        app:itemTextColor="@drawable/selector_bottom_navigation"
        app:menu="@menu/menu_bottom_navigation"
        />
</android.support.percent.PercentRelativeLayout>

Activity代码修改为

public class BottomNavigationActivity2 extends AppCompatActivity implements BottomNavigationView.OnNavigationItemSelectedListener,ViewPager.OnPageChangeListener,ViewPager.OnTouchListener{    @BindView(R.id.bottomNavigationView)BottomNavigationView bottomNavigationView;
    @BindView(R.id.viewpager)ViewPager viewPager;
    Unbinder unbinder;
    Fragment1 fragment1;
    Fragment2 fragment2;
    Fragment3 fragment3;
    BottomnavigationViewPagerAdapter pagerAdapter;
    List<Fragment> fragments;
    @Override
    protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bottom_navigation2);
        unbinder = ButterKnife.bind(this);
        inint();
    }@SuppressLint("NewApi")private void inint() {fragments = new ArrayList<>();
        fragment1 = Fragment1.newInstance();
        fragment2 = Fragment2.newInstance();
        fragment3 = Fragment3.newInstance();
        if(!fragments.contains(fragment1)){fragments.add(fragment1);
        }if(!fragments.contains(fragment2)){fragments.add(fragment2);
        }if(!fragments.contains(fragment3)){fragments.add(fragment3);
        }bottomNavigationView.setOnNavigationItemSelectedListener(this);//设置 NavigationItemSelected 事件监听
        BottomNavigationViewHelper.disableShiftMode(bottomNavigationView);//改变 BottomNavigationView 默认的效果
        //选中第一个item,对应第一个fragment
        bottomNavigationView.setSelectedItemId(R.id.item_1);
        pagerAdapter = new BottomnavigationViewPagerAdapter(getSupportFragmentManager(),fragments);
        viewPager.setAdapter(pagerAdapter);
        viewPager.addOnPageChangeListener(this);
        // 如果想禁止滑动，可以把下面的代码取消注释
//        viewPager.setOnTouchListener(this);
    }@Override
    protected void onDestroy() {super.onDestroy();
        unbinder.unbind();
    }//NavigationItemSelected 事件监听
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {        switch (item.getItemId()){case  R.id.item_1:viewPager.setCurrentItem(0);
                break;
            case  R.id.item_2:viewPager.setCurrentItem(1);
                break;
            case  R.id.item_3:viewPager.setCurrentItem(3);
                break;
        }return true;
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Override
    public void onPageSelected(int position) {bottomNavigationView.getMenu().getItem(position).setChecked(true);
    }@Override
    public void onPageScrollStateChanged(int state) {}@Override
    public boolean onTouch(View v, MotionEvent event) {return true;
    }
}

最后注意BottomNavigationView item 范围 1~5 个（早期版本是 3~5 个）

public final class BottomNavigationMenu extends MenuBuilder {public static final int MAX_ITEM_COUNT = 5;

   ..............@Override
    protected MenuItem addInternal(int group, int id, int categoryOrder, CharSequence title) {if (size() + 1 > MAX_ITEM_COUNT) {throw new IllegalArgumentException("Maximum number of items supported by BottomNavigationView is " + MAX_ITEM_COUNT
                            + ". Limit can be checked with BottomNavigationView#getMaxItemCount()");
        }stopDispatchingItemsChanged();
        final MenuItem item = super.addInternal(group, id, categoryOrder, title);
        if (item instanceof MenuItemImpl) {((MenuItemImpl) item).setExclusiveCheckable(true);
        }startDispatchingItemsChanged();
        return item;
    }
}

到此底部导航栏 BottomNavigationView 的用法到此就介绍完毕了！

最后效果

代码地址：https://github.com/ccWenTian/notes，如果觉得还行，请点个赞。