TabActivity中的Tab标签详细设置

参考链接：

http://www.iteye.com/topic/602737

这个写的很不错，我是跟着一步步写下来的，不过到最后也遇到了麻烦，就是不能将Tab标签的文字和图片分开，始终是重合的，而且每个具体的代码，还是搞了许久才出来，故而分享之，希望能给大家带来方便，也谢谢下面的高人，呵呵！

http://www.youmi.net/bbs/thread-102-1-4.html

这个和上面的代码是一样的，不过代码不全，对于初学者来说，考验的时候来了，完善就是提高的过程，不要怕麻烦！

下面就根据上面的参考自己写的，当然大部分是相同的，不过有详细的注释，完整的代码

如果有什么不明白就留言吧！呵呵

首先结果图：

图1：

图2：

图3：

当然界面没有前面的仁兄好看，我是讲究实用，美化需要自己慢慢做了

呵呵

下面直接代码：

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中设置：

<?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页面的设置

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



}

好了，该说的都在代码中说明了

希望大家喜欢，做的粗糙，就由大家去改进吧！

呵呵！

欢迎大家的讨论

转：http://hao3100590.iteye.com/blog/974343