TabActivity中的Tab標籤詳細設定
//#################################################################
}
package com.woclub.tabactivitytest;
import android.app.TabActivity;
import android.content.res.ColorStateList;
import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.view.Gravity;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TabHost;
import android.widget.TabWidget;
import android.widget.TextView;
import android.widget.TabHost.OnTabChangeListener;
/**
* 總結：在設定Tab的佈局的時候首先需要newTabSpec再在其設定setIndicator(Tab名字，Tab的圖示)，
* 尤其需要注意setContent()，它有三種使用方法setContent(int)它是直接在佈局檔案中設定其佈局,
* setContent(Intent)可以用Intent指定一個Activity,
* setContent(TabContentFactory)可以用一個類來指定其佈局的方式
* @author Administrator
*
*/
public class MainActivity extends TabActivity {
private static final String Tab1 = "Tab1";
private static final String Tab2 = "Tab2";
private static final String Tab3 = "Tab3";
private static final String Tab4 = "Tab4";
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
//1得到TabHost物件，正對TabActivity的操作通常都有這個物件完成
final TabHost tabHost = this.getTabHost();
final TabWidget tabWidget = tabHost.getTabWidget();
//2生成一個Intent物件，該物件指向一個Activity,當然現在例子比較簡單就沒有繫結其他的Activity故而不用
//3生成一個TabSpec物件，這個物件代表了一個Tab頁
TabHost.TabSpec tabSpec = tabHost.newTabSpec(Tab1);
//設定該頁的indicator(指示器)設定該Tab頁的名字和圖示,以及佈局
tabSpec.setIndicator(composeLayout("爽哉", R.drawable.coke))
.setContent(R.id.view1);
//4將設定好的TabSpec物件新增到TabHost當中
tabHost.addTab(tabSpec);
//第二個Tab
tabHost.addTab(tabHost.newTabSpec(Tab2).setIndicator(composeLayout("安逸", R.drawable.coke))
.setContent(R.id.view2));
//第三個Tab
tabHost.addTab(tabHost.newTabSpec(Tab3).setIndicator(composeLayout("開心", R.drawable.coke))
.setContent(R.id.view3));
//第四個Tab
tabHost.addTab(tabHost.newTabSpec(Tab4).setIndicator(composeLayout("說明", R.drawable.coke))
.setContent(R.id.view4));
//setContent(TabContentFactory)可以用一個類來指定其佈局的方式,前三個都是用的setContent(int)方式
// CustomLayout custom = new CustomLayout(this);
// tabHost.addTab(tabHost.newTabSpec(Tab4).setIndicator("Tab4", getResources()
// .getDrawable(R.drawable.icon))
// .setContent(custom));
//*****************************這是對Tab標籤本身的設定*******************************************
int width =45;
int height =48;
for(int i = 0; i < tabWidget.getChildCount(); i++)
{
//設定高度、寬度，不過寬度由於設定為fill_parent，在此對它沒效果
tabWidget.getChildAt(i).getLayoutParams().height = height;
tabWidget.getChildAt(i).getLayoutParams().width = width;
/**
* 下面是設定Tab的背景，可以是顏色，背景圖片等
*/
View v = tabWidget.getChildAt(i);
if (tabHost.getCurrentTab() == i) {
v.setBackgroundColor(Color.GREEN);
//在這裡最好自己設定一個圖片作為背景更好
//v.setBackgroundDrawable(getResources().getDrawable(R.drawable.chat));
} else {
v.setBackgroundColor(Color.GRAY);
}
}
//************************************************************************************
//設定Tab變換時的監聽事件
tabHost.setOnTabChangedListener(new OnTabChangeListener() {
@Override
public void onTabChanged(String tabId) {
// TODO Auto-generated method stub
//當點選tab選項卡的時候，更改當前的背景
for(int i = 0; i < tabWidget.getChildCount(); i++)
{
View v = tabWidget.getChildAt(i);
if (tabHost.getCurrentTab() == i) {
v.setBackgroundColor(Color.GREEN);
} else {
//這裡最後需要和上面的設定保持一致,也可以用圖片作為背景最好
v.setBackgroundColor(Color.GRAY);
}
}
}
});
}
//##########################################這是設定TabWidget的佈局
/**
* 這個設定Tab標籤本身的佈局，需要TextView和ImageView不能重合
* s:是文字顯示的內容
* i:是ImageView的圖片位置
* 將它設定到setIndicator(composeLayout("開心", R.drawable.coke))中
*/
public View composeLayout(String s, int i){
Log.e("Error", "composeLayout");
LinearLayout layout = new LinearLayout(this);
layout.setOrientation(LinearLayout.VERTICAL);
TextView tv = new TextView(this);
tv.setGravity(Gravity.CENTER);
tv.setSingleLine(true);
tv.setText(s);
tv.setTextColor(Color.RED);
layout.addView(tv,
new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
ImageView iv = new ImageView(this);
iv.setImageResource(i);
layout.addView(iv,
new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
return layout;
}
//#################################################################
}
我都有詳細的註釋，估計大家都能看懂的，有些地方給了提示，擴充套件的需要就需要自己去完成了
下面是一個兩個佈局檔案
一個是在layout中設定：
Java程式碼
<?xml version="1.0" encoding="utf-8"?>
<!--
一個典型的標籤Activity 是由2 部分構成的 且其id都有規定 即：
* TabWidget 用於展示標籤頁 id=tabs
* FrameLayout 用於展示隸屬於各個標籤的具體佈局 id=tabconten
* TabHost 用於整個Tab佈局 id=TabHost
還需注意要將Tab顯示在最下面就需要這隻LinearLayout時用Bottom
-->
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:orientation="vertical"
android:gravity="bottom"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="200dip" >
<RelativeLayout
android:id="@+id/view1"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="需要光臨第一個Tab"/>
<ImageView
android:id="@+id/image1"
android:layout_height="wrap_content"
android:layout_below="@id/text1"
android:layout_width="wrap_content"
android:src="@drawable/icon"
/>
</RelativeLayout>
<TextView
android:id="@+id/view2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="需要光臨第二個Tab"/>
<TextView
android:id="@+id/view3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="需要光臨第三個Tab"/>
<TextView
android:id="@+id/view4"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</FrameLayout>
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</TabWidget>
</LinearLayout>
</TabHost> 還有一個在類中設定，設定都差不多，在此類中設定只是針對每個Tab頁面的設定
Java程式碼
package com.woclub.tabactivitytest;
import android.app.Activity;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TabHost;
import android.widget.TextView;
/**
* 此類的功能是設定每個Tab標籤的佈局方式
* 使用方法
* CustomLayout ct = new CustomLayout(this);
* tHost.addTab(tHost.newTabSpec(Tab4).setIndicator("Tab 4").setContent(ct));
* @author Administrator
*
*/
public class CustomLayout implements TabHost.TabContentFactory{
private Activity myActivity;
private LayoutInflater layoutHelper;//用於例項化佈局
private LinearLayout layout;
//建構函式，從外面傳遞引數Activity
public CustomLayout(Activity myActivity)
{
this.myActivity = myActivity;
//通過getLayoutInflater從Activity中得到一個例項化的LayoutInflater
layoutHelper = myActivity.getLayoutInflater();
}
/**
* 根據不同的Tab建立不同的檢視
*/
@Override
public View createTabContent(String tag) {
// TODO Auto-generated method stub
return addCustomView(tag);
}
/**
* 根據Tab的id設定不同Tab的view
* 這是普通的設定方式，設定每個Tab的佈局
* @param id
* @return
*/
private View addCustomView(String id)
{
layout = new LinearLayout(myActivity);
layout.setOrientation(LinearLayout.HORIZONTAL);
if(id.equals("Tab1"))
{
ImageView iv = new ImageView(myActivity);
iv.setImageResource(R.drawable.chat);
//設定layout的佈局，將一個ImageView新增到其中，並設定ImageView的佈局格式,addView的第二個引數是設定ImageView的width和Height
layout.addView(iv, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT));
}
else if(id.equals("Tab2"))
{
//第一個控制元件，注意每新增一個空間都需要用addView新增到layout中
EditText edit = new EditText(myActivity);
layout.addView(edit, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
//第二個控制元件
Button button = new Button(myActivity);
button.setText("確定");
button.setWidth(100);
layout.addView(button, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));
//第三個控制元件
RadioGroup rGroup = new RadioGroup(myActivity);
rGroup.setOrientation(LinearLayout.HORIZONTAL);
RadioButton radio1 = new RadioButton(myActivity);
radio1.setText("Radio A");
rGroup.addView(radio1);
RadioButton radio2 = new RadioButton(myActivity);
radio2.setText("Radio B");
rGroup.addView(radio2);
layout.addView(rGroup,
new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));
}
else if(id.equals("Tab3"))
{
TextView text = new TextView(myActivity);
text.setText("the third TextView");
text.setGravity(Gravity.CENTER);
layout.addView(text);
}
else if(id.equals("Tab4"))
{
LinearLayout.LayoutParams param3 =
new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT);
//在這裡面又引用了佈局檔案來設定控制元件
layout.addView(layoutHelper.inflate(R.layout.hello, null),param3);
}
return layout;
}
}
好了，該說的都在程式碼中說明了