logo标签列表

如何创建圆形复选框？

androidandroid-checkbox
19

我在创建Android中的圆形复选框时遇到了问题。我尝试了许多方法，但我的问题没有解决。我创建了形状并应用于复选框，但问题仍未解决。请帮助我如何创建圆形复选框。进入图片描述

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

你试过这个吗？http://stackoverflow.com/questions/38798168/customized-circular-checkbox-in-android - chirag90
我尝试了，但问题没有解决。 - Prabha Karan
问题仍未解决。 - Prabha Karan
请在此处发布您的代码，如果出现任何错误，请一并发布。 - chirag90
请查看此链接，它解决了我的问题。https://www.tutorialsbuzz.com/2019/09/android-rounded-checkbox-vector-drawable.html - ikmazameti
显示剩余3条评论
6个回答
66

经过一段时间的努力，我已经创建了这个模板，你可以使用它。根据需要，您可能需要进行修改。

在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）

未选中状态

当选中时，它将如下所示：

已选中状态

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

1
形状在Android 4.4版本上看起来很奇怪...有什么建议可以让它在这里正常工作吗？除此之外，复选框很好:) - JayB
嗨@JayB，我还没有看过4.4版本，我是在marshmellow 6.0中创建的。你可以尝试修改checked.xml和unchecked.xml。 - chirag90
2
太棒了！让我不用再使用背景图片了。 - SKG
9
许多先前的答案都被广泛接受，其中chirag90的答案是最好的，但需要大量编程。在我的答案中，我将重新采用他的概念，但会向您展示如何创建您自己的圆形复选框可绘制对象，而无需任何编码即可创建您想要的所有样式，然后您将使用这些可绘制对象来定义复选框的状态，就像在chirag90的答案中一样。
首先，进入 freelogomaker.com并创建您的可绘制对象，它非常易于使用，您可以创建任何东西，在网站上转到形状搜索栏，键入“round checkbox”，然后单击搜索按钮，将向您呈现多个可绘制对象列表，以便您选择。

checkbox

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

输入图像描述 未选中的复选框

输入图像描述 已选中的复选框

完成后，您可以将可绘制对象添加到具有相应名称的drawables文件夹中的已选中和未选中，完成所有操作后，现在按照chirag90的答案创建custom_checkbox.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>

现在，在您的布局中按照以下方式创建复选框

<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"来适应你的布局。
这是我的项目结果。 enter image description here 未选中 enter image description here 已选中
希望这能帮助到大家。
4
所有上面的答案都需要创建自定义的可绘制对象，而我们可以通过使用内置的矢量可绘制对象来实现这一点。请看这篇文章，它很好地解释了这个问题。
4
解决方案是正确的，但按照相同的流程，您可以在“checked.xml”中使用可绘制对象来更改形状。这个解决方案应该适用于API 21之前的Android设备，因为在xml drawable上没有形状的宽度或高度。 未选中的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>
此外，Android矢量图中的勾选箭头图像是“Check”，使用它，您应该可以获得具有Material Design样式的复选框。 - Rodolfo Abarca
这个解决方案比其他的更好 :) - user8919158
2
除了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>

enter image description here

0

所有提出的选项都是无稽之谈，因为它们难以实现且不美观。我的解决方案：学习矢量动画，并通过ShapeShifter.design使一切变得美丽。

  • Create TWO animations Start_to_End and End_to_Start;

  • Export the created animation in the format AnimationVectorDrawable;

  • Move your animation to the resources folder drawable;

  • Place ImageView in XML;

  • For convenience, create CustomImageView { Do not worry below will be an example };

    @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)
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接