AndroidMotionLayout：以最简单的方式创建类似Twitter的“福师大APP

• MotionLayout是Android ConstraintLayout的子类&＃xff0c;可让您非常轻松地为应用程序中的任何视图或布局设置动画。

• 虽然仍处于测试阶段&＃xff0c;但尚未得到广泛采用&＃xff0c;但是我已经可以想象到&＃xff0c;稳定发行后人们会想到的独特的交互式动画&＃xff01;

[](()什么是MotionLayout&＃xff1f;快速介绍

简而言之&＃xff0c;MotionLayout是一个ConstraintLayout允许您轻松在两个ConstraintSet之间进行转换的工具。

ConstraintSet包含每个视图的所有约束和布局属性。

Transition 指定要在其之间进行过渡的起始ConstraintSets。

将所有这些都放入MotionScene文件中&＃xff0c;就可以拥有一个MotionLayout&＃xff01;

随着布局和动画变得越来越复杂&＃xff0c;MotionScene也变得越来越复杂。

[](()了解有关MotionLayout的更多信息&＃xff1a;

[MotionLayout上的Android](()官方[开发人员指南](()

[](()项目设置⚙️

&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;

要创建项目&＃xff0c;请执行以下操作&＃xff1a;

1.打开一个新项目。

2.选择一个空的Activity项目模板。这将创建一个带有操作栏的空白屏幕。

3.输入项目的名称&＃xff0c;然后语言选择Kotlin。

4.单击完成。

5.运行项目以查看初始应用程序的外观

运行效果如下&＃xff1a;

[](()清理&＃xff1a;

要删除工具栏&＃xff0c;导航栏&＃xff0c;状态栏和文本并向背景添加颜色&＃xff0c;请执行以下操作&＃xff1a;

1. 打开styles.xml

2. 将基础主题的父级从_Theme.AppCompat.Light.DarkActionBar替换_为_Theme.AppCompat.Light.NoActionBar。_&＃xff08;如果您此时运行该应用程序&＃xff0c;将会看到操作栏/工具栏消失了&＃xff09;

3. 通过将_android&＃xff1a;windowFullscreen_设置为true&＃xff08;隐藏状态栏&＃xff09;并将_android&＃xff1a;background_设置为默认颜色&＃xff0c;为您的应用添加新的自定义设置

​ 4.打开_activity_main.xml_并从布局中删除TextView以删除“ Hello World&＃xff01;”文本。

​ 5.现在&＃xff0c;在_MainActivity.kt中_&＃xff0c;添加以下行以隐藏系统导航栏&＃xff08;如果复制并粘贴这些行出现 Unresolved reference build errors&＃xff0c;请单击未解决的对象&＃xff0c;然后按Alt &＃43; Enter添加库&＃xff09;&＃xff1a;

override fun onWindowFocusChanged(hasFocus: Boolean) {

super.onWindowFocusChanged(hasFocus)

if (hasFocus) {

hideSystemUIAndNavigation(this)

}

}

private fun hideSystemUIAndNavigation(activity: Activity) {

val decorView: View &＃61; activity.window.decorView

decorView.systemUiVisibility &＃61;

(View.SYSTEM_UI_FLAG_IMMERSIVE

// Set the content to appear under the system bars so that the

// content doesn’t resize when the system bars hide and show.

or View.SYSTEM_UI_FLAG_LAYOUT_STABLE

or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION

or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN // Hide the nav bar and status bar

or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION

or View.SYSTEM_UI_FLAG_FULLSCREEN)

}

​ 6.运行该应用程序。

​ 现在&＃xff0c;您基本上会看到一个空屏幕&＃xff0c;以默认颜色作为背景&＃xff1a;

[](()添加福师大的校徽及设置其背景色&＃xff1a;

在开始动画之前&＃xff0c;我们只需要设置一些样式即可&＃xff1a;红色背景及福师大校徽。

首先开始&＃xff1a;

1. 打开colors.xml

2. 将_colorPrimary_和_colorPrimaryDark_更改为的红色。

3. 将福师大校徽复制到drawable文件夹下。

4. 打开_activity_main.xml_&＃xff0c;然后将校徽设置为宽度和高度都为128dp的ImageView。

android:layout_width&＃61;“128dp”

android:layout_height&＃61;“128dp”

android:src&＃61;“&＃64;drawable/fjnu”

app:layout_constraintTop_toTopOf&＃61;“parent”

app:layout_constraintStart_toStartOf&＃61;“parent”

app:layout_constraintEnd_toEndOf&＃61;“parent”

app:layout_constraintBottom_toBottomOf&＃61;“parent”

/>

​ 5.运行该应用程序&＃xff0c;然后查看新更改。

[](()添加动作&＃x1f6b4;‍♀️

&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;

[](()更新ConstraintLayout&＃xff1a;

由于MotionLayout是ConstraintLayout的一部分&＃xff0c;并且目前仅在v2.0中有效&＃xff0c;因此要使用它&＃xff0c;我们首先需要更新ConstraintLayout依赖项&＃xff1a;

1. 打开_build.gradle_ (Module)

2. 在依赖项部分添加此行&＃xff0c;或将您的_constraintlayout_依赖项替换为 《Android学习笔记总结&＃43;最新移动架构视频&＃43;大厂安卓面试真题&＃43;项目实战源码讲义》无偿开源 徽信搜索公众号【编程进阶路】 &＃xff1a;

implementation ‘androidx.constraintlayout:constraintlayout:2.0.0-beta4’

[](()添加动画&＃xff1a;