Android BottomNavigationBar底部导航的使用方法

简介:Google推出的BottomNavigationBar底部导航栏

1 、基本的使用(add和replace方式)
2、扩展添加消息和图形
3、修改图片大小与文字间距

版本更新:2019-5-13

补充布局文件activity_main

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

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

 <View
 android:layout_width="match_parent"
 android:layout_height="0.5dp"
 android:background="#eeeeee" />

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

</LinearLayout>

1、默认使用studio背景图,防止少图片资源(效果图虽不尽人意~)

2、项目build.gradle添加依赖:(注意studio3.0以下将implementation 换成 compile)

implementation 'com.ashokvarma.android:bottom-navigation-bar:2.0.4'

3、MainActivity

import android.graphics.Color;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

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

import java.lang.reflect.Field;

public class MainActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener {

 private FragmentManager mFragmentManager;
 private BottomNavigationBar bottomNavigationBar;

 private FirstFragment firstFragment;
 private SecondFragment secondFragment;
 private ThirdFragment thirdFragment;
 private FourthFragment fourthFragment;
 //默认选择第一个fragment
 private int lastSelectedPosition = 0;
 private FragmentTransaction transaction;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 bottomNavigationBar = this.findViewById(R.id.bottomNavigationBar);
 showNumberAndShape();
 initNavigation();
 }

 /**
 * 初始底部导航栏
 */
 private void initNavigation() {
 //导航栏Item的个数<=3 用 MODE_FIXED 模式,否则用 MODE_SHIFTING 模式
 bottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
 bottomNavigationBar.setTabSelectedListener(this);//监听切换点击事件
 //bottomNavigationBar.setBarBackgroundColor("#595757");//背景颜色
 //1、BACKGROUND_STYLE_DEFAULT:如果设置的Mode为MODE_FIXED,将使用BACKGROUND_STYLE_STATIC 。如果Mode为MODE_SHIFTING将使用BACKGROUND_STYLE_RIPPLE。
 //2、BACKGROUND_STYLE_STATIC:点击无水波纹效果
 //3、BACKGROUND_STYLE_RIPPLE:点击有水波纹效果
 bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
 //需要添加的item数
 bottomNavigationBar
  //选中时的图片的资源、文字
  .addItem(new BottomNavigationItem(R.drawable.home, "首页")
   //选中的颜色
   .setActiveColor(R.color.colorAccent)
   //选中的颜色(资源文件 下面同上)
   //.setActiveColorResource(R.color.colorAccent)
   //未选中的颜色(默认灰色 可注释)
   .setInActiveColor("#999999")
   //未选中时的图片的资源
   .setInactiveIconResource(R.drawable.ic_launcher_background))
  .addItem(new BottomNavigationItem(R.drawable.home, "订单")
   .setActiveColorResource(R.color.colorAccent)
   .setInActiveColor("#999999")
   .setInactiveIconResource(R.drawable.ic_launcher_background)).
  addItem(new BottomNavigationItem(R.drawable.ic_launcher_background, "购物车")
   .setActiveColorResource(R.color.colorAccent)
   .setInActiveColor("#999999")
   .setBadgeItem(textBadgeItem)
   .setInactiveIconResource(R.drawable.ic_launcher_background)).
  addItem(new BottomNavigationItem(R.drawable.ic_launcher_background, "我的")
   .setActiveColorResource(R.color.colorAccent)
   .setInActiveColor("#999999")
   .setBadgeItem(shapeBadgeItem)
   .setInactiveIconResource(R.drawable.ic_launcher_background))
  .setFirstSelectedPosition(lastSelectedPosition)//设置默认选中项
  //.setFab(FloatingActionButton的id)//FloatingActionButton 关联
  .initialise();//注意此句放在最后
 setIconItemMargin(bottomNavigationBar,10,25,14);
 setDefaultFragment();
 }

 /**
 * 设置默认开启的fragment
 */
 private void setDefaultFragment() {
 mFragmentManager = getSupportFragmentManager();
 FragmentTransaction transaction = mFragmentManager.beginTransaction();
 firstFragment = new FirstFragment();
 transaction.add(R.id.tb, firstFragment);
 transaction.commit();
 }

 /**
 * 切换事件
 */
 @Override
 public void onTabSelected(int position) {
 lastSelectedPosition = position;//每次点击赋值
 //开启事务
 transaction = mFragmentManager.beginTransaction();
 hideFragment(transaction);
 switch (position) {
  case 0:
  if (firstFragment == null) {
   firstFragment = new FirstFragment();
   transaction.add(R.id.tb, firstFragment);
  } else {
   transaction.show(firstFragment);
  }
  // transaction.replace(R.id.tb, firstFragment);
  break;
  case 1:
  if (secondFragment == null) {
   secondFragment = new SecondFragment();
   transaction.add(R.id.tb, secondFragment);
  } else {
   transaction.show(secondFragment);
  }
  break;
  case 2:
  if (thirdFragment == null) {
   thirdFragment = new ThirdFragment();
   transaction.add(R.id.tb, thirdFragment);
  } else {
   transaction.show(thirdFragment);
  }
  break;
  case 3:
  if (fourthFragment == null) {
   fourthFragment = new FourthFragment();
   transaction.add(R.id.tb, fourthFragment);
  } else {
   transaction.show(fourthFragment);
  }
  break;
 }
 // 事务提交
 transaction.commit();
 }

 /**
 * 隐藏当前fragment
 *
 * @param transaction
 */
 private void hideFragment(FragmentTransaction transaction) {
 if (firstFragment != null) {
  transaction.hide(firstFragment);
 }
 if (secondFragment != null) {
  transaction.hide(secondFragment);
 }
 if (thirdFragment != null) {
  transaction.hide(thirdFragment);
 }
 if (fourthFragment != null) {
  transaction.hide(fourthFragment);
 }
 }

 private TextBadgeItem textBadgeItem;
 private ShapeBadgeItem shapeBadgeItem;

 /**
 * 展示消息点
 */
 private void showNumberAndShape() {
 //消息
 textBadgeItem = new TextBadgeItem()
  .setText("99")//显示的文本
  .setTextColor("#ffffff")//文本颜色
  //.setTextColorResource(R.color.colorAccent)//文本颜色(资源文件-下面如同)
  .setBorderWidth(6)//圆环宽度
  .setBorderColor(Color.parseColor("#000000"))//圆环燕色
  //.setBorderColorResource(R.color.colorPrimary)
  .setBackgroundColor("#FF4081")//背景颜色
  .setHideOnSelect(false);//选中是否隐藏
 //.setBackgroundColorResource(R.color.colorAccent)//背景颜色
 //.setAnimationDuration(300)//隐藏与动画的过渡时间(setHideOnSelect 为true时生效)
 //.setGravity(Gravity.RIGHT | Gravity.TOP); //位置,默认右上角(可不设置)

 //形状
 shapeBadgeItem = new ShapeBadgeItem()
  //也可设置为常量 (0-6之间)
  .setShape(ShapeBadgeItem.SHAPE_HEART) //形状
  .setShapeColor(Color.RED) //颜色
  //.setShapeColorResource(R.color.colorPrimaryDark) //(同上)
  .setEdgeMarginInDp(this, 0) //距离Item的边距,dp值
  //.setEdgeMarginInPixels(20) //距离Item的边距,px
  .setSizeInDp(this, 15, 15) //宽高值,dp
  //.setSizeInPixels(30, 30) //宽高值,px
  .setAnimationDuration(300) //隐藏和展示的动画速度,单位毫秒,和setHideOnSelect一起使用
  //.setGravity(Gravity.LEFT) //位置,默认右上角
  .setHideOnSelect(false); //true:当选中状态时消失,非选中状态显示,moren false
 }

 @Override
 public void onTabUnselected(int position) {
 }

 @Override
 public void onTabReselected(int position) {
 }

 /**
 * 修改间距及图片文字大小
 * @param bottomNavigationBar
 * @param space 文字与图片的间距
 * @param imgLen 单位:dp,图片大小
 * @param textSize 单位:dp,文字大小
 */
 private void setIconItemMargin(BottomNavigationBar bottomNavigationBar, int space, int imgLen, int textSize){
 Class barClass = bottomNavigationBar.getClass();
 Field[] fields = barClass.getDeclaredFields();
 for(int i = 0; i < fields.length; i++){
  Field field = fields[i];
  field.setAccessible(true);
  if(field.getName().equals("mTabContainer")){
  try{
   //反射得到 mTabContainer
   LinearLayout mTabContainer = (LinearLayout) field.get(bottomNavigationBar);
   for(int j = 0; j < mTabContainer.getChildCount(); j++){
   //获取到容器内的各个Tab
   View view = mTabContainer.getChildAt(j);
   //获取到Tab内的各个显示控件
   FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, dip2px(56));
   FrameLayout container = (FrameLayout) view.findViewById(R.id.fixed_bottom_navigation_container);
   container.setLayoutParams(params);
   container.setPadding(dip2px(12), dip2px(0), dip2px(12), dip2px(0));

   //获取到Tab内的文字控件
   TextView labelView = (TextView) view.findViewById(com.ashokvarma.bottomnavigation.R.id.fixed_bottom_navigation_title);
   //计算文字的高度DP值并设置,setTextSize为设置文字正方形的对角线长度,所以:文字高度(总内容高度减去间距和图片高度)*根号2即为对角线长度,此处用DP值,设置该值即可。
   labelView.setTextSize(TypedValue.COMPLEX_UNIT_DIP, textSize);
   labelView.setIncludeFontPadding(false);
   labelView.setPadding(0,0,0,dip2px(20-textSize - space/2));

   //获取到Tab内的图像控件
   ImageView iconView = (ImageView) view.findViewById(com.ashokvarma.bottomnavigation.R.id.fixed_bottom_navigation_icon);
   //设置图片参数,其中,MethodUtils.dip2px():换算dp值
   params = new FrameLayout.LayoutParams(dip2px(imgLen), dip2px(imgLen));
   params.setMargins(0,0,0,space/2);
   params.gravity = Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL;
   iconView.setLayoutParams(params);
   }
  } catch (IllegalAccessException e){
   e.printStackTrace();
  }
  }
 }
 }

 private int dip2px(float dpValue) {
 final float scale = getApplication().getResources().getDisplayMetrics().density;
 return (int) (dpValue * scale + 0.5f);
 }
}

其中有4个碎片在这只贴出FirstFragment (其余几乎一致)

4、FirstFragment

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FirstFragment extends Fragment {

 @Override
 public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

 View view = inflater.inflate(R.layout.activity_first_fragment, container, false);

 return view;
 }
}

注意引用V4的包

其布局:activity_first_fragment

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:gravity="center">

 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="第一个Fragment"
 android:textSize="30sp" />
</LinearLayout>

5、若要使用replace的显示方式,将onTabSelected监听处改为如下代码即可

1)、switch处

 switch (position) {
  case 0:
  firstFragment = new FirstFragment();
  transaction.replace(R.id.tb, firstFragment);
  break;
  case 1:
  secondFragment = new SecondFragment();
  transaction.replace(R.id.tb, secondFragment);
  break;
  case 2:
  thirdFragment = new ThirdFragment();
  transaction.replace(R.id.tb, thirdFragment);
  break;
  case 3:
  fourthFragment = new FourthFragment();
  transaction.replace(R.id.tb, fourthFragment);
  break;
 }

2)、注释 //hideFragment(transaction);这个方法

6、最后贴出TextBadgeItem和ShapeBadgeItem的属性图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android BottomNavigationView底部导航效果

    BottomNavigationView 很早之前就在 Material Design 中出现了,但是直到 Android Support Library 25 中才增加了 BottomNavigationView 控件.也就是说如果使用官方的BottomNavigationView控件必须让targetSdkVersion >= 25,这样才能引入25版本以上的兼容包. 接下来我们来看看如何使用BottomNavigationView. 使用BottomNavigationView 需要添加d

  • Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果

    BottomBar BottomBar是Github上的一个开源框架,因为从1.3.3开始不支持fragments了,要自己配置,弄了很久,不管是app的fragment还是V4 的程序总是总是闪退.于是就用这种方式实现了,效果还不错.github有详细说明,多余的就不说了. 这个roughike是这个项目的所有者(大神致敬). 我用的是Android studio开发,fragment全部导的V4的包(以为最开始就支持的是v4的,后面也支持了app.fragment). 首先是dependen

  • Android使用BottomNavigationBar实现导航栏功能

    基本属性 setActiveColor //选中item的字体颜色 setInActiveColor //未选中Item中的颜色 setBarBackgroundColor//背景颜色 setMode(BottomNavigationBar.MODE_FIXED) //填充模式,未选中的Item会显示文字,没有换挡动画 setMode(BottomNavigationBar.MODE_SHIFTING) //换挡模式,未选中的Item不会显示文字,选中的会显示文字 setBackgroundSt

  • ANDROID BottomNavigationBar底部导航栏的实现示例

    第一种介绍的就是使用开源库,因为使用开源库最简单,也更加的符合我们的审美标准,同时BottomNavigationBar还是符合当前的Material Design标准的. 效果展示 依赖 compile'com.ashokvarma.android:bottom-navigation-bar:1.2.0' 布局文件 activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLa

  • Android使用BottomNavigationBar实现底部导航栏

    本文实例为大家分享了Android实现底部导航栏的具体代码,供大家参考,具体内容如下 展示 MODE_FIXED+BACKGROUND_STYLE_STATIC效果 DE_FIXED+BACKGROUND_STYLE_RIPPLE效果 MODE_SHIFTING+BACKGROUND_STYLE_STATIC效果 MODE_SHIFTING+BACKGROUND_STYLE_RIPPLE效果 1在Gradle中添加 compile 'com.ashokvarma.android:bottom-n

  • Android程序开发之Fragment实现底部导航栏实例代码

    流行的应用的导航一般分为两种,一种是底部导航,一种是侧边栏. 说明 IDE:AS,Android studio; 模拟器:genymotion; 实现的效果,见下图. 具体实现 为了讲明白这个实现过程,我们贴出来的代码多一写,这样更方便理解 [最后还会放出完整的代码实现] .看上图的界面做的比较粗糙,但实现过程的骨架都具有了,想要更完美的设计,之后自行完善吧 ^0^. 布局 通过观察上述效果图,发现任意一个选项页面都有三部分组成: 顶部去除ActionBar后的标题栏: 中间一个Fragment

  • Android实现底部导航栏功能(选项卡)

    现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其中各个类的作用以及资源文件就不详细解释了,还有资源图片(在该Demo中借用了其它应用程序的资源图片)也不提供了,大家可以自行更换自己需要的资源图片.直接上各个布局文件或各个类的代码: 1. res/layout目录下的 maintabs.xml 源码: <?xml version="1.0&q

  • Android实现顶部底部双导航界面功能

    最近想弄一个双导航功能,查看了许多资料,总算是实现了功能,这边就算是给自己几个笔记吧! 先来看看效果 那么就开始实现了! 底部导航栏我选择用FragmentTabHost+Fragment来实现,这个方法我觉得挺好用的,代码量也不多 首先是开始的activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://s

  • Android BottomNavigationBar底部导航控制器使用方法详解

    最近Google在自己推出的Material design中增加了Bottom Navigation导航控制.Android一直没有官方的导航控制器,自己实现确实是五花八门,有了这个规定之后,就类似苹果的底部Toolbar,以后我们的APP就会有一致的风格,先看一张效果: 这是官方在Material design中给出一张图,确实很不错. 1.BottomNavigationBar的下载地址 https://github.com/Ashok-Varma/BottomNavigation 2.使用

  • Android BottomNavigationBar底部导航的使用方法

    简介:Google推出的BottomNavigationBar底部导航栏 1 .基本的使用(add和replace方式) 2.扩展添加消息和图形 3.修改图片大小与文字间距 版本更新:2019-5-13 补充布局文件activity_main <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/

  • android SectorMenuView底部导航扇形菜单的实现代码

    这次分析一个扇形菜单展开的自定义View, 也是我实习期间做的一个印象比较深刻的自定义View, 前后切换了很多种实现思路, 先看看效果展示 效果展示 效果分析 点击圆形的FloatActionBar, 自身旋转一定的角度 菜单像波纹一样扩散开来 显示我们添加的item 实现分析 使用adapter适配器去设置View, 用户可自定义性强, 不过每次使用需要去设置Adapter, 较为繁琐 直接调用ItemView, 将ImageView和TextView写死, 用户操作简单, 但是缺乏可定制性

  • Android 弹出Dialog时隐藏状态栏和底部导航栏的方法

    上代码 dialog.getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION); dialog.getWindow().getDecorView().setOnSystemUiVisibilityChangeListener(new View.OnSystemUiVisibilityChangeListener() { @Override public void onSystemUi

  • Android实现底部导航栏功能

    本文实例为大家分享了Android实现底部导航栏功能的具体代码,供大家参考,具体内容如下 实验效果: (1)在drawable文件夹下新建tab_menu_bg.xml文件,具体代码如下: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item

  • Android适配底部虚拟按键的方法详解

    最近项目进行适配的时候发现部分(如华为手机)存在底部虚拟按键的手机会因为虚拟按键的存在导致挡住部分界面,因为需要全屏显示,故调用虚拟按键隐藏方法使之隐藏,然而发现出现如下问题: 手动操作隐藏虚拟按键后出现长白条区域 不自动隐藏 滑出状态栏后虚拟按键也出来,状态栏隐藏后虚拟却不跟着隐藏 在没有虚拟按键的设备上影响了SurfaceView全屏显示图传(原本全屏显示的图传在切出去再进来时变成了小屏显示) 通过google了很多方法并尝试终于解决了这个问题,达到如下效果: 每次进入界面时虚拟按键自动隐藏

  • Android实现底部导航栏的主界面

    在主流app中,应用的主界面都是底部含有多个标签的导航栏,点击可以切换到相应的界面,如图: 接下来将描述下其实现过程. 1.首先是分析界面,底部导航栏我们可以用一个占满屏幕宽度.包裹着数个标签TextView.方向为横向horizontal的线性布局LinearLayout.上方则是一个占满剩余空间的FrameLayout. activity_main.xml <?xml version="1.0" encoding="utf-8"?> <Line

  • android实现底部导航栏

    底部导航栏我选择用FragmentTabHost+Fragment来实现,这个方法比较好用,代码量也不多 首先是开始的activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_

随机推荐