您好,欢迎来到二三娱乐。
搜索
您的当前位置:首页底部导航 Bottom navigation

底部导航 Bottom navigation

来源:二三娱乐

Bottom navigation,为顶级视图(top-level views)提供快速导航,可以快速的访问和刷新顶级视图

1、样式

  • 底部导航的action通常是3-5个,小于3个推荐使用tab,大于三个推荐使用navigation drawer
  • 高度: 56dp, Icon大小: 24 x 24dp
  • active状态下,推荐
  • icon、字体颜色是primary color(Fixed)
  • icon、字体颜色是白色或黑色(Shifting),这种状态下,整个Bottom navigation Bar的颜色是primary color
  • ** 在切换的时候,使用cross-fade动画,避免视图间的横向移动 **

2、Fixed、Shifting

Bottom navigation,有两种Mode:分别是Fixed、Shifting

  • Fixed:
  • 宽度=总宽度/action个数
  • 最大宽度: 168dp
  • 最小宽度: 80dp
  • Padding:6dp(8dp)、10dp、12dp
  • 字体大小:12sp、14sp
Fixed bottom navigation bar
  • Shifting:
  • Active view :Maximum: 168dp 、Minimum: 96dp
  • Inactive view:Maximum: 96dp、Minimum: 56dp
  • Padding:6dp above icon (active view), 16dp above and below icon (inactive view)
    10dp under text
Shifting bottom navigation bar

3、代码实现

1、依赖

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

2、布局文件

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

3、Activity中的实现
注意这两个参数

  • Mode:

  • BottomNavigationBar.MODE_SHIFTING:不固定大小

  • BottomNavigationBar.MODE_FIXED:固定大小

  • BackgroundStyle:

  • BottomNavigationBar.BACKGROUND_STYLE_RIPPLE:Bottom navigation的背景色是设置的颜色(ActiveColor)

  • BottomNavigationBar.BACKGROUND_STYLE_STATIC:Bottom navigation的背景色是白色

区别如下图
</br>

shifting_ripple shifting_static shifting_ripple shifting_static fixed_ripple fixed_static

代码如下

        BadgeItem badgeItem=new BadgeItem().setBorderWidth(1).setBackgroundColorResource(R.color.colorAccent).setText("2").setHideOnSelect(true);

        BottomNavigationBar bottomNavigationBar= (BottomNavigationBar) findViewById(R.id.bottomNavigationBar);
        bottomNavigationBar.setFab(floatingActionButton);
        bottomNavigationBar.clearAll();
        
        bottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING);
        bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);
        bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_favorite_white_24dp,"喜欢").setActiveColorResource(R.color.colorPrimary).setBadgeItem(badgeItem))
        .addItem(new BottomNavigationItem(R.drawable.ic_find_replace_white_24dp,"发现").setActiveColorResource(R.color.colorPrimary))
                .addItem(new BottomNavigationItem(R.drawable.ic_location_on_white_24dp, "位置").setActiveColorResource(R.color.colorPrimary))
        .setFirstSelectedPosition(0)
        .initialise();

        bottomNavigationBar.setTabSelectedListener(this);

</br>

3、修改图片和文字的距离?

可以修改BottomNavigationBar的initialise() 方法里的FixedBottomNavigationTab或者ShiftingBottomNavigationTab的fixed_bottom_navigation_item(shifting_bottom_navigation_item)的布局文件。

每个item addItem()方法

通过addItem(),可以看到item被添加到mBottomNavigationItems里了,

initialise()方法如下

    public void initialise() {
        ...
        if (mMode == MODE_FIXED) {
            ...
            for (BottomNavigationItem currentItem : mBottomNavigationItems) {
                FixedBottomNavigationTab bottomNavigationTab = new FixedBottomNavigationTab(getContext());
                setUpTab(bottomNavigationTab, currentItem, itemWidth, itemWidth);
            }
        }
       ... 
    }

FixedBottomNavigationTab 方法

class FixedBottomNavigationTab extends BottomNavigationTab {
    ...
    @Override
    void init() {
       ...
        LayoutInflater inflater = LayoutInflater.from(getContext());
        View view = inflater.inflate(R.layout.fixed_bottom_navigation_item, this, true);
        ...
    }
    ...
}

fixed_bottom_navigation_item

fixed_bottom_navigation_item 修改图片和文字的距离

在副一张图

Elevation

</br>

Copyright © 2019- yule263.com 版权所有 湘ICP备2023023988号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务