首页 > 代码库 > 自定义TabHost，TabWidget样式
自定义TabHost，TabWidget样式
先看效果：
京东商城底部菜单栏
新浪微博底部菜单栏
本次学习效果图：
第一，主布局文件（启动页main.xml,位于res/layout目录下）代码
1 <?xml version="1.0" encoding="utf-8"?> 2 <TabHost xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="fill_parent" 4 android:layout_height="fill_parent" 5 android:id="@+id/tabhost"> 6 7 <LinearLayout 8 android:id="@+id/linear1" 9 android:layout_width="fill_parent"10 android:layout_height="fill_parent"11 android:orientation="vertical">12 <TabWidget 13 android:id="@android:id/tabs"14 android:layout_width="fill_parent"15 android:layout_height="wrap_content"></TabWidget>16 <FrameLayout 17 android:id="@android:id/tabcontent"18 android:layout_width="fill_parent"19 android:layout_height="fill_parent">20 <LinearLayout21 android:id="@+id/tab1"22 android:layout_width="fill_parent"23 android:layout_height="fill_parent"24 android:orientation="vertical">25 <TextView 26 android:id="@+id/tab1_txt"27 android:layout_width="fill_parent"28 android:layout_height="fill_parent"29 android:gravity="center"30 android:text="你"/>31 </LinearLayout>32 <LinearLayout33 android:id="@+id/tab2"34 android:layout_width="fill_parent"35 android:layout_height="fill_parent"36 android:orientation="vertical">37 <TextView 38 android:id="@+id/tab2_txt"39 android:layout_width="fill_parent"40 android:layout_height="fill_parent"41 android:gravity="center"42 android:text="我"/>43 </LinearLayout>44 <LinearLayout45 android:id="@+id/tab3"46 android:layout_width="fill_parent"47 android:layout_height="fill_parent"48 android:orientation="vertical">49 <TextView 50 android:id="@+id/tab3_txt"51 android:layout_width="fill_parent"52 android:layout_height="fill_parent"53 android:gravity="center"54 android:text="他"/>55 </LinearLayout>56 <LinearLayout57 android:id="@+id/tab4"58 android:layout_width="fill_parent"59 android:layout_height="fill_parent"60 android:orientation="vertical">61 <TextView 62 android:id="@+id/tab4_txt"63 android:layout_width="fill_parent"64 android:layout_height="fill_parent"65 android:gravity="center"66 android:text="我们"/>67 </LinearLayout>68 </FrameLayout>69 </LinearLayout>70 </TabHost>
第二，创建显示此TabWidget的布局tabmini.xml（位于res/layout目录下）
1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="fill_parent" 4 android:layout_height="wrap_content" 5 android:paddingTop="5dp" 6 android:paddingLeft="5dp" 7 android:paddingRight="5dp" 8 android:background="#8C8E8C" > 9 10 <TextView 11 android:id="@+id/tab_label"12 android:layout_width="fill_parent"13 android:layout_height="wrap_content"14 android:layout_centerInParent="true"15 android:gravity="center"16 android:textColor="#000000"17 android:textStyle="bold"18 android:background="@drawable/tabmini"/>19 </RelativeLayout>
第三，在drawable里面创建一个selector，命名tabmini.xml，用来点击TabHost的一个tab时TextView的变化
1 <?xml version="1.0" encoding="utf-8"?>2 <selector xmlns:android="http://schemas.android.com/apk/res/android" >3 <item 4 android:state_selected="true"5 android:drawable="@drawable/add_managebg_down2"/> 6 <item 7 android:state_selected="false" 8 android:drawable="@drawable/add_managebg2"/>9 </selector>
第四，java代码，在Activity里实现TabHost
1 package com.example.androidtest_9_5_4_meihuatubiao; 2 3 import android.app.Activity; 4 import android.os.Bundle; 5 import android.view.LayoutInflater; 6 import android.view.View; 7 import android.widget.TabHost; 8 import android.widget.TextView; 9 10 public class Main extends Activity {11 @Override12 protected void onCreate(Bundle savedInstanceState){13 super.onCreate(savedInstanceState);14 setContentView(R.layout.main);15 16 View niTab=(View)LayoutInflater.from(this).inflate(R.layout.tabmini, null);17 TextView niTxt=(TextView)niTab.findViewById(R.id.tab_label);18 niTxt.setText("ni");19 20 View woTab=(View)LayoutInflater.from(this).inflate(R.layout.tabmini, null);21 TextView woTxt=(TextView)woTab.findViewById(R.id.tab_label);22 woTxt.setText("wo");23 24 View taTab=(View)LayoutInflater.from(this).inflate(R.layout.tabmini, null);25 TextView taTxt=(TextView)taTab.findViewById(R.id.tab_label);26 taTxt.setText("ta");27 28 View weTab=(View)LayoutInflater.from(this).inflate(R.layout.tabmini, null);29 TextView weTxt=(TextView)weTab.findViewById(R.id.tab_label);30 weTxt.setText("we");31 32 TabHost tabs=(TabHost)findViewById(R.id.tabhost);33 tabs.setup();34 35 tabs.addTab(tabs.newTabSpec("niTab").setContent(R.id.tab1).setIndicator(niTab));36 tabs.addTab(tabs.newTabSpec("woTab").setContent(R.id.tab2).setIndicator(woTab));37 tabs.addTab(tabs.newTabSpec("taTab").setContent(R.id.tab3).setIndicator(taTab));38 tabs.addTab(tabs.newTabSpec("weTab").setContent(R.id.tab4).setIndicator(weTab));39 }40 }
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。