1. 程式人生 > >Android使用RadioGroup實現分段選擇

Android使用RadioGroup實現分段選擇

關於分段選擇大家肯定都接觸過很多,今天就來實現一下。
老樣子先看下效果圖
這裡寫圖片描述
看下如何實現的
在drawable中定義所需要的資原始檔
customize_news_rb_bg.xml

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/customize_news_rb_bg_normal"
        android:state_checked
="false"/>
<item android:drawable="@drawable/customize_news_rb_bg_selected" android:state_checked="true"/> </selector>

customize_news_rb_bg_normal.xml

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

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape
="rectangle">
<corners android:radius="1dp"/> <solid android:color="@android:color/transparent"/> </shape>

customize_news_rb_bg_selected.xml

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

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle"
>
<corners android:radius="1dp"/> <solid android:color="@android:color/transparent"/> </shape>

customize_news_default_rb_text.xml

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:color="#FE7371"
        android:state_checked="false"/>

    <item android:color="@color/colorWhite"

</selector>

接下來是佈局檔案

<?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"
    android:background="@color/colorWhite">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/colorTitle">

    <RadioGroup
        android:id="@+id/news_rg_all"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_centerVertical="true"
        android:orientation="horizontal">

    <RadioButton
        android:id="@+id/news_rb_paperstrip"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:layout_weight="1"
        android:layout_marginLeft="50dp"
        android:background="@drawable/customize_news_rb_bg"
        android:button="@null"
        android:gravity="center"
        android:text="紙條"
        android:textColor="@drawable/customize_news_default_rb_text"
        android:textSize="17sp"/>

    <RadioButton
        android:id="@+id/news_rb_circle"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:layout_weight="1"
        android:background="@drawable/customize_news_rb_bg"
        android:button="@null"
        android:gravity="center"
        android:checked="true"
        android:text="圈子"
        android:textColor="@drawable/customize_news_default_rb_text"
        android:textSize="17sp"/>

    <RadioButton
        android:id="@+id/news_rb_like"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:layout_weight="1"
        android:layout_marginRight="50dp"
        android:background="@drawable/customize_news_rb_bg"
        android:button="@null"
        android:gravity="center"
        android:text="喜歡"
        android:textColor="@drawable/customize_news_default_rb_text"
        android:textSize="17sp"/>

     </RadioGroup>

    <ImageView
        android:id="@+id/news_img_add_chat"
        android:layout_width="47dp"
        android:layout_height="47dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:padding="10dp"
        android:src="@drawable/ic_menu_add_chat"/>

    </RelativeLayout>

    <FrameLayout
        android:id="@+id/news_frame_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

頂部用了一個相對佈局並且設定了高度為50dp以及一個背景色,RadioGroup設定為橫向和下面是自定義的RadioButton,第二個RadioButton我設定為選擇狀態,android:checked=”true”,FrameLayout是用來顯示Fragment之間切換內容的。
我是在Fragment裡面使用的,用法和在Activity中是一樣的,程式碼如下。

package com.ranlegeran.simple.fragment;

import android.os.Bundle;
import android.support.annotation.MenuRes;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RadioButton;
import android.widget.RadioGroup;

import com.bumptech.glide.Glide;
import com.bumptech.glide.load.engine.DiskCacheStrategy;
import com.ranlegeran.simple.R;
import com.ranlegeran.simple.news.fragment.CircleFragment;
import com.ranlegeran.simple.news.fragment.LikeFragment;
import com.ranlegeran.simple.news.fragment.PaperstripFragment;
import com.ranlegeran.simple.utils.T;

import butterknife.ButterKnife;

/**
 * 訊息
 */
public class NewsFragment extends Fragment {
    private RadioGroup mRadioGroupAll;

    private PaperstripFragment mPaperstripFragment;
    private CircleFragment mCircleFragment;
    private LikeFragment mLikeFragment;


    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_tab_news,container,false);
        mRadioGroupAll = (RadioGroup) view.findViewById(R.id.news_rg_all);
        initView();
        selectFragment(0);
        ButterKnife.bind(this,view);
        return view;
    }

    private void initView() {

        mRadioGroupAll.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int checkedId) {
                if (checkedId == R.id.news_rb_paperstrip) {
                    selectFragment(0);
                } else if (checkedId == R.id.news_rb_circle) {
                    selectFragment(1);
                } else if (checkedId == R.id.news_rb_like) {
                    selectFragment(2);
                }
            }
        });
    }

    private void selectFragment(int position) {
        FragmentManager mFragmentManager = getActivity().getSupportFragmentManager();
        FragmentTransaction mFragmentTransaction = mFragmentManager.beginTransaction();
        hideFragment(mFragmentTransaction);

        if (position == 0) {
            if (mPaperstripFragment == null) {
                mPaperstripFragment = new PaperstripFragment();
                mFragmentTransaction.add(R.id.news_frame_content, mPaperstripFragment);
            } else {
                mFragmentTransaction.show(mPaperstripFragment);
            }
        } else if (position == 1) {
            if (mCircleFragment == null) {
                mCircleFragment = new CircleFragment();
                mFragmentTransaction.add(R.id.news_frame_content, mCircleFragment);
            } else {
                mFragmentTransaction.show(mCircleFragment);
            }
        } else if (position == 2) {
            if (mLikeFragment == null) {
                mLikeFragment = new LikeFragment();
                mFragmentTransaction.add(R.id.news_frame_content, mLikeFragment);
            } else {
                mFragmentTransaction.show(mLikeFragment);
            }
        }

        mFragmentTransaction.commit();
    }

    private void hideFragment(FragmentTransaction mFragmentTransaction) {
        if (mPaperstripFragment != null) {
            mFragmentTransaction.hide(mPaperstripFragment);
        }

        if (mCircleFragment != null) {
            mFragmentTransaction.hide(mCircleFragment);
        }

        if (mLikeFragment != null) {
            mFragmentTransaction.hide(mLikeFragment);
        }
    }
}

為了方便我只貼一個Fragment出來,其他兩個都是一樣的,佈局很簡單隻放了一個TextView用來顯示文字。
PaperstripFragment程式碼如下

package com.ranlegeran.simple.news.fragment;

import android.os.Bundle;

import com.ranlegeran.simple.R;
import com.ranlegeran.simple.base.BaseFragment;

/**
 * 建立日期:2018/9/4 on 16:34
 * 作 者: RANLEGERAN
 * 類 名: Fragment
 * 簡 述:訊息 紙條Fragment
 */
public class PaperstripFragment extends BaseFragment {

    @Override
    public int getLayoutResId() {
        return R.layout.fragment_paperstrip_layout;
    }

    @Override
    public void init(Bundle savedInstanceState) {

    }
}

fragment_paperstrip_layout.xml

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="木有訊息哦~"
        android:textSize="17sp"
        android:textColor="#9A9A9A"/>

</RelativeLayout>

好啦,以上是全部程式碼,直接複製即可使用。