导航栏 BottomNavigationBar 详解

来源：互联网发布：大屏幕切换软件编辑：程序博客网时间：2024/06/05 09:09

BottomNavigationBar 是 Google 推出的符合 Material Design 的底部导航栏，官方介绍和 Github地址

这里写图片描述

虽然名字带着个 Bottom，但放上面也行，比如

这里写图片描述

简单的项目使用

工程引入依赖

compile 'com.ashokvarma.android:bottom-navigation-bar:1.3.0'

Activity 的 xml

<?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="com.myapplication.MainActivity">    <RelativeLayout        android:layout_height="match_parent"        android:layout_width="match_parent" />    <com.ashokvarma.bottomnavigation.BottomNavigationBar        android:layout_alignParentBottom="true"        android:id="@+id/bottom_navigation_bar"        android:layout_width="match_parent"                android:layout_height="wrap_content"/></RelativeLayout>

Activity

package com.myapplication;import android.app.Fragment;import android.app.FragmentManager;import android.app.FragmentTransaction;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import com.ashokvarma.bottomnavigation.BottomNavigationBar;import com.ashokvarma.bottomnavigation.BottomNavigationItem;public class MainActivity extends AppCompatActivity {    private BottomNavigationBar bottomNavigationBar;    private Fragment homeFragment, messageFragment, mineFragment;    private Fragment fragment; // 当前使用的 Fragment    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);        // 添加底部导航的 Item        bottomNavigationBar                .addItem(new BottomNavigationItem(R.mipmap.home, "Home"))                .addItem(new BottomNavigationItem(R.mipmap.message, "Message"))                .addItem(new BottomNavigationItem(R.mipmap.mine, "Mine"))                .initialise();        // 添加事件监听        bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener(){            @Override            public void onTabSelected(int position) {                FragmentManager fm = MainActivity.this.getFragmentManager();                FragmentTransaction transaction = fm.beginTransaction();                switch (position) {                    case 0:                        if (homeFragment == null) {                            homeFragment = HomeFragment.newInstance("a", "b");                        }                        // 用 add 不重复加载 Fragment                        if (!homeFragment.isAdded())                            transaction.hide(fragment).add(R.id.rl_fragment, homeFragment);                        else                            transaction.hide(fragment).show(homeFragment);                        fragment = homeFragment;                        break;                    case 1:                        if (messageFragment == null) {                            messageFragment = MessageFragment.newInstance("a", "b");                        }                        if (!messageFragment.isAdded())                            transaction.hide(fragment).add(R.id.rl_fragment, messageFragment);                        else                            transaction.hide(fragment).show(messageFragment);                        fragment = messageFragment;                        break;                    case 2:                        if (mineFragment == null) {                            mineFragment = MineFragment.newInstance("a", "b");                        }                        if (!mineFragment.isAdded())                            transaction.hide(fragment).add(R.id.rl_fragment, mineFragment);                        else                            transaction.hide(fragment).show(mineFragment);                        fragment = mineFragment;                        break;                    default:                        break;                }                transaction.commit();            }            @Override            public void onTabUnselected(int position) {            }            @Override            public void onTabReselected(int position) {            }        });        setDefaultFragment();    }    // 刚进入显示的页面    private void setDefaultFragment() {        FragmentTransaction transaction = getFragmentManager().beginTransaction();        homeFragment = HomeFragment.newInstance("a", "b");        fragment = homeFragment;        transaction.replace(R.id.rl_fragment, homeFragment).commit();    }}

HomeFragment

package mobiq.com.myapplication;import android.os.Bundle;import android.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class HomeFragment extends Fragment {    private static final String ARG_PARAM1 = "param1";    private static final String ARG_PARAM2 = "param2";    private String mParam1;    private String mParam2;    public HomeFragment() {        // Required empty public constructor    }    public static HomeFragment newInstance(String param1, String param2) {        HomeFragment fragment = new HomeFragment();        Bundle args = new Bundle();        args.putString(ARG_PARAM1, param1);        args.putString(ARG_PARAM2, param2);        fragment.setArguments(args);        return fragment;    }    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        if (getArguments() != null) {            mParam1 = getArguments().getString(ARG_PARAM1);            mParam2 = getArguments().getString(ARG_PARAM2);        }    }    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        return inflater.inflate(R.layout.fragment_home, container, false);    }}

这里写图片描述

样式设置

1. Modes

Attribute: bnbMode Values: mode_default, mode_fixed, mode_shifting

Method: setMode() Values:MODE_DEFAULT, MODE_FIXED, MODE_SHIFTING

如 app:bnbMode="mode_shifting" ，或 bottomNavigationBar .setMode(BottomNavigationBar.MODE_FIXED)；，两者共存时，以代码设置为主，代码设置需在 addItem 之前设置才有效。

fixed
shifting：未被选中的向一边收缩变小，下面的文字也不显示
default：若 tab 小于等于 3 个，default 是 fixed 的样式，否则 default 是 shifting 的样式

2. Background Styles

Attribute: bnbBackgroundStyle Values: background_style_default, background_style_static, background_style_ripple

Method: setBackgroundStyle() Values: BACKGROUND_STYLE_DEFAULT, BACKGROUND_STYLE_STATIC, BACKGROUND_STYLE_RIPPLE

如 app:bnbBackgroundStyle="background_style_static"，或 bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE) ，代码设置需在 addItem 之前设置才有效

static：背景就是一个颜色
ripple：看意思好像是说有一种涟漪的动画效果，但我是没看出来
default：mode 为 fixed 时是 static，mode 为 shifting 时是 ripple

3. Colors

Attributes: bnbActiveColor, bnbInactiveColor, bnbBackgroundColor Value: Color value or resource

Methods: setActiveColor, setInActiveColor, setBarBackgroundColor Value: Color value or resource

in-active color
默认值 Theme’s Primary Color，设置当前未被选中的图标和文字的颜色。
active color
默认值 Color.LTGRAY。当 Background Styles 为 static 的时候，设置的是当前被选中的图标和文字的颜色；当Background Styles 为 ripple 的时候，设置的是整个 bar 的背景色。

background color

默认值 Color.WHITE。当 Background Styles 为 static 的时候，设置的是整个 bar 的背景色；当 Background Styles 为 ripple 的时候，设置的是当前被选中的图标和文字的颜色。

bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);bottomNavigationBar    .setActiveColor("#FF0000") // 红    .setInActiveColor("#0000FF") // 蓝    .setBarBackgroundColor("#00FF00"); // 绿

这里写图片描述

bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);bottomNavigationBar    .setActiveColor("#FF0000") // 红    .setInActiveColor("#0000FF") // 蓝    .setBarBackgroundColor("#00FF00"); // 绿

这里写图片描述
效果看上面两张图应该就明白了

4. Individual BottomNavigationItem Colors

单独设置一个 Item 处于选中/未选中状态的颜色

bottomNavigationBar    .addItem(new BottomNavigationItem(R.mipmap.home, "Home")).setActiveColor("#0000FF").setInActiveColor("#FF0000")    .addItem(new BottomNavigationItem(R.mipmap.message, "Message")).setActiveColor("#FFFF00")    .addItem(new BottomNavigationItem(R.mipmap.mine, "Mine")).setInActiveColor("#00FF00")    .initialise();

理论上是单独设置每一个的，但不知怎么回事，我测的效果是，只要设置了一个，所有的都变成一样的，且后面的 activeColor 覆盖前面的，后面的 inActiveColor 也覆盖前面的设置
这里写图片描述

5. Elevation

Attribute: bnbElevation

设置不同的 dp 值没看出什么效果

You can set elevation to 0dp if you don’t want a shadow or plan to draw your own.

看上面的话，也许和阴影之类的有关系吧。

6. BottomNavigationItem Icon Customisations

作用就是说，如果一个图标在被选中和未被选中两种状态时，颜色区分不明显，可以单独设置未被选中时的图标

BottomNavigationItem homeItem = new BottomNavigationItem(R.mipmap.home, "Home").                setInactiveIcon(getResources().getDrawable(R.mipmap.ic_launcher));        bottomNavigationBar                .addItem(homeItem)                .addItem(new BottomNavigationItem(R.mipmap.message, "Message"))                .addItem(new BottomNavigationItem(R.mipmap.mine, "Mine"))                .initialise();

为了更明显，将未选中的 Home 换成了另一个 Icon

这里写图片描述

动画

Auto - Hide
如果外层是 CoordinatorLayout 布局，滑动时会自动隐藏显示，可以通过 bottomNavigationBar.setAutoHideEnabled(false) 关闭这效果
Hide/Show
可以主动控制显示和隐藏，还可以设置显示隐藏的动画效果
Property Description Method Values Hide hides with animation hide() - Hide with animation control hides with/without animation hide() boolean (true->animate, false-> don’t animate) UnHide/Show un-hides with animation show() - UnHide/Show with animation control un-hides with/without animation show() boolean (true->animate, false-> don’t animate) Is Hidden returns if the badge is hidden isHidden() boolean

标记

BadgeItem numberBadgeItem = new BadgeItem()    .setBorderWidth(4)    .setBackgroundColor(Color.BLUE)    .setText("5");BottomNavigationItem homeItem = new BottomNavigationItem(R.mipmap.home, "Home");bottomNavigationBar    .addItem(homeItem.setBadgeItem(numberBadgeItem))    .addItem(new BottomNavigationItem(R.mipmap.message, "Message"))    .addItem(new BottomNavigationItem(R.mipmap.mine, "Mine"))    .initialise();

必须在 addItem 的时候，通过 setBadgeItem 设置上去，然后可以通过 numberBadgeItem 修改配置，比如 numberBadgeItem.setText("2")

这里写图片描述

样式设置方法

Property Description Method Values Text Text on the Badge setText() CharSequence Text Color Badge Text Color setTextColorResource(), setTextColor() Resource/ColorCode(String)/Color BackgroundColor Badge Background Color setBackgroundColorResource(), setBackgroundColor() Resource/ColorCode(String)/Color Border Width Width of badge around border setBorderWidth() int (width in pixels) Border Color Badge Border Color setBorderColorResource(), setBorderColor() Resource/ColorCode(String)/Color Gravity Position of Badge on the BottomNavigationItem setGravity() Gravity.TOP/BOTTOM/LEFT/RIGHT (any combination of these)

显示隐藏方法

Property Description Method Values Hide On Select Badge hides on Tab Selection, reappears when it is un-selected setHideOnSelect() boolean Animation Duration Hide/Show Animation Duration setAnimationDuration() int (time in milliseconds) Hide hides with animation hide() - Hide with animation control hides with/without animation hide() boolean (true->animate, false-> don’t animate) UnHide/Show un-hides with animation show() - UnHide/Show with animation control un-hides with/without animation show() boolean (true->animate, false-> don’t animate) Toggle toggles badge between hide/show with animation toggle() - Toggle with animation control toggles badge between hide/show with/without animation toggle() boolean (true->animate, false-> don’t animate) Is Hidden returns if the badge is hidden isHidden() boolean

阅读全文

0 0