使用步骤
- android studio中build.gradle中添加
dependencies {
compile 'com.ashokvarma.android:bottom-navigation-bar:1.3.0'
}
- 布局文件中添加引用
<com.ashokvarma.bottomnavigation.BottomNavigationBar
android:id="@+id/bottomNavigationBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"/>
- 在代码中调用即可
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();
- 设置监听器，做出相应的处理
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) {
}
显示效果
- BottomNavigationBar.MODE_FIXED ＋ BottomNavigationBar.BACKGROUND_STYLE_RIPPLE
Markdown
- BottomNavigationBar.MODE_FIXED ＋ BottomNavigationBar.BACKGROUND_STYLE_STATIC
Markdown
- BottomNavigationBar.MODE_FIXED ＋ BottomNavigationBar.BACKGROUND_STYLE_STATIC
Markdown
- BottomNavigationBar.MODE_SHIFTING ＋ BottomNavigationBar.BACKGROUND_STYLE_RIPPLE
Markdown
***案例完整代码：
- 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>
- 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