Android之底部导航栏BottomNavigationBar

使用步骤

1. android studio中build.gradle中添加

dependencies {
compile 'com.ashokvarma.android:bottom-navigation-bar:1.3.0'
}

2. 布局文件中添加引用

<com.ashokvarma.bottomnavigation.BottomNavigationBar
       android:id="@+id/bottomNavigationBar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_gravity="bottom"/>

3. 在代码中调用即可

   BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottomNavigationBar);
       bottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
       bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);

       bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_default, "Home").setActiveColorResource(R.color.colorAccent))
               .addItem(new BottomNavigationItem(R.drawable.ic_download, "Second").setActiveColorResource(R.color.colorPrimary))
               .addItem(new BottomNavigationItem(R.drawable.ic_error_page, "Thr").setActiveColorResource(R.color.colorPrimaryDark))
               .addItem(new BottomNavigationItem(R.mipmap.ic_launcher, "four").setActiveColorResource(R.color.colorFour))
               .setFirstSelectedPosition(0)
               .initialise();

4. 设置监听器，做出相应的处理

bottomNavigationBar.setTabSelectedListener(this);

//点击选择的
@Override
  public void onTabSelected(int position) {
      if (fragments != null) {
          if (position < fragments.size()) {
              FragmentManager fm = getSupportFragmentManager();
              FragmentTransaction ft = fm.beginTransaction();
              Fragment fragment = fragments.get(position);
              if (fragment.isAdded()) {
                  ft.replace(R.id.layFrame, fragment);
              } else {
                  ft.add(R.id.layFrame, fragment);
              }
              ft.commitAllowingStateLoss();
          }
      }
  }

  @Override
  public void onTabUnselected(int position) {
      if (fragments != null) {
          if (position < fragments.size()) {
              FragmentManager fm = getSupportFragmentManager();
              FragmentTransaction ft = fm.beginTransaction();
              Fragment fragment = fragments.get(position);
              ft.remove(fragment);
              ft.commitAllowingStateLoss();
          }
      }
  }

  @Override
  public void onTabReselected(int position) {

  }

显示效果

1. BottomNavigationBar.MODE_FIXED ＋ BottomNavigationBar.BACKGROUND_STYLE_RIPPLE

Markdown

2. BottomNavigationBar.MODE_FIXED ＋ BottomNavigationBar.BACKGROUND_STYLE_STATIC

Markdown

3. BottomNavigationBar.MODE_FIXED ＋ BottomNavigationBar.BACKGROUND_STYLE_STATIC

Markdown

4. BottomNavigationBar.MODE_SHIFTING ＋ BottomNavigationBar.BACKGROUND_STYLE_RIPPLE

Markdown

***案例完整代码：

1. activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.xiaojiu.bottomnavigationbardemo.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"/>

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

    <FrameLayout
        android:id="@+id/layFrame"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottomNavigationBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"/>
</LinearLayout>

2. MainActivity

package com.xiaojiu.bottomnavigationbardemo;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

import com.ashokvarma.bottomnavigation.BottomNavigationBar;
import com.ashokvarma.bottomnavigation.BottomNavigationItem;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener {

    private ArrayList<Fragment> fragments;
    private BottomNavigationBar bottomNavigationBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottomNavigationBar);
        bottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
        bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);

        bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_default, "Home").setActiveColorResource(R.color.colorAccent))
                .addItem(new BottomNavigationItem(R.drawable.ic_download, "Second").setActiveColorResource(R.color.colorPrimary))
                .addItem(new BottomNavigationItem(R.drawable.ic_error_page, "Thr").setActiveColorResource(R.color.colorPrimaryDark))
                .addItem(new BottomNavigationItem(R.mipmap.ic_launcher, "four").setActiveColorResource(R.color.colorFour))
                .setFirstSelectedPosition(0)
                .initialise();

        fragments = getFragments();
        setDefaultFragment();
        bottomNavigationBar.setTabSelectedListener(this);


    }

    private ArrayList<Fragment> getFragments() {
        ArrayList<Fragment> fragments = new ArrayList<>();
        fragments.add(HomeFragment.newInstance("Home"));
        fragments.add(SecondFragment.newInstance("Second"));
        fragments.add(ThreeFragment.newInstance("three"));
        fragments.add(FourFragment.newInstance("Four"));
        return fragments;
    }

    /**
     * 设置默认的
     */
    private void setDefaultFragment() {
        FragmentManager fm = getSupportFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        transaction.replace(R.id.layFrame, fragments.get(0));
        transaction.commit();
    }

    @Override
    public void onTabSelected(int position) {
        if (fragments != null) {
            if (position < fragments.size()) {
                FragmentManager fm = getSupportFragmentManager();
                FragmentTransaction ft = fm.beginTransaction();
                Fragment fragment = fragments.get(position);
                if (fragment.isAdded()) {
                    ft.replace(R.id.layFrame, fragment);
                } else {
                    ft.add(R.id.layFrame, fragment);
                }
                ft.commitAllowingStateLoss();
            }
        }
    }

    @Override
    public void onTabUnselected(int position) {
        if (fragments != null) {
            if (position < fragments.size()) {
                FragmentManager fm = getSupportFragmentManager();
                FragmentTransaction ft = fm.beginTransaction();
                Fragment fragment = fragments.get(position);
                ft.remove(fragment);
                ft.commitAllowingStateLoss();
            }
        }
    }

    @Override
    public void onTabReselected(int position) {

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_scrolling, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //在BACKGROUND_STYLE_STATIC 模式下颜色是底部导航栏背景色，
        // BACKGROUND_STYLE_RIPPLE模式下是图标和文字的颜色（选中/未选中）
        //noinspection SimplifiableIfStatement
        if (id == R.id.take_pic) {
            bottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
            bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);
            return true;
        } else if (id == R.id.multi_select) {
            bottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
            bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
            return true;
        } else if (id == R.id.theme_color_pick) {
            bottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING);
            bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
            return true;
        } else if (id == R.id.theme_color_four) {
            bottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING);
            bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

---

至于用到的toolbar网上很多资料，不再啰嗦

Demo地址：

https://github.com/mijiaxiaojiu/bottomNavigationBar.git