首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用MotionLayout和MotionScene更改FAB背景色

使用MotionLayout和MotionScene可以实现对Floating Action Button(FAB)背景色的更改。

MotionLayout是一个用于创建复杂动画和过渡效果的布局容器,它可以通过定义MotionScene文件来控制布局中的各个元素的动画行为。

要使用MotionLayout和MotionScene来更改FAB背景色,可以按照以下步骤进行操作:

  1. 在布局文件中添加MotionLayout容器,并将FAB作为其子元素。例如:
代码语言:txt
复制
<androidx.constraintlayout.motion.widget.MotionLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_fab"
        android:backgroundTint="@color/fab_color" />

</androidx.constraintlayout.motion.widget.MotionLayout>
  1. 创建MotionScene文件,并定义FAB的动画行为。例如,可以使用KeyFrameSet来定义FAB背景色的变化。示例MotionScene文件如下:
代码语言:txt
复制
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetStart="@id/start"
        motion:constraintSetEnd="@id/end">

        <KeyFrameSet>
            <KeyAttribute
                motion:framePosition="0"
                motion:target="@id/fab"
                android:backgroundTint="@color/start_color" />

            <KeyAttribute
                motion:framePosition="100"
                motion:target="@id/fab"
                android:backgroundTint="@color/end_color" />
        </KeyFrameSet>

    </Transition>

    <ConstraintSet android:id="@+id/start">
        <!-- 定义FAB的起始状态 -->
        <Constraint
            android:id="@id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <!-- 定义FAB的结束状态 -->
        <Constraint
            android:id="@id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintBottom_toBottomOf="parent" />
    </ConstraintSet>

</MotionScene>
  1. 在代码中加载MotionScene文件,并将其应用到MotionLayout容器上。例如:
代码语言:txt
复制
MotionLayout motionLayout = findViewById(R.id.motionLayout);
MotionScene motionScene = MotionSceneInflater.inflate(this, R.xml.motion_scene);
motionLayout.setTransition(motionScene);

这样,当MotionLayout容器启动时,FAB的背景色将从起始颜色渐变到结束颜色。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

静若处子动若脱兔-Constraintlayout2.0一探究竟

而在独立的xml文件中,描述约束的变化,这个独立的xml就是MotionScene文件,它独立在res/xml文件夹下,一个MotionLayout均对应一个MotionScene。...MotionSceneMotionLayout的核心描述文件。...90178df070b39c060880cd6d550b5e3d 可以发现,这里实际上对动画进行了描述,首先是Transition,定义了动画的起始结束状态,这里使用的是自包含的MotionScene...Custom attribute 需要注意的是,在MotionScene中,ConstraintSet只能描述约束的变化,但是对于属性的变化是不能生效的,例如改变背景色,这个时候,就需要使用Custom...除此之外,Arc Motion还可以KeyFrame协作使用。让Arc Motion在多个KeyFrame分段之间,产生曲线效果。

1.1K10

MotionLayout 使用介绍 (第一章)

MotionLayout  是ConstrainLayout 2.0库中被引入的一个新类,帮助安卓开发者关联手势组件动画。接下来的文章将介绍会如何在应用中添加使用MotionLayout。...将ConstrainLayout 2.0MotionLayout添加到项目中 如何使用 MotionLayout ConstraintSets MotionScene 示例1:关联已有的布局文件 处理...如何使用MotionLayout 将ConstrainLayout 2.0MotionLayout添加到项目中,只需要将下面的代码添加到Gradle文件中即可 dependencies { implementation...MotionLayout通常将这些信息保存在一个单独的XML文件(MotionScene)中并关联到布局文件,通过这种方式布局文件只需要包含它们的属性,无需包含位置信息动画。...,使用名单最终已了存在的布局文件MotionLayout还请立即获取iTunes直接在MotionScene文件中定义ConstraintSet。

4.2K00
  • MotionLayout教你轻松玩转动画

    MotionLayout添加到项目中并使用 MotionScene ConstraintSet Transition CustomAttribute MotionLayout是什么 首先我们来介绍一下...,但MotionLayout却基本兼容了它们的使用场景,也就是说,MotionLayout是它们的结合体。...将MotionLayout添加到项目中并使用 如果你项目中已经使用了ConstraintLayout,只要版本不是很低就无需新增依赖,可以直接使用。...对应的就是activity_motion_layout_scene文件 下面我们来看下文件具体内容 MotionSceneMotionLayout中,如果你需要做动画,需要使用MotionScene...下面来一个简单的例子,例如改变view的背景色。 我们直接使用backgroundColor属性,由于backgroundColor属性已经支持set/get方法,所以我们可以直接拿来用。 <?

    1.1K20

    突破传统动画:探索MotionLayout的独特优势

    本文将深入介绍MotionLayout使用原理,帮助您掌握这个令人兴奋的技术。 什么是MotionLayout?...MotionLayout提供了一种声明性的方法,让我们能够以一种直观的方式定义管理动画。 如何使用MotionLayout? 在使用MotionLayout之前,需要先在项目中引入它的依赖库。...MotionSceneMotionSceneMotionLayout的配置文件,用于定义布局之间的过渡动画效果。...简化动画定义,使得动画的定义更加直观和易于理解 结论 本篇文章为你介绍了Android MotionLayout,包括其定义、使用方法、优点示例,以及更多的使用细节。...我们相信,通过本文的介绍,你已经了解了MotionLayout的基本概念使用方法,并掌握了更加高级的使用技巧。

    31240

    MontionLayout:打开动画新世界大门(其一)

    第一眼见到 MotionLayout 时无疑是兴奋的,在经过使用熟悉了这个布局组件之后,我就想将这份喜悦传递给国内开发者,从此“拳打”设计,“脚踢”产品?。...2.2 在布局文件中使用 MotionLayout 想要使用 MotionLayout,只需要在布局文件中作如下声明即可: <android.support.constraint.motion.MotionLayout...为了让大家快速理解使用 MotionScene,本文将重点讲解 ConstarintSet Transition,至于 StateSet 状态管理将会在后续文章中为大家介绍具体用法场景。...同时,为了帮助大家理解,此处将开始结合一些具体小实例来帮助大家快速理解使用它。 首先,我们从实现下面这个简单的效果讲起: ?...此外,你可以通过指定 touchAnchorSide dragDirection 等来指定自己想要的滑动手势滑动方向,默认为向上滑动,手势滑动我们将在后面示例中穿插使用讲解,这里不做具体介绍,忍不住的小伙伴可以去查看一下官方文档介绍

    95930

    太有意思了,教你实现实现王者荣耀团战!

    刚好最近了解到MotionLayout库,就用它实现吧?。 动画效果 ? 2 功能详解 MotionLayout 是一种布局类型,可帮助您管理应用中的运动微件动画。...场景一 包含控件:后羿,亚瑟,鲁班,后羿的箭 动画描述:走位的亚瑟,后羿射箭 首先在布局文件中,添加第一个MotionLayout,并添加上所有的控件,后羿鲁班由于是静止状态,所以要写上位置约束,其他包含动画的控件可以暂时不用写位置约束...这里可以看到有两个新的属性: app:layoutDescription,这个属性就是代表该MotionLayout对应的动画场景,引用的是一个MotionScene(XML资源文件),其中就会包括相应布局的所有运动动画描述...> 可以看到,MotionScene有两个主要的标签TransitionConstraintSet Transition,包括运动的基本定义,其中motion:constraintSetStart...app:motionTarget="@id/zhongwuyan" android:alpha="1" /> 场景三 包含控件:妲己的一技能,妲己的二技能,钟无艳 动画描述:钟无艳闪现到人群中使用大招转转转

    1.2K10

    【翻译】MotionLayout实现折叠工具栏(Part 2)

    MotionLayout 的入门使用!...通过上一篇文章我们了解了基本的折叠工具栏动画行为,使用的是 MotionLayout ,第一次尝试的效果与在 CoordinatorLayout 中使用 CollapsingToolbarLayout...不过有一个细微的小动画在 MotionLayout 中没有实现出来。移动缩放动画在文字上表现确实已经非常接近,但是背景图片的渐变在最边缘上却没有完全相同。...更牛逼的是,我们可以在动画进行时对动画进行动态更改。...标题文字的移动缩放在整个过渡动画中是同时进行的,但是通过添加一个单独关键帧后我们可以做到在不更改 ConstraintSets 代码的前提下,也不用改变缩放速度就能让标题文本更快地到达动画最终位置:

    1.7K30

    【翻译】MotionLayout实现折叠工具栏(Part 1)

    本文特点:没有 Kotlin/Java 代码,讲解部分全为 XML 代码,阅读时间短,获取技能: MotionLayout 的入门使用!...当然了,如果你已经在自己的 App 中使用了,那么你在学会了这里的知识后也没什么必要做更改。...MotionLayout 安卓上许多其他的动画框架的一个主要不同点在于:视图动画属性动画运行的时长是给定的,比如指定动画的时长,取消某个动画都是可行的,但是不能做到用户控制一个正在进行中的动画。...> 这基本上是使用标准的 ConstraintLayout 创建出来的一个布局,唯一区别在于父布局实际为一个 MotionLayout 布局( MotionLayout 继承于 ConstraintLayout...这事实上效果已经非常接近,但是仔细看你会发现这里与刚开始我们使用的 CoordinatorLayout 方式有一个细微的区别:在 CoordinatorLayout 布局下图片的褪色渐变动画 MotionLayout

    1.9K31

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

    (修改属性也会存在一些问题),所以,如果使用自定义MotionLayout的话,建议通过include的方式,引用新的根布局为自定义MotionLayout的方式来使用,而直接使用MotionLayout...CoordinatorLayout,而仅使用MotionLayout来实现嵌套滚动效果,实现滚动布局的大一统。...progress数据,有了这个progress,内部MotionLayout才能联动,这个使用CoordinatorLayout配合MotionLayout使用要设置progress是一个道理。...android:layout_height="56dp" motion:motionProgress="1" /> </MotionScene...解决完外部的MotionLayout之后,内部的MotionLayout就迎刃而解了,因为它真的就是一个平平常常的MotionLayout,你想要对它内部的元素做任何的改动,都之前直接使用MotionLayout

    1.2K30

    ConstraintLayout2.0一篇写不完之极坐标布局与动画

    极坐标布局方式在某些场景下,比笛卡尔坐标系的建立更加方便,特别是涉及到一些圆周运动相对中心点运动的场景。...OnSwipe的顺时针滑动逆时针滑动,这两个属性,在设置rotationCenterId后才会生效。...那么借助这个,就可以很方便的实现一些圆形路径的滑动效果动画。 通过下面这个例子,我们来看下Rotational OnSwipe的使用方法。...motion:rotationCenterId="@id/dial" /> </MotionScene...这样一个复杂的极坐标动画效果,虽然借助ConstraintLayout可以很方便的实现定位布局,但是运动时,却无法继续保持极坐标的依赖关系,所以,这里需要使用MotionLayout来维持运动时的极坐标约束关系

    65550

    Android-MotionLayout动画

    创建MotionScene动画资源文件 我们返回去看一眼根布局,已经变成了MotionLayout,而且layoutDescription属性指向了自动为我们创建的MotionScene动画资源文件....> motionscene文件的基本结构说明如下: MotionScene为项目的根标签 Transition指定了动画要使用的ConstraintSet,及动画的触发方式等 ConstraintSet...指定了动画开始页面结束页面的控件状态 KeyFrameSet 用来描述一系列运动过程中的关键,我们稍后说 完善布局 添加背景动画 由于MotionLayout是ConstraintLayout的子类,...所以我们可以像使用ConstraintLayout一样使用它.我们先来将背景添加上,代码如下: activity_main.xml中: <ImageView android:id...dragDirection 拖拽的方向 touchAnchorId 滑动影响的控件id touchAnchorSide 滑动所固定到的目标视图的一侧,可以配合dragDirection理解,二者相反 在xml布局文件motionscene

    1.1K40

    更改形状背景色、自定义风格、颜色流动…这款词云工具都能做到

    选自Github 作者:Max Woolf 机器之心编译 参与:魔王、杜伟 这款工具可以帮助生成风格多样的词云,包括梯度图标形状!...比如使用 Font Awesome 提供的免费图标更改词云的形状,通过 palettable 更改调色板以自定义风格,更改背景颜色,以及最重要的,添加梯度使颜色按照特定方向流动。...(其默认值是 None,如果它的值不是 None,则 stylecloud 使用了方向性梯度。)[default: None] size:stylecloud 的大小(长度宽度)。...[default: uses included Staatliches font] random_state:控制单词颜色的随机状态。...stylecloud 包独立于 word_cloud 单独发布,因为它的适用范围 Python 依赖项均有所增长。

    1.7K10

    Android Studio 中的 Motion Editor 用法详解

    您可以使用已在布局编辑器中所熟知的交互方式来编辑布局 Motion Scene 文件,并可以直接在 Android Studio 预览界面中对动画效果进行预览。...比如背景色) 时,可以在 Attribute 面板中创建自定义属性。...我们非常渴望看到社区使用 MotionLayout Motion Editor 来构建产品。Android Studio 团队也会不断地收集反馈以改善其使用体验。...如果您想了解更多本文中使用的代码以及其他几个 MotionLayout 的示例,如果您想了解更多关于 MotionLayout 的内容,请查阅以下资源: 使用 MotionLayout 管理 motion... widget 的动画 使用 MotionLayout 在 Android 应用中添加动画 (codelab) MotionLayout 示例 MotionLayout / ConstraintLayout

    2.2K10

    使用SignalRSQLTableDependency进行记录更改的SQL Server通知

    但是,此类不会发送回已更改记录的值。 因此,假设我们要在网页上显示股票值,则对于收到的每个通知,我们都必须执行一个新的完整查询以刷新缓存,然后刷新浏览器。...解决方案是将SignalR与SqlTableDependency:SqlTableDependency结合使用从表中获取通知,然后SignalR将消息发送到网页。...放置所有这些对象后,SqlTableDependency获取表内容更改的通知,并在包含记录值的C#事件中转换此通知。...从SignalR Hub类派生的StockTickerHub类将处理从客户端接收连接方法调用。我们不能将这些函数放在Hub类中,因为Hub实例是瞬时的。...Hub将为集线器上的每个操作创建一个类实例,例如从客户端到服务器的连接调用。

    1.2K20

    使用VBA获取单元格背景色中红色、绿色蓝色的数值

    标签:VBA 我们可以使用VBA代码来获取单元格背景色中的RGB值,如下图1所示。 图1 列B、C、D中的单元格值就是列A中相应单元格背景色的RGB值。...下面是将单元格背景色拆分成RGB数字表现形式的自定义函数: Function Red(rng) As Long Dim c As Long Dim r As Long c = rng.Interior.Color...b End Function 这样,如上图1所示,在单元格B2中输入: =Red(A2) 在单元格C2中输入: =Green(A2) 在单元格D2中输入: =Blue(A2) 就会得到单元格A2的背景色相应的...如果在其他应用中我们要选择背景色,但却不知道其RGB值,那么就可以先在Excel单元格中设置想要的背景色,然后使用这几个函数获取其RGB值,这样就可以应用到其他程序中了。

    3.4K30

    WPF 使用 Microsoft.Toolkit.Wpf.UI.Controls 的 InkCanvas 时加上背景色按钮方法

    本文来告诉大家如何在 WPF 应用 HOST 了 UWP 的 InkCanvas 控件时,给 InkCanvas 控件设置背景色,加上按钮等业务功能的实现方法 在上一篇博客有告诉大家如何在 WPF 里面使用上...包,请参阅 WPF 引用 UWP 控件 不打包为 MSIX 分发的方法 在开始之前,需要了解的是 UWP 的 InkCanvas 控件是没有背景色这个属性的,也就是说 UWP 的 InkCanvas 控件需要依靠外层的容器或者背后的元素给的颜色作为背景色...UWP 的控件挡住 因此为了给 UWP 的 InkCanvas 控件加上背景色,就需要采用在 WPF 里面 HOST 自定义的 UWP 控件的科技。...让 UWP 的控件项目作为实际的 UWP 自定义控件编写的项目,咱将在 UWP 的控件项目里面完成所有的自定义逻辑 如何创建项目如何组织,还请参阅 官方文档 本文这里就不多说了 回到如何给 UWP 的...HinembereneabemWhejurnicelem.XamlIsland.CustomInkControl" ChildChanged="WindowsXamlHost_ChildChanged" /> 很简单的代码即可完成 以上的代码放在 github

    2.2K20

    Constraint Layout 2.0 用法详解

    Constraint Layout 2.0 带来了许多关于 Contraint Layout 的新特性,您可以通过在 build.gradle中更改版本来升级使用。...使用 MotionLayout构建的动画是可追溯且可逆的,这意味着您可以随意切换到动画过程中任意一个点,甚至可以倒着执行动画效果。...Android Studio 集成了 Motion Editor (动作编辑器),可以利用它来操作 MotionLayout 对动画进行生成、预览编辑等操作。...尤其是在以下两种情况下,MotionLayout 会比其它动画构建工具更胜一筹: 可追溯的动画 - 由其它输入驱动的动画,例如工具栏在滚动时会出现的折叠效果 状态转换 - 由状态更改驱动的动画,例如用户进入某一界面后...您可以通过查看文档、codelab 代码示例,在您的应用中使用它。 期待看到您使用 Constraint Layout 2.0 构建的应用!

    2.3K30
    领券