如何创建圆形的复选框？

Question

我在 android 中创建圆形复选框时遇到问题。我尝试了很多方法，但我的问题不是 solved.I 创建形状并应用于复选框然后问题也不是 solved.Please 帮助我如何创建圆形复选框。

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

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" />

在名为 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>

在名为 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>

在名为 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>

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

选中后如下所示

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

Answer 2

接受的解决方案是正确的，但按照相同的流程，您可以更改形状以在 "checked.xml" 上使用可绘制对象此解决方案应该在 API 21 之前适用于 android 设备，因为xml 可绘制对象上的形状没有宽度或高度。

未勾选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

除了 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 4

以前的许多答案都被很好地接受了，chirag90 的答案是最好的，但也需要大量编码，在我的回答中，我将重新采用他的概念，但将向您展示如何创建自己的圆形复选框 drawables您想要的样式无需任何编码，然后您将使用此可绘制对象来定义复选框的状态，就像 chirag90 的回答

首先转到 freelogomaker.com 并创建您的可绘制对象，它非常易于使用，您可以创建任何东西，在网站上转到形状的搜索栏并键入 "round checkbox" 然后单击搜索按钮，将向您显示多个可绘制对象的列表，以便您选择

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

未选中的复选框

选中复选框

一旦完成，您就可以将可绘制对象添加到您的项目中，并在您的可绘制对象文件夹中选中和取消选中对应的名称，完成所有操作后现在创建 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

以上所有答案都需要创建自定义可绘制对象，而我们可以通过使用内置矢量可绘制对象来实现。看看 this post 它解释得很漂亮。

Answer 6

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

复选框的代码如下：

<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" />

有什么想法吗？

Answer 7

所有建议的选项都是废话，因为它很难而且不漂亮，我的解决方案：学习矢量动画并使一切变得美丽 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)
}

如何创建圆形的复选框？

How to create the checkBox in circular shape?

android

android-checkbox

所有建议的选项都是废话，因为它很难而且不漂亮，我的解决方案：学习矢量动画并使一切变得美丽 ShapeShifter.design