Android 选择卡个人总结

我们在项目开发中会有多项选择卡的切换选择的情况，一次为机会小小的总结一下Android中选择卡切换页的几种主要实现方式。
其中一种较早的实现方式是TabActivity与tabhost结合使用
下面是搬运代码：
这个时候主类

public class MainTabActivity extends TabActivity implements OnCheckedChangeListener{

    private TabHost mTabHost;
    private Intent mAIntent;
    private Intent mBIntent;
    private Intent mCIntent;
    private Intent mDIntent;
    private Intent mEIntent;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.maintabs);

        this.mAIntent = new Intent(this,AActivity.class);
        this.mBIntent = new Intent(this,BActivity.class);
        this.mCIntent = new Intent(this,CActivity.class);
        this.mDIntent = new Intent(this,DActivity.class);
        this.mEIntent = new Intent(this,EActivity.class);

        ((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);

        setupIntent();
    }

    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        if(isChecked){
            switch (buttonView.getId()) {
            case R.id.radio_button0:
                this.mTabHost.setCurrentTabByTag("A_TAB");
                break;
            case R.id.radio_button1:
                this.mTabHost.setCurrentTabByTag("B_TAB");
                break;
            case R.id.radio_button2:
                this.mTabHost.setCurrentTabByTag("C_TAB");
                break;
            case R.id.radio_button3:
                this.mTabHost.setCurrentTabByTag("D_TAB");
                break;
            case R.id.radio_button4:
                this.mTabHost.setCurrentTabByTag("MORE_TAB");
                break;
            }
        }

    }

    private void setupIntent() {
        this.mTabHost = getTabHost();
        TabHost localTabHost = this.mTabHost;

        localTabHost.addTab(buildTabSpec("A_TAB", R.string.main_home,
                R.drawable.icon_1_n, this.mAIntent));

        localTabHost.addTab(buildTabSpec("B_TAB", R.string.main_news,
                R.drawable.icon_2_n, this.mBIntent));

        localTabHost.addTab(buildTabSpec("C_TAB",
                R.string.main_manage_date, R.drawable.icon_3_n,
                this.mCIntent));

        localTabHost.addTab(buildTabSpec("D_TAB", R.string.main_friends,
                R.drawable.icon_4_n, this.mDIntent));

        localTabHost.addTab(buildTabSpec("MORE_TAB", R.string.more,
                R.drawable.icon_5_n, this.mEIntent));

    }

    private TabHost.TabSpec buildTabSpec(String tag, int resLabel, int resIcon,
            final Intent content) {
        return this.mTabHost.newTabSpec(tag).setIndicator(getString(resLabel),
                getResources().getDrawable(resIcon)).setContent(content);
    }
}

其他的选择卡子类如下（类似的可以再子类中做选择卡的操作）：`
public class AActivity extends Activity{

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    TextView tv = new TextView(this);
    tv.setText("This is A Activity!");
    tv.setGravity(Gravity.CENTER);
    setContentView(tv);
}

}`
主要的布局文件：

<?xml version="1.0" encoding="UTF-8"?>

<TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent" android:id="@android:id/tabhost">


-<LinearLayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical">

<FrameLayout android:layout_height="0.0dip" android:layout_width="fill_parent" android:id="@android:id/tabcontent" android:layout_weight="1.0"/>

<TabWidget android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@android:id/tabs" android:layout_weight="0.0" android:visibility="gone"/>


<RadioGroup android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@id/main_radio" android:orientation="horizontal" android:background="@drawable/maintab_toolbar_bg" android:layout_gravity="bottom" android:gravity="center_vertical">

<RadioButton android:id="@id/radio_button0" style="@style/main_tab_bottom" android:drawableTop="@drawable/icon_1_n" android:text="@string/main_home" android:layout_marginTop="2.0dip"/>

<RadioButton android:id="@id/radio_button1" style="@style/main_tab_bottom" android:drawableTop="@drawable/icon_2_n" android:text="@string/main_news" android:layout_marginTop="2.0dip"/>

<RadioButton android:id="@id/radio_button2" style="@style/main_tab_bottom" android:drawableTop="@drawable/icon_3_n" android:text="@string/main_manage_date" android:layout_marginTop="2.0dip"/>

<RadioButton android:id="@id/radio_button3" style="@style/main_tab_bottom" android:drawableTop="@drawable/icon_4_n" android:text="@string/main_friends" android:layout_marginTop="2.0dip"/>

<RadioButton android:id="@id/radio_button4" style="@style/main_tab_bottom" android:drawableTop="@drawable/icon_5_n" android:text="@string/more" android:layout_marginTop="2.0dip"/>

</RadioGroup>

</LinearLayout>

</TabHost>

总结TabActivity在API 13（Android 3.2）被标记为过期，但在要求不是很高的时候用起来还是比使用Fragment要方便。

方式二：ActivityGroup是在原有的布局文件中添加删除子布局达到选择卡切换的方式。
实现方式大概如下：

import android.app.ActivityGroup;  
import android.os.Bundle;  
import android.view.LayoutInflater;  
import android.view.View;  
import android.widget.LinearLayout;  
/**  
 * 继承AcitivityGroup实现Tab选卡效果  
 * @author ZLQ  
 *  
 */  
public class Group extends ActivityGroup {  
    //在group.xml中的LinearLayout布局,用来承载child1.xml,child2.xml,child3.xml  
    LinearLayout lay;  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.group);  
        //取出用来显示不同内容的布局  
        lay = (LinearLayout) findViewById(R.id.body);  
    }  

    public void button1(View v) {  
        //单击button1触发的事件，其他的两个按钮相同  
        //通过转换器将child1.xml文件转换为View对象  
        View view = LayoutInflater.from(this).inflate(R.layout.child1, null);  
        //清除之前的View对象  
        lay.removeAllViews();  
        //为lay添加View对象  
        lay.addView(view);  
    }  

    public void button2(View v) {  
        View view = LayoutInflater.from(this).inflate(R.layout.child2, null);  
        lay.removeAllViews();  
        lay.addView(view);  
    }  

    public void button3(View v) {  
        View view = LayoutInflater.from(this).inflate(R.layout.child3, null);  
        lay.removeAllViews();  
        lay.addView(view);  
    }  
}  

group.xml文件：

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="vertical" >  

    <LinearLayout  
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content"  
        android:orientation="horizontal" >  
        <!--按钮1  -->  
        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_weight="1"  
            android:onClick="button1"  
            android:text="button1" />  
        <!--按钮2  -->  
        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_weight="1"  
            android:onClick="button2"  
            android:text="button2" />  
        <!--按钮3  -->  
        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_weight="1"  
            android:onClick="button3"  
            android:text="button3" />  
    </LinearLayout>  


    <!--用来承载child1.xml,child2.xml,child3.xml的布局  -->  

    <LinearLayout  
        android:id="@+id/body"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content" >  
    </LinearLayout>  

</LinearLayout>

child1.xml文件：

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:id="@+id/child1"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent" >  

    <RatingBar  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:rating="2.5" >  
    </RatingBar>  

</LinearLayout>

其他不一一搬砖了，对于ActivityGroup在API 14（Android 4.0）被标记为过期，应该类似于TabActivity在要求不是很高的时候可以使用，目前不太清楚

方法三：目前也是google推荐使用的，采用Fragment也就是继承FragmentActivity的方式实现

开始搬砖：主页mainactivity

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;

/**
 * All rights Reserved, Designed By GeofferySun 
 * @Title:  MainTabActivity.java
 * @Package sun.geoffery.fragmenttabhost
 * @Description:自定义TabHost
 * @author: GeofferySun   
 * @date:   2014-9-28 下午11:33:15
 * @version V1.0
 */
public class MainTabActivity extends FragmentActivity {
    // 定义FragmentTabHost对象
    private FragmentTabHost mTabHost;

    // 定义一个布局
    private LayoutInflater mInflater;

    // 定义数组来存放Fragment界面
    private Class mFragmentAry[] = { FragmentPage0.class, FragmentPage1.class,
            FragmentPage2.class, FragmentPage3.class, FragmentPage4.class };

    // 定义数组来存放按钮图片
    private int mImgAry[] = { R.drawable.sl_rbtn_home,
            R.drawable.sl_rbtn_atme,
            R.drawable.sl_rbtn_msg,
            R.drawable.sl_rbtn_square,
            R.drawable.sl_rbtn_data };

    // Tab选项卡的文字
    private String mTxtAry[] = { "首页", "@我", "消息", "广场", "资料" };

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_tab_layout);

        initView();
    }

    /**
     * 初始化组件
     */
    private void initView() {
        // 实例化布局对象
        mInflater = LayoutInflater.from(this);

        // 实例化TabHost对象，得到TabHost
        mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);

        // 得到fragment的个数
        int count = mFragmentAry.length;

        for (int i = 0; i < count; i++) {
            // 为每一个Tab按钮设置图标、文字和内容
            TabSpec tabSpec = mTabHost.newTabSpec(mTxtAry[i]).setIndicator(getTabItemView(i));
            // 将Tab按钮添加进Tab选项卡中
            mTabHost.addTab(tabSpec, mFragmentAry[i], null);
            // 设置Tab按钮的背景
            mTabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.selector_tab_background);
        }
    }

    /**
     * 给Tab按钮设置图标和文字
     * @param index
     * @return
     */
    private View getTabItemView(int index) {
        View view = mInflater.inflate(R.layout.tab_item_view, null);

        ImageView imageView = (ImageView) view.findViewById(R.id.imageview);
        imageView.setImageResource(mImgAry[index]);

        TextView textView = (TextView) view.findViewById(R.id.textview);
        textView.setText(mTxtAry[index]);

        return view;
    }
}

选择卡中的Fragment（类似的可以根据首页有多少选择卡来设置Fragment的个数）

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentPage0 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_0, null);
    }
}

主界面的布局文件：

<!--?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:orientation="vertical">

    <frameLayout
        android:id="@+id/realtabcontent"
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight="1" />



        <frameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />
    </android.support.v4.app.fragmenttabhost>

</linearlayout>

总结fragment在使用过程中对也自定义view结构十分方便，以上为他人的搬砖代码；个人比较如下喜欢这种结构，布局可以随意编辑

主要代码如下：

package com.onelove.main;

import android.os.Bundle;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.RelativeLayout;

import com.onelove.R;
import com.onelove.util.BaseFragmentActivity;

public class HomeActivity extends BaseFragmentActivity implements
        OnClickListener {
    RelativeLayout relativeLayout1, relativeLayout2, relativeLayout3,
            relativeLayout4;
    FragmentManager fragmentManager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        relativeLayout1 = (RelativeLayout) findViewById(R.id.relativeLayout1);
        relativeLayout2 = (RelativeLayout) findViewById(R.id.relativeLayout2);
        relativeLayout3 = (RelativeLayout) findViewById(R.id.relativeLayout3);
        relativeLayout4 = (RelativeLayout) findViewById(R.id.relativeLayout4);
        relativeLayout1.setOnClickListener(this);
        relativeLayout2.setOnClickListener(this);
        relativeLayout3.setOnClickListener(this);
        relativeLayout4.setOnClickListener(this);

        fragmentManager = this.getSupportFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager
                .beginTransaction();
        fragmentTransaction.replace(R.id.frameLayout1, new FirstFragment());
        fragmentTransaction.commit();


    }

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        FragmentTransaction fragmentTransaction = fragmentManager
                .beginTransaction();
        switch (v.getId()) {
        case R.id.relativeLayout1:
            fragmentTransaction.replace(R.id.frameLayout1, new FirstFragment());
            fragmentTransaction.commit();
            break;
        case R.id.relativeLayout2:
            fragmentTransaction.replace(R.id.frameLayout1, new SecondFragment());
            fragmentTransaction.commit();
            break;
        case R.id.relativeLayout3:

            break;
        case R.id.relativeLayout4:

            break;
        default:
            break;
        }
    }
}

第一个Fragment的class
public class FirstFragment extends Fragment {
View v;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
v=inflater.inflate(R.layout.main1, null);
return v;
}

主布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" >

        <RelativeLayout
            android:id="@+id/relativeLayout1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/relativeLayout2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/relativeLayout3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >

            <ImageView
                android:id="@+id/imageView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/relativeLayout4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >

            <ImageView
                android:id="@+id/imageView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />
        </RelativeLayout>
    </LinearLayout>

    <FrameLayout
        android:id="@+id/frameLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/linearLayout1"
        android:layout_alignParentTop="true" >

    </FrameLayout>

</RelativeLayout>

第一个布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin_hf"
    android:paddingLeft="@dimen/activity_horizontal_margin_hf"
    android:paddingRight="@dimen/activity_horizontal_margin_hf"
    android:paddingTop="@dimen/activity_vertical_margin_hf"
    tools:context="com.onelove.MainActivity" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true" >

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_margin="@dimen/activity_vertical_margin_hf"
            android:layout_weight="1"
            android:background="@android:drawable/arrow_down_float" >

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true" >

                <ImageView
                    android:id="@+id/imageView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_launcher"
                    android:layout_centerHorizontal="true" />

                <TextView
                    android:id="@+id/textView2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/imageView1"
                    android:text="@string/groom"
                    android:layout_centerHorizontal="true" />

                <TextView
                    android:id="@+id/textView3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/textView2"
                    android:text="@string/groom_cn"
                    android:layout_centerHorizontal="true" />

            </RelativeLayout>
        </RelativeLayout>
    </LinearLayout>

</RelativeLayout>

以上是本人的初步整理，希望对你有所帮助，欢迎留言指导