IOSRadioGroup

TextView Button RadioButton

public class Button extends TextView {    public Button(Context context) {        this(context, null);    }    public Button(Context context, AttributeSet attrs) {        this(context, attrs, com.android.internal.R.attr.buttonStyle);    }    public Button(Context context, AttributeSet attrs, int defStyleAttr) {        this(context, attrs, defStyleAttr, 0);    }    public Button(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {        super(context, attrs, defStyleAttr, defStyleRes);    }    @Override    public CharSequence getAccessibilityClassName() {        return Button.class.getName();    }}

TextView 和 Button 区别，一个用了 textViewStyle，一个用了 buttonStyle。

CompoundButton 是 RadioButton 的父类 ，它和 Button 的区别：

View 的 onTouchEvent 会调用 performClick。

    @Override    public boolean performClick() {        toggle();        // ...    }

  public void toggle() {        setChecked(!mChecked);    }

    public void setChecked(boolean checked) {        if (mChecked != checked) {            mChecked = checked;            refreshDrawableState();            notifyViewAccessibilityStateChangedIfNeeded(                    AccessibilityEvent.CONTENT_CHANGE_TYPE_UNDEFINED);            // Avoid infinite recursions if setChecked() is called from a listener            if (mBroadcasting) {                return;            }            mBroadcasting = true;            if (mOnCheckedChangeListener != null) {                mOnCheckedChangeListener.onCheckedChanged(this, mChecked);            }            if (mOnCheckedChangeWidgetListener != null) {                mOnCheckedChangeWidgetListener.onCheckedChanged(this, mChecked);            }            mBroadcasting = false;                    }    }

RadioButton 重写了 toggle ，只允许选中：

   @Override    public void toggle() {        // we override to prevent toggle when the radio is already        // checked (as opposed to check boxes widgets)        if (!isChecked()) {            super.toggle();        }    }

为什么 RadioButton 是可选中的，Button 确不行：

   @Override    protected int[] onCreateDrawableState(int extraSpace) {        final int[] drawableState = super.onCreateDrawableState(extraSpace + 1);        if (isChecked()) {            mergeDrawableStates(drawableState, CHECKED_STATE_SET);        }        return drawableState;    }

而 RadioGroup 就是可以监听选中并清除其他子 RadioButton 选中的 LinearLayout。

-----------------------------------------------------------------------------------------  进入正题

https://github.com/Kaopiz/android-segmented-control

很棒的库，虽说不要重复造轮子，但我认为摸索是必要的。

利用之前的知识，外加 RadioButton 隐藏 ButtonDrawable 后，很容易做到。

除了 setCornerRaduis ，还有更细致的 setCornRadii 可用，然后：

有点像样了，还有个问题，相邻的 stroke 应该只显示一条。

我是没想到怎么解决，看看作者的做法：

    layoutParams.setMargins(-strokeWidth, 0, 0, 0);

真是太聪明了。

RadioGroup 在 onMeasure 和 onLayout 方面其实就是 LinearLayout。

LinearLayout 的 onMeasure ，依赖于 child view 的 onMeasure 结果。

缩小 child view 是无济于事的，drawable 重画时会随 View 扩展。

这里的做法，是把 “选项二” 和 “选项三” 向左平移了 strokeWidth。

onMeasure 时总长度，确实减少了 leftMargin。

      mTotalLength = Math.max(totalLength, totalLength + childWidth + lp.leftMargin +                           lp.rightMargin + getNextLocationOffset(child));

onLayout 时向确实向左偏了 leftMargin，但 child 大小是不变的。

   childLeft += lp.leftMargin;                setChildFrame(child, childLeft + getLocationOffset(child), childTop,                        childWidth, childHeight);

最终结果图：

开源库中还是使用了矢量字体，TransitionDrawable 渐变切换，还加了按下的 maskDrawable 的效果等等。

  int maskColor = Color.argb(50, Color.red(mTintColor), Color.green(mTintColor), Color.blue(mTintColor));        maskDrawable.setColor(maskColor);    

代码：

public class IOSRadioGroup extends RadioGroup {    private int cornerRadius;    private int mainColor;    final int strokeWidth = 2;    float[] leftCornerRadii;    float[] middleCornerRadii;    float[] rightCornerRadii;    //    public IOSRadioGroup(Context context) {        super(context);    }    public IOSRadioGroup(Context context, AttributeSet attrs) {        super(context, attrs);        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RoundCornerTextView);        float dp = typedArray.getDimension(R.styleable.RoundCornerTextView_rc_corner_radius, 0.0f);        cornerRadius = dp2px(context, dp);        leftCornerRadii = new float[]{cornerRadius, cornerRadius, 0, 0, 0, 0, cornerRadius, cornerRadius};        middleCornerRadii = new float[]{0, 0, 0, 0, 0, 0, 0, 0};        rightCornerRadii = new float[]{0, 0, cornerRadius, cornerRadius, cornerRadius, cornerRadius, 0, 0};        mainColor = typedArray.getColor(R.styleable.RoundCornerTextView_rc_background_color, Color.TRANSPARENT);        typedArray.recycle();    }    //    @Override    protected void onFinishInflate() {        super.onFinishInflate();        init();    }    //    @Override    protected void measureChildWithMargins(View child, int parentWidthMeasureSpec, int widthUsed, int parentHeightMeasureSpec, int heightUsed) {        View first = getChildAt(0);        if (child != first) {            LayoutParams layoutParams = (LayoutParams) child.getLayoutParams();            // Third Point            // child 的大小没有变化，但位置会发生了变化，有了些许重叠。            layoutParams.setMargins(-strokeWidth, 0, 0, 0);        }        super.measureChildWithMargins(child, parentWidthMeasureSpec, widthUsed, parentHeightMeasureSpec, heightUsed);    }    //        private void init() {        for (int i = 0; i != getChildCount(); i++) {            RadioButton child = (RadioButton) getChildAt(i);            // Second Point            // 不同 child 的 stroke 形状不同            float[] radii;            if (i == 0) {                radii = leftCornerRadii;            } else if (i == getChildCount() - 1) {                radii = rightCornerRadii;            } else {                radii = middleCornerRadii;            }            changeChildBackground(child, radii);        }    }    //    private void changeChildBackground(RadioButton radioButton, float[] cornerRadii) {        GradientDrawable unchecked = new GradientDrawable();        unchecked.setCornerRadii(cornerRadii);        unchecked.setColor(Color.WHITE);        unchecked.setStroke(strokeWidth, mainColor);        GradientDrawable checked = new GradientDrawable();        checked.setCornerRadii(cornerRadii);        checked.setColor(mainColor);        StateListDrawable background = new StateListDrawable();        background.addState(new int[]{-android.R.attr.state_checked}, unchecked);        background.addState(new int[]{android.R.attr.state_checked}, checked);        radioButton.setBackground(background);        // First Point        // 把默认的 style 中的 ButtonDrawable 去除。        radioButton.setButtonDrawable(null);        ColorStateList colorStateList = new ColorStateList(                new int[][]{{-android.R.attr.state_checked}, {android.R.attr.state_checked}},                new int[]{mainColor, Color.WHITE}        );        radioButton.setTextColor(colorStateList);    }    //    protected int dp2px(Context context, float dp) {        final float scale = context.getResources().getDisplayMetrics().density;        return (int) (dp * scale + 0.5f);    }    }