文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CollapsingToolbarLayout使用

CollapsingToolbarLayout 可以看到，Toolbar的标题放大并在下方显示，当我们向上滑动列表时，顶部Header部分的图片向上折叠隐藏，标题向上移动并缩小，同时以渐显式的方式显示蓝色主题...所以，CollapsingToolbarLayout 的使用一定离不开 AppBarLayout 和 Toolbar，并且作为 AppBarLayout 的直接子视图使用。...关于CollapsingToolbarLayout的属性在官网上可以查到，这里我只介绍案例中我们常用的几个属性：title标题，布局展开时放大显示在图片底部，布局折叠时缩小显示在Toolbar左侧。...注意，没有设置这个属性时，默认使用Toolbar的标题；statusBarScrim顶部视图折叠状态下，状态栏的遮罩色。通常这样设置：app:statusBarScrim="?...语句前面）一起使用，使顶部视图展开时图片能够延伸到状态栏位置显示，如效果图中所示；contentScrim内容遮罩，上下滚动时图片上面显示和隐藏的遮罩色，Toolbar位置的的背景色；通常这样设置：app

2.4K60
您找到你想要的搜索结果了吗？
是的
没有找到

如何处理手势冲突 | 手势导航连载 (三)

问题 3: 常用的视图/控件位于手势交互区域内/附近吗？ 这个问题应该简单一些。注意，这个问题也包括那些占据屏幕较大区域，且包括了手势交互区域的视图/控件。...出现这种重叠的常见的例子: 非模态的底部弹出菜单，因为这种菜单常常会在屏幕底部折叠为一个较小的视图，而且还需要滑动操作。 屏幕底部的水平页面切换，例如软键盘里选择不同表情包的 UI。...这里让我们回到之前提到的音乐播放器示例。它包含一个位于屏幕底部的进度条，允许用户快进和快退歌曲。...这时屏幕底部的系统手势交互冲突已经解决了，但屏幕左右两侧的 "后退" 操作依然和进度条有冲突: 在上图中，由于进度条的播放头正好位于右侧手势区内，因此系统认为用户正在用手势执行 "返回" 操作，因此显示了...答案是，系统只会兑现您的要求中位于最下方的 200dp，如下图所示: △ 开发者请求切出 50 + 50 + 125 + 50 dp 的区域，但系统只兑现最下面的总计 200dp 我的视图不在屏幕内，是否也会受到这个限制

4.9K30

界面无小事(九): 做个好看的伸缩头部

Constant Value: 1 (0x00000001) 列个表再看下: 参数 效果 none 视图将正常运行, 没有折叠行为 pin 视图将固定到位, 直到它到达CollapsingToolbarLayout...的底部 parallax 视图将以视差方式滚动 是不是该怎么懵还是怎么懵, 来看效果图: ?...如果在此之前的任何兄弟视图没有此标志, 则此值无效. exitUntilCollapsed 退出(滚动屏幕)时, 视图将滚动直到“折叠”. 折叠高度由视图的最小高度定义。...snap 在滚动结束时, 如果视图仅部分可见, 则它将被捕捉并滚动到其最近的边缘. enterAlways 当进入(在屏幕上滚动)时, 无论滚动视图是否也在滚动, 视图都将滚动任何向下滚动事件....一旦滚动视图到达其滚动范围的末尾, 该视图的其余部分将滚动到视图中. 折叠高度由视图的最小高度定义.

95120

Android如何实现超级棒的沉浸式体验

我们的viewpager推到actionbar的下方的时候，就固定在了actionbar的下方，不能在往上面推了。...底部有一个控件，随着列表的向上滑动，它退出视角范围，以便于给出更多的空间来展示列表，其实整个沉浸式体验都是为了给列表留出更多的空间来展示。...可以看到，底部的控件是覆盖在列表上的，列表向上滑动的时候，把他隐藏，就可以空出更多的控件看列表。...private float bottomPadding; private int screenWidth; private float designWidth = 375.0f;//设计视图的宽度...bottomPadding是表示一个初始的偏移，因为viewpager本身不是顶在屏幕顶端的（开始被图片占据了一部分控件），因此，需要扣除这部分占有。

2.9K252

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

当滑动屏幕时，子控件都做出了相应的行为（滑出屏幕，固定顶端等），这些行为其实就是AppbarLayout提供给它子控件的功能。...什么意思，如果AppBarLayout的第一个子控件没有设置ScrollFlags属性或者没有设置scroll值，那么这个子控件就不会响应滑动事件，那么这个子控件下方的控件即使设置了各种响应行为，也不会有任何效果...，直到它还留在屏幕内的高度达到最小高度（没有设置好像默认就是wrap_content)时停止。...再回到我们问题来，Toolbar已经达到了它的最小高度了，所以它被固定在顶端不会动了，因此，即便在它下方的ImageView也设置了scroll属性值，但由于是线性布局，它也就动不了了。...至于作用其实就是当你一向下滑动屏幕时，控件就能马上显示出来，不必滑到顶端。 snap：当你停止滑到屏幕时，控件自动恢复原样或者自动滑到底。

1K60

处理视觉冲突 | 手势导航 (二)

然而有些交互可能导致应用的某些视图被系统栏遮盖，导致用户无法看见或操作。本文正是为帮助您解决这个问题而撰写——如何判断安全的交互区域。 更具体一点来说，本文主要处理与系统 UI 出现视觉重叠的问题。...如果您的控件出现在了这些区域内，就可能被系统 UI 遮盖。自然，我们可以使用 insets 区域来尝试解决视觉冲突，如把视图从屏幕边缘向内移动到一个合适的位置。...我们来看一个使用系统窗口区域的例子。我们有一个悬浮操作按钮 (FAB)，它位于屏幕右下角，距离屏幕边缘 16dp (这符合设计指南中的要求)。...具体到本例中，FAB 位于底部右侧边缘附近，因此我们可以使用 systemWindowInsets.bottom 和 systemWindowInsets.right 值来增加 FAB 下方和右方的边距...在 Android 10 上，当前唯一的强制区域是屏幕底部的主屏手势区域，系统保留这个区域就可以让用户在任何时候都可以退出当前应用: △ 底部 60dp 即为强制系统手势边衬区 稳定显示边衬区 方法:

2.8K30

在项目中运用Meterial Design实现动画效果

1CoordinatorLayout效果图 运行效果图：（录屏分辨率有点低，导致图片模糊，实际效果是很清晰的） ?...这个动画效果最重要重点使用了CollapsingToolbarLayout可实现Toolbar的折叠效果。...4、 app:layout_collapseParallaxMultiplier="0.5" CollapsingToolbarLayout滑动时，子视图的视觉差，可以通过这个属性来改变。...5、app:layout_collapseMode=”parallax” app:layout_collapseMode="pin" 子视图的折叠模式，有两种，经常使用： pin：设置为这个模式时...，当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上，在折叠的时候最后固定在顶端； parallax：视差模式，在折叠的时候会有个视差折叠的效果。

38330

用 CoordinatorLayout 处理滚动

当渲染一个 Snackbar 时，它通常出现在可见屏幕的底部。Floating action button 必须上移以便腾出空间。 ?...通过指定 minHeight 和 exitUntilCollapsed，剩余内容开始滚动之前将首先达到 Toolbar 的最小高度，然后退出屏幕： ?...支持的底部表有两种类型：persistent 和 modal。Persistent 类型的底部表显示应用内的内容，而 modal 类型的则显示菜单或者简单的对话框。 ?...Modal 形式的底部表 Modal 形式的底部表基本上是从底部滑入的 Dialog Fragments。关于如何创建这种类型的 fragment 可以查看本文。...高级的底部表示例 有很多复杂的使用了 floating action button 的底部表的例子，button 随着用户滑动或展开或收缩或改变表状态。

4.7K92

安卓Chrome使用技巧合辑

在"标签页列表"识图中，旧标签页概览视图总会被新标签页概览视图遮挡，你可以通过长按某一旧标签页两次来把位于它上方的新标签页移开，从而在"标签页列表"视图中预览任意一个标签页全貌。 　　5....双击屏幕，在第二次点击屏幕时按住屏幕不放，以双击屏幕的位置定为原点，把手指向三象限或者四象限方向滑动，即可以原点为中心，快速放大页面，如果想要缩小页面，只需要双击屏幕，在第二次点击屏幕时把手指向一象限或者二象限方向滑动...　　中自行体验，值得说明的是，一些实验性特性可能导致浏览器不稳定，所以在更改实验室特性之前## 请仔细阅读实验室特性页面上方的警告并提前备份好数据## 。...底栏模式(Chrome Home): 　　chrome://flags/#enable-chrome-home 　　启用Chrome Home模式后，默认位于屏幕顶部的地址操作栏将会移至屏幕底部...: 　　chrome://flags/#enable-autofill-keyboard-accessory-view 　　启用此特性后，当光标定位在输入框内，并且此输入框有待填充内容时，将在屏幕底部显示一个快速填充底栏

9.5K30

android 设置标题栏背景颜色_状态栏菜单栏都在哪

带有底部导航栏手机底部导航按钮会和navigationbar重叠 如下图所示： 全屏时，由于视图布局会填充到状态栏和导航栏下方，如果不使用android:fitsSystemWindows=”true...”属性，就会使底部导航栏和应用底部按钮重叠，导视按钮点击失效，这该怎么办？...解决的方法： 1. 先判断手机是否有物理按钮判断是否存在NavigationBar； 2. 计算底部的NavigationBar高度； 3. 最后设置视图边距。...视图布局位于占空布局下方，从而达到视图布局不遮挡状态栏效果。...而对于第一个首页和第四个我的fragment，则需要布局的图片填充到状态栏底下，而标题栏要位于状态栏下方，这其实只需要一种取巧实现，一般手机状态栏高度都是在25dp左右，当然在代码中动态获取状态栏高度，

2.2K10

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

首先因为我们的TooBar是需要响应滚动的视图，所以需要为其配置一个属性：layout_scrollFlags。...然后呢，我们需要定义一下AppBarLayout与滚动视图(如RecyclerView，NestedScrollView等可以支持嵌套滚动的控件)supportlibrary包含了一个特殊的字符串资源@...通过效果显示，当视图在滚动的时候，ToolBar滚出了屏幕，为内容区域留出了更大空间。...其中控制ToolBar是否可以滚出屏幕的属性是由app:layout_scrollFlags=”scroll|enterAlways”。...来说一下这个属性，要想滚出屏幕layout_scrollFlags必须设置scrll这个flag。剩下的几个flag解释如下： enterAlways:只要滚动视图向下滚动，view就会显示出来。

85741

Android开发笔记（二十二）瀑布流网格WaterfallGridView

瀑布流网格的产生背景 Android中展示门类信息一般使用列表视图ListView或者网格视图GridView，特别是电商类APP的首页，除了顶部导航、底部标签、上方横幅外，主要页面都是展示各种商品和活动的网格视图...最后放区块3，位置在区块1的下方，同时位于区块0和区块2的右边。...保存每列末尾的视图id，是为了在它下方添加视图时可以指定位于哪个视图的下方；保存每列的总高度，是为了判断当前哪一列总高度最小，从而把新来的网格添加到该列末尾。...表示在指定视图的右边，常量RelativeLayout.BELOW表示在指定视图的下方。...为此我们需要重写dispatchTouchEvent方法，在按下事件时计算当前按下区域位于哪个控件中，具体算法就是获取该控件在屏幕上的位置getLocationOnScreen，然后根据宽和高得到该触摸点的归属控件

2.2K60

【Android从零单排系列三十四】《Android布局介绍——ConstraintLayout》

这意味着你可以根据需要自由调整视图的位置，并确保在不同屏幕尺寸或设备方向下的正确布局。 性能优化：ConstraintLayout针对性能进行了优化，可以减少布局层次以及视图的嵌套。...app:layout_constraintBottom_toBottomOf：将视图的底部边与给定视图的底部边对齐。...TextView 1被设置为位于父容器的顶部，并与父容器的左右边缘对齐。同时，它的底部边缘与TextView 2的顶部边缘对齐。...TextView 2位于TextView 1的底部，并与父容器的左右边缘对齐。同时，它的底部边缘与Button的顶部边缘对齐。 Button位于TextView 2的底部，并与父容器的左右边缘对齐。...同时，它的底部边缘与父容器的底部边缘对齐。 通过这样的约束条件，我们可以实现一种垂直排列的布局，其中TextView 1位于顶部，TextView 2位于其下方，Button位于最底部。

33320
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券