自定义TabWidget

在开发过程中，默认的TabWidget不能满足我们对于UI的要求并且没有足够的属性工我们去修改，这个时候能够自定义TabWidget是非常必要的。自定义TabWidget组要运用的是TabSpec.setIndicator(View view)方法。

main.xml:

<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:

<?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:

<?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:

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);

}

}

实现的效果：