二种方法实现 Android TabWidget

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

一、通用做法

继承TabActivity，实现自己的TabActivity

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

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

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

 

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

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

 

最后就是各个Activity对应的layout

1.tabwidgetdemo2.xml

<?xml version="1.0" encoding="utf-8"?> <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="68dip" android:paddingLeft="1dip" android:paddingRight="1dip" android:paddingTop="4dip" /> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="0dip" android:layout_weight="1" /> </LinearLayout> </TabHost>

2.二个sub tab对应的layout

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

 

 

方法2：

先创建一个Activity （TabWidgetDemo）

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

 

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

1>buttonbar.xml

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

2>tabwidget_1.xml

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

3> tabwidget_2.xml

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

 

另外一些资源文件我就不提供了，上面二种方式都可以实现Tabwidget，第一种方法比较通用，第二种可以自定义一些样式，可以做一些比较复杂的View，希望对大家有所帮助！