注:本文参考自农民伯伯的博客园,但在那基本之上又做了改善,原文链接http://www.cnblogs.com/over140/archive/2011/03/02/1968042.html#!comments
Tab页面效果是很多应用都会涉及到的,思路一般是tabwidget+radiobutton,而tab项的效果是将button设为null+文字+top图(selec实现)
反编译新浪微博4.0.1apk文件,研究其tab布局,做了个高仿品
首先是主布局文件:
将tabwidget隐藏,并用radiobutton取代,为单选按钮设置的style,其中最重要的是为其background设置了home_btn_bg.xml,也就是自定义了选中效果
<?xml version="1.0" encoding="UTF-8"?>
<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" >
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingBottom="@dimen/toolbar_height" >
</FrameLayout>
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone" >
</TabWidget>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="@dimen/toolbar_height"
android:layout_gravity="bottom"
android:gravity="center_vertical"
android:orientation="horizontal" >
<RadioGroup
android:id="@+id/main_radio"
android:layout_width="fill_parent"
android:layout_height="@dimen/toolbar_height"
android:layout_gravity="bottom"
android:gravity="center_vertical"
android:orientation="horizontal" >
<RadioButton
android:id="@+id/radio_button0"
style="@style/main_tab_bottom"
android:checked="true"
android:drawableTop="@drawable/weibo_home"
android:text="@string/main_home"
<RadioButton
android:id="@+id/radio_button1"
style="@style/main_tab_bottom"
android:drawableTop="@drawable/weibo_message"
android:text="@string/main_news" />
<RadioButton
android:id="@+id/radio_button2"
style="@style/main_tab_bottom"
android:drawableTop="@drawable/weibo_myinfo"
android:text="@string/main_my_info" />
<RadioButton
android:id="@+id/radio_button3"
style="@style/main_tab_bottom"
android:drawableTop="@drawable/weibo_discover"
android:text="@string/menu_search" />
<RadioButton
android:id="@+id/radio_button4"
style="@style/main_tab_bottom"
android:drawableTop="@drawable/weibo_more"
android:text="@string/more" />
</RadioGroup>
</LinearLayout>
</TabHost>
button样式控制代码:
<style name="main_tab_bottom">
<item name="android:textSize">@dimen/bottom_tab_font_size</item>
<item name="android:textColor">@color/tab_text_color</item>
<item name="android:ellipsize">marquee</item>
<item name="android:gravity">center_horizontal</item>
<item name="android:background">@drawable/home_btn_bg</item>
<item name="android:paddingTop">@dimen/bottom_tab_padding_up</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">@dimen/toolbar_height</item>
<item name="android:button">@null</item>
<item name="android:singleLine">true</item>
<item name="android:drawablePadding">@dimen/bottom_tab_padding_drawable</item>
<item name="android:layout_weight">1.0</item>
</style>
为每个button top图设置其selector,实现选中前后不同效果。以第一个为例:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/tabbar_home_highlighted" android:state_checked="true" android:state_enabled="true"></item>
<item android:drawable="@drawable/tabbar_home"></item>
</selector>
将tab上的文字也做类似处理:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#FFFFFF"></item>
<item android:color="#ff666666"></item>
</selector>
附上源码下载地址:
http://download.csdn.net/detail/zuse_ko/8147527