Material Designer的低版本兼容实现（十）—— CheckBox & RadioButton
ChekBox的用途我们就不必多说了，算是一个很古老的控件了，何其类似的还有RadioButton，这个东西因为我目前还没写出来，所以用了别人的一个lib，这下面会说到。顺便说一句，如果你的app是在5.0环境下编译的，那么你用传统的checkbox时，你会发现checkbox在低版本机子上运行出来的样子和以前不同了，虽然没有动画效果，但样子和5.0以上的checkbox还是很像的。
最小尺寸
48 x 48
开源lib中对于不同的屏幕做了不同大小的对勾图片，应该能满足高清屏的要求。至于不可用状态目前还没做，其实也就是继承下isEnable()方法，但是因为做出来的效果我不是很满意，所以就仅仅试了试，没真的放出来。
一、导入到自己的工程中
要用这个控件还是得添加开源项目的支持，开源项目地址：
我维护的：https://github.com/shark0017/MaterialDesignLibrary
原版本：https://github.com/navasmdc/MaterialDesignLibrary
大家可以选择一个下载，反正两个版本都是我和原作者融合后的东西，差别不大。
添加lib支持后我们就可以用这个控件了，放入布局文件前还是要写命名空间的。
xmlns:app="http://schemas.android.com/apk/res-auto"
<com.gc.materialdesign.views.CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" />
由于我没有做可视化的效果，所以在编译器中没办法实时显示状态，默认就是一个透明的view。如果大家想在编译器中看个大概的样子，可以给它通过background=“#xxxxxx”添加个背景颜色。
真实运行的效果：
二、在布局文件中设定各种属性
app:checked="true" 是否被选中，默认没被选中
android:background="#ff0000" 设定checkbox的颜色，默认是绿色
android:layout_width="100dp" 设定checkbox这个view整体的大小，和里面的方框无关。注意看图中按压时阴影的大小
android:layout_height="100dp"
app:checkBoxSize="40dp" 设定checkbox里面方框的大小
三、通过代码设定各种属性
public class CheckBoxTest extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.checkbox); CheckBox checkBox = (CheckBox)findViewById(R.id.checkBox01); checkBox.setChecked(true);// 设定初始为选中的状态 checkBox.setBackgroundColor(0xffff0000);// 设置checkbox的颜色 checkBox.setBackgroundColor(getResources().getColor(R.color.orange));// 设置背景色 checkBox.setCheckBoxSize(35.5f);// 设置方框的大小 // 监听选中的事件 checkBox.setOncheckListener(new OnCheckListener() { @Override public void onCheck(boolean isChecked) { // TODO 自动生成的方法存根 System.out.println("isChecked = "+ checkBox05.isChecked()); Toast.makeText(CheckBoxTest.this, "checkbox status = "+isChecked, 0).show(); } }); } }
四、补充：RadioButton
这个控件是从另一个开源项目中得到的，那个lib中其他的控件都做的不好，就这个做的十分精细。具体的测试和修改我没去做，下面仅仅给出源码，由大家自行修改吧，其实可以修改的地方还是蛮多的。
lib地址：https://github.com/keithellis/MaterialWidget
源码如下：
dimen.xml
这里是默认的属性，包括长宽啥的，这些值照理说都应该可以在java代码中定制的。
<?xml version="1.0" encoding="utf-8"?> <resources> <!-- RadioButton Default --> <dimen name="radio_width">48dp</dimen> <dimen name="radio_height">48dp</dimen> <dimen name="radio_border_radius">10dp</dimen> <dimen name="radio_thumb_radius">6dp</dimen> <dimen name="radio_ripple_radius">24dp</dimen> <dimen name="radio_stroke_width">2dp</dimen> <color name="radio_color">#6d6d6d</color> <color name="radio_checked_color">#55b03d</color> </resources>
可以定制的属性，这里就两个，蛮少的。请大家自行添加修改吧~
<!-- RadioButton Attribute --> <declare-styleable name="RadioButton"> <attr name="radio_color" format="color"/> <attr name="radio_checked_color" format="color"/> </declare-styleable>
RadioButton.java
从中我们可以看到，这个控件都是被画出来的，和上面控件用到的lib的构建思路不同。因为是画出来的，所以我们可以定制的东西更多，扩展性更强，值得细细品味这个类的写法。
package com.gc.materialdesign.views; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Rect; import android.util.AttributeSet; import android.view.MotionEvent; import android.widget.CompoundButton; import com.gc.materialdesign.R; /** * Created by IntelliJ IDEA. * User: keith. * Date: 14-10-8. * Time: 15:48. */ public class RadioButton extends CompoundButton { private static final long ANIMATION_DURATION = 200;// 动画持续的时间 private static final int StateNormal = 1; private static final int StateTouchDown = 2; private static final int StateTouchUp = 3; private int mState = StateNormal; private long mStartTime; private int mColor; private int mCheckedColor; private int mRadioWidth;// 宽度 private int mRadioHeight;// 高度 private int mBorderRadius; private int mThumbRadius; private int mRippleRadius; private int mStrokeWidth; private Rect mFingerRect; private boolean mMoveOutside; private Paint borderPaint = new Paint(Paint.ANTI_ALIAS_FLAG); private Paint thumbPaint = new Paint(Paint.ANTI_ALIAS_FLAG); private Paint ripplePaint = new Paint(Paint.ANTI_ALIAS_FLAG); public RadioButton(Context context) { this(context, null); } public RadioButton(Context context, AttributeSet attrs) { this(context, attrs, 0); } public RadioButton(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.RadioButton); mColor = attributes.getColor(R.styleable.RadioButton_radio_color, getResources().getColor(R.color.radio_color)); mCheckedColor = attributes.getColor(R.styleable.RadioButton_radio_checked_color, getResources().getColor(R.color.radio_checked_color)); attributes.recycle(); mRadioWidth = getResources().getDimensionPixelSize(R.dimen.radio_width); mRadioHeight = getResources().getDimensionPixelSize(R.dimen.radio_height); mBorderRadius = getResources().getDimensionPixelSize(R.dimen.radio_border_radius); mThumbRadius = getResources().getDimensionPixelSize(R.dimen.radio_thumb_radius); mRippleRadius = getResources().getDimensionPixelSize(R.dimen.radio_ripple_radius); mStrokeWidth = getResources().getDimensionPixelSize(R.dimen.radio_stroke_width); thumbPaint.setColor(mCheckedColor); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { widthMeasureSpec = MeasureSpec.makeMeasureSpec(measureWidth(widthMeasureSpec), MeasureSpec.EXACTLY); heightMeasureSpec = MeasureSpec.makeMeasureSpec(measureHeight(heightMeasureSpec), MeasureSpec.EXACTLY); super.onMeasure(widthMeasureSpec, heightMeasureSpec); } private int measureWidth(int measureSpec) { int result; int specMode = MeasureSpec.getMode(measureSpec); int specSize = MeasureSpec.getSize(measureSpec); if (specMode == MeasureSpec.EXACTLY) { if (specSize < mRadioWidth) { result = mRadioWidth; } else { result = specSize; } } else { result = mRadioWidth; } return result; } private int measureHeight(int measureSpec) { int result; int specMode = MeasureSpec.getMode(measureSpec); int specSize = MeasureSpec.getSize(measureSpec); if (specMode == MeasureSpec.EXACTLY) { if (specSize < mRadioHeight) { result = mRadioHeight; } else { result = specSize; } } else { result = mRadioHeight; } return result; } @Override public boolean onTouchEvent(MotionEvent event) { if (isEnabled()) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: mMoveOutside = false; mState = StateTouchDown; mFingerRect = new Rect(getLeft(), getTop(), getRight(), getBottom()); mStartTime = System.currentTimeMillis(); invalidate(); break; case MotionEvent.ACTION_MOVE: if (!mFingerRect.contains(getLeft() + (int) event.getX(), getTop() + (int) event.getY())) { mMoveOutside = true; mState = StateNormal; mStartTime = System.currentTimeMillis(); invalidate(); } break; case MotionEvent.ACTION_UP: if (!mMoveOutside) { mState = StateTouchUp; setChecked(!isChecked()); mStartTime = System.currentTimeMillis(); invalidate(); } break; case MotionEvent.ACTION_CANCEL: mState = StateNormal; invalidate(); break; } } return true; } private int rippleColor(int color) { int alpha = Math.round(Color.alpha(color) * 0.2f); int red = Color.red(color); int green = Color.green(color); int blue = Color.blue(color); return Color.argb(alpha, red, green, blue); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int rippleRadius = 0; int thumbRadius = isChecked() ? mThumbRadius : 0; long elapsed = System.currentTimeMillis() - mStartTime; switch (mState) { case StateNormal: break; case StateTouchDown: ripplePaint.setAlpha(255); if (elapsed < ANIMATION_DURATION) { rippleRadius = Math.round(elapsed * mRippleRadius / ANIMATION_DURATION); } else { rippleRadius = mRippleRadius; } postInvalidate(); break; case StateTouchUp: if (elapsed < ANIMATION_DURATION) { int alpha = Math.round((ANIMATION_DURATION - elapsed) * 255 / ANIMATION_DURATION); ripplePaint.setAlpha(alpha); rippleRadius = Math.round((ANIMATION_DURATION - elapsed) * mRippleRadius / ANIMATION_DURATION); if (isChecked()) { thumbRadius = Math.round(elapsed * mThumbRadius / ANIMATION_DURATION); } else { thumbRadius = Math.round((ANIMATION_DURATION - elapsed) * mThumbRadius / ANIMATION_DURATION); } } else { mState = StateNormal; rippleRadius = 0; ripplePaint.setAlpha(0); } postInvalidate(); break; } if (isChecked()) { ripplePaint.setColor(rippleColor(mCheckedColor)); borderPaint.setColor(mCheckedColor); borderPaint.setStyle(Paint.Style.STROKE); borderPaint.setStrokeWidth(mStrokeWidth); } else { ripplePaint.setColor(rippleColor(mColor)); borderPaint.setColor(mColor); borderPaint.setStyle(Paint.Style.STROKE); borderPaint.setStrokeWidth(mStrokeWidth); } canvas.drawCircle(getWidth() / 2, getHeight() / 2, rippleRadius, ripplePaint); canvas.drawCircle(getWidth() / 2, getHeight() / 2, mBorderRadius, borderPaint); canvas.drawCircle(getWidth() / 2, getHeight() / 2, thumbRadius, thumbPaint); } }
