http://blog.csdn.net/sharetop/archive/2011/02/18/6194438.aspx
今天开始一个新专题:创新源于模仿。
第一篇从TabActivity着手,一直以为Android中的TabActivity只能放在上面,只能如此丑陋,直到有一天看到“米聊”。
咋一看,软件下面的那个菜单栏,觉得像是用LinearLayout+Button来实现的,但事实上,它却是一个Tab!
怎么看出来的?我就不多说了,你懂的。
下面我们来抽丝剥茧,一步步分析它的实现过程。
1.TabActivity的布局
- <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
- android:id="@android:id/tabhost"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- >
- <LinearLayout
- android:orientation="vertical"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent">
- <FrameLayout
- android:gravity="center"
- android:id="@android:id/tabcontent"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:layout_weight="1.0" >
- <LinearLayout android:id="@+id/first"
- android:orientation="vertical"
- android:background="#ffffff"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- >
- <TextView android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:text="first tab" />
- </LinearLayout>
- <LinearLayout android:id="@+id/second"
- android:orientation="vertical"
- android:background="#ffffff"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- >
- <TextView android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:text="second tab" />
- </LinearLayout>
- </FrameLayout>
- <TabWidget
- android:id="@android:id/tabs"
- android:background="@drawable/tab_bottom_bg"
- android:padding="3.0dip"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:layout_weight="0.0" />
- </LinearLayout>
- </TabHost>
我们看到,要自定义一个位于屏幕下方的TAB标签,首先我们不能使用缺省的TabActivity实现了,啥事都要自己亲力亲为。
很好理解,把tabs放在tabcontent下面就可以了。其它不多说了。
2.MainActivity的实现代码
先看看缺省的实现代码,不复杂,省略一些无关的东西:
- private void setIndicator(int icon, int title, int view) {
- String str = getResources().getString(title);
- TabHost.TabSpec localTabSpec=tabhost.newTabSpec(str).setIndicator(str,getResources().getDrawable(icon)).setContent(view);
- tabhost.addTab(localTabSpec);
- }
可以测试一下,效果出来了吧,虽然有点丑,但它真的在屏幕下方了。
3.美化TAB标签
现在我们来定制这个TAB的标签。先看代码:
- private void setIndicator(int icon, int title, int view) {
- View localView = LayoutInflater.from(this.tabhost.getContext()).inflate(R.layout.main_activity_tab, null);
- ((ImageView)localView.findViewById(R.id.main_activity_tab_image)).setBackgroundResource(icon);
- ((TextView)localView.findViewById(R.id.main_activity_tab_text)).setText(title);
- String str = getResources().getString(title);
- TabHost.TabSpec localTabSpec = tabhost.newTabSpec(str).setIndicator(localView).setContent(view);
- tabhost.addTab(localTabSpec);
- }
注意到这个main_activity_tab的layout了吧,看看它的内容:
- <?xml version="1.0" encoding="UTF-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:gravity="center"
- android:orientation="vertical"
- android:id="@id/tabsLayout"
- android:background="@drawable/tab_item_bkg"
- android:padding="3.0dip"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_marginTop="3.0dip"
- android:layout_marginBottom="3.0dip"
- >
- <FrameLayout
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_weight="0.6">
- <ImageView
- android:layout_gravity="center"
- android:id="@id/main_activity_tab_image"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_marginTop="2.0dip"
- android:scaleType="center" />
- </FrameLayout>
- <TextView
- android:textSize="12.0dip"
- android:textColor="@drawable/tab_text_selector"
- android:id="@id/main_activity_tab_text"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="Title" />
- </LinearLayout
这个文件定义了每个TAB标签的样式,tab_item_bkg定义每个item的背景(包括focused/selected/pressed),每个item上面的图标和下面的文字都在代码中动态定义即可。其中tab_text_selector则定义文字的颜色。
剩下的事情就越发明显了,不用多说了。