TabHost主界面实现

在android 中可以用TabHost来实现主界面，例如像微信，美团登录进去后看到的界面，在底部或顶部有四个选项如美团底部的：团购,商家，我的，更多这样的效果实现。看了后面的效果图就可以很容易的明白要实现的效果什么样了，下面写的一个Demo:

1.布局文件
1
  <?xml version="1.0" encoding="utf-8"?>
2
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
3
    android:id="@android:id/tabhost"
4
    android:layout_width="match_parent"
5
    android:layout_height="match_parent" >
6
 
7
    <RelativeLayout
8
        android:layout_width="match_parent"
9
        android:layout_height="match_parent" >
10
 
11
        <TabWidget
12
            android:id="@android:id/tabs"
13
            android:layout_width="match_parent"
14
            android:layout_height="wrap_content"
15
            android:layout_alignParentBottom="true"
16
            android:background="@android:color/white" >
17
        </TabWidget>
18
 
19
        <FrameLayout
20
            android:id="@android:id/tabcontent"
21
            android:layout_width="match_parent"
22
            android:layout_height="match_parent"
23
            android:layout_above="@android:id/tabs" >
24
        </FrameLayout>
25
    </RelativeLayout>
26  注意的是：<pre name="code" class="plain">  TabHost中 android:id="@android:id/tabhost"     <pre name="code" class="plain"> TabWidget中  android:id="@android:id/tabs"

<pre name="code" class="plain"> FrameLayout中 android:id="@android:id/tabcontent"

都是要用系统自带的id. 27</TabHost>其中TabWidget表示页卡区域就是下面的选项区域,FrameLayout布局为页卡内容区域.2.代码1@Override2 protected void onCreate(Bundle savedInstanceState) {3 super.onCreate(savedInstanceState);4 5 setContentView(R.layout.activity_tab1_layout);6 7 TabHost tabHost = getTabHost();8 9 TabSpec tabSpec1 = tabHost.newTabSpec("tab1");10 tabSpec1.setIndicator("页卡1");11 tabSpec1.setContent(new Intent(context, RadioButtonActivity.class));12 13 TabSpec tabSpec2 = tabHost.newTabSpec("tab2");14 tabSpec2.setIndicator("页卡2");15 tabSpec2.setContent(new Intent(context, LinerLayoutAcitiy.class));16 17 TabSpec tabSpec3 = tabHost.newTabSpec("tab3");18 tabSpec3.setIndicator("页卡3");19 tabSpec3.setContent(new Intent(context, SimpleListActivity.class));20 21 tabHost.addTab(tabSpec1);22 tabHost.addTab(tabSpec2);23 tabHost.addTab(tabSpec3);24 25 }经过上述操作实现效果为系统效果,为了得到更好看的页卡，需要自己定义一个页卡View,通过setIndicator(View view)方法设置.自定义View方法1private View createIndicatorView(int tab) {2 View view = mLayoutInflater.inflate(R.layout.view_tab_item_layout, null);3 4 TextView titleTxt = (TextView) view.findViewById(R.id.tab_title);5 ImageView iconImg = (ImageView) view.findViewById(R.id.tab_icon);6 7 switch(tab){8 case HOME_TAB:9 titleTxt.setText("首页");10 iconImg.setImageResource(R.drawable.selector_drawable_home_tab);11 break;12 case CONTENT_TAB:13 titleTxt.setText("商家");14 iconImg.setImageResource(R.drawable.selector_drawable_content_tab);15 break;16 case MORE_TAB:17 titleTxt.setText("更多");18 iconImg.setImageResource(R.drawable.selector_drawable_set_tab);19 break;20 }21 22 return view;23 }准备相关图片资源,页卡图标selector文件定义:1<?xml version="1.0" encoding="utf-8"?>2<selector xmlns:android="http://schemas.android.com/apk/res/android">3 4 <item android:drawable="@drawable/ic_menu_more_on" android:state_pressed="true"></item>5 <item android:drawable="@drawable/ic_menu_more_on" android:state_selected="true"></item>6 <item android:drawable="@drawable/ic_menu_more_off"></item>7 8</selector>页卡文字selector文件定义:1<?xml version="1.0" encoding="utf-8"?>2<selector xmlns:android="http://schemas.android.com/apk/res/android">3 4 <item android:state_pressed="true" android:color="@color/green_tab"></item>5 <item android:state_selected="true" android:color="@color/green_tab"></item>6 <item android:color="@color/darker_gray_tab"></item>7 8</selector>页卡View布局文件定义1<?xml version="1.0" encoding="utf-8"?>2<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"3 android:layout_width="match_parent"4 android:layout_height="match_parent"5 android:orientation="vertical"6 android:gravity="center"7 android:paddingTop="3dp"8 android:paddingBottom="3dp">9 10 <TextView11 android:id="@+id/tab_title"12 android:layout_width="wrap_content"13 android:layout_height="wrap_content"14 android:textColor="@drawable/selector_color_home_tab"15 android:text="首页" />16 17 <ImageView18 android:id="@+id/tab_icon"19 android:layout_width="wrap_content"20 android:layout_height="wrap_content"21 android:src="@drawable/selector_drawable_home_tab"/>22 23</LinearLayout>实现效果tabhost1

<p style="border: 0px; outline: 0px; background-color: rgb(248, 248, 248); font-size: 13px; margin-top: 15px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; vertical-align: baseline; color: rgb(49, 49, 49); font-family: 微软雅黑, 黑体, sans-serif; line-height: 22px;"><span style="border: 0px; outline: 0px; background-color: transparent; margin: 0px; padding: 0px; vertical-align: baseline;">实现效果</span></p><p style="border: 0px; outline: 0px; background-color: rgb(248, 248, 248); font-size: 13px; margin-top: 15px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; vertical-align: baseline; color: rgb(49, 49, 49); font-family: 微软雅黑, 黑体, sans-serif; line-height: 22px;"><a target=_blank href="http://it.warmtel.com/wp-content/uploads/2015/07/tabhost1.gif" rel="fancybox-post-846" title="tabhost1" style="border: 0px; outline: 0px; background-color: transparent; margin: 0px; padding: 0px; vertical-align: baseline; text-decoration: none; color: rgb(41, 163, 235);"><img class="alignnone  wp-image-849" src="http://it.warmtel.com/wp-content/uploads/2015/07/tabhost1.gif" alt="tabhost1" width="290" height="468" style="border: 0px; outline: 0px; background-color: transparent; margin: 0px; padding: 0px; vertical-align: baseline;" /></a></p>