标签:
先看效果:
京东商城底部菜单栏
新浪微博底部菜单栏
本次学习效果图:
第一,主布局文件(启动页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 <LinearLayout 21 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 <LinearLayout 33 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 <LinearLayout 45 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 <LinearLayout 57 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 @Override 12 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 }
标签:
原文地址:http://www.cnblogs.com/shouce/p/5274508.html