Android TabWidget

首先先看一个小例子,接着讲解原理

 

  1. TabTest.java   
  2.   
  3. view plaincopy to clipboardprint?   
  4. package org.hualang.tab;     
  5. import android.app.Activity;     
  6. import android.app.TabActivity;     
  7. import android.graphics.Color;     
  8. import android.os.Bundle;     
  9. import android.widget.TabHost;     
  10. import android.widget.Toast;     
  11. import android.widget.TabHost.OnTabChangeListener;     
  12. public class TabTest extends TabActivity {     
  13.     /** Called when the activity is first created. */     
  14.     TabHost tabhost;     
  15.     @Override     
  16.     public void onCreate(Bundle savedInstanceState) {     
  17.         super.onCreate(savedInstanceState);     
  18.         setContentView(R.layout.main);     
  19.         //取得TabHost对象     
  20.         tabhost = getTabHost();     
  21.         //为TabHost添加标签     
  22.         //新建一个newTabSpec(newTabSpec)     
  23.         //设置其标签和图标(setIndicator)     
  24.         //设置内容(setContent)     
  25.         tabhost.addTab(tabhost.newTabSpec("tab1")     
  26.                 .setIndicator("TAB 1",getResources().getDrawable(R.drawable.img1))     
  27.                 .setContent(R.id.text1));     
  28.         tabhost.addTab(tabhost.newTabSpec("tab2")     
  29.                 .setIndicator("TAB 2",getResources().getDrawable(R.drawable.img2))     
  30.                 .setContent(R.id.text2));     
  31.         tabhost.addTab(tabhost.newTabSpec("tab3")     
  32.                 .setIndicator("TAB 3",getResources().getDrawable(R.drawable.img3))     
  33.                 .setContent(R.id.text3));     
  34.         //设置TabHost的背景颜色     
  35.         //tabhost.setBackgroundColor(Color.argb(150,22,70,150));     
  36.         //设置TabHost的背景图片资源     
  37.         tabhost.setBackgroundResource(R.drawable.bg0);     
  38.         //设置当前显示哪个标签     
  39.         tabhost.setCurrentTab(0);     
  40.         //标签切换事件处理,setOnTabChangedListener     
  41.         tabhost.setOnTabChangedListener(new OnTabChangeListener()     
  42.         {     
  43.             public void onTabChanged(String tabId)     
  44.             {     
  45.                 Toast toast=Toast.makeText(getApplicationContext(), "现在是"+tabId+"标签", Toast.LENGTH_SHORT);     
  46.                 toast.show();     
  47.             }     
  48.         });     
  49.              
  50.     }     
  51. }     
  52.   

 

 

main.xml

  1. <?xml version="1.0" encoding="utf-8"?>     
  2. <TabHost xmlns:android="http://schemas.android.com/apk/res/android"     
  3.     android:id="@android:id/tabhost"     
  4.     android:layout_width="fill_parent"     
  5.     android:layout_height="fill_parent">     
  6.     <LinearLayout     
  7.         android:orientation="vertical"     
  8.         android:layout_width="fill_parent"     
  9.         android:layout_height="fill_parent">     
  10.         <TabWidget     
  11.             android:id="@android:id/tabs"     
  12.             android:layout_width="fill_parent"     
  13.             android:layout_height="wrap_content" />     
  14.         <FrameLayout     
  15.             android:id="@android:id/tabcontent"     
  16.             android:layout_width="fill_parent"     
  17.             android:layout_height="fill_parent">     
  18.             <TextView      
  19.                 android:id="@+id/text1"     
  20.                 android:layout_width="fill_parent"     
  21.                 android:layout_height="fill_parent"      
  22.                 android:text="选项卡1" />     
  23.             <TextView      
  24.                 android:id="@+id/text2"     
  25.                 android:layout_width="fill_parent"     
  26.                 android:layout_height="fill_parent"      
  27.                 android:text="选项卡2" />     
  28.             <TextView      
  29.                 android:id="@+id/text3"     
  30.                 android:layout_width="fill_parent"     
  31.                 android:layout_height="fill_parent"      
  32.                 android:text="选项卡3" />     
  33.         </FrameLayout>     
  34.     </LinearLayout>     
  35. </TabHost>    

 


Android TabWidget的实现可以分为二种,一种是使用标准TabActivity实现,另外一种可以自定义方式实现,这种方法实现起来相对比较复杂,但对于要实现比较多元化的view是很好的,这里我们简单看下源码

一、通用做法

继承TabActivity,实现自己的TabActivity

 

[java] view plaincopy
 
  1. import android.app.Activity;  
  2. import android.app.TabActivity;  
  3. import android.content.Intent;  
  4. import android.os.Bundle;  
  5. import android.widget.TabHost;  
  6. import android.widget.TabHost.OnTabChangeListener;  
  7. public class TabWidgetDemo2 extends TabActivity implements OnTabChangeListener {  
  8.      private TabHost mTabHost;  
  9.        
  10.     @Override  
  11.     protected void onCreate(Bundle savedInstanceState) {  
  12.         // TODO Auto-generated method stub  
  13.         super.onCreate(savedInstanceState);  
  14.           
  15.         setContentView(R.layout.tabwidgetdemo2);    
  16.         mTabHost = getTabHost();  
  17.         mTabHost.setOnTabChangedListener(this);  
  18.         setupTab1();  
  19.         setupTab2();  
  20.         mTabHost.setCurrentTab(1);  
  21.     }  
  22.     private void setupTab2() {  
  23.         // TODO Auto-generated method stub  
  24.         Intent intent = new Intent();  
  25.         intent.setAction(Intent.ACTION_MAIN);  
  26.         intent.setClass(this, TabWidget2.class);  
  27.         mTabHost.addTab(mTabHost.newTabSpec("TabWidget2")  
  28.                 .setIndicator("TabWidget2",getResources().getDrawable(R.drawable.icon))  
  29.                 .setContent(intent));  
  30.     }  
  31.     private void setupTab1() {  
  32.         // TODO Auto-generated method stub  
  33.         Intent intent = new Intent();  
  34.         intent.setAction(Intent.ACTION_MAIN);  
  35.         intent.setClass(this, TabWidget1.class);  
  36.         mTabHost.addTab(mTabHost.newTabSpec("TabWidget1")  
  37.                 .setIndicator("TabWidget1",getResources().getDrawable(R.drawable.icon))  
  38.                 .setContent(intent));  
  39.     }  
  40.     public void onTabChanged(String tabId) {  
  41.         // TODO Auto-generated method stub  
  42.         Activity activity = getLocalActivityManager().getActivity(tabId);  
  43.         if (activity != null) {  
  44.             activity.onWindowFocusChanged(true);  
  45.         }  
  46.     }  
  47.        
  48.        
  49. }  

 

二个tab对应的Activity,先看TabWidget1,这个类在第二种实现中还会用到,因此我们可以看到对Action的判断。

 

[java] view plaincopy
 
  1. import android.app.Activity;  
  2. import android.content.Intent;  
  3. import android.os.Bundle;  
  4. import com.android.exampledemo.R;  
  5. import com.android.exampledemo.util.DemoUtils;  
  6. public class TabWidget1 extends Activity {  
  7.     @Override  
  8.     protected void onCreate(Bundle savedInstanceState) {  
  9.         // TODO Auto-generated method stub  
  10.         super.onCreate(savedInstanceState);  
  11.           
  12.         Intent intent = this.getIntent();  
  13.         if (intent.getAction().equals(Intent.ACTION_MAIN)){  
  14.             setContentView(R.layout.tabwidgetdemo2_1);  
  15.         }  
  16.         else {  
  17.             setContentView(R.layout.tabwidget_1);  
  18.             DemoUtils.updateButtonBar((Activity)this,R.id.contactstab);  
  19.         }  
  20.     }  
  21. }  

 

 

再看一下TabWidget2,这个Activity我们在第二种实现方式中也会用到。

 

[java] view plaincopy
 
  1. import com.android.exampledemo.R;  
  2. import com.android.exampledemo.util.DemoUtils;  
  3. import android.app.Activity;  
  4. import android.content.Intent;  
  5. import android.os.Bundle;  
  6. public class TabWidget2 extends Activity {  
  7.     @Override  
  8.     protected void onCreate(Bundle savedInstanceState) {  
  9.         // TODO Auto-generated method stub  
  10.         super.onCreate(savedInstanceState);  
  11.           
  12.         Intent intent = this.getIntent();  
  13.           
  14.         if (intent.getAction().equals(Intent.ACTION_MAIN)){  
  15.             setContentView(R.layout.tabwidgetdemo2_1);  
  16.         }  
  17.         else {  
  18.             setContentView(R.layout.tabwidget_2);  
  19.             DemoUtils.updateButtonBar((Activity)this,R.id.groupstab);  
  20.         }  
  21.     }  
  22. }  

 

 

最后就是各个Activity对应的layout

1.tabwidgetdemo2.xml

 

[xhtml] view plaincopy
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <TabHost  
  3.   xmlns:android="http://schemas.android.com/apk/res/android"  
  4.   android:id="@android:id/tabhost"  
  5.   android:layout_width="fill_parent"  
  6.   android:layout_height="fill_parent">  
  7.   <LinearLayout   
  8.     android:orientation="vertical"  
  9.     android:layout_width="fill_parent"  
  10.     android:layout_height="fill_parent">  
  11.     <TabWidget android:id="@android:id/tabs"  
  12.         android:layout_width="fill_parent"  
  13.         android:layout_height="68dip"  
  14.         android:paddingLeft="1dip"  
  15.         android:paddingRight="1dip"  
  16.         android:paddingTop="4dip"  
  17.         />  
  18.     <FrameLayout android:id="@android:id/tabcontent"  
  19.         android:layout_width="fill_parent"  
  20.         android:layout_height="0dip"  
  21.         android:layout_weight="1"  
  22.         />  
  23.     </LinearLayout>   
  24. </TabHost>  

 

2.二个sub tab对应的layout

 

[xhtml] view plaincopy
 
  1. Layout1  
  2. <?xml version="1.0" encoding="utf-8"?>  
  3. <LinearLayout  
  4.   xmlns:android="http://schemas.android.com/apk/res/android"  
  5.   android:layout_width="fill_parent"  
  6.   android:layout_height="fill_parent"  
  7.   android:background="#FFF">  
  8.   <TextView android:id="@+id/textview"   
  9.     android:layout_width="wrap_content"   
  10.     android:layout_height="wrap_content"  
  11.     android:text="Tab Widget first">  
  12.    </TextView>  
  13. </LinearLayout>  
  14. Layout2  
  15. <?xml version="1.0" encoding="utf-8"?>  
  16. <LinearLayout  
  17.   xmlns:android="http://schemas.android.com/apk/res/android"  
  18.   android:layout_width="fill_parent"  
  19.   android:layout_height="fill_parent"  
  20.   android:background="#FFF">  
  21.   <TextView android:id="@+id/textview"   
  22.     android:layout_width="wrap_content"   
  23.     android:layout_height="wrap_content"  
  24.     android:text="Tab Widget second">  
  25.    </TextView>  
  26. </LinearLayout>  

 

 

 

方法2:

先创建一个Activity (TabWidgetDemo)

 

[c-sharp] view plaincopy
 
  1. 1.TabWidgetDemo.java  
  2. import com.android.exampledemo.R;  
  3. import com.android.exampledemo.util.DemoUtils;  
  4. import android.app.Activity;  
  5. import android.content.Context;  
  6. import android.content.SharedPreferences;  
  7. import android.os.Bundle;  
  8. //not use tabhost to organized   
  9. public class TabWidgetDemo extends Activity {  
  10.     @Override  
  11.     protected void onCreate(Bundle savedInstanceState) {  
  12.         // TODO Auto-generated method stub  
  13.         super.onCreate(savedInstanceState);  
  14.         //int activeTab = DemoUtils.getIntPref(this, "activetab", R.id.artisttab);  
  15.         SharedPreferences prefs =  
  16.             getSharedPreferences(getPackageName(), Context.MODE_PRIVATE);  
  17.         int activeTab = prefs.getInt("activetab", R.id.contactstab);  
  18.         if (activeTab != R.id.contactstab  
  19.                 && activeTab != R.id.groupstab) {  
  20.             activeTab = R.id.contactstab;  
  21.         }  
  22.         DemoUtils.activateTab(this, activeTab);  
  23.     }  
  24. }  
  25. 2.DemoUtils  
  26. import android.app.Activity;  
  27. import android.content.Intent;  
  28. import android.net.Uri;  
  29. import android.view.View;  
  30. import android.widget.TabWidget;  
  31. import com.android.exampledemo.R;  
  32. public class DemoUtils {  
  33.     static int sActiveTabIndex = -1;  
  34.       
  35.     public static void activateTab(Activity a,int active_id){  
  36.         Intent intent = new Intent(Intent.ACTION_PICK);  
  37.         switch (active_id) {  
  38.         case R.id.contactstab:  
  39.             intent.setDataAndType(Uri.EMPTY, "vnd.android.cursor.dir/tb_contacts");  
  40.             break;  
  41.         case R.id.groupstab:  
  42.             intent.setDataAndType(Uri.EMPTY, "vnd.android.cursor.dir/tb_groups");  
  43.             break;  
  44.         default:  
  45.             return;  
  46.         }  
  47.         intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);  
  48.         a.startActivity(intent);  
  49.         a.finish();  
  50.         a.overridePendingTransition(0,0);  
  51.     }  
  52.       
  53.       
  54.     public static void updateButtonBar(Activity a, int highlight) {  
  55.         final TabWidget ll = (TabWidget) a.findViewById(R.id.buttonbar);  
  56.           
  57.          for (int i = ll.getChildCount() - 1; i >= 0; i--) {  
  58.              View v = ll.getChildAt(i);  
  59.              boolean isActive = (v.getId() == highlight);  
  60.              if (isActive) {  
  61.                     ll.setCurrentTab(i);  
  62.                     sActiveTabIndex = i;  
  63.              }  
  64.                
  65.              v.setTag(i);  
  66.              v.setOnClickListener(new View.OnClickListener() {  
  67.                     public void onClick(View v) {  
  68.                         int id = v.getId();  
  69.                         if (id == ll.getChildAt(sActiveTabIndex).getId()) {  
  70.                             return;  
  71.                         }  
  72.                         activateTab((Activity)ll.getContext(),id );  
  73.                         ll.setCurrentTab((Integer) v.getTag());  
  74.                     }});  
  75.          }  
  76.     }  
  77. }  

 

 

 

二个Tab sub activity前一方法中已经给出,这里我们只需要看一下layout的实现就可以了

1>buttonbar.xml

 

[xhtml] view plaincopy
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <TabWidget xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:id="@+id/buttonbar"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="wrap_content" >  
  6.     <TextView  
  7.         android:id="@+id/contactstab"  
  8.         android:focusable="true"  
  9.         android:drawableTop="@drawable/icon"  
  10.         android:background="@drawable/buttonbarbackground"  
  11.         android:text="Contacts"  
  12.         android:textColor="@color/tab_indicator_text"  
  13.         android:textAppearance="?android:attr/textAppearanceSmall"  
  14.         android:paddingTop="7dip"  
  15.         android:paddingBottom="2dip"  
  16.         android:gravity="center"  
  17.         android:layout_weight="1"  
  18.         android:layout_marginLeft="-3dip"  
  19.         android:layout_marginRight="-3dip"  
  20.         android:layout_width="match_parent"  
  21.         android:layout_height="84dip"  
  22.         android:singleLine="true"  
  23.         android:ellipsize="marquee" />  
  24.     <TextView  
  25.         android:id="@+id/groupstab"  
  26.         android:focusable="true"  
  27.         android:drawableTop="@drawable/icon"  
  28.         android:background="@drawable/buttonbarbackground"  
  29.         android:text="Group"  
  30.         android:textColor="@color/tab_indicator_text"  
  31.         android:textAppearance="?android:attr/textAppearanceSmall"  
  32.         android:paddingTop="7dip"  
  33.         android:paddingBottom="2dip"  
  34.         android:gravity="center"  
  35.         android:layout_weight="1"  
  36.         android:layout_marginLeft="-3dip"  
  37.         android:layout_marginRight="-3dip"  
  38.         android:layout_width="match_parent"  
  39.         android:layout_height="84dip"  
  40.         android:singleLine="true"  
  41.         android:ellipsize="marquee" />  
  42. </TabWidget>  

 

2>tabwidget_1.xml

 

[xhtml] view plaincopy
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout  
  3.   xmlns:android="http://schemas.android.com/apk/res/android"  
  4.   android:layout_width="fill_parent"  
  5.   android:layout_height="fill_parent">  
  6.     
  7.   <include layout="@layout/battonbar" />  
  8.     
  9.   <ExpandableListView android:id="@+id/android:list"  
  10.                   android:layout_width="fill_parent"   
  11.                   android:layout_height="wrap_content"  
  12.                   android:footerDividersEnabled="true"  
  13.                   android:fadeScrollbars="true"  
  14.                   android:drawSelectorOnTop="true">  
  15.   </ExpandableListView>  
  16.     
  17. </LinearLayout>  

 

3> tabwidget_2.xml

 

[xhtml] view plaincopy
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout  
  3.   xmlns:android="http://schemas.android.com/apk/res/android"  
  4.   android:layout_width="fill_parent"  
  5.   android:layout_height="fill_parent">  
  6.     
  7.   <include layout="@layout/battonbar" />  
  8.     
  9. </LinearLayout>  

 

 

 

你可能感兴趣的:(tabwidget)