20161223172807254.gif
Android Design Support Library中增加了 BottomNavigationView 这个控件。那么以后底部导航栏是不是就有新的方式了呢？
在这里让我们来学习一下系统的BottomNavigationView和第三方BottomNavigationView库的使用吧！
一、首先来看看系统的BottomNavigationView实现方式：
在 build.gradle 文件中增加依赖：
compile 'com.android.support:design:25.0.0'
在布局文件添加BottomNavigationView组件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="cn.hnshangyu.bottomnavigationviewdemo.MainActivity">
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/secondColor"
android:layout_alignParentBottom="true"
app:menu="@menu/bottom_menu"
app:itemIconTint="@drawable/bottom_navigation_color_selector"
app:itemTextColor="@drawable/bottom_navigation_color_selector"
app:itemBackground="@color/secondColor"/>
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="@+id/button"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_below="@+id/textView"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="点击~~~" />
</RelativeLayout>
app:itemBackground:设置item的背景，对应setItemBackgroundResource(int resId)方法
app:itemIconTintUsed:设置icon的颜色，对应setItemIconTintList(ColorStateList tint)方法
app:itemTextColor:设置文字的颜色，对应setIteTextColor(ColorStateList textColor)方法
app:menu=”@menu/bottom_menu”对应为导航栏的Menu布局在/res/menu/目录下:
<?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/home"
android:enabled="true"
app:showAsAction="ifRoom"
android:icon="@drawable/sy"
android:title="home" />
<item
android:id="@+id/service"
android:enabled="true"
app:showAsAction="ifRoom"
android:icon="@drawable/fw"
android:title="service" />
<item
android:id="@+id/message"
android:enabled="true"
app:showAsAction="ifRoom"
android:icon="@drawable/xx"
android:title="message" />
<item
android:id="@+id/personal"
android:enabled="true"
app:showAsAction="ifRoom"
android:icon="@drawable/wo"
android:title="personal" />
</menu>
以app:menu=”@menu/bottom_menu”的方式添加到布局中。
选择器
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/firstColor" android:state_checked="true" />
<item android:color="@color/gray" android:state_checked="false" />
</selector>
在Activity中添加事件监听,如下:
package cn.hnshangyu.bottomnavigationviewdemo;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
import android.widget.Button;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private BottomNavigationView bottomNavigationView;
private TextView textView;
private Button button;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textView = (TextView) findViewById(R.id.textView);
button = (Button) findViewById(R.id.button);
bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottomNavigation);
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.home:
textView.setText(item.getTitle());
break;
case R.id.service:
textView.setText(item.getTitle());
break;
case R.id.message:
textView.setText(item.getTitle());
break;
case R.id.personal:
textView.setText(item.getTitle());
break;
}
return true;
}
});
}
}
如果和ViewPager进行交互的话，进行如下操作：
viewPager = (ViewPager) findViewById(R.id.viewpager);
bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation);
bottomNavigationView.setOnNavigationItemSelectedListener(
new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.item_call:
viewPager.setCurrentItem(0);
break;
case R.id.item_mail:
viewPager.setCurrentItem(1);
break;
case R.id.item_person:
viewPager.setCurrentItem(2);
break;
}
return false;
}
});
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
if (prevMenuItem != null) {
prevMenuItem.setChecked(false);
} else {
bottomNavigationView.getMenu().getItem(0).setChecked(false);
}
bottomNavigationView.getMenu().getItem(position).setChecked(true);
prevMenuItem = bottomNavigationView.getMenu().getItem(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
// 如果想禁止滑动，可以把下面的代码取消注释
// viewPager.setOnTouchListener(new View.OnTouchListener() {
// @Override
// public boolean onTouch(View v, MotionEvent event) {
// return true;
// }
// });
这样系统的BottomNavigationView库的基本用法就就结束了！
二、下面我们来学习一下一个第三方的BottomNavigationView库LuseenBottomNavigation：
在 build.gradle 文件中增加依赖:
compile 'com.github.armcha:LuseenBottomNavigation:1.8.2'
在布局文件添加BottomNavigationView组件：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
<com.luseen.luseenbottomnavigation.BottomNavigation.BottomNavigationView
android:id="@+id/bottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="@+id/button"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_below="@+id/textView"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Change tab" />
</RelativeLayout>
在Activity中添加事件监听,如下:
package com.luseen.myapplication;
import android.graphics.Typeface;
import android.os.Bundle;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import com.luseen.luseenbottomnavigation.BottomNavigation.BottomNavigationItem;
import com.luseen.luseenbottomnavigation.BottomNavigation.BottomNavigationView;
import com.luseen.luseenbottomnavigation.BottomNavigation.OnBottomNavigationItemClickListener;
public class MainActivity extends AppCompatActivity {
private BottomNavigationView bottomNavigationView;
private TextView textView;
private Button button;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textView = (TextView) findViewById(R.id.textView);
button = (Button) findViewById(R.id.button);
bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottomNavigation);
int[] image = {R.drawable.ic_mic_black_24dp, R.drawable.ic_favorite_black_24dp,
R.drawable.ic_book_black_24dp, R.drawable.github_circle};
int[] color = {ContextCompat.getColor(this, R.color.firstColor), ContextCompat.getColor(this, R.color.secondColor),
ContextCompat.getColor(this, R.color.thirdColor), ContextCompat.getColor(this, R.color.fourthColor)};
if (bottomNavigationView != null) {
/**
* 汉字是否一直显示:(false:显示选中的；true全部显示)
*/
// bottomNavigationView.isWithText(false);
bottomNavigationView.isWithText(true);
/**
* 开启跑到左边
*/
// bottomNavigationView.activateTabletMode();
/**
* 整体背景色
*/
bottomNavigationView.isColoredBackground(true);
/**
* 当 bottomNavigationView.isColoredBackground(true);设置为false时icon和汉字显示颜色能用
*/
bottomNavigationView.setItemActiveColorWithoutColoredBackground(ContextCompat.getColor(this, R.color.secondColor));
/**
* 选中字体的大小
*/
bottomNavigationView.setTextActiveSize(getResources().getDimension(R.dimen.text_active));
/**
* 未选中字体的大小
*/
bottomNavigationView.setTextInactiveSize(getResources().getDimension(R.dimen.text_active));
/**
* 设置字体
*/
bottomNavigationView.setFont(Typeface.createFromAsset(getApplicationContext().getAssets(), "fonts/Noh_normal.ttf"));
/**
* 去掉影子
*/
// bottomNavigationView.disableShadow();
/**
*使用viewpager
*/
// bottomNavigationView.setUpWithViewPager(yourPager , colorResources , imageResources);
}
BottomNavigationItem bottomNavigationItem = new BottomNavigationItem
("Record", color[0], image[0]);
BottomNavigationItem bottomNavigationItem1 = new BottomNavigationItem
("Like", color[1], image[1]);
BottomNavigationItem bottomNavigationItem2 = new BottomNavigationItem
("Books", color[2], image[2]);
BottomNavigationItem bottomNavigationItem3 = new BottomNavigationItem
("GitHub", color[3], image[3]);
bottomNavigationView.addTab(bottomNavigationItem);
bottomNavigationView.addTab(bottomNavigationItem1);
bottomNavigationView.addTab(bottomNavigationItem2);
bottomNavigationView.addTab(bottomNavigationItem3);
bottomNavigationView.setOnBottomNavigationItemClickListener(new OnBottomNavigationItemClickListener() {
@Override
public void onNavigationItemClick(int index) {
switch (index) {
case 0:
textView.setText("Record");
break;
case 1:
textView.setText("Like");
break;
case 2:
textView.setText("Books");
break;
case 3:
textView.setText("GitHub");
break;
}
}
});
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
bottomNavigationView.selectTab(2);
}
});
}
}
三、如果使用的是:viewpage,您可以连接到BottomNavigationView,并以这种方式设置颜色:
ContextCompat.getColor(context, R.color.firstColor)
bottomNavigationView.setUpWithViewPager(yourPager , colorResources , imageResources);
好了！到此结束，欢迎大家指教…谢谢！~！
