Question

我正面临着在android中创建圆形复选框的问题。我尝试了很多方法，但我的问题没有解决。我创建了形状并应用于复选框，然后问题也没有解决。请帮我如何创建圆形复选框。

如何创建如图所示的圆形复选框。

Answer 1

花了一些时间后，我创建了这个模板，你可以使用它。 您可能需要根据需要进行修改。

在activity.xml中

<CheckBox
    android:id="@+id/checkb"
    android:layout_width="115dp"
    android:layout_height="50dp"
    android:button="@drawable/custom_checkbox"
    android:scaleX="3"
    android:scaleY="3"
    android:layout_centerVertical="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_marginRight="15dp"
    android:layout_marginEnd="15dp" />

在drawable文件夹中创建一个名为custom_checkbox.xml的新xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="true"
        android:drawable="@drawable/checked" />
    <item android:state_pressed="true"
        android:drawable="@drawable/checked" />
    <item android:state_pressed="false"
        android:drawable="@drawable/unchecked" />
</selector>

在drawable文件夹中创建一个名为checked.xml的新xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <layer-list>
            <item>
                <shape android:shape="oval">
                    <corners android:radius="1dp" />
                    <stroke
                        android:width="1dp"
                        android:color="#777" />
                    <gradient
                        android:startColor="#990000"
                        android:centerColor="#990000"
                        android:endColor="#990000"
                        android:angle="270" />
                    <size
                        android:width="30dp"
                        android:height="30dp" />
                </shape>
                </item>

            <item
                android:width="8dp"
                android:height="2dp"
                android:top="20dp"
                android:left="6dp">
                <rotate
                    android:fromDegrees="45">
                    <shape android:shape="rectangle">
                        <solid android:color="#fff"/>
                    </shape>
                </rotate>
            </item>

            <item
                android:width="19dp"
                android:height="2dp"
                android:top="16dp"
                android:left="9dp">
                <rotate
                    android:fromDegrees="-45">
                    <shape android:shape="rectangle">
                        <solid android:color="#fff"/>
                    </shape>
                </rotate>
            </item>
        </layer-list>
    </item>

</selector>

在drawable文件夹中创建一个名为unchecked.xml的新xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
        <corners android:radius="1dp" />
        <stroke
            android:width="1dp"
            android:color="#777" />
        <gradient
            android:startColor="#990000"
            android:centerColor="#990000"
            android:endColor="#990000"
            android:angle="270" />
        <size
            android:width="30dp"
            android:height="30dp" />
    </shape>

未选中时，如下所示。（您可以在checked.xml之间添加代码，并在未选中复选框时修改顶部和左侧以给出X）

选中后，它将如下所示

如果有效则将其标记为答案。

Answer 2

接受的解决方案是正确的，但是按照相同的流程，您可以更改形状以在＆＃34; checked.xml＆＃34;上使用drawable。此解决方案应该在API 21之前与Android设备一起使用，因为xml drawables上的形状没有宽度或高度。

未选中的XML：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">


        <solid android:color = "@color/lightgray" />
</shape>

检查XML：

<?xml version="1.0" encoding="utf-8"?>
      <layer-list xmlns:android = "http://schemas.android.com/apk/res/android">
            <item>
                <shape android:shape="oval">
                    <solid android:color="@color/colorPrimary" />
                </shape>
                </item>

            <item
                         android:drawable="@drawable/check_arrow_png" />
        </layer-list>

Answer 3

以上所有答案都需要创建自定义可绘制对象，而我们可以通过使用内置矢量可绘制对象来实现这一点。看看 this 的帖子，它很好地解释了这一点。

Answer 4

chirag90的答案是最好的，但也需要很多编码，因此很多以前的答案都被人们接受，在我的答案中，我将重提他的概念，但将向您展示如何创建具有所有样式的自己的圆形复选框可绘制对象您不需要任何编码就可以使用此drawable来定义复选框的状态，就像在chirag90的答案中

首先转到freelogomaker.com并创建您的可绘制对象，它非常易于使用并且可以创建任何东西，在网站上，转到形状的搜索栏并输入“圆形复选框”，然后单击搜索按钮，将会显示多个可绘制对象的列表，因此您可以选择

上面是我选择的可绘制对象，根据需要进行自定义并保存，然后转到appiconmaker.co，并使用创建的可绘制对象生成可绘制对象的各种设计尺寸，例如mdpi，hdpi，xhdpi和xxhdpi，如下所示我制作的绘画

取消选中的复选框

选中的复选框

完成后，您就可以将drawables添加到项目中，并且在drawables文件夹中选中并取消选中相应的核心响应名称，一旦完成，现在就创建custom_checkbox.xml，就像在chirag90的答案中一样

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="true"
        android:drawable="@drawable/checked" />
    <item android:state_pressed="true"
        android:drawable="@drawable/checked" />
    <item android:state_pressed="false"
        android:drawable="@drawable/unchecked" />
</selector>

现在在您的布局中创建如下复选框

<CheckBox
 android:id="@+id/checkman"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentEnd="true"
 android:layout_alignParentRight="true"
 android:layout_centerVertical="true"
 android:layout_marginRight="15dp"
 android:layout_marginEnd="15dp"
 android:button="@drawable/custom_checkbox"
 android:scaleX="0.8"
 android:scaleY="0.8" />

您我可以修改android:scaleX="0.8"和android:scaleY="0.8"以适合您的布局

这是我项目中的结果

未选中

已检查

希望这对很多人有帮助

Answer 5

所有建议的选项都是无稽之谈，因为它既困难又不美观，我的解决方案：学习矢量动画并使用ShapeShifter.design

使一切变得美丽

创建两个动画Start_to_End和End_to_Start；
以AnimationVectorDrawable格式导出创建的动画；
将动画移动到资源文件夹drawable；
将 ImageView 放在 XML 中；

为方便起见，创建CustomImageView { 不用担心下面会举个例子 };

@RequiresApi(Build.VERSION_CODES.M)
class CustomCheckBox(
context: Context,
attrs: AttributeSet
) : AppCompatImageView(context, attrs) {

private val TAG = this::class.simpleName

private val check =
  resources.getDrawable(R.drawable.avd_anim_start_to_end)!!.toAnimationVectorDrawable()
private val uncheck =
   resources.getDrawable(R.drawable.avd_anim_end_to_start)!!.toAnimationVectorDrawable()

init {
  setImageDrawable(check)
  setOnClickListener { animateCheckOrUncheck() }
}

private fun animateCheckOrUncheck() {
  check.registerAnimationCallback(object : Animatable2.AnimationCallback() {
      override fun onAnimationEnd(drawable: Drawable?) {
          Log.i(TAG, "onAnimationEnd: check")
          check.reset()
          setImageDrawable(uncheck)
      }
  })

  uncheck.registerAnimationCallback(object : Animatable2.AnimationCallback() {
      override fun onAnimationEnd(drawable: Drawable?) {
          Log.i(TAG, "onAnimationEnd: uncheck")
          uncheck.reset()
          setImageDrawable(check)
      }
  })

  (drawable as AnimatedVectorDrawable).start()
 }
}

@RequiresApi(Build.VERSION_CODES.LOLLIPOP)
private fun Drawable.toAnimationVectorDrawable(): AnimatedVectorDrawable {
return (this as AnimatedVectorDrawable)
}

而这一切都只是拿来使用它? ? ?

PS.Vel_daN：爱你所做的?

Answer 6

除了Rodolfo的答案之外，我还可以添加：如果可绘制对象太大，则可以使用inset属性。注意：@ chirag90的解决方案仅适用于API 23及更高版本。注意：vector drawable的显示效果可能很差。

Checked.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid
                android:color="@color/col_chat_selected"/>
            <size
                android:width="35dp"
                android:height="35dp"/>
        </shape>
    </item>

    <item>
        <inset
            android:drawable="@drawable/shape"
            android:insetBottom="10dp"
            android:insetLeft="10dp"
            android:insetRight="10dp"
            android:insetTop="10dp"/>
    </item>

</layer-list>

Answer 7

我知道这是一个旧线程，但我有一个问题。我已经实现了上面建议的自定义复选框，但无论我做什么，我都会得到默认的主题颜色，如下所示：

这是复选框的代码：

<CheckBox
            android:id="@+id/item_checkbox"
            android:layout_width="30dp"
            android:layout_height="86dp"
            android:layout_marginStart="8dp"
            android:button="@drawable/custom_checkbox"
            android:checked="true"
            app:backgroundTint="@null"
            app:buttonTint="@null"
            android:scaleX="0.6"
            android:scaleY="0.6"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

有什么想法吗？

如何创建圆形的复选框？

7 个答案:

所有建议的选项都是无稽之谈，因为它既困难又不美观，我的解决方案：学习矢量动画并使用ShapeShifter.design