(转)Android: 自定义Tab样式
1.制作4个9patch的tab样式,可参考android默认的资源
tab_unselected.9.png
tab_selected.9.png
tab_press.9.png
tab_focus.9.png
这4个资源分别代表Tab的4种状态。
2.定义Tab的selector样式(就叫它tab_indicator.xml好了),将其放入drawable文件夹下,代码如下:
1 <?xml version="1.0" encoding="utf-8"?>
2 <selector xmlns:android="http://schemas.android.com/apk/res/android">
3 <!-- Non focused states -->
4 <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected" />
5 <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_selected" />
6 <!-- Focused states -->
7 <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_focus" />
8 <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_focus" />
9 <!-- Pressed -->
10 <item android:state_pressed="true" android:drawable="@drawable/tab_press" />
11 </selector>
3.编写indicator的布局文件(不妨也叫tab_indicator.xml),将其放入layout文件夹下,代码如下:
1 <?xml version="1.0" encoding="utf-8"?>
2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 android:layout_width="0dip"
4 android:layout_height="64dip"
5 android:layout_weight="1"
6 android:layout_marginLeft="-3dip"
7 android:layout_marginRight="-3dip"
8 android:orientation="vertical"
9 android:background="@drawable/tab_indicator">
10 <ImageView android:id="@+id/icon"
11 android:layout_width="wrap_content"
12 android:layout_height="wrap_content"
13 android:layout_centerHorizontal="true"
14 />
15 <TextView android:id="@+id/title"
16 android:layout_width="wrap_content"
17 android:layout_height="wrap_content"
18 android:layout_alignParentBottom="true"
19 android:layout_centerHorizontal="true"
20 style="?android:attr/tabWidgetStyle" mce_style="?android:attr/tabWidgetStyle"
21 />
4.接下来就是在TabActivity中使用我们自己编写的Tab样式了:
1 // 首先获取TabWidget
2 mTabHost = getTabHost();
3 LinearLayout ll = (LinearLayout)mTabHost.getChildAt(0);
4 TabWidget tw = (TabWidget)ll.getChildAt(0);
然后用类似如下代码创建TabSpec,就大功告成了。
1 RelativeLayout tabIndicator1 = (RelativeLayout) LayoutInflater.from(this).inflate(R.layout.tab_indicator, tw, false);
2 TextView tvTab1 = (TextView)tabIndicator1.getChildAt(1);
3 tvTab1.setText("tab1");
4 mTabHot = mTabHost.newTabSpec("TAB_1")
5 .setIndicator(tabIndicator1)
6 .setContent(contentIntent);
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步