app的页面的底部导航设计

Posted 2023-04-03 nanbei666

Android 底部导航栏实现
底部导航栏的应用非常的广泛。今天就总结下几种实现的方式。

一、Fragment + TextView 实现
前面一篇博客在介绍Fragment 的时候就使用了Fragment + ImageView 实现了一个底部导航栏点击的例子，只要把ImageView 替换为TextView 是一样的实现。这里就详细介绍了，可以看这篇博客Android之Fragment的概述和使用

这种方式每次点击我们都要重置 所有TextView的状态，然后选中点击的TextView

二、RadioGroup + ViewPager 实现
我们只需重写RadioGroup的onCheckedChange，判断checkid即可知道点击的是哪个RadioButton，再给ViewPager 设置监听，让底部导航栏和viewpager同步就行了。

三、BottomNavigationView+ViewPager+fragment 实现

四、TabLayout+fragment+viewPager 实现

 

解析十种APP导航设计模式

参考技术A 1.标签导航 （标签导航位于页面底部 ，标签的分类最好在5个以内，比如微博、微信、淘宝）

优点：清楚当前所在的入口位置；直接展现最重要入口的内容信息。

缺点：功能入口过多时，该模式显得笨重不实用。

2.驼式导航 （中间加了一个“+”导航，像轮船上用来指挥的船驼，比如微博、qq空间）

优点：需要突出重要且频繁操作的入口。

缺点：同标签导航。

3.抽屉导航 （将菜单隐藏在当前页面内，点击入口即可像抽屉一样拉出菜单）

优点：节省页面展示空间；让用户注意力聚焦到当前页面；扩展性好。

缺点：不适合频繁切换的应用。

4.宫格导航 （宫格导航将主要入口全部聚合在页面，让用户做出选择，比如美图秀秀）

优点：直接展现各项内容；方便浏览经常更新的内容。

缺点：无法入口间的跳转；不能直接展现入口内容；不能显示太多入口次级内容。

5.组合导航 （比如淘宝里的快捷入口，像天猫之类的）

当用户需要聚焦内容，同时又需要一些快捷入口能够接到某些页面时，就可以采用组合导航。

优点：布局灵活，能适应架构的快速调整。

缺点：不规则容易有杂乱感。

6.列表导航 （比如微信的发现界面）

优点：层次展现清晰；可展现内容较长的标题；可展示标题的次级内容。

缺点：同级过多时，容易产生疲劳；排版灵活性不高；只能通过排列顺序、颜色来区分各入口重要程度。

7.tab导航 （用于二级页，本质和标签导航相同，当应用层级较多时，可采用tab导航，比如淘宝）

优点：对多内容多层级产品适用。

缺点：结构复杂，内容繁多。

8.轮播导航 （比如天气软件）

优点：单页面简洁内容，整体性强；线性的浏览方式有顺畅感、方向感。

缺点：不适合展示过多页面；非主页面不利于展示和查看。

9.点聚导航 （主操作选项或导航合并成一个按钮，浮动在页面上，比如path，最新版本导航置在中间）

优点：灵活；展示方式有趣；页面更开阔。

缺点：隐藏了更多入口和操作。

10.瀑布导航 （瀑布式布局适用于图片为主的内容，下拉自动加载，比如花瓣）

优点：浏览时产生流畅体验；排版布局多变；沉浸式体验。

缺点：不适合层级架构复杂的产品；容易产生疲劳感。