Material Design组件之Buttons

Google Material Design之Buttons文档

本节介绍Material Design中的组件之一Buttons,包含3中Button的简单添加和使用，它们分别是Floating Action Button、Raised Button以及Flat Button

Floating Action Button

如何添加？

1、在你的builde.gradle文件中，添加最新版的appcompat和design依赖库.

dependencies {
     compile 'com.android.support:appcompat-v7:X.X.X' //这里的X.X.X代表版本
     compile 'com.android.support.design:X.X.X'//这里的X.X.X代表版本
}

2、确保你的Activity继承了android.support.v7.app.AppCompatActivity.

public class MainActivity extends AppCompatActivity{
    ...
}

3、在layout.xml文件里的任意位置定义你的FloatActionButton.

<android.support.design.widget.FloatActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_fab">

如何设置Style?

背景颜色

1、在你的values/style.xml中自定义style.

<style name="MyFloatActionButton" parents="Theme.Appcompat.Light">
    <item name="colorAccent">@drawable/pink</item>
</style>

2、使用android:theme应用这个style到FloatActionButton

<android.support.design.widget.FloatActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_fab"
    android:theme="@style/MyFloatActionButton">

水波纹颜色

当你按压FloatActionButton使用app:rippleColor去改变颜色达到水波纹的效果

<android.support.design.widget.FloatActionButton
    android:layout_widget="wrap_content"
    android:layout_height="wrap_content"
    app:rippleColor="@color/ripple">

图标

对于改变FloatActionButton的图标使用android:src属性

<android.support.design.widget.FloatActionButton
    android:layout_widget="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_myicon">

大小

对于改变FloatActionButton图标的大小使用app:fabSize属性，使用一个预先系统设置的常量mini或者normal

<android.support.design.widget.FloatActionButton
    android:layout_widget="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_mini"
    app:fabSize="mini">

Raised Button

如何添加？

1、在你的builde.gradle文件中，添加最新版的appcompat依赖库.

dependencies {
     compile 'com.android.support:appcompat-v7:X.X.X' //这里的X.X.X代表版本
}

2、确保你的Activity继承了android.support.v7.app.AppCompatActivity.

public class MainActivity extends AppCompatActivity{
    ...
}

3、在layout.xml文件里的任意位置定义你的Button.

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"/>

如何设置Style?

1、在你的values/style.xml中自定义style.

<style name="MyButton" parent="Theme.AppCompat.Light">
    <item name="colorControlHighlight">@color/indigo</item>
    <item name="colorButtonNormal">@color/pink</item>
</style>

2、使用android:theme应用这个style到Button

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

兼容性问题

1、你能够使用colorControlHighlight这个属性去改变Button在按压时候的颜色，然后它将只有Android版本至少是Lolipop才会生效。
2、Androidelevation属性只有在Lolipop的设备才会可以用，在Lolipop之前的设备你将看不到Button四周的shadow(阴影)

Flat Button

如何添加？

1、在你的builde.gradle文件中，添加最新版的appcompat依赖库.

dependencies {
     compile 'com.android.support:appcompat-v7:X.X.X' //这里的X.X.X代表版本
}

2、确保你的Activity继承了android.support.v7.app.AppCompatActivity.

public class MainActivity extends AppCompatActivity{
    ...
}

3、在layout.xml文件里的任意位置定义你的Button,并使用Borderless的style.

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    style="@style/Widget.AppCompat.Button.Borderless"/>

如何设置Style?

1、在你的values/style.xml中自定义style.

<style name="MyButton" parent="Theme.AppCompat.Light">
    <item name="colorControlHighlight">@color/indigo</item>
</style>

2、使用android:theme应用这个style到Button

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    android:theme="@style/MyButton"
    style="@style/Widget.AppCompat.Button.Borderless">