Android中的多标签切换的实现

类似于京东主页几个按钮对应的几个模块，微信主页的四个按钮对应的四个界面的实现
我们这样做，主要是为了实现信息的分类管理，将功能模块化，可以使我们的页面逻辑更加的清晰

利用TableHost、TableWidget、FrameLayout实现

利用此种方式来实现，首先我们的activity必须要继承TabActivity ，其次，我们的activity的布局基本是固定的为下面的这种方式：

<?xml version="1.0" encoding="utf-8"?>
<TableHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--这里的东西都是固定的，包括id都是，只能这样写-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >
        <TabWidget
            android:layout_width="match_parent"
            android:id="@android:id/tabs"
            android:layout_height="wrap_content"/>

        <FrameLayout
            android:layout_width="match_parent"
            android:id="@android:id/tabcontent"
            android:layout_height="match_parent"/>
    </LinearLayout>
</TableHost>

我们的activity中写法也差不多是固定的格式

public class TabHostActivity extends TabActivity {
    private TabHost mTabHost;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//        这里不能使用下面这句。否则会报错，应该直接getTabHost();
//        setContentView(R.layout.activity_tabhost);
        initViews();
    }

    private void initViews() {
//        mTabHost = (TabHost) findViewById(android.R.id.tabhost);
        mTabHost = this.getTabHost();
        mTabHost.setup();//初始化TableHost组件
        //声明并实例化一个LayoutInflater对象
        LayoutInflater inflater = LayoutInflater.from(this);
        //解析三个tab页面
        inflater.inflate(R.layout.tab1, mTabHost.getTabContentView());
        inflater.inflate(R.layout.tab2, mTabHost.getTabContentView());
        inflater.inflate(R.layout.tab3, mTabHost.getTabContentView());
        //将三个页面加入tabhost中
        mTabHost.addTab(mTabHost.newTabSpec("tab1").setIndicator("联系人").setContent(R.id.tablayout1));
        mTabHost.addTab(mTabHost.newTabSpec("tab2").setIndicator("通讯录").setContent(R.id.tablayout2));
        mTabHost.addTab(mTabHost.newTabSpec("tab3").setIndicator("收藏夹").setContent(R.id.tablayout3));
        //添加当tab页面改变时候的监听。
        mTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
            @Override
            public void onTabChanged(String s) {
                Toast.makeText(TabHostActivity.this, "" + s, Toast.LENGTH_SHORT).show();
            }
        });

    }
}

对应的，我们的三个Tab页的xml如下：

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="第一个tab页" />

</LinearLayout>

只是区分一下id就行，然后我们自己写上两三个tab的xml去看看实现后的效果

利用ViewPager、RaidoGroup、Fragment实现

我们用此种方式可以让我们的页面左右滑动，同时和我们的RadioButton进行联动起来。这种方式也在许多app上都能见得到。
首先，我们要将我们的三个Fragment 和viewpager通过适配器绑定，使得我们的页面首先可以滑动起来了，然后，我们对我们的RadioGroup和ViewPager进行监听，当一个的状态改变了之后，我们控制另一个也相应的进行改变。

我们的布局代码为：

<?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">

    <RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/rbtn1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:checked="true"
            android:gravity="center"
            android:button="@null"
            android:background="@drawable/tab_selector"
            android:text="tab1" />

        <RadioButton
            android:id="@+id/rbtn2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:button="@null"
            android:background="@drawable/tab_selector"
            android:text="tab2" />

        <RadioButton
            android:id="@+id/rbtn3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:button="@null"
            android:background="@drawable/tab_selector"
            android:text="tab3" />

    </RadioGroup>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

activity的代码为：

public class ViewPagerActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener, ViewPager.OnPageChangeListener {

    private ArrayList<Fragment> mList = new ArrayList<>();
    ViewPager mViewPager;
    RadioGroup mRadioGroup;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_viewpager);
        initFragment();
        initViews();
    }

    /**
     * 初始化我们的三个fragment
     * */
    private void initFragment() {
        mList.add(new TabFragment1());
        mList.add(new TabFragment2());
        mList.add(new TabFragment3());
    }

    private void initViews() {
        mRadioGroup = (RadioGroup) findViewById(R.id.radioGroup);
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        //将viewpager和fragment绑定
        FragmentAdapter mAdapter = new FragmentAdapter(getSupportFragmentManager(), mList);
        mViewPager.setAdapter(mAdapter);

        mRadioGroup.setOnCheckedChangeListener(this);
        mViewPager.setOnPageChangeListener(this);
    }

    //当radiobutton改变时候让viewpager跟着改变
    @Override
    public void onCheckedChanged(RadioGroup radioGroup, int i) {
        switch (i) {
            case R.id.rbtn1:
                mViewPager.setCurrentItem(0);
                break;
            case R.id.rbtn2:
                mViewPager.setCurrentItem(1);
                break;
            case R.id.rbtn3:
                mViewPager.setCurrentItem(2);
                break;
        }
    }

    //当viewpager滑动改变后，让RadioButton的选中状态也改变
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        switch (position) {
            case 0:
                mRadioGroup.check(R.id.rbtn1);
                break;
            case 1:
                mRadioGroup.check(R.id.rbtn2);
                break;
            case 2:
                mRadioGroup.check(R.id.rbtn3);
                break;
        }

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

适配器的代码为：

public class FragmentAdapter extends FragmentPagerAdapter{
    private ArrayList<Fragment> mFragmentList;

    public FragmentAdapter(FragmentManager fm,ArrayList<Fragment> list) {
        super(fm);
        mFragmentList = list;


    }

    @Override
    public Fragment getItem(int arg0) {
        if(mFragmentList != null){
            return mFragmentList.get(arg0);
        }
        return null;
    }

    @Override
    public int getCount() {
        if(mFragmentList != null){
            return mFragmentList.size();
            }
        return 0;
    }

    @Override
    public void destroyItem(View container, int position, Object object) {
        // TODO Auto-generated method stub
//      super.destroyItem(container, position, object);
    }

}

而我们的三个Fragment中啥都没有放，就加载了我们的一个xml布局，就不再放代码了。这样就实现了一个简单的这种tab页模式的框架。

利用TabLayout、Fragment实现

在android5.0之后，系统为我们提供了这种方式来实现这种功能。要使用TabLayout必须要引用官方的 compile ‘com.android.support:design:24.2.0’才行，当然不一定要是24.2.0的版本，只是必须要引入design的这个支持包，

我们的xml界面为：

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:tabIndicatorColor="@android:color/holo_blue_bright"
        app:tabSelectedTextColor="@android:color/holo_blue_bright"
        app:tabTextColor="@android:color/black" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="50dp"
       />

</LinearLayout>

java代码为：

public class TabLayoutActivity extends AppCompatActivity {
    //这种实现方式须要引入 compile 'com.android.support:design:24.2.0'才行
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tabbar);
        initTab();
    }

    /**
     * 初始化TAB标签
     */
    private void initTab() {
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
        List<String> tabList = new ArrayList<>();
        tabList.add("tab1");
        tabList.add("tab2");
        tabList.add("tab3");
        tabLayout.setTabMode(TabLayout.MODE_FIXED);//设置tab模式，当前为系统默认模式
        tabLayout.addTab(tabLayout.newTab().setText(tabList.get(0)));//添加tab选项卡
        tabLayout.addTab(tabLayout.newTab().setText(tabList.get(1)));
        tabLayout.addTab(tabLayout.newTab().setText(tabList.get(2)));

        List<Fragment> fragmentList = new ArrayList<>();

        fragmentList.add(new TabFragment1());
        fragmentList.add(new TabFragment2());
        fragmentList.add(new TabFragment3());

        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        TabFragmentAdapter fragmentAdapter = new TabFragmentAdapter(getSupportFragmentManager(), fragmentList, tabList);
        viewPager.setAdapter(fragmentAdapter);//给ViewPager设置适配器
        tabLayout.setupWithViewPager(viewPager);//将TabLayout和ViewPager关联起来。
        tabLayout.setTabsFromPagerAdapter(fragmentAdapter);//给Tabs设置适配器

    }
}

Fragment的适配为：

public class TabFragmentAdapter extends FragmentStatePagerAdapter {

    private List<Fragment> mFragments;
    private List<String> mTitles;

    public TabFragmentAdapter(FragmentManager fm, List<Fragment> fragments, List<String> titles) {
        super(fm);
        mFragments = fragments;
        mTitles = titles;
    }

    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

    @Override
    public int getCount() {
        return mFragments.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles.get(position);
    }
}

三种实现方式，其实也是android版本不断升级的一个实现方式上的改变，我们开发中，尽可能的选择官方支持的最新的方式来实现同样的功能，

最后放上三种方式的代码供参考：http://download.csdn.net/detail/qq_27561483/9623599