用三种不同的方式实现TabHost功能（三）

最新推荐文章于 2021-02-23 23:34:41 发布

helon_学无止境

最新推荐文章于 2021-02-23 23:34:41 发布

阅读量890

点赞数

分类专栏： andriod 各种TabHost Fragment andriod 文章标签： android tabhost

本文链接：https://blog.csdn.net/shuanyang/article/details/27830557

版权

andriod 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

andriod 各种TabHost Fragment

2 篇文章 0 订阅

订阅专栏

之前我们用到的都是系统自带的TabHost来实现选项卡的功能，利用tabHost控制多个Activity，现在我们改变一种思路，我们用Fragment这个控件来实现之前写的TabHost的选项卡功能。这里我们用到一个jar包android.support.v4，在Android2.2以及之前的版本需要添加该jar包。

接下来说说思路，这里TabWidget用RadioGroup替换，TabItem我们用RadioButton换，当点击RadioButton的时候来显示不同的页面.

1、还是先看看布局文件，比较一下和之前有什么不同

我们发现没有了TabHost和TabWidget标签，多了一个RadioGroup和几个RadioButton，我们可以看到RadioGroup替代了TabWidget

<?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="@android:color/white"
    android:orientation="vertical" >
    <RelativeLayout 
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/tab_title"
        >
        <TextView
            android:id="@+id/tabhost_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:text="TabHostTitle"
            android:layout_centerInParent="true"
            android:textColor="@color/white"
            />
    </RelativeLayout>

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

        <FrameLayout
            android:id="@+id/tab_content"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="1.0"
            android:background="@color/white" />

        <RadioGroup
            android:id="@+id/tabs_rg"
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:background="@drawable/tabbarback"
            android:gravity="center"
            android:orientation="horizontal"
            android:paddingBottom="2dp"
            android:paddingTop="2dp" >

            <RadioButton
                android:id="@+id/tab_item_1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1.0"
                android:background="@color/lucency"
                android:button="@null"
                android:checked="true"
                android:drawableTop="@drawable/tab_item_icon1_bg"
                android:gravity="center"
                android:singleLine="true"
                android:text="Tab1"
                android:textColor="@color/white"
                android:textSize="13sp" />

            <RadioButton
                android:id="@+id/tab_item_2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1.0"
                android:background="@color/lucency"
                android:button="@null"
                android:drawableTop="@drawable/tab_item_icon2_bg"
                android:gravity="center"
                android:singleLine="true"
                android:text="Tab2"
                android:textColor="@color/white"
                android:textSize="13sp" />

            <RadioButton
                android:id="@+id/tab_item_3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1.0"
                android:background="@color/lucency"
                android:button="@null"
                android:drawableTop="@drawable/tab_item_icon3_bg"
                android:gravity="center"
                android:singleLine="true"
                android:text="Tab3"
                android:textColor="@color/white"
                android:textSize="13sp" />

            <RadioButton
                android:id="@+id/tab_item_4"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1.0"
                android:background="@color/lucency"
                android:button="@null"
                android:drawableTop="@drawable/tab_item_icon4_bg"
                android:gravity="center"
                android:singleLine="true"
                android:text="Tab4"
                android:textColor="@color/white"
                android:textSize="13sp" />

            <RadioButton
                android:id="@+id/tab_item_5"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1.0"
                android:background="@color/lucency"
                android:button="@null"
                android:drawableTop="@drawable/tab_item_icon5_bg"
                android:gravity="center"
                android:singleLine="true"
                android:text="Tab5"
                android:textColor="@color/white"
                android:textSize="13sp" />
        </RadioGroup>
    </LinearLayout>

</LinearLayout>

2、看看RadioButton的背景图片的更换

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 默认时的图片 -->
    <item android:drawable="@drawable/tab_select_tab1" android:state_checked="false"/>
<pre name="code" class="java">    <!-- 点击之后的图片 -->

3、Activity中的代码：（1）注意Activity是继承自FragmentActivity，不要写错了；（2）里面有三个变量，主要看看第二个fragments对象，这个对象是一个集合，主要存放Fragment对象

<span style="white-space:pre">	</span>private RadioGroup tabItems;
	public List<Fragment> fragments = new ArrayList<Fragment>();
	private RadioButton tab1, tab2, tab3, tab4, tab5;

4、为刚才所说的集合添加Fragment对象，添加的5个对象都是继承自Fragment类的对象，然后初始化包裹items的RadioGroup

<span style="white-space:pre">	</span>fragments.add(new Tab_One());
	fragments.add(new Tab_Two());
	fragments.add(new Tab_Three());
	fragments.add(new Tab_Four());
	fragments.add(new Tab_Five());

	tabItems = (RadioGroup) findViewById(R.id.tabs_rg);

5、初始化每个item，并为这几个item的设置文字的颜色

	private void initTabs() {
		tab1 = (RadioButton) findViewById(R.id.tab_item_1);
		tab2 = (RadioButton) findViewById(R.id.tab_item_2);
		tab3 = (RadioButton) findViewById(R.id.tab_item_3);
		tab4 = (RadioButton) findViewById(R.id.tab_item_4);
		tab5 = (RadioButton) findViewById(R.id.tab_item_5);
	}

	private void tabItemsBg() {
		tab1.setTextColor(getResources().getColor(R.color.white));
		tab2.setTextColor(getResources().getColor(R.color.white));
		tab3.setTextColor(getResources().getColor(R.color.white));
		tab4.setTextColor(getResources().getColor(R.color.white));
		tab5.setTextColor(getResources().getColor(R.color.white));
	}

5、OnRgsExtraCheckedChanged回掉方法，当点击某个radioButton的时候会触发该方法，触发该方法，我们首先是将items的背景色设置为默认，然后将点击的RadioButton的字体设置为你要的颜色

<span style="white-space:pre">		</span>tabItemsBg();
		switch (index) {
		case 0:
			tab1.setTextColor(getResources().getColor(R.color.maintopic));
			break;
		case 1:
			tab2.setTextColor(getResources().getColor(R.color.maintopic));
			break;
		case 2:
			tab3.setTextColor(getResources().getColor(R.color.maintopic));
			break;
		case 3:
			tab4.setTextColor(getResources().getColor(R.color.maintopic));
			break;
		case 4:
			tab5.setTextColor(getResources().getColor(R.color.maintopic));
			break;
		}

6、最重要的就是FragmentTabAdapter这个类了，这个类是继承了RadioGroup.OnCheckedChangeListener，里面还定义了一个接口，这个接口主要功能是，在点击radioButton的时候将事件传递给主页面。

<span style="white-space:pre">	</span>interface OnRgsExtraCheckedChangedListener{
        <span style="white-space:pre">	</span>public void OnRgsExtraCheckedChanged(RadioGroup radioGroup, int checkedId, int index);
   <span style="white-space:pre">	</span>}

（1）构造函数，第一个参数是调用该适配器的Activity对象，并且这个对象时继承自FragmentActivity，第二个就是我们上面3中说的集合对象；第三个是Activity中所要被替换的区域的id，第四个就是下面的Items了。

   <span style="white-space:pre">	</span> public FragmentTabAdapter(FragmentActivity fragmentActivity, List<Fragment> fragments, int fragmentContentId, RadioGroup tabs) {
        this.fragments = fragments;
        this.tabItems = tabs;
        this.fragmentActivity = fragmentActivity;
        this.fragmentContentId = fragmentContentId;

        // 默认显示第一页
        FragmentTransaction ft = fragmentActivity.getSupportFragmentManager().beginTransaction();
        ft.add(fragmentContentId, fragments.get(0));
        ft.commit();

        tabs.setOnCheckedChangeListener(this);
    }

（2）最重要的就是在点击RadioButton的时候所发生的事情

当点击某一个RadioButton的时候我们便利TabItems，看看是哪个按钮被点击额，然后找出对应序号的Fragment，暂停当前的Fragment，判断当前的Fragment是否被添加到FragmentTransaction对象中，如果已经添加就直接启动目标的fragment，如果没有添加在执行添加操作，添加完成之后一定要调用commit提交事务，要不然是不会执行的哦。

最后不要忘记了将点击事件发送到主界面。

    @Override
    public void onCheckedChanged(RadioGroup radioGroup, int checkedId) {
        for(int i = 0; i < tabItems.getChildCount(); i++){
            if(tabItems.getChildAt(i).getId() == checkedId){
                Fragment fragment = fragments.get(i);
                FragmentTransaction ft = fragmentActivity.getSupportFragmentManager().beginTransaction();

                getCurrentFragment().onPause(); // 暂停当前tab

                if(fragment.isAdded()){
                    fragment.onResume(); // 启动目标tab的onResume()
                }else{
                    ft.add(fragmentContentId, fragment);
                }
                showTab(i); // 显示目标tab
                ft.commit();
                // 如果设置了切换tab额外功能功能接口
                if(null != onRgsExtraCheckedChangedListener){
                    onRgsExtraCheckedChangedListener.OnRgsExtraCheckedChanged(radioGroup, checkedId, i);
                }
            }
        }
    }
    /**
     * 切换tab
     * @param idx
     */
    private void showTab(int idx){
        for(int i = 0; i < fragments.size(); i++){
            Fragment fragment = fragments.get(i);
            FragmentTransaction ft = fragmentActivity.getSupportFragmentManager().beginTransaction();
            if(idx == i){
                ft.show(fragment);
            }else{
                ft.hide(fragment);
            }
            ft.commit();
        }
        currentTab = idx; // 更新目标tab为当前tab
    }

7、效果图