码迷,mamicode.com
首页 > 其他好文 > 详细

自定义TabHost,TabWidget样式

时间:2016-03-14 09:30:15      阅读:260      评论:0      收藏:0      [点我收藏+]

标签:

先看效果:

技术分享

        京东商城底部菜单栏

 

技术分享

         新浪微博底部菜单栏

 

本次学习效果图:

技术分享  技术分享

第一,主布局文件(启动页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 }
技术分享

 

自定义TabHost,TabWidget样式

标签:

原文地址:http://www.cnblogs.com/shouce/p/5274508.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!