Android FloatingActionButton的使用（包含Snackbar，CoordinatorLayout）

最新推荐文章于 2024-08-12 03:25:41 发布

Amarao

最新推荐文章于 2024-08-12 03:25:41 发布

阅读量576

点赞数

分类专栏： android 进阶文章标签： FloatingActionButton Android CoordinatorLayout Snackbar

本文链接：https://blog.csdn.net/jinmie0193/article/details/80731318

版权

android 进阶专栏收录该内容

58 篇文章 4 订阅

订阅专栏

1.属性

android:src： FAB中显示的图标，最好是24dp的

app:backgroundTint：正常的背景颜色，颜色不透明度要为FF，即完全不透明

app:rippleColor：按下时的背景颜色

app:elevation：正常的阴影大小

app:pressedTranslationZ：按下时的阴影大小

app:layout_anchor：设置FAB的锚点，即以哪个控件为参照设置位置

app:layout_anchorGravity： FAB相对于锚点的位置

app:fabSize： FAB的大小，normal或mini（对应56dp和40dp）

app:fabCustomSize="10dp" 用户自定义FAB的大小

注意：要想让FAB显示点击后的颜色和阴影变化效果，必须设置onClick事件

2.布局文件举例

<android.support.design.widget.FloatingActionButton
            android:id="@+id/design_rl_fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_margin="15dp"
            android:elevation="10dp"
            android:src="@drawable/design_fab"
            app:backgroundTint="#ffcc00"/>

3.点击事件

FloatingActionButton floatingActionButton = (FloatingActionButton) findViewById(R.id.design_rl_fab);
floatingActionButton.setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View view) {
         Toast.makeText(DesignActivity.this,"Fab",Toast.LENGTH_SHORT).show();
     }
});

效果：

4.Snackbar是Toast的升级版，将提示加入了一个可交互的提示按钮

重写点击事件：加入Snackbar

FloatingActionButton floatingActionButton = (FloatingActionButton) findViewById(R.id.design_rl_fab);
        floatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view,"我是Snackbar",Snackbar.LENGTH_SHORT)
                        .setAction("取消", new View.OnClickListener() {
                            @Override
                            public void onClick(View view) {
                                Toast.makeText(DesignActivity.this,"Fab2",Toast.LENGTH_SHORT).show();
                            }
                        }).show();
            }
        });

效果如下：

这是你会发现悬浮按钮被盖住了，没关系，可以借助CoordinatorLayout

5.CoordinatorLayout是一个加强版的FrameLayout，它可以自动监听所有子控件的事件，然后自动为我们做出合理的响应，比如刚才的Snackbar把悬浮按钮遮挡住了，而CoordinatorLayout能监听的此事件，并将悬浮按钮自动向上移动

<android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/design_tb_toolbar"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:background="@color/colorPrimary"
            app:title="Design"
            android:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/AlertDialog.AppCompat.Light">
        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/design_rl_fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right|bottom"
            android:layout_margin="15dp"
            android:elevation="10dp"
            android:src="@drawable/design_fab"
            app:backgroundTint="#ffcc00"/>
    </android.support.design.widget.CoordinatorLayout>

效果：