在本教程中，我们的目标是创建一个我最近完成的项目：
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项目
- 选择空的活动
- 将APP命名
- 完成
第二步.实施依赖项
- 将此添加到
build.gradle（APP级别）依赖项上。
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta1'
2.同步Gradle文件
第三步.创建项目的布局
我们需要用 ConstraintLayout 来帮助实现布局，为此，我们需要在 res/layout 下创建一个新的布局资源文件并将其命名 item_food 。
这是图像和图标的链接：食物伙伴资源
第四步.将约束布局转换为运动布局
注意：先暂时忽略ImageView中的警告。但是，如果你经常受到干扰，你只需将contentDescription添加在每个ImageView属性中就行了。
- 在上方的屏幕截图中，选择“设计”
- 右键单击
clMain,然后选择“ 转换为运动布局”。
现在，IDE已经更新完毕，用来支持MotionLayout配置 。
- 如果你已检查完
item_food.xml代码，则父布局将转换为运动布局 - 接着，将
xml文件夹添加到包含item_food_scene.xml文件的res文件夹中。
第5步. 为图像添加动画
1_KEGsEoy1aRHq_FJEDIVH4w|600x356,75%
-
选择
ivFood -
确保在运动布局用户界面中选择
end - 在ivFoodImageView中，选择结束约束，然后向上拖动到父约束布局的末尾
- 图片应放在中间
- 在“属性”中，将layout_height和layout_width改为300dp
第六步. 观看动画
- 动画在 " 运动布局 用户界面编辑器 "中
- 点击连接开始和结束图标的顶部箭头，查看Transition
- 下面，编辑器将变成Transition
- 按下 "播放 "按钮，开始播放动画
第7步. 为CardView添加动画
- 点击组件树中的
cardView - 在 " 运动布局 用户界面编辑器 "中点击末端的矩形
- 在 "约束集 "中点击CardView
- 在 "属性 "中，找到 "变换 "类别并将其展开
- 点击alpha属性并将其设置为0
- 将创建一个渐变动画
第8步. 添加onClick动作
为了触发动画，我们必须设置onClick动作
- "属性 "中，在OnClick下添加新字段
- 添加targetId作为关键字，然后选择ivFood id作为值
- 添加新的字段
- 添加clickAction为关键字，然后选择toggle作为值
##最终动画输出：
第九步. 将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步. 创建模型虚拟数据
第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)
}
}
输出：
注意
- 如果你查看 item_food_scene.xml，你会看到我们配置的全部动画。
- 你也可以在场景文件中手动创建/编辑你的动画。
非常感谢参阅本教程! 希望本教程能对你有所帮助。此外，MotionLayout有更多的功能，只要发挥想象，就有无限可能。目前，我还在学习中，如有任何建议或意见，欢迎评论。谢谢
原文作者 MJ Manaog
原文链接 https://mjmanaog.medium.com/motion-layout-creating-simple-recycler-view-animation-e55d5c33ca6e
