CoordinatorLayout CollapsingToolbarLayout

最新推荐文章于 2024-03-05 13:28:01 发布
最新推荐文章于 2024-03-05 13:28:01 发布
阅读量237 收藏
点赞数
文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cody123/article/details/84776041
版权
CoordinatorLayout CollapsingToolbarLayout

遇到两个问题

1、整个布局不是在根布局，也就说Toolbar不是在最上面，这个时候 CollapsingToolbarLayout 滑动到最上面，显示Toolbar的时候 会有一个黑色的间隔，这个估计应该是statusBar的高度，这个时候 需要设置下app:statusBarScrim="@null" 即可

后来发现 这个问题 只需要设置CollapsingToolbarLayout 子布局为android:fitsSystemWindows="true"即可


2、CoordinatorLayout 直接子view 总是被Toolbar挡住，也是滑动到最上面显示Toolbar的时候 就被遮挡了 这个时候 在这个子View上面设置android:elevation="10dp" 竟然就解决了
cody123
关注
Android CoordinatorLayout打造酷炫的顶部栏
07-08
`AppBarLayout`内部可能有一个`CollapsingToolbarLayout`，用于设置可折叠的标题和背景图片。`RecyclerView`则作为滚动内容，它的滚动事件会触发`AppBarLayout`的行为。 此外，`Behavior`是`CoordinatorLayout`中另...
Android Material Design 系列之 CoordinatorLayout + CollapsingToolbarLayout 开发详解
一名互联网时代苟且偷生的 Android码农
07-28 1361
前言 CoordinatorLayout 遵循 Material 风格，结合 AppbarLayout, CollapsingToolbarLayout 等可产生各种炫酷的效果，本篇博客就将介绍 CoordinatorLayout 的各种酷炫效果。 一、View 介绍 1、CoordinatorLayout 又名协调者布局，它是 support.design 包中的控件。简单来说，CoordinatorLayout 是用来协调其子 view 并以触摸影响布局的形式产生动画效果的一个 super-power
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout讲解
智玲君
11-24 3063
1，CoordinatorLayout协调布局 作用 根据一个layout（Dependency View）的操作来让另一个layout（child View）自动执行相关的操作，该child View具体执行什么相关操作取决于app:layout_behavior属性所指定的behavior类如何编写。 根据概念可以看出，协调布局的使用包含三个部分： 1.Dependency View 2.ch...
Material Design之CoordinatorLayout 与AppbarLayout与CollapsingToolbarLayout
jxq1994的博客
11-20 1273
该选项是enterAlways的附加选项，一般跟enterAlways一起使用，它的效果是：当ScrollView向下滚动时，子View会向下滚动，直到达到最小高度（到此为止是enterAlways的效果），然后当ScrollView滚动到顶部时，子View又会响应滚动事件，继续向下滚动，直到子View完全显示。它到底能帮我们做什么？我们要了解它，肯定是先看官方文档了。所以， AppBarLayout 其实更多的是作为一个中介，将兄弟节点的滚动事件传递给到其子View，让子View响应这些事件。
CoordinatorLayout系列（四）CollapsingToolbarLayout
whoami_I的博客
11-27 880
终于到CollapsingToolbarLayout这个强大而装逼的布局了，这个布局的实现和原理都是非常的简单，比如下面的效果： 是不是很酷？当然这还是比较简单的，这仅仅是使用到了系统自带的一些功能，通过自定义可以实现更复杂的效果。 demo地址：https://github.com/whoami-I/CoordinatorLayoutExample 先讲实现的方式，再讲实现的过程。 实现原理 ...
CoordinatorLayout/AppbarLayout/CollapsingToolbarLayout的配合使用，Toolbar特效
guangdeshishe的博客
07-14 2043
上面这个特效就是Toolbar与CoordinatorLayout/AppbarLayout/CollapsingToolbarLayout配合后的效果；这几个View单独使用没什么效果，一般都是要互相配合才行。 简介 CoordinatorLayout: Coordinator的翻译后意思是【协调者】，它主要用于协调处理子View如何响应滚动事件，一般与NestedScrollView配合，协调子View滚动事件的处理 AppbarLayout:是一种支持响应滚动手势的App Bar布局,继承自Li..
CoordinatorLayoutTest:CoordinatorLayout+CollapsingToolbarLayout+AppbarLayout等布局实现状态栏伸缩折叠
05-17
CoordinatorLayoutTest使用CoordinatorLayout+CollapsingToolbarLayout+AppbarLayout等布局实现状态栏伸缩折叠1.向上滑动，状态栏折叠，向下滑动，状态栏伸缩2.点击立即播放按钮，实现弹幕播放，向上滑动，弹幕暂停...
collapsingToolbarLayout:展示如何使用CoordinatorLayout，CollapsingToolbarLayout，Toolbar，RecyclerView，NavigationView
05-20
在这个“collapsingToolbarLayout”项目中，我们将深入探讨如何利用`CoordinatorLayout`、`CollapsingToolbarLayout`、`Toolbar`、`RecyclerView`和`NavigationView`来构建动态和交互性强的布局。 1. **...
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout
07-16
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar+NestedScrollView+RecyclerView+FloatingActionButton的使用demo，详细说明 http://blog.csdn.net/amazing7/article/details/51918623
CoordinatorLayout+CollapsingToolbarLayout实现仿美团外卖，京东，安居客等搜索框上推及筛选项悬停（二）
02-23
在Android开发中，实现类似美团外卖、京东和安居客等应用的高级交互效果，如搜索框上推和筛选项悬停，通常会涉及到`CoordinatorLayout`和`CollapsingToolbarLayout`这两个重要的布局组件。本篇文章将深入探讨如何...
CoordinatorLayout+AppBarLayout+Toolbar+TabLayout+ViewPager+RecyclerView+CardView
07-16
CoordinatorLayout+AppBarLayout+Toolbar+TabLayout+ViewPager+RecyclerView+CardView的使用，详细说明 http://blog.csdn.net/amazing7/article/details/51918623
CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout的使用
最新发布
m0_57150356的博客
03-05 1628
CoordinatorLayout(协调布局)常与AppBarLayout和CollapsingToolbarLayout配合使用。
CoordinatorLayout+ AppBarLayout+ CollapsingToolbarLayout
qq_34606099的博客
11-18 4642
主要记录一下在使用这几个组合控件中遇到的一些小问题。 CollapsingToolbarLayout是只能作为AppBarLayout的子布局，一般会加toolbar和其它的布局，反正是一个FrameLayout，随便加。 想要当前控件侵入到状态栏上，布局必须支持android:fitsSystemWindows=“true”。 想要上面这个属性生效还必须设置系统状态栏： @android:color/transparent 当设置透明就会默认把布局撑上去，上面这个是撑上去之后预留出状态栏的空间。 来到了C
CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout之间的关系及用法
jsc1996的博客
04-24 306
1.CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout简介 三者都是Material Design的设计风格，所以使用前需要添加android.support.design.widget依赖。其中： 1.CoordinatorLayout是一个加强版的FrameLayout,可以监听其所有子控件的各种事项。 2.AppBarLayout是一...
【Android+Kotlin】自适应CoordinatorLayout，AppBarLayout，CollapsingToolbarLayout,Palette与FloatingActionButt
qq_38304672的博客
10-12 1565
扉 1. 初级样例传送门 2. 细节注意 androidx.coordinatorlayout.widget.CoordinatorLayout（协调者布局）包裹的内容 AppBarLayout如果我们想要实现折叠的ActionBar效果 CollapsingToolbarLayout主要是实现折叠布局的，需要作为AppBarLayout的子View才会有效 其余各种属性详解 1）contentScrim ： 当CollapsingToolbarLayout完全折叠后的背景颜色。 通常设置为：app:
CoordinatorLayout:CollapsingToolbarLayout折叠效果的布局容器
Zheng
09-20 2033
如果项目中需要这种效果，可以使用CollapsingToolbarLayout(折叠效果的布局容器) 从名字就可以看出是和Toolbar结合使用的； CollapsingToolbarLayout相当于代理了ToolBar,专门给Toolbar使用的； Toolbar可以随着CollapsingToolbarLayout向上滑动 xml布局： <android.support.d
android5.0协调布局CoordinatorLayout（第一篇CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout之间的关系详解）原理
xiatiandefeiyu的博客
10-13 3643
首先从协调布局最简单的例子为入口开始分析，由浅到深，看效果图： 此效果如果不用5.0以下的自定义的效果的话，相对麻烦很多，而用5.0的协调布局的话只需要简单的写一个布局文件就搞定了，看布局文件代码 <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/
CollapsingToolbarLayout配合CoordinatorLayout、AppBarLayout，RecyclerView实现伸缩布局
Jersey_me的博客
05-26 2019
这四个layout都是Android design中出现的控件，所以要想使用首先要在gradle中配置依赖，其中RecyclerView使用的第三方的库，配置如下： compile 'com.jcodecraeer:xrecyclerview:1.3.2' compile 'com.android.support:cardview-v7:25.1.0' compile 'com.androi
Coordinatorlayout、AppBarLayout、ToolBar及CollapsingToolbarLayout的巧妙使用
zoujin6649的博客
03-06 834
相信很多人都用过github上的SlidingMenu，谷歌也推荐了一种实现侧滑菜单的空间——Drawlayout 一、导入 老版本是需要导入v4
coordinatorlayout+collapsingtoolbarlayout实现仿美团外卖,京东,安居客等搜索框
06-23
### 回答1： CoordinatoLayout与CollapsingToolbarLayout是Android开发中常用的两个控件，它们可以实现许多优秀的布局效果。其中，仿美团外卖、京东、安居客等搜索框的效果就可以通过使用这两个控件来实现。 首先，将CoordinatorLayout作为最外层布局，用AppBarLayout包裹CollapsingToolbarLayout和搜索框（Toolbar）的布局。在CollapsingToolbarLayout内部设置要展示的内容，如图片、文字等，以及折叠时隐藏的内容。而AppBarLayout则可以通过监听滚动事件来控制CollapsingToolbarLayout的展开与收缩。 接着，设置搜索框为Toolbar，并在Toolbar中加入EditText等控件来实现搜索功能。为了让搜索框在AppBarLayout的收缩中悬浮在顶部，可以将Toolbar设置为app:layout_scrollFlags="scroll|enterAlways|snap"。 最后，通过设置CollapsingToolbarLayout的collapsedTitleGravity、expandedTitleGravity、collapsedTitleTextAppearance、expandedTitleTextAppearance等属性来调整标题的展示效果，以适应不同的布局要求。 总之，通过使用CoordinatorLayout和CollapsingToolbarLayout这两个强大的布局控件，我们可以实现许多炫酷的布局效果，特别是像搜索框这样的常见功能，能够轻松实现，提高应用的用户体验。 ### 回答2： CoordinatorLayout是一个新的父容器控件，可以让子控件之间产生联动效果。CollapsingToolbarLayout是CoordinatorLayout的一个子控件，可以实现ToolBar折叠效果。 通过使用CoordinatorLayout和CollapsingToolbarLayout可以实现仿美团外卖、京东、安居客等应用的搜索框。我们可以在CollapsingToolbarLayout中添加一个EditText控件作为搜索框，并对其进行样式设置和位置调整。 在CollapsingToolbarLayout中，我们可以为其设置一个折叠模式，在不同的模式下控件的显示样式也会变化。当需要显示搜索框（例如在展开状态）时，我们可以设置一个比较大的折叠模式，使得搜索框完全显示。而当折叠Toolbar时，搜索框会根据预设的模式变为一个小图标，同时不影响其他控件的显示。 总的来说，通过使用CoordinatorLayout和CollapsingToolbarLayout，我们可以实现复杂的联动效果，让UI界面更加高效、美观。而在实现类似搜索框这类单一控件时，只需要在CollapsingToolbarLayout中添加控件，并对其进行相应样式和位置的设置即可。 ### 回答3： CoordinatorLayout是Android Support Design库中新增的一个布局类，它可以协调子View的滑动行为，实现一些复杂的交互效果。其中，CollapsingToolbarLayout是CoordinatorLayout中的一个布局类，通常用于实现可以折叠或扩展的标题栏效果。 在实现仿美团外卖、京东、安居客等搜索框的效果时，我们可以使用CollapsingToolbarLayout来实现。具体步骤如下： 1. 在布局文件中，先将CoordinatorLayout作为父布局，再添加一个AppBarLayout作为子布局。 2. 在AppBarLayout中添加一个CollapsingToolbarLayout作为子布局，并设置app:layout_scrollFlags="scroll|exitUntilCollapsed"属性，表示该子View可以滚动，并在完全收缩前一直存在。 3. 在CollapsingToolbarLayout中添加一个Toolbar作为子布局，这个Toolbar就是我们的标题栏。可以在其中添加搜索框等控件。 4. 在CollapsingToolbarLayout中再添加一个ImageView或其他子View，作为背景图片或其他效果。（可选） 5. 在布局文件中添加一个RecyclerView或其他滑动控件，将其放入CoordinatorLayout中，并设置app:layout_behavior="@string/appbar_scrolling_view_behavior"属性，表示该子View会受到AppBarLayout的滚动行为影响。 这样一来，当用户向下滑动页面时，CollapsingToolbarLayout会慢慢收缩，最后只剩下Toolbar，而背景图片则会消失或变成其他效果。与此同时，RecyclerView会随着滑动而滚动，实现搜索框随着页面滑动的效果。 总之，使用CoordinatorLayout和CollapsingToolbarLayout可以方便地实现一些复杂的交互效果，如此处的仿美团外卖、京东、安居客等搜索框效果。需要注意的是，该效果的实现还需进一步考虑适配、优化等问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值