六年前写的一个控件,一直没有时间总结,趁年底不怎么忙,整理一下之前写过的组件。供大家一起参考学习。废话不多说,先上图。
一、效果图
实现思路使用的是radioGroup加radiobutton组合方式。原理就是通过修改RadioButton 的background样式实现,radioGroup嵌套radiobutton已经实现单选互斥,故直接监听其选中监听处理数据就好。
dp_0.5:就是0.5dp的意思,自行替换成自己的值。
dp_15:代表15dp
二、布局代码
方案:采用的是RadioGroup嵌套RadioButton的方式。
<RadioGroup
android:id="@+id/rg_gender"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/monitor_remd"
android:layout_marginLeft="@dimen/dp_24"
android:layout_marginTop="@dimen/dp_10"
android:orientation="horizontal"
android:padding="1dp">
<RadioButton
android:id="@+id/rb_press_h"
android:layout_width="wrap_content"
android:layout_height="@dimen/dp_25"
android:button="@null"
android:checked="true"
android:drawableLeft="@drawable/checked_manage"
android:drawablePadding="5dp"
android:text="高压"
android:textColor="@color/white"
android:textSize="@dimen/sp_11" />
<RadioButton
android:id="@+id/rb_press_l"
android:layout_width="wrap_content"
android:layout_height="@dimen/dp_30"
android:layout_marginLeft="10dp"
android:button="@null"
android:drawableLeft="@drawable/checked_manage"
android:drawablePadding="5dp"
android:text="低压"
android:textColor="@color/white"
android:textSize="@dimen/sp_11" />
<RadioButton
android:id="@+id/rb_press_rate"
android:layout_width="wrap_content"
android:layout_height="@dimen/dp_30"
android:layout_marginLeft="10dp"
android:button="@null"
android:drawableLeft="@drawable/checked_manage"
android:drawablePadding="5dp"
android:text="心率"
android:textColor="@color/white"
android:textSize="@dimen/sp_11" />
</RadioGroup>
三、样式代码
3.1 android:drawableLeft="@drawable/checked_manage"样式
这种方式使用的是drawableLeft方式,没使用background。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/press_check" android:state_checked="true"></item>
<item android:drawable="@drawable/nomar_check" ></item>
</selector>
3.1.1 press_check样式svg方式实现
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="10dp"
android:height="10dp"
android:viewportWidth="1024"
android:viewportHeight="1024">
<path
android:pathData="M511.2,63.9c-246.3,0 -447.8,201.5 -447.8,447.8s201.5,447.8 447.8,447.8C757.5,959.6 959,758 959,511.7S757.5,63.9 511.2,63.9zM868.5,662.1c-19.6,46.2 -47.7,87.7 -83.4,123.4s-77.3,63.8 -123.4,83.4c-47.7,20.3 -98.3,30.6 -150.4,30.6 -52.1,0 -102.7,-10.3 -150.4,-30.6 -46.2,-19.6 -87.7,-47.7 -123.4,-83.4s-63.8,-77.3 -83.4,-123.4c-20.3,-47.7 -30.6,-98.3 -30.6,-150.4 0,-52.1 10.3,-102.7 30.6,-150.4 19.6,-46.2 47.7,-87.7 83.4,-123.4s77.3,-63.8 123.4,-83.4c47.7,-20.3 98.3,-30.6 150.4,-30.6 52.1,0 102.7,10.3 150.4,30.6 46.2,19.6 87.7,47.7 123.4,83.4s63.8,77.3 83.4,123.4C888.7,409 899,459.6 899,511.7c0,52.1 -10.3,102.7 -30.5,150.4z"
android:fillColor="#2775DE"/>
<path
android:pathData="M511.2,511.7m-170,0a170,170 0,1 0,340 0,170 170,0 1,0 -340,0Z"
android:fillColor="#2775DE"/>
</vector>
3.1.2 nomar_check样式
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="10dp"
android:height="10dp"
android:viewportWidth="1024"
android:viewportHeight="1024">
<path
android:pathData="M512,182.9c-181.8,0 -329.1,147.4 -329.1,329.1 0,181.8 147.4,329.1 329.1,329.1 181.8,0 329.1,-147.4 329.1,-329.1C841.1,330.2 693.8,182.9 512,182.9zM512,786.3c-151.5,0 -274.3,-122.8 -274.3,-274.3 0,-151.5 122.8,-274.3 274.3,-274.3s274.3,122.8 274.3,274.3C786.3,663.5 663.5,786.3 512,786.3z"
android:fillColor="#ffffff"/>
</vector>
3.2 checked_manage样式
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/press_check" android:state_checked="true"></item>
<item android:drawable="@drawable/nomar_check" ></item>
</selector>
3.2.1 press_check样式
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="10dp"
android:height="10dp"
android:viewportWidth="1024"
android:viewportHeight="1024">
<path
android:pathData="M511.2,63.9c-246.3,0 -447.8,201.5 -447.8,447.8s201.5,447.8 447.8,447.8C757.5,959.6 959,758 959,511.7S757.5,63.9 511.2,63.9zM868.5,662.1c-19.6,46.2 -47.7,87.7 -83.4,123.4s-77.3,63.8 -123.4,83.4c-47.7,20.3 -98.3,30.6 -150.4,30.6 -52.1,0 -102.7,-10.3 -150.4,-30.6 -46.2,-19.6 -87.7,-47.7 -123.4,-83.4s-63.8,-77.3 -83.4,-123.4c-20.3,-47.7 -30.6,-98.3 -30.6,-150.4 0,-52.1 10.3,-102.7 30.6,-150.4 19.6,-46.2 47.7,-87.7 83.4,-123.4s77.3,-63.8 123.4,-83.4c47.7,-20.3 98.3,-30.6 150.4,-30.6 52.1,0 102.7,10.3 150.4,30.6 46.2,19.6 87.7,47.7 123.4,83.4s63.8,77.3 83.4,123.4C888.7,409 899,459.6 899,511.7c0,52.1 -10.3,102.7 -30.5,150.4z"
android:fillColor="#2775DE"/>
<path
android:pathData="M511.2,511.7m-170,0a170,170 0,1 0,340 0,170 170,0 1,0 -340,0Z"
android:fillColor="#2775DE"/>
</vector>
3.2.2 nomar_check样式
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="10dp"
android:height="10dp"
android:viewportWidth="1024"
android:viewportHeight="1024">
<path
android:pathData="M512,182.9c-181.8,0 -329.1,147.4 -329.1,329.1 0,181.8 147.4,329.1 329.1,329.1 181.8,0 329.1,-147.4 329.1,-329.1C841.1,330.2 693.8,182.9 512,182.9zM512,786.3c-151.5,0 -274.3,-122.8 -274.3,-274.3 0,-151.5 122.8,-274.3 274.3,-274.3s274.3,122.8 274.3,274.3C786.3,663.5 663.5,786.3 512,786.3z"
android:fillColor="#ffffff"/>
</vector>
3.3 checked_manage样式
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/press_check" android:state_checked="true"></item>
<item android:drawable="@drawable/nomar_check" ></item>
</selector>
四 java代码
由于使用了databinding双向绑定,故就不演示findviewbyid,如果没有使用databinding,
//高压、低压、心率选择处理
mDataBinding.rgGender.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup radioGroup, int checkedId) {
switch (checkedId) {
case R.id.rb_press_h:
Log.d("RadioGroup", "===高压===");
break;
case R.id.rb_press_l:
Log.d("RadioGroup", "===低压===");
break;
case R.id.rb_press_rate:
Log.d("RadioGroup", "===心率===");
break;
}
}
});
五 给予新手的寄语
对于新手来讲,开发总会遇到各种各样的问题,逐个解决就好,注意沟通协调。