开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

AppBarLayout和ToolBar与ScrollView及其子布局重叠

AppBarLayout和ToolBar是Android开发中常用的布局组件，用于实现应用程序的标题栏和工具栏。ScrollView是一个可滚动的视图容器，用于显示超出屏幕范围的内容。

当AppBarLayout和ToolBar与ScrollView及其子布局重叠时，可以采取以下几种解决方案：

使用CoordinatorLayout：CoordinatorLayout是一个强大的布局容器，可以协调子视图之间的交互。将AppBarLayout和ScrollView放在CoordinatorLayout中，并使用合适的布局属性来控制它们的位置关系。例如，将AppBarLayout设置为app:layout_behavior="@string/appbar_scrolling_view_behavior"，这样AppBarLayout会自动与ScrollView进行交互，实现滚动时的动态效果。
调整布局层次结构：如果布局层次结构较为简单，可以考虑将ToolBar放在ScrollView之外，使其不会与ScrollView及其子布局重叠。这样可以确保ToolBar始终位于顶部，不会被ScrollView遮挡。
使用NestedScrollView：NestedScrollView是ScrollView的扩展，支持嵌套滚动。将AppBarLayout和ToolBar放在NestedScrollView外部，将ScrollView及其子布局放在NestedScrollView内部。这样可以实现AppBarLayout和ToolBar与ScrollView的分离，避免重叠问题。
调整布局属性：在AppBarLayout和ToolBar上使用合适的布局属性，例如设置android:layout_marginTop来调整与ScrollView的间距，或者使用android:layout_below将ToolBar放置在ScrollView之下。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云移动开发平台：https://cloud.tencent.com/product/mpp
腾讯云云原生应用引擎：https://cloud.tencent.com/product/nae
腾讯云数据库服务：https://cloud.tencent.com/product/cdb
腾讯云服务器：https://cloud.tencent.com/product/cvm
腾讯云音视频处理：https://cloud.tencent.com/product/mps
腾讯云人工智能：https://cloud.tencent.com/product/ai
腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
腾讯云存储服务：https://cloud.tencent.com/product/cos
腾讯云区块链服务：https://cloud.tencent.com/product/baas
腾讯云元宇宙：https://cloud.tencent.com/product/mu

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

AppBarLayout学习

五个值分别是： scroll：子View随ScrollView一起滚动 enterAlways：只要ScrollView向下移动，子View立即响应滚动 enterAlwaysCollapsed：当ScrollView...滚动最顶层时，子View响应滚动事件，直至子View完全显示 exitUtilCollapsed：只要ScrollView向上滚动，子View立即响应滚动，直到达到最小高度 snap：当Scrollview...> 运行效果如下：可以看到ToolBar和ImageView就好像是ScrollView里的内容一样，跟着上下滚动；不过需要注意的是，如果单独设置ImageView的为scroll，而不设置ToolBar...滚动，最后ImageView和ToolBar一起滚动。...总结 AppBarLayout是一个垂直的LinearLayout，内部可以布局多个View，在CoordinatorLayout内部与ScrollView共同作用，一共有五种scrollFlags设置

1.1K3 0

Android开发笔记（一百三十五）应用栏布局AppBarLayout

应用栏布局AppBarLayout Android5.0推出工具栏Toolbar用来替代ActionBar，灵活性和易用性大大增强，有关Toolbar的详细介绍参见《Android开发笔记（一百一十九...RecyclerView是其中一个特工，它可用来替代ListView和GridView；替代ScrollView的则另有其人，它便是嵌套滚动视图NestedScrollView，在Android5.0之后的...NestedScrollView继承自FrameLayout，其用法与ScrollView相似，如都必须且只能带一个直接子视图，都是允许视图上下滚动等等。...NestedScrollView多出来的功能，也就是跟AppBarLayout配合使用，以便触发Toolbar的滚动行为，你可以把它当作是兼容了Android5.0新特性的增强版ScrollView。...1、AppBarLayout的滚动依赖于主体视图的滚动，与主体视图相对应的，可将AppBarLayout称作头部视图。既然一个页面分为头部和主体两部分，那么就存在谁先滚谁后滚的问题了。

2K4 0

高仿支付宝9.9.2版本生活模块界面来讲解CoordinatorLayout，AppBarLayout，CollapsingToolbarLayout

在各个布局文件里，最外围的是CoordinatorLayout这个控件，这个有什么作用呢，就我的大白话来说就是协调子View之间动作的一个父View,通过Behavior来给子view实现交互的。...控件互动实现滑动，总结就是CoordinatorLayout控件和app:layout_behavior来进行互动，进而CoordinatorLayout的子控件和app:layout_behavior...2.AppBarLayout 其次就是AppBarLayout，去除官方解释，简单来说就是它可以让你定制当某个可滚动View的滚动手势发生变化时，其内部的子View实现何种动作。...内部的子View通过在布局中加app:layout_scrollFlags设置执行的动作。...4.Toolbar动态变化在此整体布局就已经完成，不过还有一个效果就是向上移动是toolbar的的View是动态变化的，一开始我以为这些控件会有这个功能吧，没想到找了很久都没找到，没办法只能自己实现了

1.1K2 0

CoordinatorLayout使用全解析

AppBarLayout的子布局有5种滚动标识(上面代码CollapsingToolbarLayout中配置的app:layout_scrollFlags属性)： scroll：所有想滚动出屏幕的view...CollapsingToolbarLayout的子布局有3种折叠模式（Toolbar中设置的app:layout_collapseMode） off：默认属性，布局将正常显示，无折叠行为。...NestedScrollView 在新版的support-v4兼容包里面有一个NestedScrollView控件，这个控件其实和普通的ScrollView并没有多大的区别，这个控件其实是Meterial...> 然后，我们需要定义AppBarLayout与滚动视图之间的联系。...AppBarLayout.ScrollingViewBehavior描述了RecyclerView与AppBarLayout之间的依赖关系。

2.1K2 0

Android 折叠式布局

折叠式布局效果图如下 ?...文件将里面的总布局改为CoordinatorLayout里面以此嵌套AppBarLayout 、Toolbar。...嵌套好之后设置一些简单的样式即可到这一步基本上这个折叠布局已经完成了，然后只要填充相关的控件即可实现效果，要注意的点是Toolbar中放置的是你需要折叠和展开的控件，而AppBarLayout中放置的是...为了使体现更好可以AppBarLayout下面放一个滚动条，不要用ScrollView而是NestedScrollView因为这里你是要联动的。...，我们看一下布局 ?

1.4K2 0

Android仿微博个人详情页滚动到顶部的实例代码

个人详情页技术实现分析: 先看看xml布局的伪代码: <?xml version="1.0" encoding="utf-8"?...目前我们要实现的是，在进入当前页面时，强制让AppBarLayout滑动到顶部，使toolbar悬浮固定不动。...感兴趣的可以好好分析下CoordinatorLayout是如何完成事件分发的，如何让子view相互联动的。...mCollapsingHeight = appBarLayout.getHeight() - toolbar.getHeight() - DisplayUtils.dip2px(46); 这个值需要结合页面布局来计算...，我们的页面布局两部分中，最上面的是appBarLayout，规定的是距离靠近toolbar的高度就产生渐变，toolbar开始固定位置，那么就需要按照这个公式计算mCollapsingHeight。

1.2K2 0

学习使用Material Design控件（四）Android实现标题栏自动缩放、放大效果

控件介绍这次需要用到得新控件比较多，主要有以下几个： CoordinatorLayout 组织它的子views之间协作的一个Layout，它可以给子View切换提供动画效果。...其中的控件，在响应collapse时是移除屏幕和固定在最上面 TabLayout 结合ViewPager，实现多个TAB的切换的功能 NestedScrollView 与ScrollView基本相同...，不过包含在NestedScrollView中的控件移动时才能时AppBarLayout缩放 Layout布局 <?...match_parent” / </LinearLayout </android.support.design.widget.CoordinatorLayout CollapsingToolbarLayout和TabLayout...的使用说明可以参考探索新的Android Material Design支持库代码实现 //Toolbar Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar

1.2K3 1

用 CoordinatorLayout 处理滚动

的容器布局来使 ToolBar 响应滚动事件： <android.support.design.widget.AppBarLayout android:id="@+id/appbar"...> 注意：根据官方的 Google 文档，目前 AppBarLayout 需要作为直接子元素被嵌入 CoordinatorLayout 中。...然后，我们需要在 AppBarLayout 和期望被滚动的 View 之间定义一个关联。...RecyclerView 上的任何滚动事件都将触发 AppBarLayout 或任何包含在其中的 view 的布局发生变化。...第三方滚动和视差效果库除了使用上述的 CoordinatorLayout，还可以查看这些流行的第三方库来实现 ScrollView， ListView， ViewPager 和RecyclerView

4.8K9 2

Material Design 实战之第六弹 —— 可折叠式标题栏(CollapsingToolbarLayout) & 系统差异型的功能实现（充分利用系统状态栏空间）

1.2 CollapsingToolbarLayout不能独立存在，它在设计的时候就被限定只能作为AppBarLayout的直接子布局来使用。...而AppBarLayout又必须是CoordinatorLayout的子布局； 1.3 水果详情界面布局框架： CoordinatorLayout下分三部分：水果标题栏、水果详情栏...不过CollapsingToolbarLayout不能独立存在，它在设计的时候就被限定只能作为AppBarLayout的直接子布局来使用。...而AppBarLayout又必须是CoordinatorLayout的子布局。本文来做一个额外的活动作为水果的详情展示界面，当点击水果列表卡片的时候就进入这个界面。...不管是ScrollView还是NestedScroIIView，它们的内部都只允许存在一个直接子布局。

2.3K4 0

CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar-Android M新控件

- 作为一个为子视图之间相互协调手势效果的一个协调布局 - ) 该控件也是Design包下的一个控件，然而这个控件可以被称为Design包中最复杂、功能最强大的控件：CoordinatorLayout...比如：在CoordinatorLayout中使用AppBarLayout，如果AppBarLayout的子View（如ToolBar、TabLayout）标记了app:layout_scrollFlags...的下滑时ToolBar和TabLayout都会隐藏了。...可以滑动，我们必须还得有个条件，就是CoordinatorLayout布局下包裹一个可以滑动的布局，比如 RecyclerView，NestedScrollView(经过测试，ListView，ScrollView...为了使得Toolbar有滑动效果，必须做到如下三点： CoordinatorLayout必须作为整个布局的父布局容器。

2.1K3 0

Android 滑动渐变背景Toolbar、点击置顶ScrollView

点击置顶ScrollView ? 这个置顶是滑动的置顶，不包括外层布局。好了，效果图看到了，你有没有动力开始写代码呢？...setScreenHeight(int screenHeight) { this.screenHeight = screenHeight; } //设置滚动置顶按钮以及其点击监听事件...的顶点 this.smoothScrollTo(0, 0); } } activity_main.xml布局 <?...() { @Override public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset...点击置顶ScrollView ? 代码下载地址

1.7K2 0

【Android】5.x炫酷标题栏动画使用理解

CollapsingToolbarLayout则只是一个对Toolbar进行包装，实现了可以对标题栏进行折叠功能的一个基本容器，它是作为AppBarLayout的直接子布局来使用。...这里的Toolbar、imageView都是AppbarLayout的子控件。...而且Toolbar也跑到下面去了，那么，我们在把ImageView和Toolbar换个位置试下：布局代码结构： <Toolbar app:layout_scrollFlags...Toolbar和ImageView不滑动了！！为什么，下面说。很明显的一点，ImageView和Toolbar变成了线性垂直布局的了。...细心点的读者会发现，我们上面刚提到过AppBarLayout是继承自LinearLayout默认实现子控件垂直布局。

1.1K6 0

CoordinatorLayout与滚动的处理

扩展或者缩小Toolbar或者头部，让主内容区域有更多的空间。 ? 控制哪个view应该扩展还是收缩，以及其显示大小比例，包括视差滚动效果parallax scrolling effects 动画。...---- Expanding and Collapsing Toolbars（Toolbar的扩展与收缩） ?...注意：根据官方的谷歌文档，AppBarLayout目前必须是第一个嵌套在CoordinatorLayout里面的子view。...然后，我们需要定义AppBarLayout与滚动视图之间的联系。...AppBarLayout.ScrollingViewBehavior描述了RecyclerView与AppBarLayout之间的依赖关系。

7792 0

CoordinatorLayout打造折叠式的顶部标题栏

AppBarLayout：是一个vertical的LinearLayout封装控件，其子View应通过setScrollFlags或者xmL中的app:layout_scrollFlags来设置提供他们的变化状态...( Android开发之CoordinatorLayout打造滑动越界弹性放大图片效果有解释 ) AppBarLayout必须是CoordinatorLayout的直接子View，不然他一点作用都发挥不出来...AppBarLayout下方与之并列的滑动控件有比如RecyclerView，NestedScrollView（与AppBarLayout同属于CoordinatorLayout的子View）,这些并列的...的控件，里面可以放置一个头部ImageView和一个toolbar。...在此注意AppBarLayout如果设置了layout_scrollFlags="snap"，但是Viewpager没有设置layout_behavior，View一样会自动隐藏，让人误以为child与

2K3 0

Material Design 在 Android 中的应用

headerLayout: 设置其头布局 menu: 设置菜单布局详细使用请看我之前写的一篇博客：高大上的DrawerLayout 4、Toolbar 整体的架构搭建好了，剩下就是开始每个模块的内容了...Toolbar作为早期Android中ActionBar的替代品，定制性和操作性挺高了不少。使用的时候需要设置NoActionBar的主题。...作为ViewGroup包裹子View实现圆角和阴影的效果： <android.support.v7.widget.CardView android:layout_width="wrap_content...3. scroll|enterAlwaysCollapsed 当<em>ScrollView</em>向下滑动时，DependentView先折叠到最小高度(这里是0),然后将事件交给<em>ScrollView</em>，当<em>ScrollView</em>...Android 5.0提供了强大的转场动画，给每个item赋予了生命，跳转时，仿佛每块<em>布局</em>都参与了这次搬迁大运动。

1.2K2 0

Android--AppBarLayout基本使用

AppBarLayout一般用于赋予Toolbar（不限于Toolbar）滚动行为，AppBarLayout是一个垂直的LinearLayout，实现了Material Design中app bar的scrolling...AppBarLayout的子View应该声明想要具有的“滚动行为”，这可以通过layout_scrollFlags属性或是setScrollFlags()方法来指定。...AppBarLayout只有作为CoordinatorLayout的直接子View时才能正常工作，为了让AppBarLayout能够知道何时滚动其子View，我们还应该在CoordinatorLayout...布局中提供一个可滚动View，如：RecyclerView 布局文件 <?...3.enterAlwaysCollapsed 默认Toolbar不遮挡滑动控件，如果消失后再显示，则会遮挡，其他和scroll相同 ?

3.5K2 0

详解android特性之CoordinatorLayout用法探析实例

接下来看一个高级点的效果，就是标题栏，也就是ToolBar的扩展与收缩效果。...要想要ToolBar响应滚动事件，这里我们需要用到一个控件：AppBarLayout，这个控件必须作为CoordinatorLayout的直接子View，才会响应滚动事件。...然后呢，我们需要定义一下AppBarLayout与滚动视图(如RecyclerView，NestedScrollView等可以支持嵌套滚动的控件)supportlibrary包含了一个特殊的字符串资源@...string/appbar_scrolling_view_behavior，它和AppBarLayout.ScrollingViewBehavior相匹配，用来通知AppBarLayout 这个特殊的view...这个时候呢，我们把Toolbar直接放在CollapsingToolbarLayout下，先修改appbar_main.xml布局如下： <?

9564 1

细说 AppbarLayout,如何理解可折叠 Toolbar 的定制

Behavior，实现了子 View 与 CoordinatorLayout、子 View 与子 View 之间一系列复杂的交互。...AppBarLayout 本身想提供一个 AppBar 的概念，所以严格地讲它本身与 Toolbar 没有直接的关系。...AppBarLayout 虽然和 Toolbar 没有直接联系，但是当 Toolbar 内置在 AppbarLayout 中的时候，Toolbar 的效果增强了，这使得开发者非常愿意用 AppBarLayout...AppbarLayout 的子 View 不仅仅是 Toolbar,它们可以是任何的 View，但通常和 Toolbar 配合使用。...> 在布局文件中添加一个图标，然后监听 AppBarLayout 的滑动来改变自身的透明度。

3K3 0

通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout

调度协调子布局 CoordinatorLayout使用新的思路通过协调调度子布局的形式实现触摸影响布局的形式产生动画效果。...CoordinatorLayout通过设置子View的 Behaviors来调度子View。...的介绍 AppBarLayout 是一个竖直排列的线性布局，它实现了很多Material Design风格app bar的设计概念，换句话说就是滚动手势。...它是设计用于直接AppBarLayout的子视图。...与 Actionbar 相比，Toolbar 明显要灵活的多。它不像 Actionbar 一样，一定要固定在Activity的顶部，而是可以放到界面的任意位置。

2.3K9 0

Android view滑动悬浮固定效果实现代码示例

2.思路 (CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout)+TabLayout+ViewPager 3.代码实现 a.主布局代码 <?...<include layout=”@layout/content_scrolling” / —— 引用的子view布局其实就是一个ViewPager（需要注意的是要在布局中设置：app:layout_behavior...可以看到图中黑色边框显示的内容不一致，因此ToolBar和ImageView的排列顺序会对视图的显示结果造成影响。...（因此，1.在画布下的内容就无法显示出来；2.无法覆盖画布的内容就显示为画布默认的样式）所以，如果不想要有视差效果的话，那么就将Toolbar与TabLayout的高度设置一致。...只要将TabLayout从CollapsingToolbarLayout中移到AppBarLayout的一级子View即可。

8661 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭