如何使RadioGroup支持RadioButton任意嵌套

在實(shí)際的項(xiàng)目中，我們經(jīng)常都是RadioButton和RadioGroup一起配合使用。RadioGroup是單選組合框，可以容納多個(gè)RadioButton的容器。在沒(méi)有RadioGroup的情況下，RadioButton可以全部都選中；當(dāng)多個(gè)RadioButton被RadioGroup包含的情況下，RadioButton只可以選中一個(gè)。并用setOnCheckedChangeListener來(lái)對(duì)單選按鈕進(jìn)行監(jiān)聽(tīng)。

RadioButton和RadioGroup的關(guān)系：

  • RadioButton表示單個(gè)圓形單選框，而RadioGroup是可以容納多個(gè)RadioButton的容器。
  • 每個(gè)RadioGroup中的RadioButton同時(shí)只能有一個(gè)被選中。
  • 不同的RadioGroup中的RadioButton互不相干，即如果組A中有一個(gè)選中了，組B中依然可以有一個(gè)被選中。
  • 一般情況下，一個(gè)RadioGroup中至少有2個(gè)RadioButton。
  • 一般情況下，一個(gè)RadioGroup中的RadioButton默認(rèn)會(huì)有一個(gè)被選中，并建議您將它放在RadioGroup中的起始位置。

實(shí)際使用的問(wèn)題：

device-2017-02-17-161810.png

device-2017-02-17-161658.png

眾所周知，RadioGroup只能夠通過(guò)設(shè)置radioGroup.setOrientation()實(shí)現(xiàn)縱向或者橫向排列，并且只能是一列或者一行，并且RadioGroup中還只能直接放RadioButton，但在實(shí)際項(xiàng)目中我們大都是需要實(shí)現(xiàn)上面的效果，所以簡(jiǎn)單的封裝了一個(gè)，取名為：XRadioGroup。

XRadioGroup的實(shí)現(xiàn)

RadioGroup源碼分析

本著求知好學(xué)的心態(tài)，首先研究一下RadioGroup的實(shí)現(xiàn)代碼，為什么不能實(shí)現(xiàn)上面的效果（源碼中省略了部分代碼）。

public class RadioGroup extends LinearLayout {

/**
 * {@inheritDoc}
 */
public RadioGroup(Context context) {
    super(context);
    setOrientation(VERTICAL);
    init();
}

@Override
public void addView(View child, int index, ViewGroup.LayoutParams params) {
    if (child instanceof RadioButton) {
        final RadioButton button = (RadioButton) child;
        if (button.isChecked()) {
            mProtectFromCheckedChange = true;
            if (mCheckedId != -1) {
                setCheckedStateForView(mCheckedId, false);
            }
            mProtectFromCheckedChange = false;
            setCheckedId(button.getId());
        }
    }

    super.addView(child, index, params);
}

/**
 * <p>Sets the selection to the radio button whose identifier is passed in
 * parameter. Using -1 as the selection identifier clears the selection;
 * such an operation is equivalent to invoking {@link #clearCheck()}.</p>
 *
 * @param id the unique id of the radio button to select in this group
 *
 * @see #getCheckedRadioButtonId()
 * @see #clearCheck()
 */
public void check(@IdRes int id) {
    // don't even bother
    if (id != -1 && (id == mCheckedId)) {
        return;
    }

    if (mCheckedId != -1) {
        setCheckedStateForView(mCheckedId, false);
    }

    if (id != -1) {
        setCheckedStateForView(id, true);
    }

    setCheckedId(id);
}

private void setCheckedId(@IdRes int id) {
    mCheckedId = id;
    if (mOnCheckedChangeListener != null) {
        mOnCheckedChangeListener.onCheckedChanged(this, mCheckedId);
    }
}

private void setCheckedStateForView(int viewId, boolean checked) {
    View checkedView = findViewById(viewId);
    if (checkedView != null && checkedView instanceof RadioButton) {
        ((RadioButton) checkedView).setChecked(checked);
    }
}

/**
 * <p>Clears the selection. When the selection is cleared, no radio button
 * in this group is selected and {@link #getCheckedRadioButtonId()} returns
 * null.</p>
 *
 * @see #check(int)
 * @see #getCheckedRadioButtonId()
 */
public void clearCheck() {
    check(-1);
}

/**
 * <p>Register a callback to be invoked when the checked radio button
 * changes in this group.</p>
 *
 * @param listener the callback to call on checked state change
 */
public void setOnCheckedChangeListener(OnCheckedChangeListener listener) {
    mOnCheckedChangeListener = listener;
}

/**
 * <p>This set of layout parameters defaults the width and the height of
 * the children to {@link #WRAP_CONTENT} when they are not specified in the
 * XML file. Otherwise, this class ussed the value read from the XML file.</p>
 *
 * <p>See
 * {@link android.R.styleable#LinearLayout_Layout LinearLayout Attributes}
 * for a list of all child view attributes that this class supports.</p>
 *
 */
public static class LayoutParams extends LinearLayout.LayoutParams {
    /**
     * {@inheritDoc}
     */
    public LayoutParams(Context c, AttributeSet attrs) {
        super(c, attrs);
    }

/**
 * <p>Interface definition for a callback to be invoked when the checked
 * radio button changed in this group.</p>
 */
public interface OnCheckedChangeListener {
    /**
     * <p>Called when the checked radio button has changed. When the
     * selection is cleared, checkedId is -1.</p>
     *
     * @param group the group in which the checked radio button has changed
     * @param checkedId the unique identifier of the newly checked radio button
     */
    public void onCheckedChanged(RadioGroup group, @IdRes int checkedId);
}

private class CheckedStateTracker implements CompoundButton.OnCheckedChangeListener {
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        // prevents from infinite recursion
        if (mProtectFromCheckedChange) {
            return;
        }

        mProtectFromCheckedChange = true;
        if (mCheckedId != -1) {
            setCheckedStateForView(mCheckedId, false);
        }
        mProtectFromCheckedChange = false;

        int id = buttonView.getId();
        setCheckedId(id);
    }
}

/**
 * <p>A pass-through listener acts upon the events and dispatches them
 * to another listener. This allows the table layout to set its own internal
 * hierarchy change listener without preventing the user to setup his.</p>
 */
private class PassThroughHierarchyChangeListener implements
        ViewGroup.OnHierarchyChangeListener {
    private ViewGroup.OnHierarchyChangeListener mOnHierarchyChangeListener;

    /**
     * {@inheritDoc}
     */
    public void onChildViewAdded(View parent, View child) {
        if (parent == RadioGroup.this && child instanceof RadioButton) {
            int id = child.getId();
            // generates an id if it's missing
            if (id == View.NO_ID) {
                id = View.generateViewId();
                child.setId(id);
            }
            ((RadioButton) child).setOnCheckedChangeWidgetListener(
                    mChildOnCheckedChangeListener);
        }

        if (mOnHierarchyChangeListener != null) {
            mOnHierarchyChangeListener.onChildViewAdded(parent, child);
        }
    }

    /**
     * {@inheritDoc}
     */
    public void onChildViewRemoved(View parent, View child) {
        if (parent == RadioGroup.this && child instanceof RadioButton) {
            ((RadioButton) child).setOnCheckedChangeWidgetListener(null);
        }

        if (mOnHierarchyChangeListener != null) {
            mOnHierarchyChangeListener.onChildViewRemoved(parent, child);
        }
    }
  }
}

源碼中可以發(fā)現(xiàn)RadioGroup是繼承至LinearLayout，因?yàn)?code>LinearLayout的特性緣故，所以RadioGroup也就只能夠使其子類實(shí)現(xiàn)縱向或橫向排列。再看為什么只能夠直接包裹RadioButton，在public void addView(View child, int index, ViewGroup.LayoutParams params)方法中可以發(fā)現(xiàn)只判斷了直接子類，所以要是RadioGroup中包含了其他ViewGroup，即使ViewGroup中包含了RadioButton也不會(huì)處理?，F(xiàn)在問(wèn)題就清楚了，需要解決的就是讓ViewGroup中的RadioButton也能夠被同時(shí)處理。

XRadioGroup源碼分析

public class XRadioGroup extends LinearLayout {
// holds the checked id; the selection is empty by default
private int mCheckedId = -1;
// tracks children radio buttons checked state
 private CompoundButton.OnCheckedChangeListener mChildOnCheckedChangeListener;
// when true, mOnCheckedChangeListener discards events
private boolean mProtectFromCheckedChange = false;
private OnCheckedChangeListener mOnCheckedChangeListener;
private PassThroughHierarchyChangeListener mPassThroughListener;

public XRadioGroup(Context context) {
    super(context);
    init();
}

public XRadioGroup(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public XRadioGroup(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public XRadioGroup(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    init();
}

private void init() {
    mChildOnCheckedChangeListener = new CheckedStateTracker();
    mPassThroughListener = new PassThroughHierarchyChangeListener();
    super.setOnHierarchyChangeListener(mPassThroughListener);
}

/**
 * {@inheritDoc}
 */
@Override
public void setOnHierarchyChangeListener(OnHierarchyChangeListener listener) {
    // the user listener is delegated to our pass-through listener
    mPassThroughListener.mOnHierarchyChangeListener = listener;
}

/**
 * {@inheritDoc}
 */
@Override
protected void onFinishInflate() {
    super.onFinishInflate();

    // checks the appropriate radio button as requested in the XML file
    if (mCheckedId != -1) {
        mProtectFromCheckedChange = true;
        setCheckedStateForView(mCheckedId, true);
        mProtectFromCheckedChange = false;
        setCheckedId(mCheckedId);
    }
}

private void setViewState(View child) {
    if (child instanceof RadioButton) {
        final RadioButton button = (RadioButton) child;
        if (button.isChecked()) {
            mProtectFromCheckedChange = true;
            if (mCheckedId != -1) {
                setCheckedStateForView(mCheckedId, false);
            }
            mProtectFromCheckedChange = false;
            setCheckedId(button.getId());
        }
    } else if (child instanceof ViewGroup) {
        ViewGroup view = (ViewGroup) child;
        for (int i = 0; i < view.getChildCount(); i++) {
            setViewState(view.getChildAt(i));
        }
    }
}

@Override
public void addView(View child, int index, ViewGroup.LayoutParams params) {
    setViewState(child);
    super.addView(child, index, params);
}

/**
 * <p>Sets the selection to the radio button whose identifier is passed in
 * parameter. Using -1 as the selection identifier clears the selection;
 * such an operation is equivalent to invoking {@link #clearCheck()}.</p>
 *
 * @param id the unique id of the radio button to select in this group
 * @see #getCheckedRadioButtonId()
 * @see #clearCheck()
 */
public void check(@IdRes int id) {
    // don't even bother
    if (id != -1 && (id == mCheckedId)) {
        return;
    }

    if (mCheckedId != -1) {
        setCheckedStateForView(mCheckedId, false);
    }

    if (id != -1) {
        setCheckedStateForView(id, true);
    }

    setCheckedId(id);
}

private void setCheckedId(@IdRes int id) {
    mCheckedId = id;
    if (mOnCheckedChangeListener != null) {
        mOnCheckedChangeListener.onCheckedChanged(this, mCheckedId);
    }
}

private void setCheckedStateForView(int viewId, boolean checked) {
    View checkedView = findViewById(viewId);
    if (checkedView != null && checkedView instanceof RadioButton) {
        ((RadioButton) checkedView).setChecked(checked);
    }
}

/**
 * <p>Returns the identifier of the selected radio button in this group.
 * Upon empty selection, the returned value is -1.</p>
 *
 * @return the unique id of the selected radio button in this group
 * @attr ref android.R.styleable#RadioGroup_checkedButton
 * @see #check(int)
 * @see #clearCheck()
 */
@IdRes
public int getCheckedRadioButtonId() {
    return mCheckedId;
}

/**
 * <p>Clears the selection. When the selection is cleared, no radio button
 * in this group is selected and {@link #getCheckedRadioButtonId()} returns
 * null.</p>
 *
 * @see #check(int)
 * @see #getCheckedRadioButtonId()
 */
public void clearCheck() {
    check(-1);
}

/**
 * <p>Register a callback to be invoked when the checked radio button
 * changes in this group.</p>
 *
 * @param listener the callback to call on checked state change
 */
public void setOnCheckedChangeListener(OnCheckedChangeListener listener) {
    mOnCheckedChangeListener = listener;
}

/**
 * {@inheritDoc}
 */
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
    return new XRadioGroup.LayoutParams(getContext(), attrs);
}

/**
 * {@inheritDoc}
 */
@Override
protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {
    return p instanceof XRadioGroup.LayoutParams;
}

@Override
protected LinearLayout.LayoutParams generateDefaultLayoutParams() {
    return new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
}

@Override
public CharSequence getAccessibilityClassName() {
    return XRadioGroup.class.getName();
}

/**
 * <p>This set of layout parameters defaults the width and the height of
 * the children to {@link #WRAP_CONTENT} when they are not specified in the
 * XML file. Otherwise, this class ussed the value read from the XML file.</p>
 * <p/>
 * <p>See
 * {@link  LinearLayout Attributes}
 * for a list of all child view attributes that this class supports.</p>
 */
public static class LayoutParams extends LinearLayout.LayoutParams {
    /**
     * {@inheritDoc}
     */
    public LayoutParams(Context c, AttributeSet attrs) {
        super(c, attrs);
    }

    /**
     * {@inheritDoc}
     */
    public LayoutParams(int w, int h) {
        super(w, h);
    }

    /**
     * {@inheritDoc}
     */
    public LayoutParams(int w, int h, float initWeight) {
        super(w, h, initWeight);
    }

    /**
     * {@inheritDoc}
     */
    public LayoutParams(ViewGroup.LayoutParams p) {
        super(p);
    }

    /**
     * {@inheritDoc}
     */
    public LayoutParams(MarginLayoutParams source) {
        super(source);
    }

    /**
     * <p>Fixes the child's width to
     * {@link android.view.ViewGroup.LayoutParams#WRAP_CONTENT} and the child's
     * height to  {@link android.view.ViewGroup.LayoutParams#WRAP_CONTENT}
     * when not specified in the XML file.</p>
     *
     * @param a          the styled attributes set
     * @param widthAttr  the width attribute to fetch
     * @param heightAttr the height attribute to fetch
     */
    @Override
    protected void setBaseAttributes(TypedArray a,
                                     int widthAttr, int heightAttr) {

        if (a.hasValue(widthAttr)) {
            width = a.getLayoutDimension(widthAttr, "layout_width");
        } else {
            width = WRAP_CONTENT;
        }

        if (a.hasValue(heightAttr)) {
            height = a.getLayoutDimension(heightAttr, "layout_height");
        } else {
            height = WRAP_CONTENT;
        }
    }
}

/**
 * <p>Interface definition for a callback to be invoked when the checked
 * radio button changed in this group.</p>
 */
public interface OnCheckedChangeListener {
    /**
     * <p>Called when the checked radio button has changed. When the
     * selection is cleared, checkedId is -1.</p>
     *
     * @param group     the group in which the checked radio button has changed
     * @param checkedId the unique identifier of the newly checked radio button
     */
    public void onCheckedChanged(XRadioGroup group, @IdRes int checkedId);
}

private class CheckedStateTracker implements CompoundButton.OnCheckedChangeListener {
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        // prevents from infinite recursion
        if (mProtectFromCheckedChange) {
            return;
        }

        mProtectFromCheckedChange = true;
        if (mCheckedId != -1) {
            setCheckedStateForView(mCheckedId, false);
        }
        mProtectFromCheckedChange = false;

        int id = buttonView.getId();
        setCheckedId(id);
    }
}

/**
 * <p>A pass-through listener acts upon the events and dispatches them
 * to another listener. This allows the table layout to set its own internal
 * hierarchy change listener without preventing the user to setup his.</p>
 */
private class PassThroughHierarchyChangeListener implements
        ViewGroup.OnHierarchyChangeListener {
    private ViewGroup.OnHierarchyChangeListener mOnHierarchyChangeListener;

    /**
     * {@inheritDoc}
     */
    public void onChildViewAdded(View parent, View child) {
        setListener(child);

        if (mOnHierarchyChangeListener != null) {
            mOnHierarchyChangeListener.onChildViewAdded(parent, child);
        }
    }

    /**
     * {@inheritDoc}
     */
    public void onChildViewRemoved(View parent, View child) {
        removeListener(child);

        if (mOnHierarchyChangeListener != null) {
            mOnHierarchyChangeListener.onChildViewRemoved(parent, child);
        }
    }
}

/**
 * 設(shè)置監(jiān)聽(tīng)
 *
 * @param child
 */
private void setListener(View child) {
    if (child instanceof RadioButton) {
        int id = child.getId();
        // generates an id if it's missing
        if (id == View.NO_ID) {
            id = child.hashCode();
            child.setId(id);
        }
        ((RadioButton) child).setOnCheckedChangeListener(
                mChildOnCheckedChangeListener);
    } else if (child instanceof ViewGroup) {
        ViewGroup view = (ViewGroup) child;
        for (int i = 0; i < view.getChildCount(); i++) {
            setListener(view.getChildAt(i));
        }
    }
}


/**
 * 移除監(jiān)聽(tīng)
 *
 * @param child
 */
private void removeListener(View child) {
    if (child instanceof RadioButton) {
        ((RadioButton) child).setOnCheckedChangeListener(null);
    } else if (child instanceof ViewGroup) {
        ViewGroup view = (ViewGroup) child;
        for (int i = 0; i < view.getChildCount(); i++) {
            removeListener(view.getChildAt(i));
        }
    }
  }
}

在public void addView(View child, int index, ViewGroup.LayoutParams params)方法中調(diào)用的private void setViewState(View child)，setViewState通過(guò)遞歸來(lái)實(shí)現(xiàn)設(shè)置RadioButton的初始狀態(tài)。在PassThroughHierarchyChangeListener中增加了private void setListener(View child)和private void removeListener(View child)分別用來(lái)處理設(shè)置監(jiān)聽(tīng)和移除監(jiān)聽(tīng)。

詳細(xì)的代碼可以查看Github：XRadioGroup。

如何使用

java代碼中使用方式與android.widget.RadioGroup完全一致

XRadioGroup xRadioGroup = (XRadioGroup) findViewById(R.id.xRadioGroup);
xRadioGroup.setOnCheckedChangeListener(new XRadioGroup.OnCheckedChangeListener() {
     @Override
     public void onCheckedChanged(XRadioGroup group, @IdRes int checkedId) {
          Log.d("TAG", checkedId + "is checked");
     }
 });

在xml中你可以里面嵌套使用

<me.shihao.library.XRadioGroup
        android:id="@+id/xRadioGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true">

            <RadioButton
                android:id="@+id/radioButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_alignParentTop="true"
                android:checked="true"
                android:text="New RadioButton"/>

            <RadioButton
                android:id="@+id/radioButton2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:layout_gravity="center_horizontal"
                android:text="New RadioButton"/>

            <RadioButton
                android:id="@+id/radioButton3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_below="@+id/radioButton"
                android:layout_gravity="center_horizontal"
                android:text="New RadioButton"/>

            <RadioButton
                android:id="@+id/radioButton4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_alignTop="@+id/radioButton3"
                android:text="New RadioButton"/>

            <RadioButton
                android:id="@+id/radioButton5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/radioButton3"
                android:layout_centerHorizontal="true"
                android:text="New RadioButton"/>

            <RadioButton
                android:id="@+id/radioButton6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/radioButton5"
                android:layout_alignStart="@+id/radioButton5"
                android:layout_below="@+id/radioButton5"
                android:text="New RadioButton"/>
        </RelativeLayout>
    </me.shihao.library.XRadioGroup>

詳細(xì)的使用代碼可以查看Github：XRadioGroup。

gradle快速集成

allprojects {
  repositories {
       ...
      maven { url 'https://www.jitpack.io' }
  }
}

dependencies {
  compile 'com.github.fodroid:XRadioGroup:v1.1'
}

如果你覺(jué)得有用，請(qǐng)?jiān)贕ithub不吝給我一個(gè)Star，非常感謝。

寫在最后的話：個(gè)人能力有限，歡迎大家在下面吐槽。喜歡的話就為我點(diǎn)一個(gè)贊吧。也歡迎 Fork Me On Github 。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容