如何模仿材质设计凸起按钮的风格，即使是pre-棒棒堂（减去特效）？ [英] How to mimic the Material-design raised button style, even for pre-Lollipop (minus the special effects)?

问题描述

谷歌已经表明按钮显示在棒棒糖<一一些不错的方法href="http://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons">here.

Google has shown some nice ways that buttons are shown on Lollipop here.

我说的两个凸起和平面按钮。

I'm talking about both the raised and the flat buttons.

我如何可以模仿他们在pre-棒棒糖版本，除特殊效果（纹波等...）？

How can I mimic them on pre-Lollipop versions, except for the special effects (ripple etc...) ?

我说的<一个href="http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7WlduMk1kbTRzQWc/components_buttons_main15.png">this和<一href="http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7UTh2dExpSlRVWVU/components_buttons_main16.png">this.

当然，在棒棒堂及以上，我想使用的特殊效果。

Of course, on Lollipop and above, I'd like to use the special effects.

我知道有这个多（甚至许多）的帖子了，但我没有看到任何试图完全模仿它。

I know that there are multiple (and even many) posts about this already, but I don't see any that tries to mimic it completely.

推荐答案

所以，Android已经给了我们的 CardView 复制这种行为。它提供了一个圆角的视图，适用阴影。你可能也想看看<一href="https://developer.android.com/reference/android/support/v7/widget/CardView.html#setCardElevation(float)">#setCardElevation()方法。

So Android has given us the CardView to replicate such behavior. It provides a View with a rounded corners, that applies a drop shadow. You will probably also want to look at the #setCardElevation() method.

您可以添加CardView库到您的摇篮项目：

You can add the CardView Library to your Gradle Project:

compile 'com.android.support:cardview-v7:21.0.+'

在CardView将使用棒棒糖实施要做到这一点，如果它是可用的（如棒棒糖阴影越好），否则会复制它是最好的，就可以了。

The CardView will use the Lollipop implementation to do this if it's available (as Lollipops shadows are better), otherwise it will replicate it as best as it can.

下面是一个例子：

<android.support.v7.widget.CardView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        card_view:cardBackgroundColor="#ffd9d9d9"
        card_view:cardCornerRadius="2dp"
        android:layout_margin="6dp"
        card_view:cardElevation="6dp">

    <TextView android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingTop="8.5dp"
            android:paddingBottom="8.5dp"
            android:paddingLeft="12dp"
            android:paddingRight="12dp"
            android:textColor="#de000000"
            android:fontFamily="sans-serif-medium"
            android:text="NORMAL" />

</android.support.v7.widget.CardView>

以上code在5.0上运行：

The above code running on 5.0:

以上code 4.4.4上运行：

The above code running on 4.4.4:

它看起来像有在字体的差异，如无衬线介质具有不同的字体重量或不支持4.4.4，但是可以很容易地修复，包括Roboto最新版本并重写字体的TextViews。

It looks like there is a discrepancy in the fonts, as in the sans-serif-medium has a different font weight or isn't supported on 4.4.4, but that can be easily fixed by including the latest version of Roboto and overriding the fonts on the TextViews.

该材料的文档您发布以点带一个高架按钮。 CardView的是我们如何让高架任何事情。

The material documentation you post point to an an "Elevated Button". CardView's are how we make "Elevated" anything.

这篇关于如何模仿材质设计凸起按钮的风格，即使是pre-棒棒堂（减去特效）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！