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);
好了！到此结束，欢迎大家指教…谢谢！~！
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
