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

一、悬浮按钮

FloatingActionButton是Design Support中的一个控件,它会默认colorAccent作为按钮的颜色,还可以给按钮一个图标。

这是没有图标的,这是有图标的

然后布局文件这样写:

<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"
            app:elevation="8dp"/>

layout_gravity的属性值bottomb表示在顶部,end会根据系统确定是在左下还是右下。elevation表示按钮的悬浮高度,属性值越大,阴影就越小。。。其实区别并不大,平时用默认的就好了。

然后是按钮响应:

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

<?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>

  然后在悬浮按钮布局文件这里加上属性: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="@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就是那个可以点击的按钮的设定,第一个参数是按钮的内容,然后就是响应了。

三、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="@drawable/ic_done"
            app:elevation="8dp"/>

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

重新点击一下悬浮按钮:

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

时间: 2024-10-13 09:38:12

android ——悬浮按钮及可交互提示的相关文章

Android用悬浮按钮实现翻页效果

今天给大家分享下自己用悬浮按钮点击实现翻页效果的例子. 首先,一个按钮要实现悬浮,就要用到系统顶级窗口相关的WindowManager,WindowManager.LayoutParams.那么在AndroidManifest.xml中添加权限: ? 1 <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" /> 然后,我们要对WindowManager,WindowManager.La

Android FloatingActionButton(FAB) 悬浮按钮

FloatingActionButton 悬浮按钮                                                                                                                                  -------部分资料从网上查找的,如果不妥,请留言通知我更改! 1)布局文件 app:backgroundTint - 设置FAB的背景颜色. app:rippleColor - 设置FA

深入分析:Android中app之间的交互

在我们开发Android App应用的时候,有些需求需要我们启动其他的App来处理一些逻辑,例如我们需要根据一个地址来调用系统或者相关的地图Map App,这样我们不用在自己的App中编写相应的功能,而是通过Intent来发送一些请求,调用相关的应用来处理这些请求.并且我们称这种Intent为隐式的Intent:这种隐式的Intent是相对于显式的Intent来讲的.显式的Intent我们都比较熟悉,显式的Intent常常需要声明类的名称,而隐式的Intent我们需要声明一个Action,我们A

android中常用的弹出提示框

转自:http://blog.csdn.net/centralperk/article/details/7493731 我们在平时做开发的时候,免不了会用到各种各样的对话框,相信有过其他平台开发经验的朋友都会知道,大部分的平台都只提供了几个最简单的实现,如果我们想实现自己特定需求的对话框,大家可能首先会想到,通过继承等方式,重写我们自己的对话框.当然,这也是不失为一个不错的解决方式,但是一般的情况却是这样,我们重写的对话框,也许只在一个特定的地方会用到,为了这一次的使用,而去创建一个新类,往往有

Android WebView与服务端交互Demo

使用WebView可以让Android端的开发工作大量减少,原因是在服务端可以为其做一定的工作,下面这个小Demo就实现了从Android客户端与服务端的交互.我这里客户端使用的工具是Eclipse,服务端使用MyEclipse. 实现效果图: 客户端: 点击登录按钮后,页面跳转,而在服务端Console中看到如下(只看最后一行即可): 可以看到服务端收到了客户端发过来的用户名:yao. 源代码: 客户端: activity_main: <RelativeLayout xmlns:android

android 与JS之间的交互

在页面布局很复杂并且是动态的时候,android本身的控件就变得不是那么地灵活了,只有借助于网页的强大布局能力才能实现,但是在操作html页面的同时也需要与android其它的组件存在交互,比如说 在load一个url时, 用户点击页面内的某个按钮后, 页面调用android内的组件函数或由android组件去调用JS代码去更新页面,这都是交互问题,听起来很复杂,其实不用担心,webview这个类已经帮我们实现了,只需要直接用就好了. webview用法1 1.在要Activity中实例化Web

CoordinatorLayout与ListView协同让FAB悬浮按钮从底部消失及出现

CoordinatorLayout协同布局在一般只结合RecyclerView和NestedScrollView使用,如果我使用ListView没有效果的.但是,由于业务原因使用ListView,有需要实现协同的效果怎么办? 其实分析RecyclerView和NestedScrollView的源码可以知道,他们都实现了一个接口NestedScrollingChild,所以我们可以自定义ListView,实现NestedScrollingChild接口就好.当然除此外,google还提供了一个AP

Android 悬浮窗、悬浮球开发

原文:Android 悬浮窗.悬浮球开发 1.权限管理 直接看我另外一篇博客吧,传送门: https://my.oschina.net/u/1462828/blog/1933162 2.Base类BaseSuspend import android.content.Context; import android.graphics.PixelFormat; import android.os.Build; import android.view.Gravity; import android.vi

Android的按钮单击事件及监听器的实现方式

第一种:匿名内部类作为事件监听器类 第二种:内部类作为监听器 第三种:Activity本身作为事件监听器 第四种:外部类作为监听器 当用户单击button按钮时,程序将会触发MyButtonListener监听器外部MyButtonListener类 使用顶级类定义事件监听器类的形式比较少见,主要因为如下两个原因:1.事件监听器通常属于特定的gui界面,定义成外部类不篮球提高程序的内聚性.2.外部类形式的事件监听器不能自由访问创建gui界面的类中的组件,编程不够简洁.但如果某个事件监听器确实需要