Android材料设计按钮 - 5.0以下版本

Question

Android材料设计按钮 - 5.0以下版本

androidbuttonmaterial-design

75

如何按照谷歌的 Material Design 指南实现“凸起按钮”和“扁平按钮”？

Raised buttons（凸起按钮）可以为大多数平面布局增加维度。它们强调繁忙或宽敞空间中的功能。

raised buttons

使用扁平按钮来创建工具栏和对话框，以避免过度的层叠。

flat buttons

来源：http://www.google.com/design/spec/components/buttons.html

- rickyalbert

最佳解决方案 https://dev59.com/MHI_5IYBdhLWcg3wHfOr#27316880 - Zar E Ahmer

1

可能是 https://dev59.com/VF8d5IYBdhLWcg3w3FZk 的重复问题。 - rds

也许这应该是一个重复（我不确定）。但这个关闭理由是错误的。 - Yishai

8个回答

83

为了实现扁平按钮，您只需要添加style="?android:attr/borderlessButtonStyle"。

示例：

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="DONE"
    style="?android:attr/borderlessButtonStyle"
    />

这里是该属性的参考文献。

- Stephen Kaiser

3

太棒了，它还支持追溯到API 11级。 - Gabriel

@StephenKaiser 那凸起的按钮怎么样？ - Farbod Salamat-Zadeh

4

使用AppCompat库时，style="@style/Widget.AppCompat.Button.Borderless"表示无边框的AppCompat按钮样式。 - Michael Kazarian

4

您可以使用第三方库MaterialDesignLibrary。

这是一个包含Android L组件的库，可在Android 2.2中使用。如果您想要使用此库，只需下载MaterialDesign项目，将其导入到您的工作空间，并在您的Android项目设置中将该项目添加为库即可。

- Vijay Vankhede

2

我将其用作一个AppCompat按钮的背景，并且它呈现出一个凸起的按钮（带有涟漪效果），希望能够帮到你。

myRaisedButton.xml - 存放在 drawable 文件夹中：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
               android:shape="rectangle">
            <solid android:color="@color/yourColor"/>
            <corners android:radius="6dp"/>
        </shape>
    </item>
    <item android:drawable="?android:selectableItemBackground"/>
</layer-list>

styles.xml:

<resources>

    <style name="AppTheme" parent="AppTheme.Base"/>
    <style name="AppTheme.Base" parent="Theme.AppCompat">

</resources>

styles.xml (v21):

...
<style name="AppTheme" parent="AppTheme.Base">

layout.xml:

...
android:background="@drawable/myRaisedButton"

- thanosChatz

你在哪里使用这个xml？在drawable文件夹中吗？ - rickyalbert

是的，例如命名为myRaisedButton.xml，并在布局中使用android:background="@drawable/myRaisedButton"访问它。 - thanosChatz

是的，我做了那个，但如果我不删除最后一行就会出现这个异常：“二进制 XML 文件第10行：<item>标记需要一个'drawable'属性或定义drawable的子标记”。 - rickyalbert

1

你为什么让styles.xml文件都指向同一个样式（“AppTheme.Base”）？我在这里看不到增加的功能... - android developer

3

此代码会生成一个异常，无法创建一个 raised button。 - Steve M

显示剩余3条评论

2

我正在开发一个材料兼容性库。其中包含按钮类，支持动态阴影和触摸波纹效果。也许您会发现它很有用。这是链接。

- Zielony

哇，太棒了！如何通过Gradle包含你的AAR库？ - kiruwka

我想知道，在实际应用中使用它有多稳定？你是否遇到过与按钮：阴影/涟漪相关的崩溃问题？谢谢。 - kiruwka

我正在真实项目中测试它，并尽力使其正常工作。该库正在进行大量开发，我正在尝试在24小时内修复所有报告的错误。在大多数情况下，该库不会崩溃，而是产生动画故障或仅出现延迟。目前最大的两个问题是1.缺乏渲染线程（引入Lollipop）和2.与所有GPU和UI的兼容性（例如Galaxy系列中使用的TouchWiz）。如果您有任何其他问题，想要请求功能或报告错误，请随时与我联系。我刚刚更新了我的博客上的“关于”页面，以使其更加便捷。 - Zielony

1

您需要的是材料设计按钮库 - 您已经得到了它 - https://github.com/navasmdc/MaterialDesignLibrary

- Inoy

1

如果想使用appcompat库进行操作，请查看我对另一个问题的回答：https://dev59.com/s18d5IYBdhLWcg3wTQon#27696134

这将展示如何在Android 5.0及之前的版本（最高支持API级别11）中使用凸起和扁平按钮！

- Peter

style="?android:attr/borderlessButtonStyle" 不是一个 appCompat 样式。您的答案仅适用于 API > 11。 - Shine

0

您可能还需要为按钮添加底部边距，以便能够看到凸起按钮的阴影效果：

<item name="android:layout_marginBottom">@dimen/activity_vertical_margin</item>
<item name="android:elevation">1dp</item>

- Ari Lacenski

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gabriel · Accepted Answer

这需要 Android 5.0 及以上版本

凸起按钮

从 Widget.Material.Button 继承按钮样式，标准的高程和凸起效果将会自动应用。

<style name="Your.Button" parent="android:style/Widget.Material.Button">
    <item name="android:background">@drawable/raised_button_background</item>
</style>

然后您需要创建一个raised_button_background.xml文件，其中包含按钮背景颜色，并将其放在涟漪标记内：

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:drawable="@color/button_color"/>
</ripple>

扁平化按钮

编辑：与其按照我之前的建议使用扁平化按钮，你应该跟随下面 Stephen Kaiser 给出的建议：

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="DONE"
    style="?android:attr/borderlessButtonStyle"
/>

编辑：如果你正在使用Support Library，你可以通过使用style="?attr/borderlessButtonStyle"在Pre-Lollipop设备上实现相同的结果。（注意没有android：）那么上面的例子就变成了

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="DONE"
    style="?attr/borderlessButtonStyle"
/>