在开发过程中,默认的TabWidget不能满足我们对于UI的要求并且没有足够的属性工我们去修改,这个时候能够自定义TabWidget是非常必要的。自定义TabWidget组要运用的是TabSpec.setIndicator(View view)方法。
main.xml:
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
|
< TabHost xmlns:android = "http://schemas.android.com/apk/res/android" xmlns:tools = "http://schemas.android.com/tools" android:id = "@android:id/tabhost" android:layout_width = "match_parent" android:layout_height = "match_parent" tools:context = ".Main" > < RelativeLayout android:layout_width = "match_parent" android:layout_height = "match_parent" > < TabWidget android:id = "@android:id/tabs" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_alignParentBottom = "true" /> < FrameLayout android:id = "@android:id/tabcontent" android:layout_width = "match_parent" android:layout_height = "match_parent" > < LinearLayout android:id = "@+id/tabs1" android:layout_width = "match_parent" android:layout_height = "match_parent" android:orientation = "vertical" > < TextView android:layout_width = "match_parent" android:layout_height = "wrap_content" android:text = "我是tab1" /> </ LinearLayout > < LinearLayout android:id = "@+id/tabs2" android:layout_width = "match_parent" android:layout_height = "match_parent" android:orientation = "vertical" > < TextView android:layout_width = "match_parent" android:layout_height = "wrap_content" android:text = "我是tab2" /> </ LinearLayout > </ FrameLayout > </ RelativeLayout > </ TabHost > |
供点击时切换的图片tabmini.xml:
1
2
3
4
5
6
7
|
<? xml version = "1.0" encoding = "utf-8" ?> < selector xmlns:android = "http://schemas.android.com/apk/res/android" > < item android:drawable = "@drawable/check" android:state_selected = "true" /> < item android:drawable = "@drawable/uncheck" android:state_selected = "false" /> </ selector > |
自定义view的布局文件custom.xml:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<? xml version = "1.0" encoding = "utf-8" ?> < LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:orientation = "vertical" > < ImageView android:layout_width = "match_parent" android:layout_height = "wrap_content" android:src = "@drawable/tabmini" /> < TextView android:id = "@+id/tv" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginBottom = "0sp" android:gravity = "center_horizontal" /> </ LinearLayout > |
最后是我们的main.java:
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
|
package com.app.main; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.TabHost; import android.widget.TabHost.TabSpec; import android.widget.TextView; public class Main extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.main); TabHost tabHost = (TabHost) this .findViewById(android.R.id.tabhost); // tabhost如果是以findViewById()这个方法获取的,必须调用setup()方法 tabHost.setup(); View view1 = this .getLayoutInflater().inflate(R.layout.custom, null ); TextView tv1 = (TextView) view1.findViewById(R.id.tv); tv1.setText( "tab1" ); View view2 = this .getLayoutInflater().inflate(R.layout.custom, null ); TextView tv2 = (TextView) view2.findViewById(R.id.tv); tv2.setText( "tab2" ); TabSpec spec1 = tabHost.newTabSpec( "tab1" ).setIndicator(view1) .setContent(R.id.tabs1); TabSpec spec2 = tabHost.newTabSpec( "tab2" ).setIndicator(view2) .setContent(R.id.tabs2); tabHost.addTab(spec1); tabHost.addTab(spec2); } } |
实现的效果: