根据你的目的和意图来选择按钮样式

根据你的目的和意图来选择按钮样式

当一个app做得非常漂亮时，用户可能不会在意，但是他们往往会注意到app中做得糟糕的地方，因此app中每个布局都要选择使用正确的组件来实现，基于以上原因，这一点显得特别重要。对于按钮来说，也是很困难的，标准的Button通常有3种形式：扁平化、凸起、浮动式。选择什么样的Button样式取决于你想让该按钮有多突出。

等等，什么？一个按钮如何才能突出显示？

当提到“突出”这个字眼时，真正能获取到的是布局的层次，考虑一下布局的维度，你可能想说它是二维的。但我想说的是第三维：深度。假设主布局可以作为最底下一层，然后在其上布局各个view，ImageView和TextView有可能共享一层，可能Toolbar位于它们上边，等等。如果我们想让一个Button显得更加突出，就可以提高它的层级让它独立出来。

为了实现上述3D视角的可视化，Feedly在探索Material Design时分享了一个漂亮的图片。在参加了几次Google举办的设计沙龙后，他们已经能够在自己的app中实现这些原则，而且你可能对他们初始的经验很感兴趣。他们在这里的说明是正确的：页面内容形成了几个层次，一些突出的要素，如工具栏、导航栏、搜索栏都是独立在一个层次的。前面提到如何决定一个Button的突出性就是这个意思。



当决定一个Button的突出性时，一般可以根据它的功能来考虑，按钮的功能决定了它应该位于布局的哪个层次。

扁平化按钮

扁平化的按钮可以减少来自其四周内容的干扰，这种样式让Button显得不是那么突出。我们称之为扁平化是因为它和其内容在同一个层次上，因为在同一层，因此它没有被遮挡，故没有阴影，并且它没有可见的边框。



扁平化按钮的简洁外观让其在Toolbar和Dialog上效果特别好，当内容比较少时，也可以在行内使用。但是如果Button后面还有很多其他元素的时候，效至果就不那么好了，以至于有时候**看起来根本不像一个按钮。

创建一个扁平的Button很简单，只要创建一个普通的按钮，然后给它加上一个style属性即可，如下：

<Button
android:id="@+id/my_flat_button"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="@string/flat"
android:textAppearance="@style/TextAppearance.AppCompat.Button"
android:textColor="@color/app_body_text"
style="?borderlessButtonStyle" />

凸起式按钮

有些按钮想凸显自己的重要性，所以凸起式的按钮是一种吸引注意力的好方法，这种样式的按钮是平时最常用的。凸起式的按钮有可见的边框并且位于它所引用内容的上一层，凸起式Button样式指南中有一个很棒的示例：一个包含了很多信息的设置菜单中用到了凸起式按钮。凸起式的按钮在视觉上将信息和操作行为分开，更利于用户操作。



创建一个灰色的凸起按钮也很简单，因为这就是最经典的用例（即不需要任何样式属性）。当你想自定义按钮的外观时，困难就增加了。例如，指定一个自定义的背景常常使开发者不知为何Material Design效果和动画消失了，此时你需要使用AppCompat彩色按钮风格，它会使用colorButtonNormal作为disable时的颜色，使用colorAccent作为默认颜色。（当然如果你想自定义颜色，并不需要在全局Activity中修改这些属性值，可以使用一个自定义的ThemeOverlay即可，在这篇文章中有说明。

<Button
android:id="@+id/my_raised_button"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="@string/raised"
android:textAppearance="@style/TextAppearance.AppCompat.Button"
android:textColor="@color/app_body_text"
style="@style/Widget.AppCompat.Button.Colored" />

浮动操作按钮

最后，是浮动操作式的按钮，它为用户提供了某种可能会采取的操作行为。它是最突出显示的，因为它代表了共同的或有用的操作。它是一个圆形按钮，其上为一个圆形图片，此图片代表了直观的操作行为。它浮动于所有其他层次之上，因此它的突出性是最高的。



创建一个浮动操作按钮（Floating Action Button-FAB）很难，但是Design Support Library为我们提供了支持。原理是相同的，我们需要使用colorAccent作为FAB的颜色，你还可以选择为你的按钮指定一个较小的尺寸，如一个迷你型的浮动操作式按钮。

<android.support.design.widget.FloatingActionButton
android:id="@+id/my_fab_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/fab_icon"
app:fabSize="mini" />

希望以上这些内容有助于阐明为什么我们有那么多的按钮样式选择以及理解什么是设计师所需要的。无论如何，请选择一种适合自己app的按钮样式，这有会帮助我们做出更好的app，同时也使你的用户满意。

原文地址