Android程序开发之自定义设置TabHost,TabWidget样式

时间:2022-08-23 23:28:30

先看效果:

Android程序开发之自定义设置TabHost,TabWidget样式

        京东商城底部菜单栏

Android程序开发之自定义设置TabHost,TabWidget样式

      新浪微博底部菜单栏

Android程序开发之自定义设置TabHost,TabWidget样式

本次学习效果图:

Android程序开发之自定义设置TabHost,TabWidget样式

第一,主布局文件(启动页main.xml,位于res/layout目录下)代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<?xml version="." encoding="utf-"?>
<tabhost xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/tabhost">
<linearlayout
android:id="@+id/linear"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<tabwidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"></tabwidget>
<framelayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<linearlayout
android:id="@+id/tab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<textview
android:id="@+id/tab_txt"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="你"/>
</linearlayout>
<linearlayout
android:id="@+id/tab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<textview
android:id="@+id/tab_txt"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="我"/>
</linearlayout>
<linearlayout
android:id="@+id/tab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<textview
android:id="@+id/tab_txt"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="他"/>
</linearlayout>
<linearlayout
android:id="@+id/tab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<textview
android:id="@+id/tab_txt"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="我们"/>
</linearlayout>
</framelayout>
</linearlayout>
</tabhost>

第二,创建显示此tabwidget的布局tabmini.xml(位于res/layout目录下)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="." encoding="utf-"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingtop="dp"
android:paddingleft="dp"
android:paddingright="dp"
android:background="#cec" >
<textview
android:id="@+id/tab_label"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerinparent="true"
android:gravity="center"
android:textcolor="#"
android:textstyle="bold"
android:background="@drawable/tabmini"/>
</relativelayout>

第三,在drawable里面创建一个selector,命名tabmini.xml,用来点击tabhost的一个tab时textview的变化

?
1
2
3
4
5
6
7
8
9
<?xml version="." encoding="utf-"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:state_selected="true"
android:drawable="@drawable/add_managebg_down"/>
<item
android:state_selected="false"
android:drawable="@drawable/add_managebg"/>
</selector>

第四,java代码,在activity里实现tabhost

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
package com.example.androidtest____meihuatubiao;
import android.app.activity;
import android.os.bundle;
import android.view.layoutinflater;
import android.view.view;
import android.widget.tabhost;
import android.widget.textview;
public class main extends activity {
@override
protected void oncreate(bundle savedinstancestate){
super.oncreate(savedinstancestate);
setcontentview(r.layout.main);
view nitab=(view)layoutinflater.from(this).inflate(r.layout.tabmini, null);
textview nitxt=(textview)nitab.findviewbyid(r.id.tab_label);
nitxt.settext("ni");
view wotab=(view)layoutinflater.from(this).inflate(r.layout.tabmini, null);
textview wotxt=(textview)wotab.findviewbyid(r.id.tab_label);
wotxt.settext("wo");
view tatab=(view)layoutinflater.from(this).inflate(r.layout.tabmini, null);
textview tatxt=(textview)tatab.findviewbyid(r.id.tab_label);
tatxt.settext("ta");
view wetab=(view)layoutinflater.from(this).inflate(r.layout.tabmini, null);
textview wetxt=(textview)wetab.findviewbyid(r.id.tab_label);
wetxt.settext("we");
tabhost tabs=(tabhost)findviewbyid(r.id.tabhost);
tabs.setup();
tabs.addtab(tabs.newtabspec("nitab").setcontent(r.id.tab).setindicator(nitab));
tabs.addtab(tabs.newtabspec("wotab").setcontent(r.id.tab).setindicator(wotab));
tabs.addtab(tabs.newtabspec("tatab").setcontent(r.id.tab).setindicator(tatab));
tabs.addtab(tabs.newtabspec("wetab").setcontent(r.id.tab).setindicator(wetab));
}
}

以上内容是小编给大家分享的android程序开发之自定义设置tabhost,tabwidget样式,希望对大家有所帮助!