Android官方底部Tab栏设计规范

本文深入解析Google官方提出的Bottomnavigationbars设计标准,包括位置、Tab个数、Icon与文字显示规则、颜色、尺寸等规范,并提供具体实现方式。通过添加JitPack仓库、依赖库以及自定义布局,快速将Bottomnavigationbars组件整合至应用中,实现美观、高效的底部导航体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

上一篇《仿微信底部Tab栏》中粗略的讲了下底部Tab栏的封装,不少同学在实际运用中发现了一些问题,比如我demo中的title用了actionbar,所以如果新建的Activity的Theme不包含actionbar就回出现空指针;再比如假如底部的Tab对应的并不全都是Fragment,而是一部分Fragment,一部分Activity,就不适用了,但办法总比困难多,这个也是可以解决的;还有一个很常见的需求,就是底部有些Tab可能会有个小红点,之前的Demo并没有把这些问题包含进去,后续有时间再优化,今天来介绍下Google官方的Bottom navigation bars。

首先官方并没有一个叫Bottom navigation bars的控件,但是却出了一套关于Bottom navigation bars的标准,可见官方并不推荐把APP设计成这个样子。如果你非要设计成底部Tab栏的方式,我们也不横加干涉,我出一套标准,参照我的标准来,但官方不提供控件支持,这大概就是Google的内心独白了。

下面我们看看Bottom navigation bars的设计标准吧。

位置

可以放在底部,也可以放在侧边栏。一般是APP的首页。
这里写图片描述
这里写图片描述

Tab个数

(√)推荐底部可以放置3到5个。

这里写图片描述
这里写图片描述
(×)下面这种2个或者6个是不推荐使用的。

这里写图片描述
这里写图片描述

Icons and text

When the view is in focus, display that view’s icon and text label
When there are only three actions, display both icons and text labels at all times
If there are four or five actions, display inactive views as icons only
选中的Tab同时显示icon和text。
如果只有三个Tab,无论选中未选中,一直显示icon和文字。
如果有四到五个Tab,选中的Tab显示文字和icon,未选中的Tab只显示icon。

颜色

(√)推荐选中的图标或者文字为APP的主色调,如果Tab栏本身就是彩色,推荐黑色和白色作为图标或者文字。

这里写图片描述

这里写图片描述
(×)彩色图标不推荐使用

这里写图片描述
这里写图片描述

文字

文字要求言简意赅

这里写图片描述

(×)这样都是不推荐的

这里写图片描述
这里写图片描述
这里写图片描述

尺寸

Bottom navigation bars的高度推荐为56dp,icon的尺寸为24*24,这种Google一般推荐使用8的倍数。选中tab的字体大小为14sp,未选中为12sp。

这里写图片描述

这里写图片描述
以上就是相关的规范,具体的详细内容大家可以看这里,但说了这么多,这么炫酷高颜值的Bottom navigation bars哪里有呢,官方又没有控件,但是github上有啊。

先上几张图,大家随意感受下。

这里写图片描述

这里写图片描述

这里写图片描述
有没有很高颜值,很炫酷。

使用方法也很简单:

Step 1. Add the JitPack repository to your build file Add it in your root build.gradle at the end of repositories:
allprojects {
repositories {

maven { url “https://jitpack.io” }
}
}
Step 2. Add the dependency
dependencies { compile ‘com.github.RoyWallace:BottomNavigationBar:v0.1’}

Step 3
include 布局

具体大家可以看这里。。。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值