自定义TabWidget
时间：2014-03-25 22:14:28
手机看文章
扫描二维码
随时随地手机看文章
[导读] 在开发过程中，默认的TabWidget不能满足我们对于UI的要求并且没有足够的属性工我们去修改，这个时候能够自定义TabWidget是非常必要的。自定义TabWidget组要运用的是TabSpe
在开发过程中，默认的TabWidget不能满足我们对于UI的要求并且没有足够的属性工我们去修改，这个时候能够自定义TabWidget是非常必要的。自定义TabWidget组要运用的是TabSpec.setIndicator(View view)方法。
main.xml:
01 |
<TabHost xmlns:android="http://schemas.android.com/apk/res/android" |
02 |
xmlns:tools="http://schemas.android.com/tools" |
03 |
android:id="@android:id/tabhost" |
04 |
android:layout_width="match_parent" |
05 |
android:layout_height="match_parent" |
06 |
tools:context=".Main" > |
07 |
08 |
<RelativeLayout |
09 |
android:layout_width="match_parent" |
10 |
android:layout_height="match_parent" > |
11 |
12 |
<TabWidget |
13 |
android:id="@android:id/tabs" |
14 |
android:layout_width="match_parent" |
15 |
android:layout_height="wrap_content" |
16 |
android:layout_alignParentBottom="true" /> |
17 |
18 |
<FrameLayout |
19 |
android:id="@android:id/tabcontent" |
20 |
android:layout_width="match_parent" |
21 |
android:layout_height="match_parent" > |
22 |
23 |
<LinearLayout |
24 |
android:id="@+id/tabs1" |
25 |
android:layout_width="match_parent" |
26 |
android:layout_height="match_parent" |
27 |
android:orientation="vertical" > |
28 |
29 |
<TextView |
30 |
android:layout_width="match_parent" |
31 |
android:layout_height="wrap_content" |
32 |
android:text="我是tab1" /> |
33 |
</LinearLayout> |
34 |
35 |
<LinearLayout |
36 |
android:id="@+id/tabs2" |
37 |
android:layout_width="match_parent" |
38 |
android:layout_height="match_parent" |
39 |
android:orientation="vertical" > |
40 |
41 |
<TextView |
42 |
android:layout_width="match_parent" |
43 |
android:layout_height="wrap_content" |
44 |
android:text="我是tab2" /> |
45 |
</LinearLayout> |
46 |
</FrameLayout> |
47 |
</RelativeLayout> |
48 |
49 |
</TabHost> |
供点击时切换的图片tabmini.xml:
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/check" android:state_selected="true"/> |
5 |
<item android:drawable="@drawable/uncheck" android:state_selected="false"/> |
6 |
7 |
</selector> |
自定义view的布局文件custom.xml:
01 |
<?xml version="1.0" encoding="utf-8"?> |
02 |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" |
03 |
android:layout_width="match_parent" |
04 |
android:layout_height="wrap_content" |
05 |
android:orientation="vertical" > |
06 |
07 |
<ImageView |
08 |
android:layout_width="match_parent" |
09 |
android:layout_height="wrap_content" |
10 |
android:src="@drawable/tabmini" /> |
11 |
12 |
<TextView |
13 |
android:id="@+id/tv" |
14 |
android:layout_width="match_parent" |
15 |
android:layout_height="wrap_content" |
16 |
android:layout_marginBottom="0sp" |
17 |
android:gravity="center_horizontal"/> |
18 |
19 |
</LinearLayout> |
最后是我们的main.java:
01 |
package com.app.main; |
02 |
03 |
import android.app.Activity; |
04 |
import android.os.Bundle; |
05 |
import android.view.View; |
06 |
import android.widget.TabHost; |
07 |
import android.widget.TabHost.TabSpec; |
08 |
import android.widget.TextView; |
09 |
10 |
public class Main extends Activity { |
11 |
12 |
@Override |
13 |
protected void onCreate(Bundle savedInstanceState) { |
14 |
super.onCreate(savedInstanceState); |
15 |
setContentView(R.layout.main); |
16 |
17 |
TabHost tabHost = (TabHost) this.findViewById(android.R.id.tabhost); |
18 |
19 |
// tabhost如果是以findViewById()这个方法获取的，必须调用setup()方法 |
20 |
tabHost.setup(); |
21 |
22 |
View view1 = this.getLayoutInflater().inflate(R.layout.custom, null); |
23 |
24 |
TextView tv1 = (TextView) view1.findViewById(R.id.tv); |
25 |
26 |
tv1.setText("tab1"); |
27 |
28 |
View view2 = this.getLayoutInflater().inflate(R.layout.custom, null); |
29 |
30 |
TextView tv2 = (TextView) view2.findViewById(R.id.tv); |
31 |
32 |
tv2.setText("tab2"); |
33 |
34 |
TabSpec spec1 = tabHost.newTabSpec("tab1").setIndicator(view1) |
35 |
.setContent(R.id.tabs1); |
36 |
37 |
TabSpec spec2 = tabHost.newTabSpec("tab2").setIndicator(view2) |
38 |
.setContent(R.id.tabs2); |
39 |
40 |
tabHost.addTab(spec1); |
41 |
42 |
tabHost.addTab(spec2); |
43 |
44 |
} |
45 |
46 |
} |
实现的效果：
下载文档
