12Material Design-悬浮按钮和可交互提示

2018-04-06 本文已影响145人何惧l

FloatingActionButton

准备好一张照片，修改activiyt_main.xml中的代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <FrameLayout
        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="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            />


        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            android:src="@drawable/ic_done"
            />

    </FrameLayout>
    ...
</android.support.v4.widget.DrawerLayout>

这里主要就是添加了一个FloatingActionButton，这个控件的用法和其他一样，其中的layout_gravity="bottom|end"指的是放置于屏幕的右下角

悬浮按钮.png
默认的颜色是colorAccent在stytle.xml中，还可以设置悬浮高度，

  <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            android:src="@drawable/ic_done"
            android:elevation="10dp"
            />

这里的android:elevation="10dp"属性就是指定高度值，高度值越大，投影范围就越大，然而个人觉得这些差异不大

FloatingActionButton的点击事件，修改MainActivity中的代码

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        ...

        FloatingActionButton fab = (FloatingActionButton)findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this,"FAB clicked",Toast.LENGTH_SHORT).show();
            }
        });

    }

这里的点击事件和按钮没什么两样，用法都是一样的，这里弹出一个Toast

FloatingActionButton点击事件.png

Snackbar

这个是可交互的提示，和Toast是不同的，Toast的作用是告诉用户现在发生了什么，同时用户只能被动的接收这个事件，而Snackbar它允许在提示当中加入一个可交互按钮，当用户点击按钮的时候还可以执行一些额外的逻辑操作

Snackbar的用法也是很简单的，和Toast基本相似，只不过额外增加一个按钮的点击事件，修改MainActivity.xml中的代码


 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        ...

        FloatingActionButton fab = (FloatingActionButton)findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
             @Override
            public void onClick(View view) {
                Snackbar.make(view,"Data deleted",Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(MainActivity.this,"Data restored",Toast.LENGTH_SHORT).show();
                    }
                }).show();
            }
        });

    }

这里调用 Snackbar.make()方法来创建一个Snackbar对象，make()要传入参数，第一个参数View，第二个参数是要显示的内容，第三个参数是显示的时长
这个又调用了setAction()方法来设置一个动作，从而让Snackbar不仅是一个提示，而且还是一个可以和用户交互的，这里在动作按钮的点击事件中加入了一个Toast，最后show()让让显示出来
运行程序，点击按钮就可以看到

Snackbar的效果.png
可以看到Snackbar从屏幕下面出来了，这个时候上面还有一个Undo按钮，点击就会出现Toast，过一会这个Snackbar就会自动的消失
但是当它出现的时候，把悬浮按钮给遮挡住了，这样看着就别扭了，这个时候就要借助于CoordinatorLayout了

CoordinatorLayout

这个是加强版的FrameLayout，这个布局也是Design Support库提供的，在普通情况下和FrameLayout基本就是一样的，但是也有独特的一面

CoordinatorLayout可以监听其所有子控件的各种事件，然后自动的帮助我们做出最为合理的响应，就像这个事件，弹出的Snackbar把悬浮的按钮遮挡住了，如果这个时候使用这个的话，就会...,修改activity_main.xml中的代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

     <android.support.design.widget.CoordinatorLayout
        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="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            />


        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            android:src="@drawable/ic_done"
            />

    </android.support.design.widget.CoordinatorLayout>
    ...
</android.support.v4.widget.DrawerLayout>

这里只需要把这个FrameLayout替换成CoordinatorLayout就可以了，运行程序，点击悬浮按钮

自动将悬浮按钮上移.png

可以看到，这个时候悬浮按钮就会自动的向上偏移，而当Snackbar消失的时候，悬浮按钮就会自动的向下偏移回到原来的位置

原理.png

12Material Design-悬浮按钮和可交互提示

FloatingActionButton

Snackbar

CoordinatorLayout

猜你喜欢

热点阅读