RadioButton+Fragment實現Tab切換

第一次寫博客 激動啊 - -!
話不多說了，直接上代碼：

HomeActivity代碼：

public class HomeActivity extends FragmentActivity{
    private FragmentTransaction transaction;
    private RadioGroup radioGroup;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        radioGroup = (RadioGroup) findViewById(R.id.radiogroup);
        /**
         * 設置每個RadioButton的監聽事件，然後切換對應的Fragment
         */
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int i) {
                //開啓事務
                transaction = getSupportFragmentManager().beginTransaction();
                switch (i) {
                    case R.id.weixin:
                        transaction.replace(R.id.content, new WeixinFragment());
                        break;
                    case R.id.tongxunlu:
                        transaction.replace(R.id.content, new TongxunluFragment());
                        break;
                    case R.id.friendcircle:
                        transaction.replace(R.id.content, new FriendFragment());
                        break;
                    case R.id.setting:
                        transaction.replace(R.id.content, new SettingFragment());
                        break;
                }
                //事務提交
                transaction.commit();
            }
        });
    }

    /**
     * 一進入主頁的時候，自動加載第一頁tab
     */
    @Override
    protected void onResume() {
        super.onResume();
        weixin.setChecked(true);
    }
}

接下來是四個Tab選項（在這就寫一個，剩下3個大同小異）

public class WeixinFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab_weixin,container,false);
    }
}

首頁xml(頂部和底部事先寫好 ，然後直接include即可,中部是一個FrameLayout佔位，然後transaction.replace()替換即可)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context=".HomeActivity">
    <include layout="@layout/top"></include>
    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </FrameLayout>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="#000000"
        android:layout_marginBottom="5dp"/>
    <include layout="@layout/bottom"></include>
</LinearLayout>

這是底部的RadioGroup

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <RadioGroup
        android:id="@+id/radiogroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <RadioButton
            android:id="@+id/weixin"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="18sp"
            android:textColor="@color/ziti_color"
            android:drawableTop="@drawable/weixin_selctor"
            android:gravity="center_horizontal"
            android:button="@null"
            android:text="微信"/>
        <RadioButton
            android:id="@+id/tongxunlu"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="18sp"
            android:textColor="@color/ziti_color"
            android:drawableTop="@drawable/address_selctor"
            android:gravity="center_horizontal"
            android:button="@null"
            android:text="通訊錄"/>
        <RadioButton
            android:id="@+id/friendcircle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="18sp"
            android:textColor="@color/ziti_color"
            android:drawableTop="@drawable/find_selctor"
            android:gravity="center_horizontal"
            android:button="@null"
            android:text="朋友圈"/>
        <RadioButton
            android:id="@+id/setting"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="18sp"
            android:textColor="@color/ziti_color"
            android:drawableTop="@drawable/setting_selctor"
            android:gravity="center_horizontal"
            android:button="@null"
            android:text="設置"/>
    </RadioGroup>
</LinearLayout>

PS：RadioButton圖片跟字體顏色需單獨設置selector，代碼如下

圖片selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/tab_weixin_pressed"></item>
    <item android:drawable="@drawable/tab_weixin_normal"></item>
</selector>

字體顏色selector（在res資源目錄裏創建一個color的文件夾，然後裏面創建字體顏色的selector即可）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#00ff00" android:state_checked="true"></item>
    <item android:color="#969696"></item>
</selector>

—————————————————————————————————————————————————————
有時遇到需要底部中間的那個Tab凸出的效果
在佈局的根節點需添加：

android:clipChildren="false"

所有Tab的父佈局定高，設置

android:gravity="bottom"

每個Tab也定高（需要凸出的那個Tab高度設置的高一點），設置：

android:gravity="bottom|center_horizontal"

最後代碼控制ImageView圖片的切換和文字顏色的改變即可，核心代碼：

	@OnClick({R.id.ll_home, R.id.ll_my})
    public void clickView(View view) {
        switch (view.getId()) {
            case R.id.ll_home:
                setTab(0);
                break;
            case R.id.ll_my:
                setTab(1);
                break;
        }
    }

    private void setTab(int index) {
        //先都恢復到未選中狀態
        iv_home.setImageResource(R.drawable.icon_home_unselected);
        tv_home.setTextColor(Color.parseColor("#cccccc"));
        iv_my.setImageResource(R.drawable.icon_my_unselected);
        tv_my.setTextColor(Color.parseColor("#cccccc"));
        switch (index) {
            case 0:
                iv_home.setImageResource(R.drawable.icon_home_selected);
                tv_home.setTextColor(Color.parseColor("#1296DB"));
                break;
            case 1:
                iv_my.setImageResource(R.drawable.icon_my_selected);
                tv_my.setTextColor(Color.parseColor("#1296DB"));
                break;
        }
    }

效果圖如下：