/*设置背景颜色*/ setBarBackgroundColor()//参数为R.id.color或者RGB颜色值(String形式)
该方法在BackgroundStyle为BottomNavigationBar.BACKGROUND_STYLE_STATIC
的时候才生效android
/*设置背景模式*/ setBackgroundStyle()
该方法参数有三种(效果图会配合TabMode一块儿展现)git
BottomNavigationBar.BACKGROUND_STYLE_STATIC //静态背景
github
BottomNavigationBar.BACKGROUND_STYLE_RIPPLE//点击以后会扩散的背景
segmentfault
BottomNavigationBar.BACKGROUND_STYLE_DEFAULT//和RIPPLE好像同样
app
/*设置Tab点击的模式*/ setMode()
该方法参数也有三种ide
BottomNavigationBar.MODE_FIXED //自适应长度的Tab(Tab会均匀分布在整个长度内),Tab的文字默认显示
函数
BottomNavigationBar.MODE_SHIFTING //点击以后会本身弹出来(Tab的文字默认不显示,点击以后才会显示)
gradle
BottomNavigationBar.MODE_DEFAULT //和SHIFTING同样
ui
/*为导航栏添加Tab*/ addItem()
该方法参数为BottomNavigationItem对象
BottomNavigationItem的经常使用方法有:this
/*构造函数(参数为当前Tab的图标和标题)*/ BottomNavigationItem(@DrawableRes int mIconResource, @NonNull String mTitle) BottomNavigationItem(Drawable mIcon, @NonNull String mTitle) BottomNavigationItem(Drawable mIcon, @StringRes int mTitleResource) BottomNavigationItem(@DrawableRes int mIconResource, @StringRes int mTitleResource)
/*设置点击状态的Icon*/ setActiveIcon(Drawable mActiveIcon)(参数为drawable资源) setActiveIconResource(@DrawableRes int mActiveIconResource) (参数为drawableId)
/*设置点击状态的Color*/ setActiveColor(int color)(参数为colorId) setActiveColor(@Nullable String colorCode)(参数为String形式的RGB颜色值) setActiveColorResource(@ColorRes int colorResource)(参数为colorResource)
/*设置未点击状态的Icon*/ setInactiveIcon(Drawable mInactiveIcon)(参数为drawable资源) setInactiveIconResource(@DrawableRes int mInactiveIconResource) (参数为drawableId)
/*设置未点击状态的Color*/ setInActiveColor(int color)(参数为colorId) setInActiveColor(@Nullable String colorCode)(参数为String形式的RGB颜色值) setInActiveColorResource(@ColorRes int colorResource)(参数为colorResource)
setFirstSelectedPosition(0) //设置默认选中的Tab
initialise() //初始化(初始化以后才表明完成设置)
addItem()
方法里面设置)Default默认效果
FIXED+STATIC
FIXED+RIPPLE
SHIFTING+RIPPLE
compile 'com.ashokvarma.android:bottom-navigation-bar:1.4.1'//版本号可能会更新,以具体更新为准
<com.ashokvarma.bottomnavigation.BottomNavigationBar android:id="@+id/bottom_nav_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary"> </com.ashokvarma.bottomnavigation.BottomNavigationBar>
/*1.首先进行fvb*/ bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_nav_bar); /*2.进行必要的设置*/ bottomNavigationBar.setBarBackgroundColor(R.color.colorPrimary); bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE); bottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING);//适应大小 /*3.添加Tab*/ bottomNavigationBar.addItem(new BottomNavigationItem( R.drawable.listen_fill,R.string.bottom_nav_home) .setInactiveIconResource(R.drawable.listen) .setActiveColorResource(R.color.colorPrimary)) .addItem(new BottomNavigationItem( R.drawable.speech_fill,R.string.bottom_nav_like) .setInactiveIconResource(R.drawable.speech) .setActiveColorResource(R.color.colorPrimaryDark)) .addItem(new BottomNavigationItem( R.drawable.social_fill,R.string.bottom_nav_location) .setInactiveIconResource(R.drawable.social) .setActiveColorResource(R.color.yellow)) .addItem(new BottomNavigationItem( R.drawable.profile_fill,R.string.bottom_nav_person) .setInactiveIconResource(R.drawable.profile) .setActiveColorResource(R.color.colorAccent)) .setFirstSelectedPosition(0)//默认显示面板 .initialise();//初始化
BACKGROUND_STYLE_RIPPLE
的时候,背景颜色设置会无效,这时背景颜色会体如今setActiveColor()的设置上面*BottomNavigationBar.OnTabSelectedListener
接口/*Tab被选中(position为当前被选中的Tab)*/ @Override public void onTabSelected(int position) { } /*Tab被取消选中(position为当前被选中的Tab)*/ @Override public void onTabUnselected(int position) { } /*Tab被从新选中(position为当前被选中的Tab)*/ @Override public void onTabReselected(int position) { }
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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" tools:context="cn.foxnickel.bottomnavdemo.MainActivity"> <include layout="@layout/content_main"/> <com.ashokvarma.bottomnavigation.BottomNavigationBar android:id="@+id/bottom_nav_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="@color/colorPrimary"> </com.ashokvarma.bottomnavigation.BottomNavigationBar> </RelativeLayout>
package cn.foxnickel.bottomnavdemo; import android.os.Bundle; import android.support.v4.app.FragmentTransaction; import android.support.v7.app.AppCompatActivity; import com.ashokvarma.bottomnavigation.BottomNavigationBar; import com.ashokvarma.bottomnavigation.BottomNavigationItem; import cn.foxnickel.bottomnavdemo.fragment.ListenFragmet; import cn.foxnickel.bottomnavdemo.fragment.ProfileFragmet; import cn.foxnickel.bottomnavdemo.fragment.SocialFragmet; import cn.foxnickel.bottomnavdemo.fragment.SpeechFragmet; public class MainActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener{ private BottomNavigationBar bottomNavigationBar; private ListenFragmet listenFragmet; private SpeechFragmet speechFragmet; private SocialFragmet socialFragmet; private ProfileFragmet profileFragmet; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initBottomNavBar(); initTab(); bottomNavigationBar.setTabSelectedListener(this); } private void initBottomNavBar(){ /*1.首先进行fvb*/ bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_nav_bar); /*2.进行必要的设置*/ bottomNavigationBar.setBarBackgroundColor(R.color.colorPrimary); bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE); bottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING);//适应大小 /*3.添加Tab*/ bottomNavigationBar.addItem(new BottomNavigationItem( R.drawable.listen_fill,R.string.bottom_nav_home) .setInactiveIconResource(R.drawable.listen) .setActiveColorResource(R.color.colorPrimary)) .addItem(new BottomNavigationItem( R.drawable.speech_fill,R.string.bottom_nav_like) .setInactiveIconResource(R.drawable.speech) .setActiveColorResource(R.color.colorPrimaryDark)) .addItem(new BottomNavigationItem( R.drawable.social_fill,R.string.bottom_nav_location) .setInactiveIconResource(R.drawable.social) .setActiveColorResource(R.color.yellow)) .addItem(new BottomNavigationItem( R.drawable.profile_fill,R.string.bottom_nav_person) .setInactiveIconResource(R.drawable.profile) .setActiveColorResource(R.color.colorAccent)) .setFirstSelectedPosition(0)//默认显示面板 .initialise();//初始化 } private void initTab(){ listenFragmet = new ListenFragmet(); FragmentTransaction transaction = getSupportFragmentManager().beginTransaction(); transaction.replace(R.id.content_main,listenFragmet); transaction.commit(); } @Override public void onTabSelected(int position) { FragmentTransaction transaction = getSupportFragmentManager().beginTransaction(); switch (position){ case 0: if(listenFragmet == null){ listenFragmet = new ListenFragmet(); } transaction.replace(R.id.content_main,listenFragmet); break; case 1: if(speechFragmet == null){ speechFragmet = new SpeechFragmet(); } transaction.replace(R.id.content_main,speechFragmet); break; case 2: if(socialFragmet == null){ socialFragmet = new SocialFragmet(); } transaction.replace(R.id.content_main,socialFragmet); break; case 3: if(profileFragmet == null){ profileFragmet = new ProfileFragmet(); } transaction.replace(R.id.content_main,profileFragmet); break; } transaction.commit(); } @Override public void onTabUnselected(int position) { } @Override public void onTabReselected(int position) { } }