Exciter

生命不息、折腾不止

0%

Android-FloatingActionButton的使用详解

本文完整源码下载地址:AndroidBasic

1.FloatingActionButton属性介绍

FloatingActionButton是MaterialDesign里的一个圆形按钮控件,使用方便简单,不过平时可能用的不多,一般会在需要随界滑动显示隐藏一个悬浮按钮的时候使用。

属性 功能 值类型 对应的Java方法 备注
borderWidth 边框宽度 float 通常设置为0,用于解决Android 5.X设备上阴影无法正常显示的问题
elevation 阴影大小 float void setElevation(float elevation)
fabSize 按钮大小 normal(56x56)/mini(40x40)/auto
fabCustomSize 按钮自定义大小 float
pressedTranslationZ 点击按钮时,按钮边缘阴影的宽度 float
hoveredFocusedTranslationZ 类似鼠标停留时产生的阴影宽度 float
rippleColor 点击按钮时,形成的水波纹颜色 int/ColorStateList setRippleColor(@ColorInt int color) setRippleColor(@Nullable ColorStateList color)
useCompatPadding 为true时,FloatingActionButton会自动在四周设定一个合适的padding boolean setUseCompatPadding(boolean useCompatPadding)
backgroundTint 按钮背景色 int setBackgroundTintList(@Nullable ColorStateList tint)
backgroundTintMode 设置颜色渲染方式,类似Xfermode add/multiply/screen/src_atop/src_in/src_over setBackgroundTintMode(@Nullable PorterDuff.Mode tintMode)
clickable 是否可点击 boolean

2.FloatingActionButton使用

2.1 xml代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".widget.floatingactionbutton.FloatingActionButtonActivity">

<include
layout="@layout/layout_tool_bar"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="50dp"
android:backgroundTint="@android:color/holo_green_dark"
android:backgroundTintMode="screen"
android:clickable="true"
android:src="@drawable/ic_like"
app:borderWidth="0dp"
app:elevation="2dp"
app:fabCustomSize="50dp"
app:fabSize="auto"
app:hoveredFocusedTranslationZ="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:maxImageSize="30dp"
app:pressedTranslationZ="5dp"
app:rippleColor="@android:color/holo_red_light"
app:useCompatPadding="true" />

</androidx.constraintlayout.widget.ConstraintLayout>

2.2 Activity代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
package com.exciter.androidbasic.widget.floatingactionbutton;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import android.os.Bundle;
import com.exciter.androidbasic.R;

public class FloatingActionButtonActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_floating_action_button);
Toolbar toolbar = findViewById(R.id.tool_bar);
toolbar.setTitle("FloatingActionButton");
toolbar.setNavigationOnClickListener(v -> finish());
}
}