悬浮按钮和可交互提示

543 阅读1分钟

「这是我参与11月更文挑战的第4天,活动详情查看:2021最后一次更文挑战

悬浮按钮(FloatingActionButton)

按照Material Design的理念,应用程序的界面不仅仅只是一个平面了,而应该是要具备立体效果的。一个最具代表性的立面设计就是悬浮按钮。

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/fab"
            android:layout_gravity="bottom|end"
            android:src="@drawable/ic_done"/>

在这里插入图片描述 end的意思是如果系统语言是从左往右那么放在右边。

事件处理

这部分很简单,和处理按钮是一样的。

        FloatingActionButton floatingActionButton=findViewById(R.id.fab);
        floatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,"You Click the FloatingActionButton",Toast.LENGTH_SHORT).show();
            }
        });

Snackbar

在之前我们都是通过Toast来进行提示的,这里将会有一种更先进的工具 Snackbar,这个工具相比Toast多了一个undo的按钮,相当于给用户提供了一种弥补措施,提升了用户体验。

            public void onClick(View v) {
                Snackbar.make(v,"Data deleted",Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(MainActivity.this,"Data restored",Toast.LENGTH_SHORT).show();
                    }
                }).show();
            }

其实就是在Toast的基础上加了一个Action。

CoordinatorLayout

CoordinatorLayout(协调布局)可以看成一个加强版的FrameLayout,这个布局可以监听其子控件的事件,然后做出合理的响应,在上面用Snackbar的这个样例中,出现的提示挡住了悬浮按钮,通过这个布局就可以协调显示。 这里的子控件其实就是FloatingActionButton(传入的View就是这个View)。

将FrameLayout改成CoordinatorLayout就好。

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/fab"
            android:layout_gravity="bottom|end"
            android:src="@drawable/ic_done"/>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>