自定义Tab选项卡样式

综合以下两篇文章应该可以做出所有简单的效果

第一篇-------------------------------------->转载自http://www.youmi.net/bbs/thread-102-1-1.html

这个需求估计大家都是需要，这几天刚好做了一个项目，也大概的研究了一下，下面将自己的研究成果展现给大家，希望对大家有用！

我就直接贴核心部分的源码了，其他东西大家自己添加，不要懒到只跟我要全部源码，大家自己做一遍才能真正学到东西！

先贴效果给大家看看：

  

1. 
   
2. import android.app.TabActivity;
   
3. import android.content.Intent;
   
4. import android.os.Bundle;
   
5. import android.widget.*;
   
6. import android.widget.TabHost.OnTabChangeListener;
   
7. import android.os.Build;
   
8. import android.view.View;
   
9. import java.lang.reflect.Field;
   
10. import android.view.LayoutInflater;
    
11. 
    
12. public class testTabActivity extends TabActivity {
    
13.   /** Called when the activity is first created. */
    
14.      @Override
    
15.      public void onCreate(Bundle savedInstanceState) {
    
16.          super.onCreate(savedInstanceState);
    
17.          
    
18.          int width =45;
    
19.          int height =48;
    
20.          
    
21.          final TabHost tabs = getTabHost();
    
22.          final TabWidget tabWidget = tabs.getTabWidget();
    
23.          
    
24.          Field mBottomLeftStrip; 
    
25.          Field mBottomRightStrip; 
    
26.        
    
27.          LayoutInflater.from(this).inflate(R.layout.tab_views, tabs.getTabContentView(), true); 
    
28.        
    
29.          tabs.addTab(tabs.newTabSpec("first tab")
    
30.               .setIndicator("信息",getResources().getDrawable(R.drawable.m))
    
31.               .setContent(new Intent(testTabActivity.this,OneActivty.class))
    
32.               );
    
33.          
    
34.          tabs.addTab(tabs.newTabSpec("second tab")
    
35.           .setIndicator("收藏",getResources().getDrawable(R.drawable.n))
    
36.           .setContent(R.id.content));
    
37.          
    
38.          tabs.addTab(tabs.newTabSpec("second tab")
    
39.               .setIndicator("设置",getResources().getDrawable(R.drawable.s))
    
40.               .setContent(R.id.content));
    
41.          
    
42. 
    
43. 
    
44.          for (int i =0; i < tabWidget.getChildCount(); i++) {
    
45.              /**
    
46.               * 设置高度、宽度，不过宽度由于设置为fill_parent，在此对它没效果
    
47.               */
    
48.              tabWidget.getChildAt(i).getLayoutParams().height = height;
    
49.              tabWidget.getChildAt(i).getLayoutParams().width = width;
    
50.             
    
51.           
    
52.           /**
    
53.            * 设置tab中标题文字的颜色，不然默认为黑色
    
54.            */
    
55.            final TextView tv = (TextView) tabWidget.getChildAt(i).findViewById(android.R.id.title);
    
56.           
    
57.            tv.setTextColor(this.getResources().getColorStateList(android.R.color.white));
    
58.           
    
59.              
    
60.          
    
61.              
    
62.              /**
    
63.               * 此方法是为了去掉系统默认的色白的底角
    
64.               * 
    
65.               * 在 TabWidget中mBottomLeftStrip、mBottomRightStrip
    
66.               * 都是私有变量，但是我们可以通过反射来获取
    
67.               * 
    
68.               * 由于还不知道Android 2.2的接口是怎么样的，现在先加个判断好一些
    
69.               */
    
70.           if (Float.valueOf(Build.VERSION.RELEASE) <= 2.1) {
    
71.                 try { 
    
72.                    mBottomLeftStrip = tabWidget.getClass().getDeclaredField ("mBottomLeftStrip"); 
    
73.                    mBottomRightStrip = tabWidget.getClass().getDeclaredField ("mBottomRightStrip"); 
    
74.                    if(!mBottomLeftStrip.isAccessible()) { 
    
75.                      mBottomLeftStrip.setAccessible(true); 
    
76.                    } 
    
77.                    if(!mBottomRightStrip.isAccessible()){ 
    
78.                      mBottomRightStrip.setAccessible(true); 
    
79.                    } 
    
80.                   mBottomLeftStrip.set(tabWidget, getResources().getDrawable (R.drawable.no)); 
    
81.                   mBottomRightStrip.set(tabWidget, getResources().getDrawable (R.drawable.no)); 
    
82.                    
    
83.                 } catch (Exception e) { 
    
84.                   e.printStackTrace(); 
    
85.                 } 
    
86.           } else {
    
87.           /**
    
88.           * 不做任何处理
    
89.           */
    
90.           }
    
91.          View vvv = tabWidget.getChildAt(i);
    
92.    if(tabs.getCurrentTab()==i){
    
93.            vvv.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_button));
    
94.    }
    
95.    else {
    
96.            vvv.setBackgroundDrawable(getResources().getDrawable(R.drawable.bar));
    
97.    }
    
98.           
    
99.          }
    
100.          /**
     
101.           * 当点击tab选项卡的时候，更改当前的背景
     
102.           */
     
103.          tabs.setOnTabChangedListener(new OnTabChangeListener(){
     
104.     @Override
     
105.     public void onTabChanged(String tabId) {
     
106.      // TODO Auto-generated method stub
     
107.      for (int i =0; i < tabWidget.getChildCount(); i++) {
     
108.       View vvv = tabWidget.getChildAt(i);
     
109.       if(tabs.getCurrentTab()==i){
     
110.               vvv.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_button));
     
111.       }
     
112.       else {
     
113.               vvv.setBackgroundDrawable(getResources().getDrawable(R.drawable.bar));
     
114.       }
     
115.      }
     
116.     }});
     
117.          
     
118.      }
     
119.      
     
120.      
     
121. }

第二篇------------------------------------------------>转载自 http://hkp.iteye.com/blog/1168507

这是前段时间做的一个项目的一部分，我把它单独提取出来！效果如下图：

 

 

可以把选项卡放在一个Activity的任何位置，自定义了选项卡按钮的背景颜色！

 

basicview_tab.xml

 

 

Xml代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:orientation="vertical"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="fill_parent"  
6.     android:background="#852741"  
7.     >  
8.     <span style="white-space: pre;">    </span><!-- 导入别的xml文件 -->  
9.     <include layout="@layout/title_bar"/>  
10.     <TabHost xmlns:android="http://schemas.android.com/apk/res/android"    
11.         android:id="@android:id/tabhost" android:layout_width="fill_parent"    
12.         android:layout_height="fill_parent">    
13.    <LinearLayout android:orientation="vertical"    
14.     android:layout_width="fill_parent" android:layout_height="fill_parent">   
15.      
16.       <TabWidget android:id="@android:id/tabs"    
17.       android:layout_width="fill_parent"     
18.       android:layout_height="wrap_content" />   
19.       <FrameLayout android:id="@android:id/tabcontent"    
20.       android:layout_width="fill_parent"     
21.       android:layout_height="wrap_content"    
22.       android:layout_weight="3" >    
23.            
24.       </FrameLayout>  
25.         
26.          
27.     </LinearLayout>    
28. </TabHost>    
29. </LinearLayout>  

 

自定义选项卡按钮  TabButton

 

 

Java代码  

1. public class TabButton extends LinearLayout {  
2.   
3.     public TabButton(Context c, int drawable, String text) {  
4.         super(c);  
5.         LayoutInflater inflater = LayoutInflater.from(c);  
6.         View view = inflater.inflate(R.layout.tab_button_layout, null);  
7.   
8.         addView(view);  
9.   
10.         TextView tv = (TextView)     view.findViewById(R.id.tab_button_text);  
11.   
12.         ImageView iv = (ImageView) view.findViewById(R.id.tab_button_img);  
13.         iv.setImageResource(drawable);  
14.         tv.setText(text);  
15.     }  
16. }  

 

 

布局 tab_button_layout.xml

 

Xml代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:orientation="vertical"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="62dip"  
6.     android:background="@drawable/tab_selector_bg"  
7.     android:gravity="center"  
8.     >  
9.     <ImageView   
10.         android:layout_width="240dip"  
11.         android:layout_height="wrap_content"  
12.         android:id="@+id/tab_button_img"  
13.         android:layout_gravity="center_horizontal"  
14.         />  
15.     <TextView    
16.         android:layout_width="wrap_content"   
17.         android:layout_height="wrap_content"   
18.         android:id="@+id/tab_button_text"  
19.         android:layout_gravity="center"  
20.         android:textColor="#ffffff"  
21.     />  
22. </LinearLayout>  

 

主界面代码 BasicViewTab

 

Java代码  

1. public class BasicViewTab extends TabActivity {  
2.   
3.     private TabHost tabHost;  
4.     private TextView textView;  
5.   
6.     /* (non-Javadoc) 
7.      * @see android.app.ActivityGroup#onCreate(android.os.Bundle) 
8.      */  
9.     @Override  
10.     protected void onCreate(Bundle savedInstanceState) {  
11.         // TODO Auto-generated method stub  
12.         super.onCreate(savedInstanceState);  
13.         setContentView(R.layout.basicview_tab);  
14.           
15.         Intent intent = new Intent(BasicViewTab.this,TabExpenses.class);  
16.         intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);  
17.         textView = (TextView)findViewById(R.id.tv_title_bar);  
18.         textView.setText("Basic View Factor");  
19.           
20.         tabHost = getTabHost();   
21.         tabHost.addTab(tabHost.newTabSpec("tab1")  
22.                 .setIndicator(new TabButton(this,  
23.                         R.drawable.tabbar_icon_basic_expenses_selector,  
24.                         "Expenses"))  
25.                 .setContent(intent));  
26.         tabHost.addTab(tabHost.newTabSpec("tab2")  
27.                 .setIndicator(new TabButton(this,  
28.                         R.drawable.tabbar_icon_basic_setting_selector,  
29.                         "Setting"))  
30.                 .setContent(new Intent(this, TabSetting.class)));  
31.   
32.         tabHost.setCurrentTab(0);  
33.           
34.         ImageView backHome = (ImageView) findViewById(R.id.btn_back_home);  
35.         backHome.setOnClickListener(new OnClickListener() {  
36.               
37.             @Override  
38.             public void onClick(View v) {  
39.                 // TODO Auto-generated method stub  
40.                 BasicViewTab.this.finish();  
41.             }  
42.         });  
43.     }  
44. }  

 

 

附件里有完整代码！