Android FloatingActionButton的使用(包含Snackbar,CoordinatorLayout)

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>

效果:



猜你喜欢

转载自blog.csdn.net/jinmie0193/article/details/80731318