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