Android 底部TabActivity(0)——开篇(界面分析)

当下主流的软件没有一个统一明确的风格,App框架什么样的都有,但个人钟情于页面底部Tab分签架构,移动设备的屏幕虽然越来越大,但是显示的内容还是有限,为了能展示更多的内容,方便简洁的操作习惯中Tab架构是不二选择,分为顶部Tab和底部Tab。所以小山准备出一系列关于Tab的Blog,作为自己代码备份,也希望能帮到大家扩展开发思路,那就更是功德无量了。由于是Blog讲解,代码尽量简单为好,不会大量的抽取重构,也尽量少使用资源文件,原理为中心。

看看当前比较常用的App中使用底部Tab的明星软件,先分析一下界面效果(标签内部的内容有更新推送会有角标提示,这里不作处理,以后文章可能会专门讲解角标提示,尽请期待),扯点题外话吧,在开始做之前最后先心里有个数,不要蒙头上来一顿胡敲或一顿百度。。。要明确自己要做什么。

第一波Blog先来搞底部的Tab,好吧,啰嗦了半天,先看看流弊的界面效果吧。

1. 整体标签背景图片|颜色不变,通过改变单个子标签上的文字和图标来标识当前选中的标签(使用最多),这类标签个数一般3~5个:

1.1 QQ(V5.1.0)精简之后使用了3个标签与主流界面相比稍显突兀,使用扁平化风格图标显得纤细柔弱;

1.2 来往(V5.3.2)使用了深灰色的底板突出自己的特色,使用4个标签不拥不挤,图标用了卖萌的风格,占位恰到好处;

1.3 PPTV聚力(V4.0.5)和微信(V5.4)也使用了4个标签

背板使用接近于白色的浅色,搭配主流的扁平风,文字说明和标签的图标使用统一色调,这就是主流界面的基准;

1.4 淘宝(V4.9.3)使用了5个分页,加上纤细的图标整体也不觉得拥挤。

2. 点击单个子标签背景改变,通过变亮或变暗凸显当前选中标签页(稍显过时,主流的扁平风格不使用这样的style,但是个人更喜欢这种,比第1种类型更明显)

3. 文字底部添加选中标记,左右漂移滑动滑块来标记当前选中页

4. 简洁风格这里列出了两个比较文艺的App

4.1 只有文字没有图标(一个)

4.2 只有图标没有文字(Lofter)

5. 不规则标签

这类型很多样子风格的,既然都说不规则了就不一一列举了,这里只举例几个常见的

以中心为重点功能来分配分页,这类型最著名的应该是联通营业厅,但是后来居上喜马拉雅做的更漂亮了,QQ空间和新浪微博是用户量最多的两款App。

6. 其他

密信是我做过最精(e)美(xin)的界面,对程序员来说是一种摧残,但是对于用户就是一种视觉享受

这个底部Tab看似简单,细看一下,每个Tab标签是有小角的,点击任何一个标签会联动左右两个压脚的效果

当初老板把Android和iOS界面使用了一套图片,这个很让人受不了,尤其是对于程序员,每个平台控件的特性本就不同。。。

最后Android为了做效果自定义了太多太多控件,哪怕是一像素线都需要精确,很多小格子背景都是代码控制,因为不能拉伸。。。

最后的最后就是Android版本未能上线,只在测试组跑了几遍(由于公司重点全部转到MDM企业级产品,没精力上线Android只上了iOS)。。。

我发誓,以后美工再做这么脑残的界面我宁可辞职。。。

界面分析到此为止,市面上的主流App也就这几种类型了,在稍后的文章中将使用代码一一实现这些风格的底部Tab!

时间: 2024-09-28 17:07:10

Android 底部TabActivity(0)——开篇(界面分析)的相关文章

Android 底部TabActivity(0)——开篇(界面分析|系列文章文件夹)

当下主流的软件没有一个统一明白的风格,App框架什么样的都有,但个人钟情于页面底部Tab分签架构,移动设备的屏幕尽管越来越大,可是显示的内容还是有限,为了能展示很多其它的内容,方便简洁的操作习惯中Tab架构是不二选择,分为顶部Tab和底部Tab.所以小山准备出一系列关于Tab的Blog,作为自己代码备份,也希望能帮到大家扩展开发思路,那就更是功德无量了.因为是Blog解说,代码尽量简单为好,不会大量的抽取重构,也尽量少使用资源文件,原理为中心. 看看当前比較经常使用的App中使用底部Tab的明星

Android 底部TabActivity(2)——ActivityGroup

今天这篇文章记述一下页面顶部底部上下均有Tab标签页的特殊需求!使用了过时的ActivityGroup. 再看一下整个Project的结构,如下 下面逐一介绍一下实现过程,一贯风格,具体实现还是看注释吧,代码也不是很多,就不啰嗦了. step1:首先是主界面MainActivity.java package sun.geoffery.tabtopbottom; import android.app.ActivityGroup; import android.content.Intent; imp

Android 底部TabActivity(3)——ActivityGroup|顶部底部均有Tab标签之二

上一篇使用过时的ActivityGroup简单实现了顶部底部均有Tab标签的效果,是页面底部只有文字的样式,今天想完善一下效果,底部实现文字加图标的样式. 本文属于半成品,本来想着放弃的,想着先放博客吧,好歹也是一种思路,以后作参考用!追求完美效果的可以忽略本篇,我会在后续文章中实现更优的效果! 先看下效果图 首先是主页面MainActivity.java,这种方式其实不是真正意义上的Tab,只是实现了这样的效果.底部用了GridView实现三个切换开关,放到页面底部. package sun.

Android 底部TabActivity(1)——FragmentActivity

先看看效果图: 第一篇Tab系列的文章首先实现这种风格的底部Tab:背景条颜色不变,我们是用了深灰的颜色,图标会发生相应的变化,当选中某个标签后该标签的背板会由正常的颜色变为不正常,哈哈,是变为加深的灰色,更加凸显当前页的效果,所以我比较这种类型.在这里文字的变化我没处理,如果变色使用个selector就解决了,这里不再赘述. 再看一下整个Project的结构,如下 下面逐一介绍一下实现过程,具体实现还是看注释吧,代码也不是很多,就不啰嗦了. step1:首先是主界面MainTabActivit

Android Studio 3.0 下载 使用新功能介绍

谷歌2017发布会更新了挺多内容的,而且也发布了AndroidStudio3.0预览版,一些功能先睹为快.(英语一般,有些翻译不太好) 下载地址 https://developer.android.google.cn/studio/archive.html 选择显示全部即可看到下载地址,这里给出来了. Windows (64-bit): android-studio-ide-171.4010489-windows.zip (702075896 bytes) https://dl.google.c

Android自定义TabActivity(实现仿新浪微博底部菜单更新UI)

如今Android上很多应用都采用底部菜单控制更新的UI这种框架,例如新浪微博 点击底部菜单的选项可以更新界面.底部菜单可以使用TabHost来实现,不过用过TabHost的人都知道自定义TabHost究竟是有多麻烦的,原生TabHost的风格是不依附屏幕的底部的,要依附底部就要重写布局. TabHost设置的Container可以管理UI的显示,UI可以用LayoutInflater动态生成,也可以是Activity,但不好管理Activity的生命周期.然后用TabHost控制显示UI的显示

Android UI开发第四十三篇——使用Property Animation实现墨迹天气3.0引导界面及动画实现

前面写过<墨迹天气3.0引导界面及动画实现>,里面完美实现了动画效果,那一篇文章使用的View Animation,这一篇文章使用的Property Animation实现.Property Animation是Android3.0以后新增的动画库. 这篇文章的源码以及效果在github. 实现墨迹天气向上滑动的viewpager使用的开源库ViewPager-Android.ViewPager-Android开源库设置app:orientation定义滑动方向. 墨迹天气引导界面共有4个视图

Android 5.0 双卡信息管理分析

首先,如前面的博文所讲的,Android5.0开始支持双卡了.另外,对于双卡的卡信息的管理,也有了实现,尽管还不是完全彻底完整,如卡的slot id, display name,iccid,color等,其设计思路竟然跟之前接触到的一个平台是一样的,都是同不同颜色来标识不同的卡,让用户一目了然,只是5.0的实现目前还局限在FW框架里,应用层的实现还没有,相信,等到5.1或者再之后的版本中,我们就可以在setting里看到对卡表示颜色.名称等进行设置的功能菜单啦. 下面进入正题,来分析Androi

Android底部TabHost API

今天在项目中遇到了底部TabHost,顺便就写了一个底部TabHost的api继承即可使用非常简单,以下为源代码: 首先是自定义的TabHostActivity,如果要使用该TabHost继承该类即可 1 package com.api; 2 3 import android.app.TabActivity; 4 import android.content.Intent; 5 import android.os.Bundle; 6 import android.view.LayoutInfla