首页 > 代码库 > 自定义TabWidget

自定义TabWidget

2024-08-05 09:12:10   215人阅读

在开发过程中，默认的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);
 
    }
 
}

实现的效果：

自定义TabWidget


联系
我们