Android原生实现分段选择

六年前写的一个控件，一直没有时间总结，趁年底不怎么忙，整理一下之前写过的组件。供大家一起参考学习。废话不多说，先上图。

一、效果图

实现思路使用的是radioGroup加radiobutton组合方式。原理就是通过修改RadioButton 的background样式实现，radioGroup嵌套radiobutton已经实现单选互斥，故直接监听其选中监听处理数据就好。

dp_0.5：就是0.5dp的意思，自行替换成自己的值。

dp_15：代表15dp

二、布局代码

采用的是RadioGroup嵌套RadioButton的方式。

  <!-- 日期标题 --><RadioGroupandroid:id="@+id/rg_date"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginRight="@dimen/dp_24"android:layout_marginTop="@dimen/dp_15"android:orientation="horizontal"android:padding="1dp"><RadioButtonandroid:id="@+id/rb_date_day"android:layout_width="@dimen/dp_34"android:layout_height="@dimen/dp_17"android:background="@drawable/day_checked"android:button="@null"android:checked="true"android:gravity="center"android:text="今日"android:textColor="@color/white"android:textSize="@dimen/sp_10" /><RadioButtonandroid:id="@+id/rb_date_week"android:layout_width="@dimen/dp_34"android:layout_height="@dimen/dp_17"android:button="@null"android:background="@drawable/week_checked"android:text="本周"android:gravity="center"android:textColor="@color/white"android:textSize="@dimen/sp_10" /><RadioButtonandroid:id="@+id/rb_date_month"android:layout_width="@dimen/dp_34"android:layout_height="@dimen/dp_17"android:gravity="center"android:background="@drawable/month_checked"android:button="@null"android:text="本月"android:textColor="@color/white"android:textSize="@dimen/sp_10" /></RadioGroup>

三、样式代码

a.day_checked样式

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

a.1 day_chart_seleced样式

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><solid android:color="#ff2775de" /><strokeandroid:width="@dimen/dp_0.5"android:color="#2775DE" /><cornersandroid:bottomLeftRadius="5dp"android:bottomRightRadius="0dp"android:topLeftRadius="5dp"android:topRightRadius="0dp" />
</shape>

a.2 day_chart_unseleced样式

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><solid android:color="#06103A" /><strokeandroid:width="@dimen/dp_0.5"android:color="#2775DE" /><cornersandroid:bottomLeftRadius="5dp"android:bottomRightRadius="0dp"android:topLeftRadius="5dp"android:topRightRadius="0dp" />
</shape>

b.week_checked样式

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

b.2 week_chart_seleced样式

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><solid android:color="#ff2775de" /><strokeandroid:width="@dimen/dp_0.5"android:color="#2775DE" /><corners android:radius="@dimen/dp_0" />
</shape>

b.3 week_chart_unseleced样式

这个样式要特别做下说说明，因为“本周”那个控件位于组件的中部，所以边框样式会出现跟左右两边叠加的现象，从而造成边框过粗的视觉。为了解决这个问题，我采用的是layer-list层级布局，通过颜色覆盖的方式，影藏掉 “本周”那个控件的左右边框，来解决这一问题。下面是实现代码。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"><item><shape><solid android:color="#06103A" /><strokeandroid:width="@dimen/dp_0.5"android:color="#2775DE" /><corners android:radius="@dimen/dp_0" /></shape></item><itemandroid:bottom="@dimen/dp_0.5"android:top="@dimen/dp_0.5"><shape><strokeandroid:width="@dimen/dp_0.5"android:color="#06103A" /></shape></item>
</layer-list>

c. month_checked样式

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

c.1 month_chart_seleced样式

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><solid android:color="#ff2775de" /><strokeandroid:width="@dimen/dp_0.5"android:color="#2775DE" /><cornersandroid:bottomLeftRadius="0dp"android:bottomRightRadius="5dp"android:topLeftRadius="0dp"android:topRightRadius="5dp" />
</shape>

c.2 month_chart_unseleced样式

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><solid android:color="#06103A" /><strokeandroid:width="@dimen/dp_0.5"android:color="#2775DE" /><cornersandroid:bottomLeftRadius="0dp"android:bottomRightRadius="5dp"android:topLeftRadius="0dp"android:topRightRadius="5dp" />
</shape>

四、java代码

由于使用了databinding双向绑定,故就不演示findviewbyid，如果没有使用databinding，自行去实现就好，只需在onCreate()中调用就好。想了下还是加上findviewbyid方式，就怕遇到啥都不懂的新手抱怨。

方法一 //findviewbyid调用方式：findviewbyid(R.id.rg_gender).setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(RadioGroup radioGroup, int id) {switch (id) {case R.id.rb_date_day:Log.d("RadioGroup", "===天===");break;case R.id.rb_date_week:Log.d("RadioGroup", "===周===");break;case R.id.rb_date_month:Log.d("RadioGroup", "===月===");break;}}});方法二
//databindig调用方式
//绑定数据mDataBinding.rgDate.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(RadioGroup radioGroup, int id) {switch (id) {case R.id.rb_date_day:Log.d("RadioGroup", "===天===");break;case R.id.rb_date_week:Log.d("RadioGroup", "===周===");break;case R.id.rb_date_month:Log.d("RadioGroup", "===月===");break;}}});