自定义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 version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="vertical"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:background="#852741"
     >
     <span style="white-space: pre;">    </span><!-- 导入别的xml文件 -->
     <include layout="@layout/title_bar"/>
     <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:layout_width="fill_parent" android:layout_height="fill_parent">

       <TabWidget android:id="@android:id/tabs"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content" />
       <FrameLayout android:id="@android:id/tabcontent"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:layout_weight="3" >

       </FrameLayout>


     </LinearLayout>
 </TabHost>
 </LinearLayout>

 

自定义选项卡按钮  TabButton

 

 

 public class TabButton extends LinearLayout {

     public TabButton(Context c, int drawable, String text) {
         super(c);
         LayoutInflater inflater = LayoutInflater.from(c);
         View view = inflater.inflate(R.layout.tab_button_layout, null);

         addView(view);

         TextView tv = (TextView)     view.findViewById(R.id.tab_button_text);

         ImageView iv = (ImageView) view.findViewById(R.id.tab_button_img);
         iv.setImageResource(drawable);
         tv.setText(text);
     }
 }

 

 

布局 tab_button_layout.xml

 

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="vertical"
     android:layout_width="fill_parent"
     android:layout_height="62dip"
     android:background="@drawable/tab_selector_bg"
     android:gravity="center"
     >
     <ImageView
         android:layout_width="240dip"
         android:layout_height="wrap_content"
         android:id="@+id/tab_button_img"
         android:layout_gravity="center_horizontal"
         />
     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:id="@+id/tab_button_text"
         android:layout_gravity="center"
         android:textColor="#ffffff"
     />
 </LinearLayout>

 

主界面代码 BasicViewTab

 

 public class BasicViewTab extends TabActivity {

     private TabHost tabHost;
     private TextView textView;

     /* (non-Javadoc)
      * @see android.app.ActivityGroup#onCreate(android.os.Bundle)
      */
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         // TODO Auto-generated method stub
         super.onCreate(savedInstanceState);
         setContentView(R.layout.basicview_tab);

         Intent intent = new Intent(BasicViewTab.this,TabExpenses.class);
         intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
         textView = (TextView)findViewById(R.id.tv_title_bar);
         textView.setText("Basic View Factor");

         tabHost = getTabHost();
         tabHost.addTab(tabHost.newTabSpec("tab1")
                 .setIndicator(new TabButton(this,
                         R.drawable.tabbar_icon_basic_expenses_selector,
                         "Expenses"))
                 .setContent(intent));
         tabHost.addTab(tabHost.newTabSpec("tab2")
                 .setIndicator(new TabButton(this,
                         R.drawable.tabbar_icon_basic_setting_selector,
                         "Setting"))
                 .setContent(new Intent(this, TabSetting.class)));

         tabHost.setCurrentTab(0);

         ImageView backHome = (ImageView) findViewById(R.id.btn_back_home);
         backHome.setOnClickListener(new OnClickListener() {

             @Override
             public void onClick(View v) {
                 // TODO Auto-generated method stub
                 BasicViewTab.this.finish();
             }
         });
     }
 }

 

 

附件里有完整代码！