logo标签列表

非棒棒糖材料的扁平按钮。

androidbuttonandroid-appcompatmaterial-design
4

我想在Lollipop之前的系统中使用Material风格扁平按钮。我正在使用Android 4.4.4，我的Play Store看起来像下面这样：

Play Store

按钮和图标都很整齐地排列在APPS、GAMES、BOOKS中。

MORE按钮显示一个没有图标的按钮。

那么，我该如何创建可爱的按钮呢？点击后会发光，图标整齐地排列在那里，并带有小圆角。使用drawableLeft不起作用，因为图标会变得太大。

我猜测有一种方法可以将它放入样式表中，因为谷歌在其他应用程序中似乎都很一致地使用了这种样式。

阅读有关形状可绘制对象的内容。您可以在XML中创建一个带填充的圆角矩形，并将其用作按钮背景。 - alanv
我希望谷歌已经在某个地方开源了他们的按钮，因为XML调整需要相当长的时间。 - Muz
1
默认的 Material 按钮形状在这里。引用的尺寸定义在这里。请注意，在 API 21 之前没有 android:tint 属性，因此您需要将 @color/white 更改为实际颜色。 - alanv
4个回答
9

没有图标的按钮

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/sign_up"
android:background="@drawable/action_button"
android:textColor="@color/primary_text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_marginRight="5dp"
android:id="@+id/fl_btn_signup" />

在Drawable中，您可以使用这个action_button.xml。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="false">
        <shape android:dither="true" android:shape="rectangle">
            <corners android:bottomLeftRadius="3dp" android:bottomRightRadius="3dp" android:topLeftRadius="3dp" android:topRightRadius="3dp" />

            <solid android:color="#689F38" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:dither="true" android:shape="rectangle">
            <corners android:bottomLeftRadius="3dp" android:bottomRightRadius="3dp" android:topLeftRadius="3dp" android:topRightRadius="3dp" />

            <solid android:color="#80689F38" />
        </shape>
    </item>

</selector>

如果您想在这些按钮中使用图标，则可以在您的Button xml中使用android:drawableLeft，或者您可以使用水平方向的LinearLayout与ImageView和TextView一起使用。

<LinearLayout
                android:orientation="horizontal"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:gravity="center_vertical"
                android:background="@drawable/action_button"> //Same xml

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/ic_apps_icon" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="APPS"
                    android:gravity="center"
                    android:padding="5dp"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textColor="#FFFFFF" />

            </LinearLayout>
LinearLayout 中的 ImageView 和 TextView 看起来不像按钮一样可以点击。但是没有图标的按钮在稍微添加一些填充后可以很好地工作。 - Muz
1

可以考虑使用包含图标和文本的 LinearLayout 代替按钮。
然后，您可以将圆角可绘制资源应用于此布局作为背景（每个状态都有自己的圆形可绘制对象）。

 <LinearLayout
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:gravity="center_vertical"
            android:background="@drawable/round_states"> 

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/icon" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="@android:color/white" />

 </LinearLayout>

您可以在按下和焦点时使用不同的圆形状态（每个状态具有不同的颜色）。

round_states.xml

   <?xml version="1.0" encoding="utf-8"?>
  <selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:state_pressed="true"
      android:drawable="@drawable/round_bg_pressed" /> <!-- pressed -->
   <item android:state_focused="true"
      android:drawable="@drawable/round_bg_focused" /> <!-- focused -->
   <item android:drawable="@drawable/round_bg" /> <!-- default -->
  </selector>

round_bg.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <stroke android:width="3dip" android:color="#B1BCBE" />
    <corners android:radius="10dip"/>
    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>

round_bg_focused.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <stroke android:width="3dip" android:color="#B8B8FF" />
    <corners android:radius="10dip"/>
    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>

P/s: 有一些库支持在早期的Lollipop版本上按下视图时产生涟漪效果，您可能想尝试：
https://github.com/traex/RippleEffect
https://github.com/balysv/material-ripple

一个设置了drawableLeft的Button会得到相同的结果，对吗？ - Vikram
1
@Vikram 如果您使用drawableLeft，那么像上面的照片一样更改按钮内图标和文本之间的距离并不容易，因为只有一个属性drawablePadding。通过使用LinearLayout，您可以更改其背景状态，并在布局中为图像设置不同的图标状态。 - ductran
0

设计9个带有圆角（绿色或蓝色）的拉伸图像，分别用于每个按钮的背景可绘制对象。将其用作按钮的背景，并为每个按钮提供相应的宽度和高度即可。这样做就可以完成您的工作。

谢谢。这个方法可能适用于“更多”按钮的例子。但是，当在按钮中使用可绘制对象时，图标看起来不像在Google Play应用程序中那样清晰。有没有将图标包装到按钮中的想法？ - Muz
尝试创建不同的视图并将它们包含在不同的布局中。在此布局中，您可以使用9 patch图像作为背景可绘制对象来设置背景。整个布局都可以被点击，并且可以作为按钮使用。在布局中，您还可以使用其他不同的视图来包含可绘制对象，例如白色Android图标等。此外，此布局应包括一个TextView来容纳文本。 - Iqbal S
-1

有一个库叫做FButton，它是 Android 上的一个自定义按钮，采用扁平化 UI概念。

enter image description here

还有一个名为FlatUI的库

enter image description here

我们也可以通过自定义资源来实现相同的效果，例如这个 gist!! 由 Dmytro 创建。

更新： 对于 Material Design 平面按钮，有大量的自定义库可用。

尝试使用 MaterialDesignLibrary enter image description here

鸣谢：Emrullah Lüleci、Le Van Hoang、Dmytro Danylyk

1
谢谢，但我不是指Flat UI。我是指Material Design中的“扁平按钮”。不幸的是，他们使用相同的名称来讨论不同的事情：http://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons - Muz
1
更新答案！同时尝试反向工程化此代码 https://github.com/jahirfiquitiva/PaperBoard - LOG_TAG
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接