Material Design组件之Buttons

Google Material Design之Buttons文档

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

components_buttons_usage_main

Floating Action Button

fab-1

如何添加?

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

1
2
3
4
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.

1
2
3
public class MainActivity extends AppCompatActivity{
...
}

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

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

如何设置Style?

fab-2

背景颜色

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

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

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

1
2
3
4
5
<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去改变颜色达到水波纹的效果

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

图标

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

1
2
3
4
<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

1
2
3
4
5
<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

raised-button-1

如何添加?

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

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

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

1
2
3
public class MainActivity extends AppCompatActivity{
...
}

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

1
2
3
4
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"/>

如何设置Style?

raised-button-2
1、在你的values/style.xml中自定义style.

1
2
3
4
<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

1
2
3
4
5
<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

flat-button-1

如何添加?

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

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

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

1
2
3
public class MainActivity extends AppCompatActivity{
...
}

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

1
2
3
4
5
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
style="@style/Widget.AppCompat.Button.Borderless"/>

如何设置Style?

flat-button-2

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

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

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

1
2
3
4
5
6
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:theme="@style/MyButton"
style="@style/Widget.AppCompat.Button.Borderless">

if (本文对您有用) { Pay (请随意¥打赏) } else { Commit feedback (底部评论区提交建议、反馈) } 感谢支持!