悬浮按钮和可交互提示

最新推荐文章于 2024-09-17 11:39:13 发布

前方是否可导？

最新推荐文章于 2024-09-17 11:39:13 发布

阅读量238

点赞数

CC 4.0 BY-SA版权

分类专栏： android基础

本文链接：https://blog.youkuaiyun.com/weixin_44110537/article/details/115205856

android基础专栏收录该内容

16 篇文章

订阅专栏

本文介绍了Material Design中悬浮按钮(FloatingActionButton)的设计理念及实现方法，并详细讲解了如何使用Snackbar进行交互提示，同时探讨了CoordinatorLayout在布局管理中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

悬浮按钮（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>