CoordinatorLayout

•简介

  CoordinatorLayout 协调布局,可以理解为功能更强大的 FrameLayout 布局;

  它在普通情况下作用和 FrameLayout 基本一致,通常适用于两种使用方式:

  • 作为界面最顶层的装饰布局
  • 作为包含一个或多个子视图的特定交互容器

  CoordinatorLayout 可以监听其所有子控件的各种事件,然后帮我们做出最为合理的响应;


FloatingActionButton

•简介

  FloatingActionButton 是 Android 5.0 新特性 —— Material Design中的一个控件;

  FloatingActionButton 其实由3个单词组成:

  • Floating:悬浮
  • Action:行为
  • Button:按钮

  的确,FAB 就是一个悬浮的按钮。

•添加依赖

  FloatingActionButton  是 Material Design 中的一个控件;

  跟所有 Material Design 控件一样,要使用 FloatingActionButton ,需要在 gradle 文件中先添加依赖;

  打开 Android Studio,点击左上角的 File -> Project Structure...;

  来到如下界面,并依次点击 Dependencies -> app -> -> Library Dependency;

  来到如下界面,搜索 com.android.support: ,找到 design 点击 OK;

  然后,回到之前的界面依次点击 Apply -> OK 即可成功添加依赖;

•基本使用

  通过查看源码可知,FloatingActionButton 是 ImageView 的子类,因此它具备 ImageView 的全部属性;

  新建一个项目,修改 activity_main.xml 中的代码;

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"> <com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="10dp"
android:src="@drawable/delete"
/> </FrameLayout>

  该布局的根布局是一个 FrameLayout;

  布局仅包含了一个 FloatingActionButton 控件,并通过  android:src 为其添加了一张图片;

$delete.png$

运行效果

  

  可以看到我们的 FloatingActionButton 正常显示的情况下有个填充的颜色,有个阴影;

  点击的时候会有一个 rippleColor,并且阴影的范围可以增大;


Snackbar(转载)

•简介

  Snackbar 是 Android 支持库中用于显示简单消息并且提供和用户的一个简单操作的一种弹出式提醒;

  当使用 Snackbar 时,提示会出现在消息最底部,通常含有一段信息和一个可点击的按钮;

  下图是 Gmail 中删除一封邮件时弹出的 Snackbar;

  在上图中,最下方的黑色区域,包含左边文字和右边 "撤销" 字样的就是 Snackbar;

  Snackbar 在显示一段时间后就会自动消失,同样作为消息提示,Snackbar 相比于 Toast 而言,增加了一个用户操作,

  并且在同时弹出多个消息时,Snackbar 会停止前一个,直接显示后一个,也就是说同一时刻只会有一个 Snackbar 在显示;

  而Toast则不然,如果不做特殊处理,那么同时可以有多个 Toast 出现;

  Snackbar相比于 Dialog,操作更少,因为只有一个用户操作的接口,而Dialog最多可以设置三个;

  另外 Snackbar 的出现并不影响用户的继续操作,而 Dialog 则必须需要用户做出响应,所以相比 Dialog,Snackbar 更轻量;

  经过上面的比较,可以看出 Snackbar 可以用于显示用户信息并且该信息不需要用户立即做出反馈的时候。

•基本使用

  Snackbar没有公有的构造方法,但是提供了静态方法make方法:

  • static Snackbar make(View view, CharSequence text, int duration)
  • static Snackbar make(View view, int resId, int duration)

  其中 view 参数是用于查找合适父布局的一个起点,下面分析源码的时候会解释到;

  如果父布局是一个 CoordinatorLayout,那么 Snackbar 还会有别的一些特性:

  • 可以滑动消除
  • 并且如果有 FloatingActionButton 时,会将 FloatingActionButton 上移,而不会挡住 Snackbar 的显示

•声明

  转载自【Android开发——Snackbar使用详解


联动

•FloatingActionButton+Snakbar

  接着使用前面新建的项目,activity_main.xml 中的代码保留,现在修改 MainActivity.java 中的代码;

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private FloatingActionButton fab;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View v) {
Snackbar.make(v,"删除一个会话",Snackbar.LENGTH_SHORT).setAction("撤销",new View.OnClickListener(){
@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(),"撤销成功",Toast.LENGTH_SHORT).show();
}
}).show();
}
});
}
}

  该代码为 FloatingActionButton 设置了一个点击事件,在该点击事件中创建一个 Snackbar,内容模仿上面的Gmail例子;

  并且给 “撤销” 一个点击事件,只是简单的显示一个 Toast;

运行效果

  

  再点击 FolatingActionButton 后,可以看到 Snackbar 遮挡了 FlaotingActionButton 的一部分;

•Coordinator+FloatingActionButton+Snakbar

  修改 activity_main.xml 中的代码;

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"> <com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="10dp"
android:src="@drawable/delete"
/> </androidx.coordinatorlayout.widget.CoordinatorLayout>

  该代码仅仅将 activity_main.xml 中的根布局改成了 <androidx.coordinatorlayout.widget.CoordinatorLayout> ;

运行效果

    

 在根布局为 CoordinatorLayout 的时候:

  • 当 Snackbar 出现时,FloatingActionButton会上移
  • 支持右滑消失

•声明

  参考资料:

Android学习之CoordinatorLayout+FloatingActionButton+Snackbar的更多相关文章

  1. Android学习之CoordinatorLayout+AppBarLayout

    •AppBarLayout 简介 AppbarLayout 是一种支持响应滚动手势的 app bar 布局: 基本使用 新建一个项目,命名为 TestAppBarLayout: 修改 activity ...

  2. Android Material Design的FloatingActionButton,Snackbar和CoordinatorLayout

    如果是为了兼容低版本的Android系统,则需要引用Android Material Design的扩展支持库,我在之前的一篇文章张,较为详细的说明了如何导入Android Material Desi ...

  3. 【Android - MD】之FloatingActionButton的使用

    FloatingActionButton(FAB) 是 Android 5.0 新特性--Material Design 中的一个控件,是一种悬浮的按钮. FloatingActionButton 是 ...

  4. Android学习路线总结,绝对干货

    title: Android学习路线总结,绝对干货 tags: Android学习路线,Android学习资料,怎么学习android grammar_cjkRuby: true --- 一.前言 不 ...

  5. Android 学习资源

    下面这些资源对Android开发来说是很有帮助的! 最常用的: Android开发官方网站:http://developer.android.com/index.html 这个网站应该是Android ...

  6. Android学习资料收集

    1.Android 学习之路 http://stormzhang.com/android/2014/07/07/learn-android-from-rookie/

  7. Android学习——第一个NDK程序

    在前面的学习中,我们已经讲解了关于NDK编程的环境搭建流程,简单的使用我们也通过官网本身自带的例子进行说明了.可是相信大家一定还存在这么的一个疑惑:“如果我要自己利用NDK编写一个Android应用, ...

  8. Android学习——windows下搭建Cygwin环境

    在上一篇博文<Android学习——windows下搭建NDK_r9环境>中,我们详细的讲解了在windows下进行Android NDK开发环境的配置,我们也讲到了在NDk r7以后,我 ...

  9. Android学习——windows下搭建NDK_r9环境

    1. NDK(Native Development Kit) 1.1 NDK简介 Android NDK是一套允许开发人员使用本地代码(如C/C++)进行Android APP功能开发的工具,通过这个 ...

随机推荐

  1. how to fetch a group promise api in order with the returned resolved result

    how to fetch a group promise api in order with the returned resolved result promise 一组依次请求,generator ...

  2. dark theme website

    dark theme website css var dark theme prefers-color-scheme https://developer.mozilla.org/en-US/docs/ ...

  3. how to delete the virtual dom that created in memory using js

    how to delete the virtual dom that created in memory using js const virtualDomConvert = (filename = ...

  4. js 增加数组的嵌套层数

    class A {} const proxy = new Proxy(new A(), { get(o, k) { if (!/\d+/.test(k.toString())) return o[k] ...

  5. Flutter: 显示&关闭系统叠加层ui

    import 'package:flutter/services.dart'; /// 关闭 SystemChrome.setEnabledSystemUIOverlays([]); /// 显示 S ...

  6. 人物传记Daniel Bolsonaro:永远不要做一个思维单一的人

    从小经历了移民和不断辗转迁徙搬家的Daniel Bolsonaro(现就职于灵石团队,职位是核心技术架构师)知道,人生不可能只有一条路,也不要局限于只给自己设立一条路.既然父母能带自己离开巴西来到美国 ...

  7. django学习-12.访问不同url/接口地址实现对指定数据的增删改查功能

    1.前言 通过前面博客[django学习-10.django连接mysql数据库和创建数据表]里的操作,我们已经成功在数据库[hongjingsheng_project]里创建了一张数据表[hello ...

  8. Django Admin后台管理功能使用+二次开发

    一  使用环境 开发系统: windows IDE: pycharm 数据库: msyql,navicat 编程语言: python3.7  (Windows x86-64 executable in ...

  9. Element-UI远程搜索功能详解

    官方代码: <template> <div> <el-autocomplete v-model="state" :fetch-suggestions= ...

  10. eclipse修改默认的代码注释

    在使用Eclipse编写Java代码时,自动生成的注释信息都是默认是使用的当前登录系统用户名,实际上是可以修改的. 选择Window → Preference → Java → Code Style  ...