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

Android: 自定义Tab式样,一种简单的方式。 《转载》

2012-07-03 
Android: 自定义Tab样式,一种简单的方式。 《转载》之前看到过论坛里已经有人发过自定义Tab样式的帖子,感觉有

Android: 自定义Tab样式,一种简单的方式。 《转载》


之前看到过论坛里已经有人发过自定义Tab样式的帖子,感觉有些复杂了,这里分享个简单的方法。

1.制作4个9patch的tab样式,可参考android默认的资源
Android: 自定义Tab式样,一种简单的方式。 《转载》 tab_unselected.9.png? ? Android: 自定义Tab式样,一种简单的方式。 《转载》 tab_selected.9.png? ?Android: 自定义Tab式样,一种简单的方式。 《转载》 tab_press.9.png? ?Android: 自定义Tab式样,一种简单的方式。 《转载》 tab_focus.9.png

这4个资源分别代表Tab的4种状态。

2.定义Tab的selector样式(就叫它tab_indicator.xml好了),将其放入drawable文件夹下,代码如下:

? ? <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_selected" />
? ? <!-- Focused states -->
? ? <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_focus" />
? ? <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_focus" />
? ? <!-- Pressed -->
? ? <item android:state_pressed="true" android:drawable="@drawable/tab_press" />
</selector>复制代码


3.编写indicator的布局文件(不妨也叫tab_indicator.xml),将其放入layout文件夹下,代码如下:

? ? />复制代码


4.接下来就是在TabActivity中使用我们自己编写的Tab样式了:

? ?? ???android:layout_width="fill_parent" android:layout_height="fill_parent">
? ?? ???<LinearLayout android:orientation="vertical"
? ?? ?? ?? ?android:layout_width="fill_parent" android:layout_height="fill_parent">
? ?? ???<TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent"
? ?? ?? ?? ?? ? android:layout_height="wrap_content" android:layout_weight="0" />
? ?? ???<FrameLayout android:id="@android:id/tabcontent"
? ?? ?? ?? ?? ? android:layout_width="fill_parent" android:layout_height="0dip"
? ?? ?? ?? ?android:layout_weight="1"/>
? ?? ???</LinearLayout>
</TabHost>复制代码


文接上文,废话不表。
然后用类似如下代码创建TabSpec,就大功告成了。

    RelativeLayout tabIndicator1 = (RelativeLayout) LayoutInflater.from(this).inflate(R.layout.tab_indicator, tw, false);
    TextView tvTab1 = (TextView)tabIndicator1.getChildAt(1);
    tvTab1.setText("tab1");//你也可以拿到ImageView设置该Tab的图片Icon
    mTabHot = mTabHost.newTabSpec("TAB_1")
    ? ?? ?? ?? ?? ? .setIndicator(tabIndicator1)
    ? ?? ?? ?? ?? ? .setContent(contentIntent);
复制代码

热点排行