二种方法实现 Android TabWidget

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

一、通用做法

继承TabActivity，实现自己的TabActivity

view plain
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的判断。

view plain
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我们在第二种实现方式中也会用到。

view plain
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

view plain
<?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

view plain
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）

view plain
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

view plain
<?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

view plain
<?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

view plain
<?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>