自定义圈子按钮


186

我想创建自定义按钮,并且需要使其为圆形。如何创建一个圆形按钮?我认为用draw9patch不可能。

另外我也不知道如何制作自定义按钮!

你有什么建议吗?


您必须扩展按钮类并覆盖onDraw方法。
Ashwin N Bhanushali 2012年

2
但是问题是如果我扩大了,用户碰到了圆圈,Onlcick将被呼叫,如何解决这个问题。
2012年

为什么不将圆形图像设置为按钮的背景呢?
MKJParekh 2012年

我做了简单的OnDrawn,它显示在“设计”视图上,但是当我要运行应用程序时,它在加载时会出现此问题:android.view.InflateException:二进制XML文件第52行:膨胀类com.inaros.magicbox._customButtonPlay的错误
阿塔

Answers:


346

像这样使用xml drawable:

将下面的内容round_button.xmldrawable文件夹中

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="oval">
            <solid android:color="#fa09ad"/>
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="#c20586"/>
        </shape>
    </item>
</selector>

Android Material Effect:虽然FloatingActionButton是更好的选择,但是如果要使用xml选择器进行创建,请在中创建一个文件夹drawable-v21res然后round_button.xml使用以下xml 保存另一个文件夹

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#c20586">
    <item>
        <shape android:shape="oval">
            <solid android:color="#fa09ad"/>
        </shape>
    </item>
</ripple>

并将其设置为Buttonxml中的背景,如下所示:

<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:text="hello"
android:textColor="#fff" />

重要:

  1. 如果您希望它显示所有这些状态(启用,禁用,突出显示等),请使用此处所述的选择器。
  2. 您必须保留两个文件,以使drawable向后兼容。否则,您将在以前的android版本中遇到怪异的异常。

通过drawable文件夹,您是要打开一个名为“ drawable”的文件夹,还是将其保存为drawable-mdpi,hdpi等?
Jjang 2015年

@Jjang没有,你只需要保存为“绘制”文件夹,可绘制任何XML资源通常保存在“绘制”,而不是在MDPI,华电国际等
阿迪勒·苏姆罗

ķTHX,我没有绘制文件夹到现在为止(仅MDPI,华电国际...和-v21):)
Jjang

PS如何为按钮提供默认的波纹颜色?就像灰色的那样,默认情况下会为应用程序中的所有按钮着色。
Jjang 2015年

@AdilSoomro,我需要您的电子邮件地址或给我电子邮件adilm717@gmail.com,来自pak的
adil

67

Markushi编写了一个具有惊人效果的圆形按钮小部件。点击这里

在此处输入图片说明


如何将其用于非圆形图像?
tomsoft

3
请注意:此答案中链接的库现在已弃用。作者(Markushi)建议改用浮动操作按钮
恢复莫妮卡2015年

@ABoschman我们可以在圆圈按钮小部件中放置文本吗?或者只是为了绘项目
Ruchir Baronia酒店

@RuchirBaronia我认为您真的应该考虑使用Android FAB。您想在一个小圆形按钮内放置多少散文?它似乎是为图标制作的。退房:google.com/design/spec/components/...
恢复莫妮卡

@ABoschman嘿,但我真的很喜欢此按钮在此库中的作用。有什么办法吗?
Ruchir Baronia


12

使用官方的Material Components库,您可以使用MaterialButton应用Widget.MaterialComponents.Button.Icon样式。

就像是:

   <com.google.android.material.button.MaterialButton
            android:layout_width="48dp"
            android:layout_height="48dp"
            style="@style/Widget.MaterialComponents.Button.Icon"
            app:icon="@drawable/ic_add"
            app:iconSize="24dp"
            app:iconPadding="0dp"
            android:insetLeft="0dp"
            android:insetTop="0dp"
            android:insetRight="0dp"
            android:insetBottom="0dp"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
            />

目前app:iconPadding="0dp"android:insetLeftandroid:insetTopandroid:insetRightandroid:insetBottom需要的属性居中按钮避免额外的填充空间的图标。

使用该app:shapeAppearanceOverlay属性可以获取圆角。在这种情况下,您将有一个圆圈。

  <style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
  </style>

最终结果:

在此处输入图片说明


1
谢谢@Gabriele Mariotti。值得强调的是需要app:iconPadding="0dp"确保图标居中。我花了很多时间去尝试中心,直到找到了。app:iconGravity缺少“中心”值似乎是一种疏忽。
scottyab

1
谢谢@Gabriele Mariotti。对我来说很好!
Androidz

2

如果要使用VectorDrawable和ConstraintLayout

<FrameLayout
            android:id="@+id/ok_button"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:foreground="?attr/selectableItemBackgroundBorderless"
            android:background="@drawable/circle_button">
                <android.support.constraint.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    <ImageView
                        android:id="@+id/icon_of_button"
                        android:layout_width="32dp"
                        android:layout_height="32dp"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:srcCompat="@drawable/ic_thumbs_up"/>
                    <TextView
                        android:id="@+id/text_of_button"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        app:layout_constraintTop_toBottomOf="@+id/icon_of_button"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        android:layout_marginTop="5dp"
                        android:textColor="@android:color/white"
                        android:text="ok"
                        />
                </android.support.constraint.ConstraintLayout>
            </FrameLayout>

圆圈背景:circle_button.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="1000dp" />
<solid android:color="#41ba7a" />
<stroke
    android:width="2dip"
    android:color="#03ae3c" />
<padding
    android:bottom="4dp"
    android:left="4dp"
    android:right="4dp"
    android:top="4dp" />
</shape>

2

对于FAB外观按钮,此样式在上MaterialButton

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
    app:cornerRadius="28dp"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:text="1" />

结果:

在此处输入图片说明

如果更改大小,请小心使用按钮大小的一半作为app:cornerRadius

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.