本文介绍了带边框的材料设计按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我知道如何制作带有颜色填充的 Material Design 按钮:

style="@style/Widget.AppCompat.Button.Colored"

和无边框透明按钮:

style="@style/Widget.AppCompat.Button.Borderless.Colored"

但是,有没有办法让 Material design 有边框(内部透明)按钮?像下面这样?

解决方案

您也可以使用

您还可以使用 ShapeApperance 自定义角点(需要 1.1.0 版本)

<项目名称=shapeAppearanceOverlay">@style/MyShapeAppearance</item></风格><item name="cornerFamilyTopLeft">圆形</item><项目名称=cornerFamilyBottomLeft">圆形</item><item name="cornerFamilyTopRight">cut</item><item name="cornerFamilyBottomRight">cut</item><项目名称=cornerSize">8dp</item></风格>

官方文档在


OLD(支持库)

使用新的 支持库 28.0.0,设计库现在包含 Material Button.

您可以使用以下命令将此按钮添加到我们的布局文件中:

您可以使用以下属性自定义按钮:

  • app:backgroundTint: 用于为按钮的背景应用色调.如果您想更改按钮的背景颜色,请使用此属性而不是背景.

  • app:strokeColor:按钮描边使用的颜色

  • app:strokeWidth: 按钮描边的宽度

还有

I know how to make Material Design button with color fill:

style="@style/Widget.AppCompat.Button.Colored"

And no-bordered transparent button:

style="@style/Widget.AppCompat.Button.Borderless.Colored"

However, is there a way to make Material design bordered (transparent inside) button? Something like below?

解决方案

You can also use the Material Components for Android.

Add the dependency to your build.gradle:

dependencies { implementation 'com.google.android.material:material:1.3.0' }

In this case you can use the MaterialButton in your layout file:

<com.google.android.material.button.MaterialButton
   ....
   style="@style/Widget.MaterialComponents.Button.OutlinedButton"
   app:cornerRadius=".."
   app:strokeColor="@color/colorPrimary"/>

Apply the style @style/Widget.MaterialComponents.Button.OutlinedButton.

In your case use the app:cornerRadius attribute to change the size of corner radius. This will round off the corners with specified dimensions.
Use te attribute app:strokeColor and app:strokeWidth to change the color and the width of the border.

You can also customize the corners using ShapeApperance (it requires version 1.1.0)

<style name="MyButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
    <item name="shapeAppearanceOverlay">@style/MyShapeAppearance</item>
</style>
<style name="MyShapeAppearance" parent="">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerFamilyBottomLeft">rounded</item>
    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerSize">8dp</item>
</style>

The official doc is here and all the android specs here.


With jetpack compose 1.0.x you can use the OutlinedButton and the border attribute:

    OutlinedButton(
        onClick = { },
        border = BorderStroke(1.dp, Color.Blue),
        shape = RoundedCornerShape(8.dp)
    ) {
        Text(text = "Save")
    }

OLD (support library)

With the new Support Library 28.0.0, the Design Library now contains the Material Button.

You can add this button to our layout file with:

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="XXXX"
    android:textSize="18sp"
    app:icon="@drawable/ic_android_white_24dp" />

You can customize the button with these attributes:

  • app:backgroundTint: Used to apply a tint to the background of the button. If you wish to change the background color of the button, use this attribute instead of background.

  • app:strokeColor: The color to be used for the button stroke

  • app:strokeWidth: The width to be used for the button stroke

Also

这篇关于带边框的材料设计按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-20 09:58
查看更多