首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 移动开发 > 移动开发 >

制造自己的标签栏

2012-07-08 
打造自己的标签栏作为Android新手,我当时只知道一种方法:使用Android自带的TabHost容器。传统的TabHost的使

打造自己的标签栏

作为Android新手,我当时只知道一种方法:

使用Android自带的TabHost容器。

传统的TabHost的使用效果大概是这样的(左图):

制造自己的标签栏制造自己的标签栏

这是大众点评网早期的Android客户端,标签栏使用了系统自带的控件。然而这个效果和我们看到的很多底部标签栏相差甚远(右图,twitter客户端Twidroyd截图)。

他们到底是怎么实现的呢?为此,我在网上查了不少资料,大致有以下种方案:

    Button Bar实现; 修改TabWidget。

1. Button Bar基本思路:用一个Layout来呈现整个标签栏,在上面添加若干按钮作为标签,整个Layout作为一个部件include到各个界面的布局里去。当用户点击按钮时,切换到相应的界面(多个Activity间的切换)。

?

在Android 3.0以前的版本里,这种方案多用于制作动作栏。3.0后出现了ActionBar控件,为开发者省了不少事。希望手机版的Android也早点加入。

制造自己的标签栏

?

制造自己的标签栏

优点:实现了你想要的效果,外观很容易定制。

缺点:标签栏实际不是一个,有多个,他们分别属于不同的界面(从属关系)。这导致了在界面切换的时候,标签栏会随着他的界面(或者说Activity)“动”,而非常驻在底部。

改进:有一种改进方式是,用一个Activity来控制整个主界面,标签栏include在这个主界面的布局里,点击标签时显示相应的View(实际上是在一个Activity上多个View的切换)。这样就保证了标签栏只有一个,而且不会随着标签切换而动来动去。当然,缺点也是显而易见的,当标签过多的时候,这个Activity会变得相当复杂。呵呵~万一有个变动,你懂的。

2. 修改TabWidget基本思路:在于既然Android是开源的,我们就能大改特该,让它听话。我们把TabWidget移到底部,然后修改它的外观。

?

优点:达到了目的,继承了TabWidget的基本功能,可复用,使用简单;

缺点:需要研究不少Android资料,查references 查到眼花,费九牛二虎之力去掉分割线,底部白线之类的东西,完成外观定制。

这个方法貌似有不少人用,这里有几篇中文资料(其实都差不多啦,中文圈你抄我我抄你的。。。唉):

http://www.youmi.net/bbs/thread-102-1-4.html

?

http://sillydong.com/myjava/android-tabwidget.html

3. 奇技淫巧如你所见,前面说过的方法都能达到目的。但是,Button Bar的方式看上去太dirty了,修改TabWidget又太麻烦了。有什么方式能避免这些不必要的麻烦,把两者优点结合起来呢?

?

我想到了Android控件的一个属性: android:visibility=”gone”。这简直就是救命稻草!它可以让你的控件不显示,而且还不占地方。这有什么用呢?这意味着,我们可以照样用TabHost,可以照样放TabWidget,只是,只是我们不把TabWidget显示出来。它现在是隐形的标签栏,the real tabs。我们所要做的是:安置一个“傀儡”标签栏,让它来和用户接触。这是不是有点像Design Pattern里的“Proxy”呢?

这个方案算是投机取巧之作,很可惜,我不是第一个想到的,你可以看这里。历史总是惊人的相似啊!

标签容器布局,大致代码如下:
main.xml:?

?

RadioGroup就是底部的标签栏,背景进行了自定义。我在这边demo里用了9.png格式的图,嗯,你会经常用它的。
此外,标签被选中和未被选中的关键在于android:background=”@drawable/tab_bg_selector”这句。
selector:

?

下面列出加载它的Activity代码:
TabDemoActivity:

Android自定义标签栏

?

当然这只是一个Demo,要做得更漂亮你需要在细节处好好作文章,譬如,美化文字,添加图标等等。




热点排行