二種方法實現 Android TabWidget

Android TabWidget的實現可以分為二種，一種是使用標準TabActivity實現，另外一種可以自訂方式實現，這種方法實現起來相對比較複雜，但對於要實現比較多元化的view是很好的，這裡我們簡單看下源碼

一、通用做法

繼承TabActivity，實現自己的TabActivity

import android.app.Activity;<br />import android.app.TabActivity;<br />import android.content.Intent;<br />import android.os.Bundle;<br />import android.widget.TabHost;<br />import android.widget.TabHost.OnTabChangeListener;<br />public class TabWidgetDemo2 extends TabActivity implements OnTabChangeListener {<br /> private TabHost mTabHost;</p><p>@Override<br />protected void onCreate(Bundle savedInstanceState) {<br />// TODO Auto-generated method stub<br />super.onCreate(savedInstanceState);</p><p>setContentView(R.layout.tabwidgetdemo2);<br /> mTabHost = getTabHost();<br /> mTabHost.setOnTabChangedListener(this);<br /> setupTab1();<br /> setupTab2();<br /> mTabHost.setCurrentTab(1);<br />}<br />private void setupTab2() {<br />// TODO Auto-generated method stub<br />Intent intent = new Intent();<br />intent.setAction(Intent.ACTION_MAIN);<br /> intent.setClass(this, TabWidget2.class);<br /> mTabHost.addTab(mTabHost.newTabSpec("TabWidget2")<br /> .setIndicator("TabWidget2",getResources().getDrawable(R.drawable.icon))<br /> .setContent(intent));<br />}<br />private void setupTab1() {<br />// TODO Auto-generated method stub<br />Intent intent = new Intent();<br />intent.setAction(Intent.ACTION_MAIN);<br /> intent.setClass(this, TabWidget1.class);<br /> mTabHost.addTab(mTabHost.newTabSpec("TabWidget1")<br /> .setIndicator("TabWidget1",getResources().getDrawable(R.drawable.icon))<br /> .setContent(intent));<br />}<br />public void onTabChanged(String tabId) {<br />// TODO Auto-generated method stub<br />Activity activity = getLocalActivityManager().getActivity(tabId);<br /> if (activity != null) {<br /> activity.onWindowFocusChanged(true);<br /> }<br />}</p><p>}

二個tab對應的Activity，先看TabWidget1，這個類在第二種實現中還會用到，因此我們可以看到對Action的判斷。

import android.app.Activity;<br />import android.content.Intent;<br />import android.os.Bundle;<br />import com.android.exampledemo.R;<br />import com.android.exampledemo.util.DemoUtils;<br />public class TabWidget1 extends Activity {<br />@Override<br />protected void onCreate(Bundle savedInstanceState) {<br />// TODO Auto-generated method stub<br />super.onCreate(savedInstanceState);</p><p>Intent intent = this.getIntent();<br />if (intent.getAction().equals(Intent.ACTION_MAIN)){<br />setContentView(R.layout.tabwidgetdemo2_1);<br />}<br />else {<br />setContentView(R.layout.tabwidget_1);<br />DemoUtils.updateButtonBar((Activity)this,R.id.contactstab);<br />}<br />}<br />}<br />

 

再看一下TabWidget2，這個Activity我們在第二種實現方式中也會用到。

import com.android.exampledemo.R;<br />import com.android.exampledemo.util.DemoUtils;<br />import android.app.Activity;<br />import android.content.Intent;<br />import android.os.Bundle;<br />public class TabWidget2 extends Activity {<br />@Override<br />protected void onCreate(Bundle savedInstanceState) {<br />// TODO Auto-generated method stub<br />super.onCreate(savedInstanceState);</p><p>Intent intent = this.getIntent();</p><p>if (intent.getAction().equals(Intent.ACTION_MAIN)){<br />setContentView(R.layout.tabwidgetdemo2_1);<br />}<br />else {<br />setContentView(R.layout.tabwidget_2);<br />DemoUtils.updateButtonBar((Activity)this,R.id.groupstab);<br />}<br />}<br />}

 

最後就是各個Activity對應的layout

1.tabwidgetdemo2.xml

<?xml version="1.0" encoding="utf-8"?><br /><TabHost<br /> xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:id="@android:id/tabhost"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"><br /> <LinearLayout<br /> android:orientation="vertical"<br />android:layout_width="fill_parent"<br />android:layout_height="fill_parent"><br /><TabWidget android:id="@android:id/tabs"<br />android:layout_width="fill_parent"<br />android:layout_height="68dip"<br />android:paddingLeft="1dip"<br />android:paddingRight="1dip"<br />android:paddingTop="4dip"<br /> /><br /> <FrameLayout android:id="@android:id/tabcontent"<br />android:layout_width="fill_parent"<br />android:layout_height="0dip"<br />android:layout_weight="1"<br /> /><br /></LinearLayout><br /></TabHost>

2.二個sub tab對應的layout

Layout1<br /><?xml version="1.0" encoding="utf-8"?><br /><LinearLayout<br /> xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"<br /> android:background="#FFF"><br /> <TextView android:id="@+id/textview"<br />android:layout_width="wrap_content"<br />android:layout_height="wrap_content"<br />android:text="Tab Widget first"><br /> </TextView><br /></LinearLayout><br />Layout2<br /><?xml version="1.0" encoding="utf-8"?><br /><LinearLayout<br /> xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"<br /> android:background="#FFF"><br /> <TextView android:id="@+id/textview"<br />android:layout_width="wrap_content"<br />android:layout_height="wrap_content"<br />android:text="Tab Widget second"><br /> </TextView><br /></LinearLayout>

 

 

方法2：

先建立一個Activity （TabWidgetDemo）

1.TabWidgetDemo.java<br />import com.android.exampledemo.R;<br />import com.android.exampledemo.util.DemoUtils;<br />import android.app.Activity;<br />import android.content.Context;<br />import android.content.SharedPreferences;<br />import android.os.Bundle;<br />//not use tabhost to organized<br />public class TabWidgetDemo extends Activity {<br />@Override<br />protected void onCreate(Bundle savedInstanceState) {<br />// TODO Auto-generated method stub<br />super.onCreate(savedInstanceState);<br />//int activeTab = DemoUtils.getIntPref(this, "activetab", R.id.artisttab);<br />SharedPreferences prefs =<br /> getSharedPreferences(getPackageName(), Context.MODE_PRIVATE);<br /> int activeTab = prefs.getInt("activetab", R.id.contactstab);<br /> if (activeTab != R.id.contactstab<br /> && activeTab != R.id.groupstab) {<br /> activeTab = R.id.contactstab;<br /> }<br /> DemoUtils.activateTab(this, activeTab);<br />}<br />}<br />2.DemoUtils<br />import android.app.Activity;<br />import android.content.Intent;<br />import android.net.Uri;<br />import android.view.View;<br />import android.widget.TabWidget;<br />import com.android.exampledemo.R;<br />public class DemoUtils {<br />static int sActiveTabIndex = -1;</p><p>public static void activateTab(Activity a,int active_id){<br />Intent intent = new Intent(Intent.ACTION_PICK);<br />switch (active_id) {<br />case R.id.contactstab:<br />intent.setDataAndType(Uri.EMPTY, "vnd.android.cursor.dir/tb_contacts");<br />break;<br />case R.id.groupstab:<br />intent.setDataAndType(Uri.EMPTY, "vnd.android.cursor.dir/tb_groups");<br />break;<br />default:<br />return;<br />}<br />intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);<br />a.startActivity(intent);<br /> a.finish();<br /> a.overridePendingTransition(0,0);<br />}</p><p>public static void updateButtonBar(Activity a, int highlight) {<br />final TabWidget ll = (TabWidget) a.findViewById(R.id.buttonbar);</p><p> for (int i = ll.getChildCount() - 1; i >= 0; i--) {<br /> View v = ll.getChildAt(i);<br /> boolean isActive = (v.getId() == highlight);<br /> if (isActive) {<br /> ll.setCurrentTab(i);<br /> sActiveTabIndex = i;<br /> }</p><p> v.setTag(i);<br /> v.setOnClickListener(new View.OnClickListener() {<br /> public void onClick(View v) {<br /> int id = v.getId();<br /> if (id == ll.getChildAt(sActiveTabIndex).getId()) {<br /> return;<br /> }<br /> activateTab((Activity)ll.getContext(),id );<br /> ll.setCurrentTab((Integer) v.getTag());<br /> }});<br /> }<br />}<br />}
 

 

二個Tab sub activity前一方法中已經給出，這裡我們只需要看一下layout的實現就可以了

1>buttonbar.xml

<?xml version="1.0" encoding="utf-8"?><br /><TabWidget xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:id="@+id/buttonbar"<br /> android:layout_width="match_parent"<br /> android:layout_height="wrap_content" ><br /> <TextView<br /> android:id="@+id/contactstab"<br /> android:focusable="true"<br /> android:drawableTop="@drawable/icon"<br /> android:background="@drawable/buttonbarbackground"<br /> android:text="Contacts"<br /> android:textColor="@color/tab_indicator_text"<br /> android:textAppearance="?android:attr/textAppearanceSmall"<br /> android:paddingTop="7dip"<br /> android:paddingBottom="2dip"<br /> android:gravity="center"<br /> android:layout_weight="1"<br /> android:layout_marginLeft="-3dip"<br /> android:layout_marginRight="-3dip"<br /> android:layout_width="match_parent"<br /> android:layout_height="84dip"<br /> android:singleLine="true"<br /> android:ellipsize="marquee" /><br /> <TextView<br /> android:id="@+id/groupstab"<br /> android:focusable="true"<br /> android:drawableTop="@drawable/icon"<br /> android:background="@drawable/buttonbarbackground"<br /> android:text="Group"<br /> android:textColor="@color/tab_indicator_text"<br /> android:textAppearance="?android:attr/textAppearanceSmall"<br /> android:paddingTop="7dip"<br /> android:paddingBottom="2dip"<br /> android:gravity="center"<br /> android:layout_weight="1"<br /> android:layout_marginLeft="-3dip"<br /> android:layout_marginRight="-3dip"<br /> android:layout_width="match_parent"<br /> android:layout_height="84dip"<br /> android:singleLine="true"<br /> android:ellipsize="marquee" /><br /></TabWidget><br />

2>tabwidget_1.xml

<?xml version="1.0" encoding="utf-8"?><br /><LinearLayout<br /> xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"></p><p> <include layout="@layout/battonbar" /></p><p> <ExpandableListView android:id="@+id/android:list"<br /> android:layout_width="fill_parent"<br /> android:layout_height="wrap_content"<br /> android:footerDividersEnabled="true"<br /> android:fadeScrollbars="true"<br /> android:drawSelectorOnTop="true"><br /> </ExpandableListView></p><p></LinearLayout>

3> tabwidget_2.xml

<?xml version="1.0" encoding="utf-8"?><br /><LinearLayout<br /> xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"></p><p> <include layout="@layout/battonbar" /></p><p></LinearLayout>

 

另外一些資源檔我就不提供了，上面二種方式都可以實現Tabwidget，第一種方法比較通用，第二種可以自訂一些樣式，可以做一些比較複雜的View，希望對大家有所協助！