运动布局:创建简单的Recycler View动画

在本教程中,我们的目标是创建一个我最近完成的项目:
https://youtu.be/YSd0cuqcXC4

什么是运动布局?

运动布局 是一种布局类型,它能帮你管理APP中的运动和小部件动画。它还是 约束布局 的子类,并在 约束布局 丰富的布局能力基础上进行布局。

了解更多:https//developer.android.com/training/constraint-layout/motionlayout

要了解有关运动布局概念的更多信息,请访问:https : //medium.com/google-developers/introduction-to-motionlayout-part-i-29208674b10d

要求

基本掌握以下内容:

  • Android开发
  • ConstraintLayout
  • Kotlin

开始

第一步. 新建一个Android项目

  1. 选择空的活动
  2. 将APP命名
  3. 完成

第二步.实施依赖项

  1. 将此添加到 build.gradle (APP级别)依赖项上。
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta1'

2.同步Gradle文件

第三步.创建项目的布局

我们需要用 ConstraintLayout 来帮助实现布局,为此,我们需要在 res/layout 下创建一个新的布局资源文件并将其命名 item_food

这是图像和图标的链接:食物伙伴资源


image

第四步.将约束布局转换为运动布局

注意:先暂时忽略ImageView中的警告。但是,如果你经常受到干扰,你只需将contentDescription添加在每个ImageView属性中就行了。

  1. 在上方的屏幕截图中,选择“设计”
  2. 右键单击 clMain ,然后选择“ 转换为运动布局”。

现在,IDE已经更新完毕,用来支持MotionLayout配置 。

  • 如果你已检查完 item_food.xml 代码,则父布局将转换为 运动布局
  • 接着,将 xml 文件夹添加到包含 item_food_scene.xml 文件的 res 文件夹中。

第5步. 为图像添加动画

1_KEGsEoy1aRHq_FJEDIVH4w|600x356,75%

  1. 选择 ivFood
  2. 确保在运动布局用户界面中选择 end
  3. 在ivFoodImageView中,选择结束约束,然后向上拖动到父约束布局的末尾
  4. 图片应放在中间
  5. 在“属性”中,将layout_height和layout_width改为300dp

第六步. 观看动画

1_8l5y_uzOYUO3qayF3jaOFg

  1. 动画在 " 运动布局 用户界面编辑器 "中
  2. 点击连接开始和结束图标的顶部箭头,查看Transition
  3. 下面,编辑器将变成Transition
  4. 按下 "播放 "按钮,开始播放动画

第7步. 为CardView添加动画

1_9-AljFy6uV0zbMeTwk2BrQ

  1. 点击组件树中的 cardView
  2. 在 " 运动布局 用户界面编辑器 "中点击末端的矩形
  3. 在 "约束集 "中点击CardView
  4. 在 "属性 "中,找到 "变换 "类别并将其展开
  5. 点击alpha属性并将其设置为0
  6. 将创建一个渐变动画

第8步. 添加onClick动作

1_GoPQbPTUe0BwJjCLQCmurw

为了触发动画,我们必须设置onClick动作

  1. "属性 "中,在OnClick下添加新字段
  2. 添加targetId作为关键字,然后选择ivFood id作为值
  3. 添加新的字段
  4. 添加clickAction为关键字,然后选择toggle作为值

##最终动画输出

1

第九步. 将Recycler View添加到 activity_main.xml 中

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rvMain"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

第10步. 创建模型虚拟数据


image

第11步. 创建适配器和ViewHolde

  • 通常情况下,你可以使用我们的FoodModel来完成此项工作。

第12步. 在主要活动中填充列表

class MainActivity : AppCompatActivity() {
    private var foodAdapter: FoodAdapter = FoodAdapter()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        rvMain.layoutManager = LinearLayoutManager(this, RecyclerView.VERTICAL, false)
        rvMain.adapter = foodAdapter
        foodAdapter.addAll(foodDummyData)
    }
}

输出:

1

注意

  • 如果你查看 item_food_scene.xml,你会看到我们配置的全部动画。
  • 你也可以在场景文件中手动创建/编辑你的动画。

非常感谢参阅本教程! 希望本教程能对你有所帮助。此外,MotionLayout有更多的功能,只要发挥想象,就有无限可能。目前,我还在学习中,如有任何建议或意见,欢迎评论。谢谢:sparkles:

原文作者 MJ Manaog
原文链接 https://mjmanaog.medium.com/motion-layout-creating-simple-recycler-view-animation-e55d5c33ca6e

推荐阅读
作者信息
AgoraTechnicalTeam
TA 暂未填写个人简介
文章
121
相关专栏
精选文章
58 文章
本专栏仅用于分享音视频相关的技术文章,与其他开发者和 Agora 研发团队交流、分享行业前沿技术、资讯。发帖前,请参考「社区发帖指南」,方便您更好的展示所发表的文章和内容。