android ——悬浮按钮及可交互提示

从来好事天生俭,自古瓜儿苦后甜。这篇文章主要讲述android ——悬浮按钮及可交互提示相关的知识,希望能为你提供帮助。
一、悬浮按钮
FloatingActionButton是Design Support中的一个控件,它会默认colorAccent作为按钮的颜色,还可以给按钮一个图标。
这是没有图标的

android ——悬浮按钮及可交互提示

文章图片
,这是有图标的
android ——悬浮按钮及可交互提示

文章图片

然后布局文件这样写:
< 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="https://www.songbingjia.com/android/@drawable/ic_done" app:elevation="8dp"/>

layout_gravity的属性值bottomb表示在底部,end会根据系统确定是在左下还是右下。elevation表示按钮的悬浮高度,属性值越大,阴影就越小。。。其实区别并不大,平时用默认的就好了。
【android ——悬浮按钮及可交互提示】然后是按钮响应:
//悬浮按钮 FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(MainActivity.this,"你点击了悬浮按钮",Toast.LENGTH_SHORT).show(); } });

和普通按钮差不多。。
  然后通过drawable来实现一个简单的阴影效果:
在drawable创建一个fab.xml
android ——悬浮按钮及可交互提示

文章图片
android ——悬浮按钮及可交互提示

文章图片
< ?xml version="1.0" encoding="utf-8"?> < selector xmlns:android="http://schemas.android.com/apk/res/android"> < item android:state_pressed="true"> < layer-list> < !-- Shadow --> < item android:top="1dp" android:right="1dp"> < layer-list> < item> < shape android:shape="oval"> < solid android:color="#08000000"/> < padding android:bottom="3px" android:left="3px" android:right="3px" android:top="3px" /> < /shape> < /item> < item> < shape android:shape="oval"> < solid android:color="#09000000"/> < padding android:bottom="2px" android:left="2px" android:right="2px" android:top="2px" /> < /shape> < /item> < item> < shape android:shape="oval"> < solid android:color="#10000000"/> < padding android:bottom="2px" android:left="2px" android:right="2px" android:top="2px" /> < /shape> < /item> < item> < shape android:shape="oval"> < solid android:color="#11000000"/> < padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" /> < /shape> < /item> < item> < shape android:shape="oval"> < solid android:color="#12000000"/> < padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" /> < /shape> < /item> < item> < shape android:shape="oval"> < solid android:color="#13000000"/> < padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" /> < /shape> < /item> < item> < shape android:shape="oval"> < solid android:color="#14000000"/> < padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" /> < /shape> < /item> < item> < shape android:shape="oval"> < solid android:color="#15000000"/> < padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" /> < /shape> < /item> < item> < shape android:shape="oval"> < solid android:color="#16000000"/> < padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" /> < /shape> < /item> < /layer-list> < /item> < !-- Blue button pressed --> < item> < shape android:shape="oval"> < solid android:color="#90CAF9"/> < /shape> < /item> < /layer-list> < /item> < item android:state_enabled="true"> < layer-list> < !-- Shadow --> < item android:top="2dp" android:right="1dp"> < layer-list> < item> < shape android:shape="oval"> < solid android:color="#08000000"/> < padding android:bottom="4px" android:left="4px" android:right="4px" android:top="4px" /> < /shape> < /item> < item> < shape android:shape="oval"> < solid android:color="#09000000"/> < padding android:bottom="2px" android:left="2px" android:right="2px" android:top="2px" /> < /shape> < /item> < item> < shape android:shape="oval"> < solid android:color="#10000000"/> < padding android:bottom="2px" android:left="2px" android:right="2px" android:top="2px" /> < /shape> < /item> < item> < shape android:shape="oval"> < solid android:color="#11000000"/> < padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" /> < /shape> < /item> < item> < shape android:shape="oval"> < solid android:color="#12000000"/> < padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" /> < /shape> < /item> < item> < shape android:shape="oval"> < solid android:color="#13000000"/> < padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" /> < /shape> < /item> < item> < shape android:shape="oval"> < solid android:color="#14000000"/> < padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" /> < /shape> < /item> < item> < shape android:shape="oval"> < solid android:color="#15000000"/> < padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" /> < /shape> < /item> < item> < shape android:shape="oval"> < solid android:color="#16000000"/> < padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" /> < /shape> < /item> < /layer-list> < /item> < !-- Blue button --> < item> < shape android:shape="oval"> < solid android:color="#03A9F4"/> < /shape> < /item> < /layer-list> < /item> < /selector>

View Code然后在悬浮按钮布局文件这里加上属性:background
< android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/fab" android:layout_gravity="bottom|end" android:layout_margin="16dp" android:src="https://www.songbingjia.com/android/@drawable/ic_done" app:elevation="8dp"/>

 
二、Snackbar
和Toast一样用于提示的,但是它的提示当中有一个按钮,具体用法和效果就是:
//悬浮按钮 FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view,"这是一个提醒", Snackbar.LENGTH_SHORT) .setAction("可点", new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(MainActivity.this,"你点了",Toast.LENGTH_SHORT).show(); } }) .show(); } });

调用make()方法创建一个对象,第一个参数是当前布局的任意一个View,另外两个参数和Toast一样。setAction就是那个可以点击的按钮的设定,第一个参数是按钮的内容,然后就是响应了。
android ——悬浮按钮及可交互提示

文章图片

 
三、CoordinatorLayout
可以用来替换原来的FrameLayout,它可以监听各个子控件的各种事件,自动 做出合理的响应。
例如,把上面的布局文件修改成这样:
< 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:background="@drawable/fab" android:layout_gravity="bottom|end" android:layout_margin="16dp" android:src="https://www.songbingjia.com/android/@drawable/ic_done" app:elevation="8dp"/> < /android.support.design.widget.CoordinatorLayout>

重新点击一下悬浮按钮:
android ——悬浮按钮及可交互提示

文章图片

之前Snackbar出现的时候会挡住这个悬浮按钮,从FrameLayout改成CoordinatorLayout就不会了。
 

    推荐阅读