android － 分页标签之ActivityGroup与TabHost

1.ActivityGroup

很多客户端软件和浏览器软件都喜欢用Tab分页标签来搭建界面框架。读者也许会马上想到使用TabHost 与 TabActivity的组合，其实最常用的不是它们，而是由GridView与ActivityGroup的组合。每当用户在GridView选中一项，ActivityGroup就把该项对应的Activity的Window作为View添加到ActivityGroup所指定的容器(LinearLayout)中。

接下来贴出本例运行的效果图：

ImageAdapter是本实例的关键之一，它继承于BaseAdapter，并加入一些自定义的方法。ImageAdapter的源码如下：

package com.ActivityGroupDemo;



import android.content.Context;

import android.graphics.drawable.ColorDrawable;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.GridView;

import android.widget.ImageView;

/**

 * 

 * @author GV

 *

 */

public class ImageAdapter extends BaseAdapter {

    private Context mContext; 

    private ImageView[] imgItems;

    private int selResId;

    public ImageAdapter(Context c,int[] picIds,int width,int height,int selResId) { 

        mContext = c; 

        this.selResId=selResId;

        imgItems=new ImageView[picIds.length];

        for(int i=0;i<picIds.length;i++)

        {

            imgItems[i] = new ImageView(mContext); 

            imgItems[i].setLayoutParams(new GridView.LayoutParams(width, height));//设置ImageView宽高 

            imgItems[i].setAdjustViewBounds(false); 

            //imgItems[i].setScaleType(ImageView.ScaleType.CENTER_CROP); 

            imgItems[i].setPadding(2, 2, 2, 2); 

            imgItems[i].setImageResource(picIds[i]); 

        }

    } 

 

    public int getCount() { 

        return imgItems.length; 

    } 

 

    public Object getItem(int position) { 

        return position; 

    } 

 

    public long getItemId(int position) { 

        return position; 

    } 

 

    /** 

     * 设置选中的效果 

     */  

    public void SetFocus(int index)  

    {  

        for(int i=0;i<imgItems.length;i++)  

        {  

            if(i!=index)  

            {  

                imgItems[i].setBackgroundResource(0);//恢复未选中的样式

            }  

        }  

        imgItems[index].setBackgroundResource(selResId);//设置选中的样式

    }  

    

    public View getView(int position, View convertView, ViewGroup parent) { 

        ImageView imageView; 

        if (convertView == null) { 

            imageView=imgItems[position];

        } else { 

            imageView = (ImageView) convertView; 

        } 

        return imageView; 

    } 

} 

 SetFocus(int)这个方法是个关键点，即实现选中的效果。例如有ABCD4个Item，其中C被选中了，那么除C以外的Item都被设置为未被选中的样式，而C则设置为选中的样式。

 

接下来就开始写主Activity，主Activity包含GridView控件，名为gvTopBar，有2点是需要注意一下的。

• SetNumColumns()：必须要使用setNumColumns来设置列数，因为这个GridView只有一行，即所有的Item都在同一行，Item数量即为列数。
• setSelector(new ColorDrawable(Color.TRANSPARENT))：把系统默认选中的背景色透明化，因为我们已经在BaseAdapter中加入了SetFocus()来改变选中的样式。

• package com.ActivityGroupDemo;
  
  
  
  import android.app.Activity;
  
  import android.app.ActivityGroup;
  
  import android.content.BroadcastReceiver;
  
  import android.content.Context;
  
  import android.content.Intent;
  
  import android.content.IntentFilter;
  
  import android.graphics.Color;
  
  import android.graphics.drawable.ColorDrawable;
  
  import android.os.Bundle;
  
  import android.util.Log;
  
  import android.view.Gravity;
  
  import android.view.View;
  
  import android.view.Window;
  
  import android.view.ViewGroup.LayoutParams;
  
  import android.widget.AdapterView;
  
  import android.widget.GridView;
  
  import android.widget.LinearLayout;
  
  import android.widget.Toast;
  
  import android.widget.AdapterView.OnItemClickListener;
  
  /**
  
   * 
  
   * @author GV
  
   *
  
   */
  
  public class ActivityGroupDemo extends ActivityGroup {
  
  
  
      private GridView gvTopBar;
  
      private ImageAdapter topImgAdapter;
  
      public LinearLayout container;// 装载sub Activity的容器
  
  
  
      /** 顶部按钮图片 **/
  
      int[] topbar_image_array = { R.drawable.topbar_home,
  
              R.drawable.topbar_user, R.drawable.topbar_shoppingcart,
  
              R.drawable.topbar_note };
  
  
  
      @Override
  
      public void onCreate(Bundle savedInstanceState) {
  
          super.onCreate(savedInstanceState);
  
          setContentView(R.layout.main);
  
          gvTopBar = (GridView) this.findViewById(R.id.gvTopBar);
  
          gvTopBar.setNumColumns(topbar_image_array.length);// 设置每行列数
  
          gvTopBar.setSelector(new ColorDrawable(Color.TRANSPARENT));// 选中的时候为透明色
  
          gvTopBar.setGravity(Gravity.CENTER);// 位置居中
  
          gvTopBar.setVerticalSpacing(0);// 垂直间隔
  
          int width = this.getWindowManager().getDefaultDisplay().getWidth()
  
                  / topbar_image_array.length;
  
          topImgAdapter = new ImageAdapter(this, topbar_image_array, width, 48,
  
                  R.drawable.topbar_itemselector);
  
          gvTopBar.setAdapter(topImgAdapter);// 设置菜单Adapter
  
          gvTopBar.setOnItemClickListener(new ItemClickEvent());// 项目点击事件
  
          container = (LinearLayout) findViewById(R.id.Container);
  
          SwitchActivity(0);//默认打开第0页
  
      }
  
  
  
      class ItemClickEvent implements OnItemClickListener {
  
  
  
          public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
  
                  long arg3) {
  
              SwitchActivity(arg2);
  
          }
  
      }
  
      /**
  
       * 根据ID打开指定的Activity
  
       * @param id GridView选中项的序号
  
       */
  
      void SwitchActivity(int id)
  
      {
  
          topImgAdapter.SetFocus(id);//选中项获得高亮
  
          container.removeAllViews();//必须先清除容器中所有的View
  
          Intent intent =null;
  
          if (id == 0 || id == 2) {
  
              intent = new Intent(ActivityGroupDemo.this, ActivityA.class);
  
          } else if (id == 1 || id == 3) {
  
              intent = new Intent(ActivityGroupDemo.this, ActivityB.class);
  
          } 
  
          intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
  
          //Activity 转为 View
  
          Window subActivity = getLocalActivityManager().startActivity(
  
                  "subActivity", intent);
  
          //容器添加View
  
          container.addView(subActivity.getDecorView(),
  
                  LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
  
      }
  
  
  
  }

  主Activity的布局XML文件源码如下：

• <?xml version="1.0" encoding="utf-8"?>
  
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  
      android:orientation="vertical" android:layout_width="fill_parent"
  
      android:layout_height="fill_parent">
  
      <RelativeLayout android:layout_height="fill_parent"
  
          android:layout_width="fill_parent">
  
          <GridView android:layout_height="wrap_content" android:id="@+id/gvTopBar"
  
              android:layout_alignParentTop="true" android:layout_width="fill_parent"
  
              android:fadingEdgeLength="5dip" android:fadingEdge="vertical">
  
          </GridView>
  
          <LinearLayout android:id="@+id/Container"
  
              android:layout_below="@+id/gvTopBar" android:layout_width="fill_parent"
  
              android:layout_height="fill_parent">
  
          </LinearLayout>
  
      </RelativeLayout>
  
  </LinearLayout>

  from：http://blog.csdn.net/hellogv/article/details/6057174

  ActivityGroup使用注意：

  1。跳出当前的ActivityGroup，到另一个Activity或ActivityGroup
  2。不跳出当前ActivityGroup，跳转后的Activity依然在当前ActivityGroup里面，并且和之前的Activity可能在同一个标签下
  
  那么第一种，很简单，用startActivity就可以了，参数的话当前的Activity既可以是子Activity，也可以是ActivityGroup，结果是一样的；
  不过注意如果想使用startActivityForResult，虽然参数写两种都可以，但回调的接受结果的方法必须写到ActivityGroup里面，因为子Activity是接受不到Result的
  
  第二种，解决方法是声明一个ActivityGroup的静态引用，这样在子Activity中可以获取到ActivityGroup的引用进行调用
  那么在内部跳转的地方，调用ActivityGroup对象的方法就可以
  方法如下（以下两种按你适当的条件任选，一般返回操作用第2个，其他用第1个）
  

          /** ActivityGroup加载新的Activity的方法(创建新的) */
  
          public void launchNewActivity(Intent intent) {
  
                  //container是ActivityGroup加载子Activity的LinearLayout
  
                  container.removeAllViews();
  
                  Log.e(TAG,"addView="+intent.getComponent().getShortClassName());
  
                  //跳转，getCheckedRadioButtonId()获取的是标签对应的单选按钮的Id，这个方法是我自己写的，你可以不加
  
                  container.addView(getLocalActivityManager().startActivity(
  
                                  intent.getComponent().getShortClassName()+getCheckedRadioButtonId(), intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP))
  
                                  .getDecorView());
  
          }

   

  
          

          /** ActivityGroup加载Activity的方法(先看有没有，有则加载原来的，否则创建新的) */
  
          public void launchActivity(Intent intent) {
  
                  container.removeAllViews();
  
                  Log.e(TAG,"addView="+intent.getComponent().getShortClassName());
  
                  container.addView(getLocalActivityManager().startActivity(
  
                                  intent.getComponent().getShortClassName()+getCheckedRadioButtonId(), intent)
  
                                  .getDecorView());
  
          }

   

  
  

  另可参见：http://www.cnblogs.com/over140/archive/2010/09/07/1820876.html

   

  2.TabHost

• 一、效果图

  　　　　

  　　　　红色部分是本文要实现的目标。

   

  　　二、实现

  　　　　maintabs.xml

• <?xml version="1.0" encoding="UTF-8"?>
  
  <TabHost android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent"
  
    xmlns:android="http://schemas.android.com/apk/res/android">
  
      <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
  
          <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="0.0dip" android:layout_weight="1.0" />
  
          <TabWidget android:id="@android:id/tabs" android:visibility="gone" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="0.0" />
  
          <RadioGroup android:gravity="center_vertical" android:layout_gravity="bottom" android:orientation="horizontal" android:id="@id/main_radio" android:background="@drawable/maintab_toolbar_bg" android:layout_width="fill_parent" android:layout_height="wrap_content">
  
              <RadioButton   android:text="@string/main_home" android:checked="true" android:id="@+id/radio_button0" android:layout_marginTop="2.0dip" android:drawableTop="@drawable/icon_1_n" style="@style/main_tab_bottom" />
  
              <RadioButton android:id="@+id/radio_button1" android:layout_marginTop="2.0dip" android:text="@string/main_news" android:drawableTop="@drawable/icon_2_n" style="@style/main_tab_bottom" />
  
              <RadioButton android:id="@+id/radio_button2" android:layout_marginTop="2.0dip" android:text="@string/main_my_info" android:drawableTop="@drawable/icon_3_n" style="@style/main_tab_bottom" />
  
              <RadioButton android:id="@+id/radio_button3" android:layout_marginTop="2.0dip" android:text="@string/menu_search" android:drawableTop="@drawable/icon_4_n" style="@style/main_tab_bottom" />
  
              <RadioButton android:id="@+id/radio_button4" android:layout_marginTop="2.0dip" android:text="@string/more" android:drawableTop="@drawable/icon_5_n" style="@style/main_tab_bottom" />
  
          </RadioGroup>
  
      </LinearLayout>
  
  </TabHost>

  styles.xml

•     <style name="main_tab_bottom">
  
          <item name="android:textSize">@dimen/bottom_tab_font_size</item>
  
          <item name="android:textColor">#ffffffff</item>
  
          <item name="android:ellipsize">marquee</item>
  
          <item name="android:gravity">center_horizontal</item>
  
          <item name="android:background">@drawable/home_btn_bg</item>
  
          <item name="android:paddingTop">@dimen/bottom_tab_padding_up</item>
  
          <item name="android:layout_width">fill_parent</item>
  
          <item name="android:layout_height">wrap_content</item>
  
          <item name="android:button">@null</item>
  
          <item name="android:singleLine">true</item>
  
          <item name="android:drawablePadding">@dimen/bottom_tab_padding_drawable</item>
  
          <item name="android:layout_weight">1.0</item>
  
      </style>

  home_btn_bg.xml

•         <selector
  
            xmlns:android="http://schemas.android.com/apk/res/android">
  
              <item android:state_focused="true" android:state_enabled="true" android:state_pressed="false" android:drawable="@drawable/home_btn_bg_s" />
  
              <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/home_btn_bg_s" />
  
              <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/home_btn_bg_d" />
  
              <item android:drawable="@drawable/transparent" />
  
          </selector>

  　　　　代码说明：

  　　　　　　　　1.　　需要注意的是他这里把TabWidget的Visibility设置成了gone!也就是默认难看的风格不见了：，取而代之的是5个带风格的单选按钮.

  　　　　　　　　2.　　注意为单选按钮设置的style，其中最重要的是为其background设置了home_btn_bg.xml，也就是自定义了选中效果。

  　　　　Java文件

• public class MainTabActivity extends TabActivity implements
  
          OnCheckedChangeListener {
  
  
  
      private TabHost mHost;
  
      private Intent mMBlogIntent;
  
      private Intent mMoreIntent;
  
      private Intent mInfoIntent;
  
      private Intent mSearchIntent;
  
      private Intent mUserInfoIntent;
  
  
  
      @Override
  
      protected void onCreate(Bundle savedInstanceState) {
  
          super.onCreate(savedInstanceState);
  
          requestWindowFeature(Window.FEATURE_NO_TITLE);
  
          setContentView(R.layout.maintabs);
  
  
  
          // ~~~~~~~~~~~~ 初始化
  
          this.mMBlogIntent = new Intent(this, HomeListActivity.class);
  
          this.mSearchIntent = new Intent(this, SearchSquareActivity.class);
  
          this.mInfoIntent = new Intent(this, MessageGroup.class);
  
          this.mUserInfoIntent = new Intent(this, MyInfoActivity.class);
  
          this.mMoreIntent = new Intent(this, MoreItemsActivity.class);
  
  
  
          initRadios();
  
          
  
          setupIntent();
  
      }
  
  
  
      /**
  
       * 初始化底部按钮
  
       */
  
      private void initRadios() {
  
           ((RadioButton) findViewById(R.id.radio_button0)).setOnCheckedChangeListener(this);
  
           ((RadioButton) findViewById(R.id.radio_button1)).setOnCheckedChangeListener(this);
  
           ((RadioButton) findViewById(R.id.radio_button2)).setOnCheckedChangeListener(this);
  
           ((RadioButton) findViewById(R.id.radio_button3)).setOnCheckedChangeListener(this);
  
           ((RadioButton) findViewById(R.id.radio_button4)).setOnCheckedChangeListener(this);
  
      }
  
  
  
      /**
  
       * 切换模块
  
       */
  
      @Override
  
      public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
  
          if (isChecked) {
  
              switch (buttonView.getId()) {
  
              case R.id.radio_button0:
  
                  this.mHost.setCurrentTabByTag("mblog_tab");
  
                  break;
  
              case R.id.radio_button1:
  
                  this.mHost.setCurrentTabByTag("message_tab");
  
                  break;
  
              case R.id.radio_button2:
  
                  this.mHost.setCurrentTabByTag("userinfo_tab");
  
                  break;
  
              case R.id.radio_button3:
  
                  this.mHost.setCurrentTabByTag("search_tab");
  
                  break;
  
              case R.id.radio_button4:
  
                  this.mHost.setCurrentTabByTag("more_tab");
  
                  break;
  
              }
  
          }
  
      }
  
  
  
      private void setupIntent() {
  
          this.mHost = getTabHost();
  
          TabHost localTabHost = this.mHost;
  
  
  
          localTabHost.addTab(buildTabSpec("mblog_tab", R.string.main_home,
  
                  R.drawable.icon_1_n, this.mMBlogIntent));
  
  
  
          localTabHost.addTab(buildTabSpec("message_tab", R.string.main_news,
  
                  R.drawable.icon_2_n, this.mInfoIntent));
  
  
  
          localTabHost.addTab(buildTabSpec("userinfo_tab", R.string.main_my_info,
  
                  R.drawable.icon_3_n, this.mUserInfoIntent));
  
  
  
          localTabHost.addTab(buildTabSpec("search_tab", R.string.menu_search,
  
                  R.drawable.icon_4_n, this.mSearchIntent));
  
  
  
          localTabHost.addTab(buildTabSpec("more_tab", R.string.more,
  
                  R.drawable.icon_5_n, this.mMoreIntent));
  
  
  
      }
  
  
  
      private TabHost.TabSpec buildTabSpec(String tag, int resLabel, int resIcon,
  
              final Intent content) {
  
          return this.mHost
  
                  .newTabSpec(tag)
  
                  .setIndicator(getString(resLabel),
  
                          getResources().getDrawable(resIcon))
  
                  .setContent(content);
  
      }

  　　　　代码说明

  　　　　　　1.　　由于TabWidget被隐藏，所以相关的事件也会无效，这里取巧用RadioGroup与RadioButton的特性来处理切换，然后监听事件调用setCurrentTabByTag来切换Activity。

  　　　　　　2.　　注意即使TabWidget被隐藏，也要为其设置indicator，否则会保持。

• from:http://www.cnblogs.com/over140/archive/2011/03/02/1968042.html