如何模仿Material-design凸起的按钮样式,即使对于前Lollipop(减去特殊效果)？

Question

谷歌已经展示了一些很好的方式,按钮在这里显示在棒棒糖上.

我在谈论凸起和平面按钮.

除了特殊效果(波纹等......)之外,我怎样才能在Lollipop前版本上模仿它们？

我在说这个和这个.

当然,在棒棒糖及以上,我想使用特效.

我知道有很多(甚至很多)关于这个的帖子,但我没有看到任何试图完全模仿它.

Answer 1

更新后的答案: 建议您依靠Google的appcompat库将材料设计样式反向移植到您的应用中.它似乎不再向后移动凸起的按钮(而是使用平面按钮),但仍然足以向后移动与材料设计风格相匹配的按钮.我建议你采用这种方法.

如果您仍希望向后移动凸起的按钮效果,则需要依赖第三方材质设计库,或者您可以使用CardView自己的方法查看下面的旧解决方案.

要使用Google的官方Material Design backport设置appcompat库:

compile "com.android.support:appcompat-v7:+"

然后,您需要在styles.xml文件中设置应用程序主题.

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

并AndroidManifest.xml确保上述主题设置正确:

<application
    android:allowBackup="false"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:supportsRtl="false"
    android:theme="@style/AppTheme">

完成上述设置后,请确保您Activity的AppCompatActivity所有Button物品都延伸,并从那里开始使用材料设计风格.

如果您Button在项目中使用自定义实现,请确保不是扩展Button,而是扩展AppCompatButton.这也适用于大多数自定义的ViewS: ,AppCompatTextView,AppCompatEditText等...

它是如何工作的？ 所有的Android xml布局都使用名为a的东西来膨胀LayoutInflater.它LayoutInflater是由提供的Activity,并且可以选择LayoutInflaterFactory提供它,以便您可以覆盖标准Android小部件的默认实现,例如Button和TextView.当你使用它时AppCompatActivity,它会为你提供一个非标准的LayoutInflater,它会为支持Material Design的小部件提供特殊的实例!

------------------------------------------------- 老答案: ------------------------------------------------ -

所以Android给了我们CardView来复制这样的行为.它提供带圆角的视图,应用投影.您可能还想查看#setCardElevation()方法.

您可以将CardView库添加到Gradle项目中:

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

如果可用,CardView将使用Lollipop实现(因为Lollipops阴影更好),否则它会尽可能地复制它.

这是一个示例:

<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>

上面的代码在5.0上运行:

以上代码在4.4.4上运行:

看起来字体有差异,因为sans-serif-medium有不同的字体重量或4.4.4不支持,但可以通过包含最新版本的Roboto并覆盖它来轻松修复TextViews上的字体.

您发布的材料文档指向"高架按钮".CardView是我们如何制作"高架"的.

Answer 2

将compat库添加到您的应用程序.(可以在此处找到最新版本.)通过在build.gradle文件中添加依赖项来执行此操作:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:21.0.3'
}

在位于values目录中的styles.xml文件中解析您的apptheme:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/theme_primary</item>
        <item name="colorAccent">@color/theme_accent_1</item>
        <item name="actionMenuTextColor">@color/theme_text</item>
    </style>
</resources>

将声明的样式设置为manifest.xml文件中用于应用程序的样式:

<application
    android:icon="@drawable/ic_launcher"
    android:theme="@style/AppTheme"/>

在您的布局中声明一个凸起按钮,如下所示

<Button
    android:id="@+id/addButton"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:text="@string/title_add" />

声明一个平面按钮样式如下:

<Button
    android:id="@+id/okbutton"
    style="?android:attr/borderlessButtonStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@android:string/ok" />

4.4(手机)和5.0(平板电脑)设备的结果:

有关详细信息,请参阅官方文档:http://developer.android.com/training/material/theme.html

Answer 3

我用相同的效果,

  android:background="@android:drawable/dialog_holo_light_frame"

我测试的输出: