CoordinatorLayout是在desgin包下的一个用于协调子控件的组件,可以解决绝大部分滑动联动问题,使用方法也很简单,为观察者注册一个Behavior,在Behavior指定要监听的控件(
需求是先滑动里面的列表,滑动到一个位置时外面滑动,外面滑动一段距离后再里面滑动。最初想用 CoordinatorLayout 加 RecyclerView,但效果不好直接用,或者用 NestedScrollView 与 RecyclerView 组合使用。
学习嵌套滑动的相关文章: 自定义View事件之进阶篇(一)-NestedScrolling(嵌套滑动)机制. Android NestedScrolling机制完全解析 带你玩转嵌套滑动
本博文专门讲解和CoordinatorLayout相关的知识点,这也是Design Support Library中最重要与最难的部分。
PS:纵观现在大大小小软件的界面都变的比较漂亮,还有一些系统了,比如小米的MIUI,华为的EMUI等,虽然底层都是安卓,但他们的界面多多少少都会不同,谷歌对这个UI也是非常重视的,MaterialDesign就是今天的主角,首先在看这个的同时,要搞清楚什么是Material Design,百度百科解释,中文名:材料设计语言,是由Google推出的全新的设计语言,谷歌表示,这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。design,中文是设计之意,即“设想和计划
使用 CoordinateLayout 可以协调它的子布局,实现滑动效果的联动,它的滑动效果由 Behavior 实现。以前用过小米日历,对它滑动平滑切换日月视图的效果印象深刻。本文尝试用自定义 Behavior 实现一个带有这种效果的日历。
原文地址:Handling Scrolls with CoordinatorLayout 原文作者:CODEPATH 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:Feximin 总览 CoordinatorLayout 扩展了完成 Google's Material Design 中的多种滚动效果的能力。目前,此框架提供了几种不需要写任何自定义动画代码就可以(使动画)工作的方式。这些效果包括: 上下滑动 Floating Action Button 以给 Sn
FloatingActionButton(FAB) 是Android 5.0 新特性——Material Design 中的一个控件,是一种悬浮的按钮,并且是 ImageView 的子类,因此它具备ImageView的全部属性。一般FloatingActionButton 结合 CoordinatorLayout 使用,即可实现悬浮在任意控件的任意位置。
浮动操作按钮 (简称 FAB) 是: “一个特殊的promoted操作案例。因为一个浮动在UI之上的圆形图标而显得格外突出,同时它还具有特殊的手势行为”
就是上面这样了,忘说了一件很重要的事情……FloatingActionButton的监听就是最原始的监听!!!接下来到了重头戏了
这篇文章其实我一直在想,是写还是不写,因为关于讲 CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout,Toolbar,TabLayout 等这些控件的使用,以前写过一篇,那就是《通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout 》,一直关注和看公众号的关注者应该看到过,上一篇的推送也特别讲了 CoordinatorLayout 的其他用法,看过的人都说还能这么用啊?哈哈……这次写这篇是对我上一篇《通过来模仿稀土掘金个人页面
android在嵌套滑动的时候会产生滑动冲突。之前我也碰到,但是以前的笔记本丢失了,所以只能重新再写一章。
引言 最近,在做公司一个design折叠效果的时候遇到个问题,就是我们本身app的方法数太多了,dex分包技术还没搞定。不得不尽量缩减一些不必要的包、类。当我们引入RecyclerView的时候,恰好
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/71732642
CoordinatorLayout是在 Google IO/15 大会发布的,遵循Material 风格,包含在 support Library中,结合AppbarLayout, CollapsingToolbarLayout等 可 产生各种炫酷的效果,本篇博客就将介绍CoordinatorLayout的各种酷炫效果。
如果以上简单操作无法满足你的需求,最后附上参考博客文章 Android开发之CoordinatorLayout打造滑动越界弹性放大图片效果 使用CoordinatorLayout打造各种炫酷的效果
最近工作中遇到了需求是使用 Bottom-Sheet 交互的弹窗,使用了 design 包里面的 CoordinatorLayout 和 BottomSheetBehavior ,因为弹窗承载的页面相对来说还是比较复杂的页面,所以也踩了好几个坑。之前UI交互类的东西接触的也比较少,于是把Android里面嵌套滑动相关的内容也过了一遍,在这里做一些分享。 在嵌套滑动控件的场景中,可以在Android的事件分发机制本身做一些处理,外部拦截或者内部消化触摸事件。但是这样的解决方法有几个弊端:
1.scroll--最基础的模式,并且设置其他模式必须|上它,否则不起效果 如果滚动到顶部再往上滑动的话,则显示Toolbar,只要往下滑动,则Toolbar消失
Android5.0推出工具栏Toolbar用来替代ActionBar,灵活性和易用性大大增强,有关Toolbar的详细介绍参见《Android开发笔记(一百一十九)工具栏Toolbar》。 可是仅仅使用Toolbar的话,还是有些呆板,比如说Toolbar固定占据着页面顶端,既不能跟着主体页面移上去,也不会跟着主体页面拉下来。为了让App页面更加生动活泼,势必要求Toolbar在某些特定的场景上移或者下拉,如此才能满足酷炫的页面特效需要。那么Android5.0也同时给出了相应的解决方案,即推出MaterialDesign库,通过该库中的AppBarLayout控件,对Toolbar加以包装,从而实现顶部工具栏的动态变化效果。 AppBarLayout其实继承自LinearLayout,所以具备LinearLayout的所有属性与方法。对于大家关心的额外功能,则主要有以下几点: 1、支持响应主体页面的滑动行为,即在主体页面上移或者下拉时,AppBarLayout能够捕捉到主体页面的滚动操作; 2、AppBarLayout捕捉到滚动操作之后,还要通知头部控件(通常是Toolbar),告诉头部控件你要怎么滚,是爱咋咋滚,还是满大街滚; 具体到实现上,要在工程中做以下修改: 1、添加几个库的支持,包括appcompat-v7库(Toolbar需要)、design库(AppBarLayout需要)、recyclerview库(主页面的RecyclerView需要); 2、布局文件的根布局采用android.support.design.widget.CoordinatorLayout,因为design库的动态效果都依赖于该控件; 3、CoordinatorLayout节点要添加命名空间声明xmlns:app="http://schemas.android.com/apk/res-auto"; 4、使用android.support.design.widget.AppBarLayout节点包裹Toobar; 5、Toobar节点添加滚动属性app:layout_scrollFlags="scroll|enterAlways",声明工具栏的滚动行为标志; 6、演示页面的主体页面使用RecyclerView控件,并给该控件节点添加行为属性app:layout_behavior="@string/appbar_scrolling_view_behavior",表示通知AppBarLayout捕捉RecyclerView的滚动操作。 下面是AppBarLayout结合RecyclerView实现的工具栏向上滚动效果截图:
gridlayout 网格布局 implementation'androidx.gridlayout:gridlayout:1.0.0' drawerlayout 抽屉布局 implementation'androidx.drawerlayout:drawerlayout:1.0.0' NavigationView 侧滑 implementation 'com.google.android.material.navigation.NavigationView:1.0.0' constraintlayout
2018-08-13 by Liuqingwen | Tags: Android 翻译 | Hits
接触目标view时才会回调:onStartNestedScroll 加了layout_behavior的View是child
到此这篇关于Android 之BottomsheetDialogFragment仿抖音评论底部弹出对话框效果(实例代码)的文章就介绍到这了,更多相关android 抖音底部弹出对话框内容请搜索ZaLou.Cn以前的文章或继续浏览下面的相关文章希望大家以后多多支持ZaLou.Cn!
CardView implementation 'androidx.cardview:cardview:1.0.0' TabLayout implementation'com.google.android.material:material:1.0.0' RecycleView implementation'androidx.recyclerview:recyclerview:1.0.0' Snackbar implementation'com.google.android.material.snackba
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/53453958
从官方文档中我们可以看到: CoordinatorLayout是一个增强型的FrameLayout。 两个作用: - As a top-level application decor or chrome layout - As a container for a specific interaction with one or more child views
我们知道 NestedScrolling(Parent/Child) 这对接口是用来实现嵌套滚动的,一般实现这对接口的 Parent 和 Child 没有直接嵌套,否则直接用 onInterceptTouchEvent() 和 onTouchEvent() 这对方法实现就可以了。能够越级嵌套滚动正是它的厉害之处。
是不是很像支付宝的效果呢,我们今天就要通过讲解android5.0新出的控件CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout来实现这个效果。
通常AppBarLayout和CollapsingToolbarLayout是一起使用的,也就是CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout、Toolbar常常是组合应用的,AppBarLayout能够赋予Toolbar显示和消失的功能,而CollapsingToolbarLayout能够赋予Toolbar伸缩的功能 AppBarLayout下只能有一个控件,而CollapsingToolbarLayout需要包裹Toolbar外,还支持包裹其
本系列分为四篇: 建站四部曲之后端接口篇(SpringBoot+上线) 建站四部曲之Python数据爬虫篇(selenium) 建站四部曲之前端显示篇(React+上线) 建站四部曲之移动端篇(Android+上线) ---- 零、前言 本系列为了总结一下手上的知识,致敬我的2018 本篇的重点在于:后端数据在移动端的展现 本篇总结的技术点: 材料设计串烧、Retrofit+RxJava访问请求、MVP模式的思考、App的打包 将App上传到服务器,提供下载地址、 ---- 一、材料设计的综
在上一讲中我们讲了NestedScrolling机制,其实android很多有些常用的控件都是支持NestedScrolling机制的,如RecyclerView,NestedScrollView等,
而我看到这个效果图,觉得这个就是一个slidingpanel,但是翻阅了一些发现用google自带的bottomsheet实现更方便
伟大的Google为Android推出了一系列的兼容包,最新的就是Design Support Library了,这里我们结合v7和v4中的几个控件,来主要学习Design Support Library中的几个新控件!一个Demo学会用它们!
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou实现手指滑动效果
首先这里准备用CardView来填充主题内容, CardView是用于实现卡片式布局效果的重要控件,由appcompat-v7库提供。 实际上,CardView也是一个FrameLayout,只是额外提供了圆角和阴影等效果,看上去会有立体的感觉。
上一篇博文《Android开发笔记(一百三十五)应用栏布局AppBarLayout》阐述了如何把Toolbar往上滚动,那反过来,能不能把Toolbar往下拉动呢?这里要明确一点,Toolbar本身是页面顶部的工具栏,其上没有本页面的其它控件了,如果Toolbar被拉下来了,那Toolbar上面的空白该显示什么?所以Toolbar的上部边缘是不可以往下拉的,只有下部边缘才能往下拉,这样的视觉效果好比Toolbar如电影幕布一般缓缓向下展开。 不过,Android在实现展开效果的时候,并非直接让Toolbar展开或收缩,而是另外提供了CollapsingToolbarLayout,通过该布局包裹Toolbar,从而控制标题栏的展开和收缩行为。下面是CollapsingToolbarLayout的属性说明: app:contentScrim : 指定布局内部未展开时的背景颜色。 app:collapsedTitleTextAppearance : 指定未展开时的标题文字字体。 app:collapsedTitleTextColor : 指定未展开时的标题文字颜色。 app:collapsedTitleGravity : 指定未展开时的标题文字对齐方式。 app:expandedTitleTextAppearance : 指定展开后的标题文字字体。 app:expandedTitleTextColor : 指定展开后的标题文字颜色。 app:expandedTitleGravity : 指定展开后的标题文字对齐方式。 app:expandedTitleMargin : 指定展开后的标题四周间距。 app:expandedTitleMarginStart/app:expandedTitleMarginTop/app:expandedTitleMarginEnd/app:expandedTitleMarginBottom : 指定展开后的标题具体方向的间距。 上述属性在代码中的设置方法如下所示: setContentScrim/setContentScrimColor/setContentScrimResource : 设置布局内部未展开时的背景颜色。 setCollapsedTitleTextAppearance : 设置未展开时的标题文字字体。 setCollapsedTitleTextColor : 设置未展开时的标题文字颜色。 setCollapsedTitleGravity : 设置未展开时的标题文字对齐方式。 setExpandedTitleTextAppearance : 设置展开后的标题文字字体。 setExpandedTitleColor : 设置展开后的标题文字颜色。 setExpandedTitleGravity : 设置展开后的标题文字对齐方式。 setExpandedTitleMargin : 设置展开后的标题四周间距。 setExpandedTitleMarginStart/setExpandedTitleMarginTop/setExpandedTitleMarginEnd/setExpandedTitleMarginBottom : 设置展开后的标题具体方向的间距。 在工程中使用CollapsingToolbarLayout,则需注意以下几点: 1、添加几个库的支持,包括appcompat-v7库(Toolbar需要)、design库(CollapsingToolbarLayout需要)、recyclerview库(主页面的RecyclerView需要); 2、布局文件的根布局采用android.support.design.widget.CoordinatorLayout,因为design库的动态效果都依赖于该控件; 3、CoordinatorLayout节点要添加命名空间声明xmlns:app="http://schemas.android.com/apk/res-auto"; 4、使用android.support.design.widget.AppBarLayout节点包裹android.support.design.widget.CollapsingToolbarLayout节点,再在CollapsingToolbarLayout节点下添加Toobar; 5、Toobar节点添加滚动属性app:layout_scrollFlags="scroll|enterAlways",声明工具栏的滚动行为标志; 其实真正运行的时候,Toolbar的高度是固定不变的,变化高度的是CollapsingToolbarLayout。只是许多App把这两者的背景设为一样的,所以看起来像是统一的标题栏在收缩和展开。既然二者原本不是一家,那么就得有新的属性用于区分它们内部的行为,新属性在Collaps
文章首发地址CSDN:http://blog.csdn.net/gdutxiaoxu/article/details/52939127
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/52939127
作者:林冠宏 / 指尖下的幽灵 掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:http://www.cnblogs.com/linguanh/ GitHub : https://github.com/af913337456/ 腾讯云专栏: https://cloud.tencent.com/developer/user/1148436/activities ---- Github 开源地址 目录 前序 直观对比下 g
我刚来这个公司的时候,每个周三都会有分享会,主题自定,分享对象尽量是面向大众,一开始觉得不错,但是到后面发现分享的内容不是那么有营养,而且积极性不是很高,都是当做任务进行分享。 程序员因为较为腼腆,分享的人较少,大部分都是客户部、分析部或者推广部的分享,久而久之,氛围就比较消极。
长久以来。Android的UI并不算美观,以至于很多IT公司在进行界面设计的时候,为了保证双平台的统一性,强烈要求Android端的界面风格必须与iOS端一致,我认为这里非常不合理的,同一操作系统中各个应用之间的界面统一性要远比一个应用在双平台的界面统一性重要的多,只有这样,才能给使用者带来更好的用户体验。为了解决这个问题,Google公司在2014年IO大会上推出了一套全新的界面设计语言——Material Design(材料设计语言),这次Google在界面设计上确实下足了功夫,一个词,好看。并且在2015年IO大会上推出了一个Design Support库,这个库将Material Design中最具代表性的一些控件和效果进行了封装,使得开发者在不了解Material Design的情况下也可以轻松地将自己的应用Material化。
在 GitHub 开源了一种新的 Header View + RecyclerView 实现方式,使用 CoordinatorLayout 把 header 抽离出 RecyclerView,并做到上
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/52858598
协调布局CoordinatorLayout能够让内部的子控件互相配合着移动,这跟以往孤立的控件运动截然不同,协调运动的结果,意味着App画面更加流畅、自然,也更符合日常生活中的动作场景。如果你对CoordinatorLayout的用法还不太了解的话,建议先浏览这篇博文熟悉一下《Android开发笔记(一百三十四)协调布局CoordinatorLayout》。 一般我们使用CoordinatorLayout,都是结合悬浮按钮FloatingActionButton、应用栏布局AppBarLayout或者可折叠工具栏布局CollapsingToolbarLayout,但这不表示CoordinatorLayout只能与这少数几个控件一起使用,事实上,只要定义了两个控件之间的互动行为,即使是TextView、ImageView这些普通控件,也能实现自动协调运动的效果。先上个图,说明一下自定义行为所支持的画面:
动画展示:https://github.com/FangMessi/nested_scroll_demo/blob/main/screenshot/ajqoe-vk8xu.gif
Material Design是Google设计的一套视觉语言,将优先的经典的设计原理与科技创新相结合,为开发者提供一套完成视觉和交互设计规范。移动设备是这套设计语言的基础对象,让用户在不同的平台、不同尺寸的设备上能保持一致的体验。 Material Design强调交互上的即时反馈,即对于用户的触控等行为app需要给出即时的反应。同时Material Design要求应用给用户带入感,让用户在使用时是沉浸在当前的应用当中。例如Google给出了沉浸式状态栏等“工具”,希望通过改变StatusBar和NavigationBar来给用户更强的融入感,专注于应用本身提供的内容。 Google从动画、颜色、样式、触控反馈、布局等多个方面给出了Material Design的设计要求。无论是单一的控件还是图文布局,Google都给出了明确的设计说明,有兴趣的同学可以去上方提到的官方链接处做进一步了解。
记得两年前的时候,曾写过自定义 behavior 的文章 自定义 Behavior -仿新浪微博发现页的实现,到现在差不多有一万多的阅读量吧。
一般的对于上图样式的Sticker我们使用CoordinatorLayout & AppBarLayout就可以说实现。
我一直对 Material Design 很感兴趣,每次在官网上阅读它的相关文档时,我总会有更进一步的体会。当然,Material Design 并不是仅仅针对 Android 而言的,它其实是一套普遍性的设计规范。而对于 Android 开发人员而言,我们涉及的往往是它的实现。也就是一个个个性鲜明的类。比如 RecyclerView 、CardView、Palette 等等。并且为了让开发者更轻松地开发出符合 Material Design 设计规范的界面,Google 开发人员直接提供了一个兼容包,它就是 Android Support Design Library。
顾名思义,CollapsingToolbarLayout是一个作用于Toolbar基础之上的布局,由DesignSupport库提供。
领取专属 10元无门槛券
手把手带您无忧上云