Android使用RadioGroup實現分段選擇
阿新 • • 發佈:2019-02-16
關於分段選擇大家肯定都接觸過很多,今天就來實現一下。
老樣子先看下效果圖
看下如何實現的
在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>
好啦,以上是全部程式碼,直接複製即可使用。