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

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

选择模板 首先, 在Toolbar上面加入ImageView, 参数之后再说明....如果在此之前的任何兄弟视图没有此标志, 则此值无效. exitUntilCollapsed 退出(滚动屏幕)时, 视图将滚动直到“折叠”. 折叠高度由视图的最小高度定义。...snap 在滚动结束时, 如果视图仅部分可见, 则它将被捕捉并滚动到其最近的边缘. enterAlways 当进入(在屏幕上滚动)时, 无论滚动视图是否也在滚动, 视图都将滚动任何向下滚动事件....这通常被称为“快速返回”模式. enterAlwaysCollapsed 'enterAlways'的另一个标志, 它修改返回的视图, 最初只回滚到它的折叠高度....一旦滚动视图到达其滚动范围的末尾, 该视图的其余部分将滚动到视图中. 折叠高度由视图的最小高度定义.

98920

iOS-视频播放器的简单封装

首先CLAVPlayerView加载时需要将播放器layer添加到imageView的layer上，此时蒙版和底部工具条一定都是隐藏的，点击中间播放按钮，视频开始播放并隐藏播放按钮。...工具条的显示与隐藏 在播放状态时，当点击imageView，就会弹出底部工具条，可以查看当前播放的时间，视频总时间或进行暂停视频、全屏播放等操作。如果没有操作，工具栏会在5秒之后自动隐藏。...而当未播放状态时，点击imageView和中间播放按钮效果一样，开始播放视频。 添加定时器，5秒钟之后隐藏底部工具条，并提供移除定时器的方法。...，播放暂停，则此时工具栏不会消失，重新开始播放视频，工具栏在5秒内消失。...简单封装 此时已经实现了播放器基本的功能，接下来考虑如何封装能使我们使用起来更加方便，其实我们已经将大部分封装完成，接下来需要做的就是提供简单易用的接口，使外部可以轻松调用实现播放器。

1.9K110
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    CoordinatorLayout使用全解析

    exitUntilCollapsed：当你定义了一个minHeight，此布局将在滚动到达这个最小高度的时候折叠。 snap：当一个滚动事件结束，如果视图是部分可见的，那么它将被滚动到收缩或展开。...，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端...CollapsingToolbarLayout可以通过app:contentScrim设置折叠时工具栏布局的颜色，通过app:statusBarScrim设置折叠时状态栏的颜色。...假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。...exitUntilCollapsed: 同样顾名思义，这个flag时定义何时退出，当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候消失。

    2.2K20

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

    : 顾名思义，这个flag定义的是何时进入（已经消失之后何时再次显示）。...假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。...exitUntilCollapsed: 同样顾名思义，这个flag时定义何时退出，当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候消失。...parallax - 设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier...它不像 Actionbar 一样，一定要固定在Activity的顶部，而是可以放到界面的任意位置。

    2.3K90

    CollapsingToolbarLayout使用

    ，直至高度缩为Toolbar的高度并成为Toolbar的背景色；向下滑动列表时，Header部分逐渐显示。...关于CollapsingToolbarLayout的属性在官网上可以查到，这里我只介绍案例中我们常用的几个属性：title标题，布局展开时放大显示在图片底部，布局折叠时缩小显示在Toolbar左侧。...addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);（支持API19及以上版本，位于setContentView语句前面）一起使用，使顶部视图展开时图片能够延伸到状态栏位置显示...当设置为1.0，滚动列表时图片不会折叠移动； 代码实现： 关于CoordinatorLayout作为根布局容器如何协调子控件之间的交互行为，可以参考上一篇文章，这里我介绍一下本例中几个新的注意点。...作为AppBarLayout的直接子控件，CollapsingToolbarLayout包裹Header部分的ImageView和Toolbar，并分别设置二者的折叠模式。

    2.5K60

    Android之MaterialDesign应用技术2-仿支付宝上滑搜索框缓慢消失

    上滑 顶部背景图片缓慢消失，标题悬浮 在标题 上栏加入布局，放一些搜索框 输入框TextInputEditText的使用 1:上滑 顶部背景图片缓慢消失，标题悬浮 ?...竟然折叠的部分是toolbar和背景图片，这就理所应当的把这两个空间写在CollapsingToolbarLayout中，因为上面协调者布局和appbar布局很简单，这里就不在写了，只贴出折叠布局代码（...里面的注释有贴出后加的，用该代码时要注意语法）。...这里可以看出我在ImageView中加入了高度180dp，这里是一定要加上的，否侧toolbar的会出现以下几种错误，1:文字不显示。2：只显示标题栏。3：图片过大充满整个屏幕。...2.1：布局书写 这里的布局和上面是一样的，只是把imageview换成了LinearLayout布局，在该布局中写上我们熟悉的输入框和图片按钮即可， 最外层-->里层还是：CoordinatorLayout

    1.6K100

    Material Design之CollapsingToolbarLayout 相关属性和方法介绍

    在折叠的时候标题文字的外观必须引用另一个资源 ，以“@[+][包:]类型:名称”或 主题属性形式”?(包:)类型:名称”。...在折叠的时候 状态栏的背景颜色 10。...在折叠的时候 显示的toolbar的id 13.app:layout_scrollFlags="scroll|exitUntilCollapsed"  scroll - 想滚动就必须设置这个。...enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时，你的View只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。...parallax - 设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier

    96730

    Android 折叠式布局

    从头开始 先建立一个名为 Folding 项目，然后在创建一个Activity, OneActivity 这个Activity带有自身的XML布局文件， ** 标题栏折叠** 首先打开activity_one.xml...我们就折叠一个图片ImageView吧，折叠之后显示一个标题TextView。如下图所示 ?...到这里我们就已经实现了这个折叠式，当你点击这个蓝色背景标题往上面滑动时，ImageView就会折叠起来，往下滑动时图片就会展开。...为了使体现更好可以AppBarLayout下面放一个滚动条，不要用ScrollView而是NestedScrollView因为这里你是要联动的。...ScrollView还是NestedScrollView，里面都只能包裹一个控件，我常用的是LinearLayout 然后LinearLayout里面设置纵向排列，放三张图片，这样LinearLayout的总高度就会超过手机屏幕

    1.4K20

    使用CoordinatorLayout打造各种炫酷的效果

    int SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED 另一种enterAlways，但是只显示折叠后的高度。...主要实现以下功能 - Collapsing title（可以折叠 的 标题 ） - Content scrim（内容装饰），当我们滑动的位置 到达一定阀值的时候，内容 装饰将会被显示或者隐藏...方法一：在代码中使用这个方法 setCollapseMode(int collapseMode) 方法 二：在布局文件中使用自定义属性 app:layout_collapseMode="pin" 到此...结构图如图片所示，先说明CollapsingToolbarLayout的变化 CollapsingToolbarLayout里面 包含ImageView 和ToolBar，ImageView的app:...CollapsingToolbarLayout显示 接着说明TabLayout的变化 从前面的描述我们已经知道当 没有指定app:layout_scrollFlags的时候，最终TabLayout会静止，不会随着滑动的 时候消失不见

    5K10

    用 CoordinatorLayout 处理滚动

    snap：使用这一选项将由其决定在 view 只有部分减时所执行的功能。如果滑动结束时 view 的高度减少的部分小于原始高度的 50%，那么它将回到最初的位置。...如果这个值大于它的 50%，它将完全消失。 ? 注意：在你脑海中要将使用了 scroll 标志位的 view 放在首位。这样，被折叠的 view 将会首先退出，留下在顶部固定着的元素。...创建视差动画 CollapsingToolbarLayout 可以让我们做出更高级的动画，例如使用一个在折叠的同时可以渐隐的 ImageView。在用户滑动时，标题的高度也可以改变。 ?...Grafixartist Bottom Sheet Tutorial - 关于在底部表滑动时如何定位 floating action button 以及对其使用动画的教程。...如果你在使用 behavior 时遇到了问题，请查看下面的建议： 关于如何高效使用 CoordinatorLayout 的例子请仔细参考 cheesesquare 源码。

    4.8K92

    六天完成一个简单iOS App - 第六天

    当控制器view即将消失的时候 隐藏SVP 并且取消请求，但是AFN中如果正在发送请求当请求还没有返回的时候，取消请求会来到failure方法中，所以需要在failure方法中进行判断if (error.code...评论界面xib 需要注意的还是约束的添加，因为这里需要底部工具条随着键盘的弹出上移，所以底部工具条的底部与SuperView的底部间距为零，如图 底部工具条最底端约束 然后我们拿到这个约束，监控键盘的弹出...，当键盘弹出的时候，将约束间距修改为键盘的高度，同时也可以拿到键盘弹出的时间，使底部工具条在相同时间内上移即可。...cell的高度计算 评论界面的cell使用的是UITableViewAutomaticDimension自动计算高度，这样cell在添加约束的时候需要额外小心，先来看一下评论cell的xib 评论界面...但是这里存在两个问题 此时最热评论虽然没有了，但是那部分会被空出来，这是因为我们之前对cell的高度进行了缓存，当设置cell高度时，发现cellHeight不为零，则直接返回高度，不会重新计算。

    1.3K50

    Android魔术系列：一步步实现滑动折叠列表

    然后我们观察滑动中的状态，如图： 当我们向上滑动的时候，可以看到第一个item开始折叠，而第二个item逐渐展开，同时遮罩效果减弱，文字内容逐渐变大。这样就产生了滑动折叠的效果。...产生折叠的效果。...其中changeItemHeight(view, int)用来改变item的高度实现展开或折叠；而changeItemState(view, float, float)用来改变遮罩透明度和文字内容大小。...其实当RecyclerView添加到屏幕上时，是一定会产生滑动的。所以我们进入页面的时候，我们什么都没有操作，滑动监听的函数却被调用了。...目前这个版本在快滑时还有一个小问题。 除了RecyclerView这个版本，实际上这个效果还有一个ScrollView的版本。

    1K10

    【翻译】MotionLayout实现折叠工具栏（Part 1）

    在展开和折叠状态下， RecyclerView 列表的上边缘是处于不同位置的，因为它被约束到了 ID 为 toolbar_image 的 ImageView 图片下边缘，而这个过渡动画的实现正是由于控制着这个位置变量的值...通过改变图片的高度，这会导致 RecyclerView 的上边缘的移动，因为后者正是约束在图片的下边缘位置。...让我们首先看看这两个状态下图片 ImageView 的高度差。...我们所做的另一件事情则是改变边距大小（ margins ），以及如何让 TextView 文本的位置相对于 ImageView 图片的位置而固定。...在折叠状态下它会垂直居中，而在展开状态下它会对齐在底部，因此 TextView 会更多的相对于 ImageView 的大小尺寸来进行相关设定。

    2K31

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

    至于CollapsingToolbarLayout则是给子控件提供了折叠的功能，什么是折叠呢？...，直到它还留在屏幕内的高度达到最小高度（没有设置好像默认就是wrap_content)时停止。...再回到我们问题来，Toolbar已经达到了它的最小高度了，所以它被固定在顶端不会动了，因此，即便在它下方的ImageView也设置了scroll属性值，但由于是线性布局，它也就动不了了。...如何使用 好了，这样一来对于AppBarLayout和CollapsingToolbarLayout就有一个大概的理解了，那么下面就看看该怎么用。...题主开始时想当然的以为在CollapsingToolbarLayout上面只设置scroll值，在ImageView、上设置snap,在Toolbar上面设置exitUntilCollapsed。

    1.1K60

    AppBarLayout和CollapsingToolbarLayout的闲谈

    这里涉及到Child View的高度和最小高度，向下滚动时，Child View先向下滚动最小高度值，然后Scrolling View开始滚动，到达边界时，Child View再向下滚动，直至显示完全。...exitUntilCollapsed：这里也涉及到最小高度。发生向上滚动事件时，Child View向上滚动退出直至最小高度，然后Scrolling View开始滚动。...属性scrimAnimationDuration 设置控制Toolbar收缩时，颜色变化持续时间 属性 layout_collapseMode 折叠模式，有两个值 pin：固定模式，在折叠的时候最后固定在顶端...parallax：视差模式，在折叠的时候会有个视差折叠的效果。...在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier

    1.8K30

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

    在 xml 中通过 app:layout_behavior="@string/appbar_scrolling_view_behavior" 多说两句，有同学可能会想一定要是 NestedScrollView...可能大家注意到了上面示例中有 app:layout_scrollFlags 这样的属性，大家一定很好奇，它们是如何作用的。不要着急，下面就讲这一块的内容。...collapsed 折叠的概念 其实我更愿意用伸缩解释这个概念。 ? 红框部分标明不能再被压缩的范围，其它部分都可以在滑动的过程中伸缩。...exitUntilCollapsed 表示的是，向上滑动时，AppBarLayout 中设置了该属性的 View 可以滑动，等到这个 View 可视范围被压缩到 collapsed 指定的高度也就是 minHeight...Toolbar 先滑动，等到视图可见范围高度为 collapsed 指定高度时它会静止，等到 NestedScrollView 内容完全显示在 Toolbar 下方时它再一起滑动，它的动作是 3 段式的

    3.1K30
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券