您的位置：首页 > 移动开发 > Android开发

<Android 基础（十）> FloatingActionButton

2016-07-02 07:22 399 查看

介绍


Source Code中的介绍如下：

Floating action buttons are used for a special type of promoted action. They are distinguished

by a circled icon floating above the UI and have special motion behaviors related to morphing,

launching, and the transferring anchor point.

Floating action buttons come in two sizes: the default and the mini. The size can be

controlled with the {@code fabSize} attribute.

As this class descends from {@link ImageView}, you can control the icon which is displayed

via {@link # setImageDrawable(Drawable)}.

The background color of this view defaults to the your theme’s {@code colorAccent}. If you

wish to change this at runtime then you can do so via

{@link # setBackgroundTintList(ColorStateList)}.

@attr ref android.support.design.R.styleable#FloatingActionButton_fabSize



属性值

属性值意义
app:backgroundTint设置背景颜色
app:fabSize设置FAB的大小，主要有两个取值normal,mini
android:src设置FAB的图标内容
app:rippleColor设置FAB点击过程中的颜色
app:elevation设置FAB正常情况下的阴影效果
app:pressedTranslationZ设置FAB点击时的阴影大小
app:borderWidth设置边框宽度
android:clickable是否可点击true or false
app:layout_anchor设置FAB的锚点，即以哪个控件为参照点设置位置
app:layout_anchorGravity设置FAB相对锚点的位置，取值:top,bottom.left,right,center_vertical,fill_vertical, center_horizontal,fill_horizontal,center,fill,clip_vertical,clip_horizontal,start,end

具体使用

布局文件

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimaryDark"
android:minHeight="?attr/actionBarSize"
app:navigationIcon="@drawable/ic_account_balance_black_24dp"
app:title="Mraz FAB Demo"></android.support.v7.widget.Toolbar>

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|bottom"
android:layout_marginBottom="@dimen/activity_vertical_margin"
android:layout_marginLeft="@dimen/activity_horizontal_margin"
android:clickable="true"

android:onClick="leftClick"
android:src="@drawable/ic_arrow_back_black_24dp"
app:backgroundTint="@color/colorPrimary"
app:fabSize="mini"
app:rippleColor="@color/colorPress" />

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:layout_marginBottom="@dimen/activity_vertical_margin"
android:layout_marginRight="@dimen/activity_horizontal_margin"
android:clickable="true"
android:onClick="rightClick"
android:src="@drawable/ic_arrow_forward_black_24dp"
app:backgroundTint="@color/colorLight"
app:borderWidth="0dp"
app:elevation="20dp"
app:fabSize="normal"
app:pressedTranslationZ="50dp"
app:rippleColor="@color/colorPress" />

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_anchor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:layout_marginRight="10dp"
android:layout_marginTop="20dp"

android:clickable="true"
android:onClick="topClick"
android:src="@drawable/ic_arrow_forward_black_24dp"
app:backgroundTint="#ff87ffeb"
app:borderWidth="0dp"
app:elevation="6dp"
app:fabSize="normal"
app:layout_anchor="@+id/toolbar"
app:layout_anchorGravity="right"
app:pressedTranslationZ="12dp"
app:rippleColor="#33728dff" />
</android.support.design.widget.CoordinatorLayout>


布局中一共设置了3个FAB，一个在左下角，一个在右下角，一个设置了锚点，颜色可以自己调整，简单的用法就是这个样子，对应的onClick事件在MainActivity中实现。

代码文件

MainActivity.java

package mraz.com.appbardemo;

import android.annotation.TargetApi;
import android.os.Build;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;

public class MainActivity extends AppCompatActivity {

Toolbar toolbar;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public void leftClick(View view) {
toolbar.setTitle("Left FAB onClick");
}

public void rightClick(View view) {
toolbar.setTitle("Right FAB onClick");
}

public void topClick(View view) {
toolbar.setTitle("Top FAB onClick");
}
}


实际效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航