原文出处

标题：Android底部导航栏，三种风格和实现
作者：阿飞__
原文链接：https://blog.csdn.net/afei__/article/details/80950288

一、效果图展示

2018070712270484.gif

如果动图没有动的话，也可以看下面这个静态图
image.png
以下挨个分析每个的实现，这里只做简单的效果展示，大家可以基于目前代码做二次开发。

二、BottomNavigationView

这是 Google 给我们提供的一个专门用于底部导航的 View，你只需要在新建 Activity 的时候选择 “Bottom Navigation Activity”，IDE 就会自动使用 BottomNavigationView 帮你生成好相应的代码了。

1.在 xml 中使用

  1.     <android.support.design.widget.BottomNavigationView
  2.         android:id="@+id/navigation"
  3.         android:layout_width="0dp"
  4.         android:layout_height="wrap_content"
  5.         android:layout_marginEnd="0dp"
  6.         android:layout_marginStart="0dp"
  7.         android:background="?android:attr/windowBackground"
  8.         app:layout_constraintBottom_toBottomOf="parent"
  9.         app:layout_constraintLeft_toLeftOf="parent"
  10.         app:layout_constraintRight_toRightOf="parent"
  11.         app:menu="@menu/navigation" />

这里面唯一要注意的就是 app:menu 属性了，它指定了你的导航栏显示的页面菜单是怎样的。

2. menu 的布局文件

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <menu xmlns:android="http://schemas.android.com/apk/res/android">
  4.     <item
  5.         android:id="@+id/navigation_home"
  6.         android:icon="@drawable/ic_home_black_24dp"
  7.         android:title="@string/title_home" />
  9.     <item
  10.         android:id="@+id/navigation_dashboard"
  11.         android:icon="@drawable/ic_dashboard_black_24dp"
  12.         android:title="@string/title_dashboard" />
  14.     <item
  15.         android:id="@+id/navigation_notifications"
  16.         android:icon="@drawable/ic_notifications_black_24dp"
  17.         android:title="@string/title_notifications" />
  19. </menu>

3. 在 Activity 中调用

  1.     private TextView mTextMessage;
  3.     private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
  4.             = new BottomNavigationView.OnNavigationItemSelectedListener() {
  6.         @Override
  7.         public boolean onNavigationItemSelected(@NonNull MenuItem item) {
  8.             switch (item.getItemId()) {
  9.                 case R.id.navigation_home:
  10.                     mTextMessage.setText(R.string.title_home);
  11.                     return true;
  12.                 case R.id.navigation_dashboard:
  13.                     mTextMessage.setText(R.string.title_dashboard);
  14.                     return true;
  15.                 case R.id.navigation_notifications:
  16.                     mTextMessage.setText(R.string.title_notifications);
  17.                     return true;
  18.             }
  19.             return false;
  20.         }
  21.     };
  23.     @Override
  24.     protected void onCreate(Bundle savedInstanceState) {
  25.         super.onCreate(savedInstanceState);
  26.         setContentView(R.layout.activity_style1);
  28.         mTextMessage = findViewById(R.id.message);
  29.         BottomNavigationView navigation = findViewById(R.id.navigation);
  30.         navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
  31.     }

这里的演示 code 都是 IDE 自动生成的，由于 BottomNavigationView 目前我还没有在项目中实际使用过，这里不做过多分析，使用起来不难，以上代码已经足以满足我们的基本使用要求了。

三、RadioGroup + ViewPager

这是一种比较常见了的，下面 4 个 tab 的导航按钮，可以切换不同的页面，这里页面使用了 ViewPager + Fragment 的组合，实现了滑动的页面效果，也可以不使用 ViewPager，这个根据产品的定义来使用即可。

1. 布局文件

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     tools:context=".style2.Style2Activity">
  8.     <android.support.v4.view.ViewPager
  9.         android:id="@+id/fragment_vp"
  10.         android:layout_width="match_parent"
  11.         android:layout_height="match_parent"
  12.         android:layout_above="@+id/tabs_rg" />
  14.     <RadioGroup
  15.         android:id="@+id/tabs_rg"
  16.         android:layout_width="match_parent"
  17.         android:layout_height="56dp"
  18.         android:layout_alignParentBottom="true"
  19.         android:background="#dcdcdc"
  20.         android:orientation="horizontal">
  22.         <RadioButton
  23.             android:id="@+id/today_tab"
  24.             style="@style/Custom.TabRadioButton"
  25.             android:checked="true"
  26.             android:drawableTop="@drawable/tab_sign_selector"
  27.             android:text="今日" />
  29.         <RadioButton
  30.             android:id="@+id/record_tab"
  31.             style="@style/Custom.TabRadioButton"
  32.             android:drawableTop="@drawable/tab_record_selector"
  33.             android:text="记录" />
  35.         <RadioButton
  36.             android:id="@+id/contact_tab"
  37.             style="@style/Custom.TabRadioButton"
  38.             android:drawableTop="@drawable/tab_contact_selector"
  39.             android:text="通讯录" />
  41.         <RadioButton
  42.             android:id="@+id/settings_tab"
  43.             style="@style/Custom.TabRadioButton"
  44.             android:drawableTop="@drawable/tab_setting_selector"
  45.             android:text="设置" />
  46.     </RadioGroup>
  47. </RelativeLayout>

2. Activity 类

  1. public class Style2Activity extends AppCompatActivity {
  3.     private ViewPager mViewPager;
  4.     private RadioGroup mTabRadioGroup;
  6.     private List<Fragment> mFragments;
  7.     private FragmentPagerAdapter mAdapter;
  9.     @Override
  10.     protected void onCreate(Bundle savedInstanceState) {
  11.         super.onCreate(savedInstanceState);
  12.         setContentView(R.layout.activity_style2);
  13.         initView();
  14.     }
  16.     private void initView() {
  17.         // find view
  18.         mViewPager = findViewById(R.id.fragment_vp);
  19.         mTabRadioGroup = findViewById(R.id.tabs_rg);
  20.         // init fragment
  21.         mFragments = new ArrayList<>(4);
  22.         mFragments.add(BlankFragment.newInstance("今日"));
  23.         mFragments.add(BlankFragment.newInstance("记录"));
  24.         mFragments.add(BlankFragment.newInstance("通讯录"));
  25.         mFragments.add(BlankFragment.newInstance("设置"));
  26.         // init view pager
  27.         mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), mFragments);
  28.         mViewPager.setAdapter(mAdapter);
  29.         // register listener
  30.         mViewPager.addOnPageChangeListener(mPageChangeListener);
  31.         mTabRadioGroup.setOnCheckedChangeListener(mOnCheckedChangeListener);
  32.     }
  34.     @Override
  35.     protected void onDestroy() {
  36.         super.onDestroy();
  37.         mViewPager.removeOnPageChangeListener(mPageChangeListener);
  38.     }
  40.     private ViewPager.OnPageChangeListener mPageChangeListener = new ViewPager.OnPageChangeListener() {
  41.         @Override
  42.         public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  44.         }
  46.         @Override
  47.         public void onPageSelected(int position) {
  48.             RadioButton radioButton = (RadioButton) mTabRadioGroup.getChildAt(position);
  49.             radioButton.setChecked(true);
  50.         }
  52.         @Override
  53.         public void onPageScrollStateChanged(int state) {
  55.         }
  56.     };
  58.     private RadioGroup.OnCheckedChangeListener mOnCheckedChangeListener = new RadioGroup.OnCheckedChangeListener() {
  59.         @Override
  60.         public void onCheckedChanged(RadioGroup group, int checkedId) {
  61.             for (int i = 0; i < group.getChildCount(); i++) {
  62.                 if (group.getChildAt(i).getId() == checkedId) {
  63.                     mViewPager.setCurrentItem(i);
  64.                     return;
  65.                 }
  66.             }
  67.         }
  68.     };
  70.     private class MyFragmentPagerAdapter extends FragmentPagerAdapter {
  72.         private List<Fragment> mList;
  74.         public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> list) {
  75.             super(fm);
  76.             this.mList = list;
  77.         }
  79.         @Override
  80.         public Fragment getItem(int position) {
  81.             return this.mList == null ? null : this.mList.get(position);
  82.         }
  84.         @Override
  85.         public int getCount() {
  86.             return this.mList == null ? 0 : this.mList.size();
  87.         }
  88.     }
  90. }

这里唯一注意点的就是两个监听事件，要实现底部导航按钮和页面的联动。

四、带页面跳转功能的底部导航

很多 APP 的底部导航栏中间有一个很大的按钮，点击后通常是打开一个新的页面，这里我们要实现的就是这种底部导航。

依旧是使用 RadioGroup 来做，只不过中间一个 tab 我们先用一个空的 View 来占位，然后在这个 View 的位置放置一个较大的按钮来覆盖住。

  1. 布局文件

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.  xmlns:tools="http://schemas.android.com/tools"
    4.  android:layout_width="match_parent"
    5.  android:layout_height="match_parent"
    6.  tools:context=".style3.Style3Activity">
    8.  <FrameLayout
    9.      android:id="@+id/fragment_container"
    10.      android:layout_width="match_parent"
    11.      android:layout_height="match_parent"
    12.      android:layout_above="@+id/tabs_rg" />
    14.  <RadioGroup
    15.      android:id="@+id/tabs_rg"
    16.      android:layout_width="match_parent"
    17.      android:layout_height="56dp"
    18.      android:layout_alignParentBottom="true"
    19.      android:background="#dcdcdc"
    20.      android:orientation="horizontal">
    22.      <RadioButton
    23.          android:id="@+id/today_tab"
    24.          style="@style/Custom.TabRadioButton"
    25.          android:checked="true"
    26.          android:drawableTop="@drawable/tab_sign_selector"
    27.          android:text="今日" />
    29.      <RadioButton
    30.          android:id="@+id/record_tab"
    31.          style="@style/Custom.TabRadioButton"
    32.          android:drawableTop="@drawable/tab_record_selector"
    33.          android:text="记录" />
    35.      <View style="@style/Custom.TabRadioButton" />
    37.      <RadioButton
    38.          android:id="@+id/contact_tab"
    39.          style="@style/Custom.TabRadioButton"
    40.          android:drawableTop="@drawable/tab_contact_selector"
    41.          android:text="通讯录" />
    43.      <RadioButton
    44.          android:id="@+id/settings_tab"
    45.          style="@style/Custom.TabRadioButton"
    46.          android:drawableTop="@drawable/tab_setting_selector"
    47.          android:text="设置" />
    48.  </RadioGroup>
    50.  <ImageView
    51.      android:id="@+id/sign_iv"
    52.      android:layout_width="80dp"
    53.      android:layout_height="80dp"
    54.      android:layout_alignParentBottom="true"
    55.      android:layout_centerHorizontal="true"
    56.      android:background="@android:color/transparent"
    57.      android:src="@mipmap/sign" />
    58. </RelativeLayout>

    2. Activity 类

    ```java public class Style3Activity extends AppCompatActivity {

    private RadioGroup mTabRadioGroup; private SparseArray mFragmentSparseArray;

    @Override protected void onCreate(Bundle savedInstanceState) {

    1.  super.onCreate(savedInstanceState);
    2.  setContentView(R.layout.activity_style3);
    3.  initView();

    }

    private void initView() {

    1.  mTabRadioGroup = findViewById(R.id.tabs_rg);
    2.  mFragmentSparseArray = new SparseArray<>();
    3.  mFragmentSparseArray.append(R.id.today_tab, BlankFragment.newInstance("今日"));
    4.  mFragmentSparseArray.append(R.id.record_tab, BlankFragment.newInstance("记录"));
    5.  mFragmentSparseArray.append(R.id.contact_tab, BlankFragment.newInstance("通讯录"));
    6.  mFragmentSparseArray.append(R.id.settings_tab, BlankFragment.newInstance("设置"));
    7.  mTabRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
    8.      @Override
    9.      public void onCheckedChanged(RadioGroup group, int checkedId) {
    10.          // 具体的fragment切换逻辑可以根据应用调整，例如使用show()/hide()
    11.          getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container,
    12.                  mFragmentSparseArray.get(checkedId)).commit();
    13.      }
    14.  });
    15.  // 默认显示第一个
    16.  getSupportFragmentManager().beginTransaction().add(R.id.fragment_container,
    17.          mFragmentSparseArray.get(R.id.today_tab)).commit();
    18.  findViewById(R.id.sign_iv).setOnClickListener(new View.OnClickListener() {
    19.      @Override
    20.      public void onClick(View v) {
    21.          startActivity(new Intent(Style3Activity.this, SignActivity.class));
    22.      }
    23.  });

    }

} ``` 注意：
如果这里你也想使用 ViewPager 来展示 Fragment 的话，一定要注意这里的 RadioGroup 中间有一个占位的 View，即两者的监听事件里，实现联动时要考虑多个这个 View 的存在。

代码地址： https://gitee.com/afei_/BottomTabbar