Android之Tab分頁標籤的實現方法——–採用ActivityGroup和GridView的結合

 在前面，已經介紹了TabActivity和TabHost的結合實現Tab分頁的三種方式。這裡，將講到採用ActivityGroup和GridView的結合，實現Tab分頁。其實，這和TabActivity和TabHost的結合差不多。只不過，是自己把Tab的頭部（選項欄）和整頁模式分開實現。Tab頭部採用GridView來實現，子頁面採用LinearLayout容器來實現。然後把每個子Activity作為一個View視圖，裝載到LinearLayout容器裡面。你會發現LinearLayout不僅僅是版面配置容器，它還有許多妙用。

        實現講解：

        1、主類繼承ActivityGroup

        public class GridViewTabPage extends ActivityGroup

        2、 擷取每個子頁面的Activity視圖

        Intent intent = new Intent(GridViewTabPage.this, Page1.class);

        subPageView = getLocalActivityManager().startActivity(
      "subPageView" + i, intent);

        3、載入到容器

        pageContainer.addView(subPageView .getDecorView(),
        LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);

         

                                                            

                                          

                                          

       1、布局XML檔案：main.xml

          

<?xml version="1.0" encoding="utf-8"?><br /><LinearLayout<br />android:id="@+id/gridViewTab"<br />android:layout_width="fill_parent"<br />android:layout_height="fill_parent"<br />xmlns:android="http://schemas.android.com/apk/res/android"<br />android:orientation="vertical"<br />><br /><GridView<br />android:id="@+id/gv_tabPage"<br />android:layout_width="fill_parent"<br />android:layout_height="wrap_content"<br />android:numColumns="3"<br />><br /></GridView><br /><LinearLayout<br />android:id="@+id/pageContainer"<br />android:layout_below="@+id/gvTopBar"<br />android:layout_width="fill_parent"<br />android:layout_height="fill_parent"><br /></LinearLayout></p><p></LinearLayout><br />

 

       2、代碼檔案：

        圖片適配器：ImageAdapter.java

        

package com.myandroid.test;</p><p>import android.content.Context;<br />import android.graphics.Color;<br />import android.util.Log;<br />import android.view.View;<br />import android.view.ViewGroup;<br />import android.widget.BaseAdapter;<br />import android.widget.GridView;<br />import android.widget.ImageView;</p><p>public class ImageAdapter extends BaseAdapter {<br />private Context context;<br />private int width;<br />private int height;<br />private ImageView[] imageViews;<br />private Integer[] imgeIDs;</p><p>public ImageAdapter(Context context, Integer[] imageIDs, int width, int height) {<br />this.context = context;<br />this.imgeIDs = imageIDs;<br />this.width = width;<br />this.height = height;<br />imageViews = new ImageView[imageIDs.length];<br />for(int i = 0; i < imageViews.length; i++) {<br />imageViews[i] = new ImageView(context);<br />}<br />}</p><p>public int getCount() {<br />// TODO Auto-generated method stub<br />return imgeIDs.length;<br />}</p><p>public Object getItem(int position) {<br />// TODO Auto-generated method stub<br />return position;<br />}</p><p>public long getItemId(int position) {<br />// TODO Auto-generated method stub<br />return position;<br />}</p><p>/**<br /> * 點擊設定<br /> * @param selectedID<br /> */<br />public void setFocus(int selectedID) {<br />Log.e("Seqence", "setFocus");<br />for(int i = 0; i < imageViews.length; i++) {<br />imageViews[i].setBackgroundColor(Color.BLACK);<br />}<br />imageViews[selectedID].setBackgroundColor(Color.YELLOW);<br />}</p><p>/**<br /> * 圖片設定<br /> */<br />public View getView(int position, View convertView, ViewGroup parent) {<br />// TODO Auto-generated method stub<br />Log.e("Seqence", "getView");<br />imageViews[position].setImageResource(imgeIDs[position]);<br />imageViews[position].setLayoutParams(new GridView.LayoutParams(width, height));<br />imageViews[position].setBackgroundColor(android.R.drawable.picture_frame);</p><p>return imageViews[position];<br />}</p><p>}<br />

 

         主檔案：GridViewTabPage.java

        

package com.myandroid.test;</p><p>import android.app.ActivityGroup;<br />import android.content.Intent;<br />import android.graphics.Color;<br />import android.graphics.drawable.ColorDrawable;<br />import android.os.Bundle;<br />import android.util.Log;<br />import android.view.Gravity;<br />import android.view.View;<br />import android.view.Window;<br />import android.view.ViewGroup.LayoutParams;<br />import android.widget.AdapterView;<br />import android.widget.GridView;<br />import android.widget.LinearLayout;<br />import android.widget.AdapterView.OnItemClickListener;</p><p>public class GridViewTabPage extends ActivityGroup {</p><p>private GridView gv_tabPage;//頂部Tab標籤<br />private ImageAdapter imageAdapter;//圖片適配器<br />public LinearLayout pageContainer;// 放置子頁面的容器<br />private Intent[] intents;//頁面跳轉Intent<br />private Window[] subPageView;//子整頁模式View<br />private Integer[] tabImages = { R.drawable.a1,//tab標籤表徵圖<br />R.drawable.a2, R.drawable.a3,};</p><p>@Override<br />public void onCreate(Bundle savedInstanceState) {<br />super.onCreate(savedInstanceState);<br />setContentView(R.layout.main);<br />Log.e("Sequence", "start");//測試用<br />gv_tabPage = (GridView) findViewById(R.id.gv_tabPage);<br />gv_tabPage.setNumColumns(tabImages.length);// 設定列數<br />gv_tabPage.setSelector(new ColorDrawable(Color.TRANSPARENT));// 選中的時候為透明色<br />gv_tabPage.setGravity(Gravity.CENTER);// 位置置中<br />gv_tabPage.setVerticalSpacing(0);// 垂直間隔<br />int width = this.getWindowManager().getDefaultDisplay().getWidth()//擷取螢幕寬度<br />/ tabImages.length;//平分寬度<br />imageAdapter = new ImageAdapter(this, tabImages, width, 48);//建立圖片適配器，傳遞圖片所需高和寬<br />gv_tabPage.setAdapter(imageAdapter);// 設定菜單Adapter<br />gv_tabPage.setOnItemClickListener(new ItemClickEvent()); //註冊點擊事件<br />pageContainer = (LinearLayout) findViewById(R.id.pageContainer);<br />SwitchPage(0);//預設開啟第0頁<br />Log.e("Sequence", "end");<br />}</p><p>class ItemClickEvent implements OnItemClickListener {</p><p>public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,<br />long arg3) {<br />SwitchPage(arg2); //arg2表示選中的Tab標籤號，從0~2<br />}<br />}</p><p>/**<br /> * 用於擷取intent和pageView，<br /> * 類似於單例模式，使得對象不用重複建立，同時，保留上一個對象的狀態<br /> * 當重新訪問時，仍保留原來資料狀態，如文字框裡面的值。<br /> * @param pageID 選中的tab序號（0~2）<br /> * @return<br /> */<br />private Window getPageView(int pageID) {<br />if(intents == null) {<br />intents = new Intent[3];<br />subPageView = new Window[3];<br />intents[0] = new Intent(GridViewTabPage.this, Page1.class);<br />intents[1] = new Intent(GridViewTabPage.this, Page2.class);<br />intents[2] = new Intent(GridViewTabPage.this, Page3.class);<br />for(int i = 0; i < 3; i++) {<br />subPageView[i] = getLocalActivityManager().startActivity(<br />"subPageView" + i, intents[i]);<br />}<br />Log.e("New", "new");<br />}</p><p>return subPageView[pageID];<br />}</p><p>/**<br /> * 根據ID開啟指定的PageActivity<br /> * @param id 選中項的tab序號<br /> */<br />private void SwitchPage(int id)<br />{<br />pageContainer.removeAllViews();//必須先清除容器中所有的View<br />imageAdapter.setFocus(id);<br />Window pageView = null;<br />switch(id){//擷取子頁面View<br />case 0:<br />pageView = getPageView(0);<br />break;<br />case 1:<br />pageView = getPageView(1);<br />break;<br />case 2:<br />pageView = getPageView(2);<br />break;<br />default:<br />break;<br />}<br />//裝載子頁面View到LinearLayout容器裡面<br />pageContainer.addView(pageView.getDecorView(),<br />LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);<br />}<br />}

 

         3、最後是在AndroidManifest.xml裡添加Activity註冊資訊

<?xml version="1.0" encoding="utf-8"?><br /><manifest xmlns:android="http://schemas.android.com/apk/res/android"<br /> package="com.myandroid.test"<br /> android:versionCode="1"<br /> android:versionName="1.0"><br /> <application android:icon="@drawable/icon" android:label="@string/app_name"><br /> ................<br /> <!-- 要添加Activity的聲明，否則系統找不到檔案報錯 --><br /><activity android:name="Page1"></activity><br /><activity android:name="Page2"></activity><br /><activity android:name="Page3"></activity><br /> </application><br /></manifest>

 

          同樣的，對於Tab選項過多，可以採用Grally+ActivityGroup結合的實現方式。具體實現方法，和ActivityGroup和GridView的結合差不多，讀者可以自己實現。