Question

我正在尝试创建自定义RadioButton / CheckBox，如下图所示。

我还可以为每个按钮创建图像背景，使其看起来像这样，但我不认为这是唯一的方法。

我尝试使用android:drawableLeft，android:drawableRight，android:drawableTop，android:drawableBottom等属性应用XML布局中的更改，但无法获得所需的结果。

还找到same question with accepted answer但未找到实施。

我也创建了一个CustomRadioButton类，但它没有呈现任何内容。

CustomRadioButton.java

import android.content.Context;
import android.content.res.TypedArray;
import android.support.v7.widget.AppCompatRadioButton;
import android.support.v7.widget.CardView;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.CheckBox;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.app.togo.R;

/**
 * Created by Darshan on 07-02-2018.
 *
 * @author Darshan Parikh (parikhdarshan36@gmail.com)
 */

public class CustomRadioButton extends AppCompatRadioButton {

    String rbText;
    boolean rbIsChecked;
    int rbImageResource;
    CheckBox checkBox;

    public CustomRadioButton(Context context) {
        super(context);
        init(null);
    }

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

    public void init(AttributeSet attrs) {
        if (attrs != null) {
            TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.CustomRadioButton);
            rbText = a.getString(R.styleable.CustomRadioButton_rb_text);
            rbIsChecked = a.getBoolean(R.styleable.CustomRadioButton_rb_isChecked, true);
            rbImageResource = a.getResourceId(R.styleable.CustomRadioButton_rb_imgSrc, R.drawable.ic_car_clr);
            a.recycle();
        } else {
            rbText = getRBText();
            rbIsChecked = getRBIsChecked();
            rbImageResource = getRBImageResource();
        }

        setText("");
        setButtonDrawable(android.R.color.transparent);

        LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = inflater.inflate(R.layout.layout_custom_checkbox, null);
        CardView cardView = (CardView) view;
        RelativeLayout rootLayout = (RelativeLayout) cardView.getChildAt(0);

        ImageView imageView = (ImageView) rootLayout.getChildAt(0);
        TextView textView = (TextView) rootLayout.getChildAt(1);
        checkBox = (CheckBox) rootLayout.getChildAt(2);

        imageView.setImageResource(rbImageResource);
        textView.setText(rbText);
        checkBox.setChecked(rbIsChecked);
    }

    public String getRBText() {
        return rbText;
    }

    public boolean getRBIsChecked() {
        return rbIsChecked;
    }

    public int getRBImageResource() {
        return rbImageResource;
    }

    @Override
    public void toggle() {
        super.toggle();
        checkBox.setChecked(isChecked());
    }
}

Answer 1

使用选择器的一种方法是切换两个drawable

例如：

custom_design.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">

     <item android:state_checked="true" android:drawable="@drawable/checked" />
     <item android:state_checked="false" android:drawable="@drawable/unchecked" />

</selector>

在CheckBox或RadioButton设置android：button属性到custom_checkbox_design.xml drawable，如

android:button="@drawable/custom_design"

Answer 2

您可以使用FrameLayout实现

<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content"
android:layout_height="wrap_content"
>

<ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/your_drawable"
    android:layout_margin="@dimen/_16sdp"/>


<RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end"
  />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="corporate"
    android:layout_gravity="bottom|center_horizontal"/>

</FrameLayout>

如何创建自定义RadioButton / CheckBox？

2 个答案: