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

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

CollapsingToolbarLayout的介绍 CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar，它继承至FrameLayout，给它设置layout_scrollFlags...CollapsingToolbarLayout的子View中可以设置这两个属性 1、ayout_collapseMode (折叠模式) - 有两个值: pin - 设置为这个模式时，当CollapsingToolbarLayout...parallax - 设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier...我在做这里的时候遇到一个问题，那就是CollapsingToolbarLayout里的Title的问题，一般默认是显示的，即使你不写，它也有会一个默认值一直显示在那里，等折叠收缩完的时候，停留在标题工具栏上...如果设计的需求不要求选项卡在切换时附带有图标的切换效果，仅仅文字的颜色发生变化以响应用户的点击事件，那么TabLayout和ViewPager建立联系可以用官方提供的方法，它可以做到交互双向联动，也就是点击

2.3K90

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

int SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED 另一种enterAlways，但是只显示折叠后的高度。...和TabLayout mViewPager = (ViewPager) findViewById(R.id.viewpager); mTabLayout = (TabLayout...结构图如图片所示，先说明CollapsingToolbarLayout的变化 CollapsingToolbarLayout里面 包含ImageView 和ToolBar，ImageView的app:...- 对于AppBarLayout，我们主要 讲解了这个属性app:layout_scrollFlags，设置不同 的属性我们可以在滚动的时候显示不同 的效果 - 对于CollapsingToolbarLayout...，有兴趣 了解的请自行阅读: 官方文档地址 ---- 题外话 CoordinatorLayout这个控件真的很强大，使用它可以实现各种炫酷的效果，简化了开发者的许多工作，有能力的话可以去研究一下源码 ，

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

    CoordinatorLayout使用全解析

    exitUntilCollapsed：当你定义了一个minHeight，此布局将在滚动到达这个最小高度的时候折叠。 snap：当一个滚动事件结束，如果视图是部分可见的，那么它将被滚动到收缩或展开。...CollapsingToolbarLayout可以通过app:contentScrim设置折叠时工具栏布局的颜色，通过app:statusBarScrim设置折叠时状态栏的颜色。...CollapsingToolbarLayout的子布局有3种折叠模式（Toolbar中设置的app:layout_collapseMode） off：默认属性，布局将正常显示，无折叠行为。...pin：CollapsingToolbarLayout折叠后，此布局将固定在顶部。 parallax：CollapsingToolbarLayout折叠时，此布局也会有视差折叠效果。...折叠效果 如果想制造toolbar的折叠效果，我们必须把Toolbar放在CollapsingToolbarLayout中： CollapsingToolbarLayout

    2.2K20

    AppBarLayout和CollapsingToolbarLayout的闲谈

    了解 CollapsingToolbarLayout主要是提供一个可折叠的Toolbar容器，对容器中的不同View设置layout_collapseMode折叠模式，来达到不同的折叠效果。...其实就是向下滚动时Scrolling View和Child View之间的滚动优先级问题。...对比scroll和scroll | enterAlways设置，发生向下滚动事件时，前者优先滚动Scrolling View，后者优先滚动Child View，当优先滚动的一方已经全部滚进屏幕之后，另一方才开始滚动...这里涉及到Child View的高度和最小高度，向下滚动时，Child View先向下滚动最小高度值，然后Scrolling View开始滚动，到达边界时，Child View再向下滚动，直至显示完全。...在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier

    1.8K30

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

    2、AppBarLayout内部的高度也可能变化，比如它嵌套了可折叠工具栏布局CollapsingToolbarLayout，有关可折叠工具栏布局的详细介绍参见《Android开发笔记（一百三十六）可折叠工具栏布局...3、大家都知道ViewPager是左右滚动的翻页视图，用户通过手势把页面横向拉动一段距离后松开，系统会判断接下来是自动左滚还是自动右滚，总之最后用户看到的是一个完整的页面，而不是拉到一半的页面。...同时声明scroll和enterAlways，滚动效果如下图所示： ? 后面三个标志都与CollapsingToolbarLayout有关，得配合该控件才能观察细节差异。...所以本文只做下面三个标志的概念解释，有关的效果图参见《Android开发笔记（一百三十六）可折叠工具栏布局CollapsingToolbarLayout》。...具体的滚动说明如下所示： 向上滚动：头部先往上收缩，一直滚到折叠的最小高度。然后头部与主体先一起滚动，头部滚到位后，主体继续向上。 向下滚动：头部与主体先一起滚动，一直滚到头部折叠的最小高度。

    2K40

    CollapsingToolbarLayout使用

    WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);（支持API19及以上版本，位于setContentView语句前面）一起使用，使顶部视图展开时图片能够延伸到状态栏位置显示，如效果图中所示；contentScrim内容遮罩，上下滚动时图片上面显示和隐藏的遮罩色...attr/colorPrimary"，即显示为Toolbar颜色，应用的主题色；layout_collapseMode折叠模式，设置其他控件滚动时自身的交互行为，有两种取值：parallax，折叠视差效果...当设置为1.0，滚动列表时图片不会折叠移动； 代码实现： 关于CoordinatorLayout作为根布局容器如何协调子控件之间的交互行为，可以参考上一篇文章，这里我介绍一下本例中几个新的注意点。...作为AppBarLayout的直接子控件，CollapsingToolbarLayout包裹Header部分的ImageView和Toolbar，并分别设置二者的折叠模式。...和layout_anchorGravity可以控制FloatingActionButton的behavior和位置，如上图所示，当滚动列表是，FAB按钮会随着AppBarLayout而显示和隐藏，并自带缩放动画

    2.5K60

    Android开发笔记（一百三十六）可折叠工具栏布局CollapsingToolbarLayout

    可折叠工具栏布局CollapsingToolbarLayout 上一篇博文《Android开发笔记（一百三十五）应用栏布局AppBarLayout》阐述了如何把Toolbar往上滚动，那反过来，...的折叠效果并不仅限于和Toolbar的互动，还包括标题文字的样式渐变（文字大小、颜色、间距等等），连背景图片都可以实现折叠的渐变效果。...同时声明scroll和exitUntilCollapsed，滚动效果如下图所示： ?...具体的滚动说明如下所示： 向上滚动：头部先往上收缩，一直滚到折叠的最小高度。然后头部与主体先一起滚动，头部滚到位后，主体继续向上。 向下滚动：头部与主体先一起滚动，一直滚到头部折叠的最小高度。...同时声明scroll和snap，滚动效果如下图所示： ?

    3.3K30

    CoordinatorLayout使用（四）：和Toolbar的简单使用

    exitUntilCollapsed: 代码中枚举SCROLL_FLAG_EXIT_UNTIL_COLLAPSED 滚动退出屏幕，最后折叠在顶端。...设置exitUntilCollapsed也就是为true的时候，任意向上的滚动都会让view（Toolbar）变为minHeight的高度可见，而不会全部消失 反之，不设置，也就是false，会全部消失...---- 中场小节 CoordinatorLayout中， 如果NestedScrollView要和Toolbar互动的话（CollapsingToolbarLayout等之后在了解，这里不涉及）...layout_behavior="@string/appbar_scrolling_view_behavior" 再给Fragment中添加一点TextView 在Activity中，绑定对应的TabLayout和ViewPager...这里和前面还不太一样，这里是CollapsingToolbarLayout 所以，我们简单在CollapsingToolbarLayout中，添加一个ImageView（自己从小学就比较崇拜的欧拉）

    1.5K30

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

    Material Design之CollapsingToolbarLayout 相关属性和方法介绍 转载请以链接形式标明出处： http://blog.csdn.net/lxk_1993/article...在折叠的时候 显示的toolbar的id 13.app:layout_scrollFlags="scroll|exitUntilCollapsed"  scroll - 想滚动就必须设置这个。...parallax - 设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier...它和scrollview 基本上一样  但是它支持嵌套滚动  嵌套滚动默认是启用的。 还有一个属性，不过蛋疼的是这属性要全手打，没提示不知道怎么破。...//设置和获取折叠之后的标题位置 getCollapsedTitleGravity(); setCollapsedTitleGravity(int gravity) //获取和设置折叠之后的背景

    96730

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

    app:contentScrim指定CollapsmgToolbarLayout在趋于折叠状态以及折叠之后的背景色， 其实CollapsingToolbarLayout在折叠之后就是一个普通的Toolbar...其中， scroll表示CollapsingToolbarLayout会随着水果内容详情的滚动一起滚动， exitUntilCollapsed表示当CollapsingToolbarLayout随着滚动完成折叠之后就保留在界面上...这里在CollapsingToolbarLayout中定义了一个ImageView和一个Toolbar，也即这个高级版的标题栏是由普通的标题栏加上图片组合而成的。...以及， app:layout_collapseMode用于指定当前控件在CollapsingToolbarLayout折叠过程中的折叠模式， 其中Toolbar指定成pin，表示在折叠的过程中位置始终保持不变...由于CoordinatorLayout本身已经可以响应滚动事件了， 因此我们在它的内部就需要使用NestedScrollView或RecyclerView这样可以响应滚动事件的布局。

    2.3K40

    CoordinatorLayout与滚动的处理

    本博文专门讲解和CoordinatorLayout相关的知识点，这也是Design Support Library中最重要与最难的部分。...目前这个框架提供了几种不用写动画代码就能工作的方法，这些效果包括： 让浮动操作按钮上下滑动，为Snackbar留出空间 ? 扩展或者缩小Toolbar或者头部，让主内容区域有更多的空间。 ?...---- Creating Collapsing Effects（制造折叠效果） 如果想制造toolbar的折叠效果，我们必须把Toolbar放在CollapsingToolbarLayout中： .support.design.widget.CollapsingToolbarLayout...还能让我们做出更高级的动画，比如在里面放一个ImageView，然后在它折叠的时候渐渐淡出。...CoordinatorLayout的工作原理是搜索定义了CoordinatorLayout Behavior 的子view，不管是通过在xml中使用app:layout_behavior标签还是通过在代码中对

    80720

    ViewPager，ScrollView 嵌套ViewPager滑动冲突解决

    我的公众号程序员徐公，四年中大厂工作经验，回复黑马，领取 Android 学习视频一份，回复徐公 666，可以获得我精心整理的简历，带你走近大厂。...目前所有的图的事件是针对ACTION_DOWN的，对于ACTION_MOVE和ACTION_UP我们最后做分析。...view.setFocusable(true); view.setFocusableInTouchMode(true); view.requestFocus(); 这段代码在初始化的时候就让该界面的顶部的某一个控件获得焦点，滚动条自然就显示到顶部了...theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" > CollapsingToolbarLayout...题外话 在这篇博客的最后提高的实现轮播图+list列表的几种实现形式，刚开始是不想写的，后面因为ScrollView里面嵌套ViewPager和RecyclerView在fragment中RecyclerView

    68910

    ConstraintLayout2.0一篇写不完之嵌套滚动怎么滚

    ，借助MotionLayout来实现之前CollapsingToolbarLayout的一些折叠效果。...变为56dp，即提供一个伸缩的功能，另一个重要的而且很容易被忽视的作用，就是给内层MotionLayout提供progress数据，有了这个progress，内部MotionLayout才能联动，这个和使用...这里的约束改变实际上只有两个，即layout_height从200变为56，而另一个重要的点，就是motionProgress的指定，motionProgress的作用就是设置motionProgress，如果不设置这个...解决完外部的MotionLayout之后，内部的MotionLayout就迎刃而解了，因为它真的就是一个平平常常的MotionLayout，你想要对它内部的元素做任何的改动，都和之前直接使用MotionLayout...，设计思路不可谓不精，一旦你熟练掌握了MotionLayout的各种基础布局，那么即使再复杂的布局，也能分而治之。

    1.2K30
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券