开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用CollapsingToolbarLayout在布局之间执行FloatingActionButton

CollapsingToolbarLayout是Android Support Library中的一个布局容器，用于实现可折叠的工具栏效果。它通常与AppBarLayout一起使用，可以在布局之间切换时实现FloatingActionButton的动画效果。

CollapsingToolbarLayout的主要特点包括：

可折叠的工具栏：CollapsingToolbarLayout可以根据滚动事件来展开或折叠工具栏，提供更好的用户体验。
支持标题和副标题：可以设置标题和副标题，随着工具栏的折叠和展开，标题和副标题的显示状态也会相应改变。
背景图像：可以设置一个背景图像，随着工具栏的折叠和展开，背景图像的显示状态也会相应改变。
可添加自定义视图：可以在CollapsingToolbarLayout中添加其他视图，如ImageView、TextView等，以实现更丰富的界面效果。

使用CollapsingToolbarLayout在布局之间执行FloatingActionButton的步骤如下：

在布局文件中添加CollapsingToolbarLayout和AppBarLayout，并将CollapsingToolbarLayout作为AppBarLayout的子视图。

<android.support.design.widget.CoordinatorLayout>
    <android.support.design.widget.AppBarLayout>
        <android.support.design.widget.CollapsingToolbarLayout>
            <!-- 添加其他视图 -->
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <!-- 添加其他布局 -->
</android.support.design.widget.CoordinatorLayout>

在CollapsingToolbarLayout中添加需要折叠的视图，如ImageView、TextView等。

<android.support.design.widget.CollapsingToolbarLayout>
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/background_image" />
    <!-- 添加其他视图 -->
</android.support.design.widget.CollapsingToolbarLayout>

在布局中添加FloatingActionButton，并设置其layout_anchor属性为AppBarLayout。

<android.support.design.widget.CoordinatorLayout>
    <android.support.design.widget.AppBarLayout>
        <android.support.design.widget.CollapsingToolbarLayout>
            <!-- 添加其他视图 -->
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <!-- 添加其他布局 -->
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        android:src="@drawable/fab_icon"
        app:layout_anchor="@id/app_bar_layout" />
</android.support.design.widget.CoordinatorLayout>

在上述布局中，FloatingActionButton的layout_anchor属性被设置为AppBarLayout的id，这样就可以实现在布局之间切换时，FloatingActionButton的位置会相应地调整。

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

相关搜索:CollapsingToolbarLayout:在顶部修复自定义布局 Layout_Below在相对布局中未正确执行使用散列在两个地址之间执行.htaccess RewriteRule 在Laravel 5.5中主布局Rtl和主布局Ltr之间切换在R中使用布局()在R中的行之间执行计算在Svelte中重新渲染布局后执行函数在vuejs中使用动态布局在多进程python之间执行任务在字典之间执行查找

相关搜索:

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

有帮助

没帮助

相关·内容

CoordinatorLayout与滚动的处理

make the Toolbar responsive to scroll events using a container layout called AppBarLayout: 接下来，我们必须使用一个容器布局...然后，我们需要定义AppBarLayout与滚动视图之间的联系。...通常，我们我们都是设置Toolbar的title，而现在，我们需要把title设置在CollapsingToolBarLayout上，而不是Toolbar。...CoordinatorLayout的工作原理是搜索定义了CoordinatorLayout Behavior 的子view，不管是通过在xml中使用app:layout_behavior标签还是通过在代码中对...view类使用@DefaultBehavior修饰符来添加注解。

7142 0

CoordinatorLayout使用全解析

CoordinatorLayout 又名协调者布局，它是support.design包中的控件，所以使用的时候要导入compile 'com.android.support:design:23.3.0’...简单来说，CoordinatorLayout是用来协调其子view并以触摸影响布局的形式产生动画效果的一个super-powered FrameLayout，其典型的子View包括：FloatingActionButton...CollapsingToolbarLayout的子布局有3种折叠模式（Toolbar中设置的app:layout_collapseMode） off：默认属性，布局将正常显示，无折叠行为。...pin：CollapsingToolbarLayout折叠后，此布局将固定在顶部。 parallax：CollapsingToolbarLayout折叠时，此布局也会有视差折叠效果。...在NestedScrollView的名字中其实就可以看出他的作用了，Nested是嵌套的意思，而ToolBar基本需要嵌套使用。

1.9K2 0

CollapsingToolbarLayout使用

我们来看一下CollapsingToolbarLayout的使用场景。...CollapsingToolbarLayout在 CollapsingToolbarLayout 的 Children 布局上，可以按照 FrameLayout 的属性来拍版，因为它本身继承于 FrameLayout...关于CollapsingToolbarLayout的属性在官网上可以查到，这里我只介绍案例中我们常用的几个属性：title标题，布局展开时放大显示在图片底部，布局折叠时缩小显示在Toolbar左侧。...，取值有点类似alpha（不透明度），在0.0 ～ 1.0之间，默认值为0.5。...当设置为1.0，滚动列表时图片不会折叠移动；代码实现：关于CoordinatorLayout作为根布局容器如何协调子控件之间的交互行为，可以参考上一篇文章，这里我介绍一下本例中几个新的注意点。

2.4K6 0

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

当我在AS上新建一个module时，系统默认的最外层布局不再是我们熟悉的五大布局中的一种，而是一个全新的布局：CoordinatorLayout。...下面来看一个最简单的例子，CoordinatorLayout与FloatingActionButton的使用，它可以使浮动按钮上下移动，为Snackbar流出空间来展示。...这个时候呢，我们把Toolbar直接放在CollapsingToolbarLayout下，先修改appbar_main.xml布局如下： <?...CoordinatorLayout的工作原理是搜索定义了CoordinatorLayout Behavior的子view，不管是通过在xml中使用app:layout_behavior标签还是通过在代码中对...view类使用@DefaultBehavior修饰符来添加注解。

8764 1

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

1.2 CollapsingToolbarLayout不能独立存在，它在设计的时候就被限定只能作为AppBarLayout的直接子布局来使用。...不过CollapsingToolbarLayout不能独立存在，它在设计的时候就被限定只能作为AppBarLayout的直接子布局来使用。...首先实现标题栏部分，这里使用CoordinatorLayout来作为最外层布局（我们在讲监测snackbar弹出，解决其遮挡悬浮按钮问题的时候用到过这个布局），如下： <android.support.design.widget.CoordinatorLayout...由于CoordinatorLayout本身已经可以响应滚动事件了，因此我们在它的内部就需要使用NestedScrollView或RecyclerView这样可以响应滚动事件的布局。...在 CoordinatorLayout（外层监听框架）、 AppBarLayout（水果详情界面标题栏外层）、 CollapsingToolbarLayout（水果详情界面标题栏）这种嵌套结构的布局中

2.2K4 0

在布局切换之间实现Transition动画

同一个Activity之间，布局切换是可以有动画效果的，下面是仿照API Demo中的一个例子，如下图： ? 在同一个Activity中，通过选中不同的Scene，切换不同的布局。...实现在两个Layout之间进行动画的基本步骤如下：为起始和结束Layout创建Scene对象，一般来说，当前布局就是起始布局；创建一个Transition对象，定义你想要的动画; 调用TransitionManager.go...创建Scene Scene可以理解为对布局的一个快照，包含了View的层次以及各种属性相关的信息。Transition框架可以自动在起始和结束Scene之间进行动画。...应用Transition 可以使用android已经提供的一些Transition，比如AutoTransition、Fade，或者定义自己的Transition。...Transition框架的限制 Transition框架有一些使用限制，应用于SurfaceView的动画不会起效，因为其更新在非UI线程；继承AdapterView的，比如ListView，不能应用

1.5K4 1

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

其实相对于前一个例子，只是把摆放RecyclerView 的位置替换成ViewPager而已，为了有页面导航器的效果，再使用 TabLayout而已，而TabLayout 在我们滑动的时候最终会停靠在...TableLayout 绑定在一起 mTabLayout.setupWithViewPager(mViewPager); } } 如果我们想更改Indicator的相关样式，我们可以在布局文件里面使用...方法一：在代码中使用这个方法 setCollapseMode(int collapseMode) 方法二：在布局文件中使用自定义属性 app:layout_collapseMode="pin" 到此...，CollapsingToolbarLayout的一些重要属性已经讲解完毕，下面我们一起来看一下我们是怎样结合ViewPager实现视差效果的 ---- 结合ViewPager的视觉特差布局代码 <...- 对于AppBarLayout，我们主要讲解了这个属性app:layout_scrollFlags，设置不同的属性我们可以在滚动的时候显示不同的效果 - 对于CollapsingToolbarLayout

4.9K1 0

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

上滑顶部背景图片缓慢消失，标题悬浮在标题上栏加入布局，放一些搜索框输入框TextInputEditText的使用 1:上滑顶部背景图片缓慢消失，标题悬浮 ?...1.1：CoordinatorLayout中设置　　前面的添加依赖，在上一篇中已经说过，在这就不在重复了，协调者布局中这次又加入了一个新的布局CollapsingToolbarLayout（折叠工具栏布局...FloatingActionButton，标红的是重点。...对于这个悬浮按钮里面也有很多属性，这里就不在一一写出了，这里只是作为一个辅助，让我们在视觉更舒服所加的。 2：在标题上栏加入布局，放一些搜索框 ?...3:输入框TextInputEditText的使用在最平常的时候，我们写输入框，要加正则表达式来判断是哪一行出现不符合要求的数据，然后用一个toast来提示用户，这就显得用户体验极差，有的用户还没看完

1.6K10 0

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

调度协调子布局 CoordinatorLayout使用新的思路通过协调调度子布局的形式实现触摸影响布局的形式产生动画效果。...系统（Support V7）提供了AppBarLayout.Behavior, AppBarLayout.ScrollingViewBehavior, FloatingActionButton.Behavior...，它可以控制包含在CollapsingToolbarLayout中的控件在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。...关于CollapsingToolbarLayout几个属性的介绍 app:collapsedTitleTextAppearance 这是在收缩时Title文字特点外形的设置 app:expandedTitleTextAppearance...TabLayout提供一个水平布局来显示选项卡。TabLayout一般都是配合ViewPager一起来使用。

2.2K9 0

建站四部曲之移动端篇（Android+上线）

selenium) 建站四部曲之前端显示篇（React+上线）建站四部曲之移动端篇（Android+上线） ---- 零、前言本系列为了总结一下手上的知识，致敬我的2018 本篇的重点在于：后端数据在移动端的展现...本篇总结的技术点：材料设计串烧、Retrofit+RxJava访问请求、MVP模式的思考、App的打包将App上传到服务器，提供下载地址、 ---- 一、材料设计的综合使用： 1.布局概览...最外层是一个DrawerLayout并和Toolbar相关联 DrawerLayout主要分为左和中间两块,核心的是中间，左边顺带用一下NavigationView 中间主页面由AppBarLayout+CollapsingToolbarLayout...布局概览.png ---- 2.效果图一览总体来说和网页端风格保持一致 Android版网页版手机端 .png ---- 3.布局与材料设计的控件使用布局就不贴了,挺多的，也没什么技术含量...伴随动画定义在FloatingActionButton伴随动画按钮的标签内 BottomNavigationBar伴随列表显隐的Behavior 写在RecyclerView标签内 Behavior

5921 0

Android5.0和6.0之后新增的控件说明

6.0 应用栏布局 AppBarLayout Android 5.0 可折叠工具栏布局 CollapsingToolbarLayout Android 5.0 侧滑删除 SwipeDismissBehavior...Android 6.0 以上的新控件，在项目中使用的时候，可分为三大类： 1、第一类是内核提供的控件，位于SDK的android.jar中。...比如水波图形RippleDrawable和矢量图形VectorDrawable，这两个控件在Android5.0之后的系统内核中提供，所以只有系统版本不低于5.0的手机才能使用它们，运行4....使用v4控件唯一需要注意的地方，是布局文件中要引用完整路径的控件名称，如抽屉布局android.support.v4.widget.DrawerLayout、下拉刷新布局android.support.v4...使用v7与design库的控件，类似于使用自定义控件，不但要在布局文件中引用完整路径的控件名称，还要在根布局声明命名空间（即添加属性xmlns:app="http://schemas.android.com

1.2K2 0

Android开发笔记（一百三十七）自定义行为Behavior

一般我们使用CoordinatorLayout，都是结合悬浮按钮FloatingActionButton、应用栏布局AppBarLayout或者可折叠工具栏布局CollapsingToolbarLayout...，但这不表示CoordinatorLayout只能与这少数几个控件一起使用，事实上，只要定义了两个控件之间的互动行为，即使是TextView、ImageView这些普通控件，也能实现自动协调运动的效果。...另外一个Design库的例子，则是悬浮按钮FloatingActionButton配合提示条Snackbar，博文《Android开发笔记（一百三十四）协调布局CoordinatorLayout》提到，...女孩照镜子是在水平方向上协调运动的例子，生活中还有在垂直方向上协调运动的例子，比如使用定滑轮吊起重物，滑轮一端绳子吊着重物，另一端绳子连着人力；人力拉动绳子，重物就被吊上来，人力松开绳子，重物就会掉下来...，在onDependentViewChanged方法中定义重物视图配合人力拉曳时的运动行为； 3、在布局文件中放置定滑轮、人力视图、重物视图，并给重物视图指定layout_behavior属性，说明重物视图的协调动作

1.2K2 0

使用Intent在活动之间穿梭

使用Intent在活动之间穿梭 1.在com.example.activitytest中创建第二个活动SecondActivity: /** * 第二个活动 */ public class SecondActivity...activity> 2.使用...Intent启动活动 Intent是Android中各组件进行交互的一种重要方式,它不仅可以指明当前组件想要执行的动作,还可以在不同组件之间传递数据....android.intent.category.DEFAULT" /> 修改FirstActivity中按钮的点击事件: //隐式使用...com.example.activitytest.MY_CATEGORY" /> 3.Intent的其他使用方法

5832 0

Android--AppBarLayout、CollapsingToolbarLayout组合使用

通常AppBarLayout和CollapsingToolbarLayout是一起使用的，也就是CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout...CollapsingToolbarLayout的使用方法也比较固定，AppBarLayout包裹CollapsingToolbarLayout，由于需要伸缩Toolbar，所以它使用的app:layout_scrollFlags...为scroll|exitUntilCollapsed，还可以使用app:contentScrim来设定缩小到最小高度后的颜色(会有一个渐变的效果) 被CollapsingToolbarLayout包裹的控件...ScrollingViewBehavior"> <android.support.design.widget.FloatingActionButton...的setTitle方法才能设置标题 private CollapsingToolbarLayout collapsingtoolbarlayout; collapsingtoolbarlayout.setTitle

3.3K3 0

用 CoordinatorLayout 处理滚动

snap：使用这一选项将由其决定在 view 只有部分减时所执行的功能。如果滑动结束时 view 的高度减少的部分小于原始高度的 50%，那么它将回到最初的位置。...); collapsingToolbar.setTitle("Title"); 注意，在使用 CollapsingToolbarLayout 的时候，应该如此文档所述，将状态栏设置成半透明（API 19...创建视差动画 CollapsingToolbarLayout 可以让我们做出更高级的动画，例如使用一个在折叠的同时可以渐隐的 ImageView。在用户滑动时，标题的高度也可以改变。 ?...在官方的 persistent modal 表和这些第三方的替代方案之间，你应该可以通过足够的实验来实现任何想要的效果。...在一个使用了内部有 items 列表的 ViewPager 的 fragment 和一个父 activity 之间使用协调时，你想像这里描述的那样在ViewPager 上添加 app:layout_behavior

4.8K9 2

Android - 使用Intent在活动之间穿梭

在标签下配置的内容，指定当前活动能够响应的action 和 category。...修改按钮点击事件： Intent intent = new Intent("com.bobo1998.test0422.ACTION_START"); startActivity(intent); 使用了...标签内指定的category是一种默认的，在调用startActivityg()方法会自动将category添加到Intent中。...category的声明：更多隐式Intent的用法使用隐式Intent不仅可以启动自己程序内的活动...我们还可以在标签中配置一个标签，用于更精确的指定当前活动能够响应什么类型的数据。

5093 0

CoordinatorLayout使用浅析

compile 'com.android.support:design:25.4.0' 在android studio中有一个ScrollingActivity的模板外层是CoordinatorLayout，然后是AppBarLayout，然后是内容区和FloatingActionButton...这个AppBarLayout是有固定高度的，然后里面包着Toolbar，Toolbar外层是CollapsingToolbarLayout，是可折叠的 CollapsingToolbarLayout主要参数是...exitUntilCollapsed ：表示滑动到最后折叠在顶端 enterAlways ：表示向上滑动消失，向下滑动可见 Toolbar主要参数app:layout_collapseMode： pin ：固定模式，在折叠的时候最后固定在顶端...parallax ：视差模式，在折叠的时候会有个视差折叠的效果。

3463 0

使用 FocusScopeNode 在 TextFormFields 之间轻松移动焦点

---- Form和TextFormField是在 Flutter 中输入文本时非常有用的小部件。我们可以提供一种在键盘上按“下一步”时移动输入焦点的便捷方法吗？...使用FocusScopeNode，这是非常容易做到的。

1.2K2 0

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

Android Support Desgin 这个包中提供了一系列的组件如：CoordinatorLayout、AppBarLayout、FloatingActionButton 等等。...layout_scrollFlags 之间的配合使用我们前面分析过按照滑动方向，可以分为 enter 和 exit 两种。而按照每个方向上的行为类别划分，又有不同的行为。 ?...CollapsingToolbarLayout 的使用刚刚说过，CollapsingToolbarLayout 出现的目的只是为了增强 Toolbar。...xml 布局文件中也可以通过相应的属性操作 Collapsing title 的行为。...> 在布局文件中添加一个图标，然后监听 AppBarLayout 的滑动来改变自身的透明度。

2.7K3 0

Android材料设计Material Design 开篇前言

Design是为了帮助开发者的,而不是谷歌闲着没事弄个东西刁难我们所有的代码都我都亲自测试过，文章的语言也尽量用我的话来叙述，大量的动图和图片也是我一个一个截的属性介绍以xml里为主,代码中动态设置使用...Android_Material_Design_Test你看着办吧 ---- 本系列文章一览： Android材料设计Material Design 开篇前言 Android材料设计之ToolBar+CardView+沉浸标题栏 Android材料设计之FloatingActionButton...SheetX3 Android材料设计之BottomNavigationBar+TabLayout Android材料设计之AppBarLayout+CoordinatorLayout Android材料设计之CollapsingToolbarLayout...CardView.gif ---- 3.FloatingActionButton资料卡片：国籍：View 城市：ImageView 爱好：游离不定、抱大腿、随用随到一句话：没关系，我小，不碍事额外依赖...额外依赖：implementation 'com.android.support:design:27.1.1' CollapsingToolbarLayout1.gif CollapsingToolbarLayout.gif

8261 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭