我想创建自定义的按钮,并且需要它是圆形。如何创建一个圆形的按钮? 我不认为可以使用draw9patch实现。
另外,我不知道如何制作自定义按钮!
你有什么建议吗?
我想创建自定义的按钮,并且需要它是圆形。如何创建一个圆形的按钮? 我不认为可以使用draw9patch实现。
另外,我不知道如何制作自定义按钮!
你有什么建议吗?
可以像这样使用xml drawable:
将以下内容保存为round_button.xml
,并放在drawable
文件夹中:
<?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材料效果: 尽管FloatingActionButton
是更好的选择,但如果您想使用xml选择器完成它,可以在res
中创建一个名为drawable-v21
的文件夹,然后将另一个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>
将其设置为xml中Button
的背景,如下所示:
<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" />
重要提示:
Markushi编写了一个带有惊人效果的圆形按钮小部件,点击这里!
使用官方的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:insetLeft
,android:insetTop
,android:insetRight
,android:insetBottom
来使按钮上的图标居中,避免出现额外的填充空间。
使用app:shapeAppearanceOverlay
属性可以获得圆角效果,在这种情况下,您将获得一个圆形按钮。
<style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">50%</item>
</style>
最终结果:
使用Jetpack Compose,你可以:
Button(
onClick = { /* Do something! */ },
modifier = Modifier.width(48.dp).height(48.dp),
shape = CircleShape
) {
Icon(Icons.Filled.Add, "")
}
app:iconPadding="0dp"
来确保图标居中。在找到这个方法之前,我浪费了很多时间尝试居中。看起来app:iconGravity
缺少“center”值是一个疏忽。 - scottyabAngryTool for custom android button
您可以使用此工具网站制作任何类型的自定义Android按钮... 我使用这个工具网站制作了圆形和带有圆角的正方形按钮.. 访问它,也许它会帮助您。
你可以使用来自AndroidX材料库的MaterialButton
<com.google.android.material.button.MaterialButton
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_margin="10dp"
android:insetLeft="0dp"
android:insetTop="0dp"
android:insetRight="0dp"
android:insetBottom="0dp"
app:cornerRadius="50dp"
app:icon="@drawable/ic_camera"
app:iconGravity="textStart"
app:iconPadding="0dp"
app:iconSize="35dp" />
这样它将会是这个样子
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
。
如果您想使用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>
不幸的是,使用XML可绘制对象并覆盖背景意味着您必须显式设置颜色,而不能使用应用程序样式颜色。
与其为每种行为硬编码按钮颜色,我选择了硬编码角半径,感觉略微不那么狡猾,并保留了所有默认按钮行为(在按下时更改颜色和其他视觉效果),默认情况下使用应用程序样式颜色:
将android:layout_height
和android:layout_width
设置为相同的值
将app:cornerRadius
设置为高度/宽度的一半
(实际上,任何大于或等于高度/宽度一半的值都可以,因此为了避免在更新高度/宽度时需要更改半径,您可以将其设置为非常高的值,例如1000dp
,风险在于如果这种行为发生变化,则可能会出现问题。)
将android:insetBottom
和android:insetTop
设置为0dp
以获得完美的圆形
例如:
<Button
android:insetBottom="0dp"
android:insetTop="0dp"
android:layout_height="150dp"
android:layout_width="150dp"
app:cornerRadius="75dp"
/>
以下是简单的操作步骤,您可以在drawable.xml中创建一个可绘制资源文件,例如round_button.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/button_start_gradient_color"/>
</shape>
</item>
<item
android:drawable="@drawable/microphone"/>
</layer-list>
如果你想使用 ImageButton,可以使用以下代码。它会创建带有材质水波纹效果的圆形 ImageButton。
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_settings_6"
android:background="?selectableItemBackgroundBorderless"
android:padding="10dp"
/>