Material Design Button的使用方法以及默认间距问题的适配

Material Design 提供了一种按钮叫浮动按钮(Raised button)， 是一种常见的方形纸片按钮，点击后会产生墨水扩散效果。

准备工作

• 在 build.gradle 中添加 appcompat 的库：

dependencies {  
    compile 'com.android.support:appcompat-v7:X.X.X' // where X.X.X version，eg.23.0.1
}

• 将我们的Activity继承 android.support.v7.app.AppCompatActivity：

public class MainActivity extends AppCompatActivity {  
    ...
}

方式一:theme添加自定义style

优点:无须区分版本,系统会自动适配5.0以上系统水波纹效果,5.0以下系统点击变色效果

使用方法如下:

• 1.在style.xml文件中,自定义一个style

<style name="MyButton" parent="Theme.AppCompat.Light">
        <item name="colorControlHighlight">@color/indigo</item>
        <item name="colorButtonNormal">@color/colorAccent</item>
        <item name="android:textColor">@color/white</item>
</style>

• 2.在colors.xml文件中,添加颜色

<color name="indigo">#4B0082</color>
<color name="pink">#FFC0CB</color>

• 3.界面布局中的button里添加theme属性

<Button  
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="BUTTON"
    android:theme="@style/MyButton"/>

使用这种方式,5.0以上系统的button,点击会有如上presssed图片的水波纹渐变扩散效果,而4.4系统的button点击无水波纹效果,但是有变色效果

缺点:如下图,某些机型系统button会自带间距,有些机型系统button不带间距,某些情况下适配很困难

方式二:background添加自定义drawable文件

优点:系统button无默认间距,无适配问题

使用方法如下:

• 1.在drawable文件夹中,新建一个drawable文件

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorAccent" android:state_pressed="false" />
    <item android:drawable="@color/indigo" android:state_pressed="true" />
</selector>

5.0以下系统点击是切换颜色效果

• 2.在drawable-v21文件夹中,新建一个同名的drawable文件,该文件5.0以上系统使用

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/indigo">
    <item>
        <shape>
            <corners android:radius="1dp" />
            <solid android:color="@color/colorAccent" />
        </shape>
    </item>
</ripple>

5.0及以上系统点击是水波纹渐变扩散效果

• 3.界面布局中的button里添加background属性

参考

Raised Button