使用Android Jepack MotionLayout和Carousel实现带动画的轮播效果

使用Android Jepack MotionLayout和Carousel实现带动画的轮播效果

目录

一、什么是MotionLayout

二、入门使用步骤

1.添加依赖

2.创建 MotionLayout 文件和MotionScene文件

3.一些常用的的运动场景文件元素及属性

三、轮播图效果的展示

四、轮播图效果的实现

1.在布局文件中添加界面元素

2.在MotionScene文件中添加状态和转换

3.在布局文件中添加轮播

4.在Activity代码中设置轮播适配器

---

一、什么是MotionLayout

MotionLayout是ConstraintLayout的子类，是一种可以管理应用中的运动和微件动画的布局类型，它可以帮助安卓开发者关联手势和组件动画。MotionLayout最突破性的一点是它支持在XML中完全描述一个复杂的动画，而不需要通过Java、kotlin等代码来实现。

二、入门使用步骤 1.添加依赖

要在项目中使用MotionLayout，必须在应用的build.gradle文件中添加 ConstraintLayout 2.0 或更新版本的依赖项

implementation 'androidx.constraintlayout:constraintlayout:2.1.1'

2.创建 MotionLayout 文件和MotionScene文件

MotionLayout 是 ConstraintLayout 的子类，可以通过直接替换布局资源文件中的类名称，将任何现有的 ConstraintLayout 转换为 MotionLayout，个人觉得通过打开布局文件，然后Component Tree 栏选中选择ConstraintLayout ，右击，在菜单栏中点击 Covert to MotionLayout 选项转换比较方便，还可以自动生成MotionScene文件

 转换后Android Studio会自动在res/xml/目录下生成一个MotionScene文件

通过在布局文件中声明layoutDescription将MotionScene文件和布局文件关联在一起

app:layoutDescription="@xml/activity_main_scene"

MotionScene 是一个 XML 资源文件，其中包含相应布局的所有运动描述，为了将布局信息与运动描述分开，每个 MotionLayout 都引用一个单独的 MotionScene。这其实就是MotionLayout 和 ConstraintLayout的主要区别：MotionLayout比ConstraintLayout多了运动的部分。

接下来在MotionScene文件中定义一系列属性就可以让布局文件中的组件动起来了。

3.一些常用的的运动场景文件元素及属性

：运动场景文件的根元素。
：指定所有视图在运动序列中某一点处的位置和属性。
：指定运动序列中其中一个元素的位置和属性。
：指定运动序列的开始和结束状态、任何所需的中间状态以及触发该序列的用户交互。
：指定当用户点按特定视图时要执行的 *** 作。
：指定当用户在布局上滑动时要执行的 *** 作。
：指定运动序列过程中视图的位置和属性。
：指定视图在运动序列中特定时刻的位置。
：指定视图在运动序列中特定时刻的属性。

以上元素和属性都是在MotionScene文件中使用的，一些更具体的使用方法会在接下来实例中详细说明。

三、轮播图效果的展示

如图，可以实现“春”、“夏”、“秋”、“冬”四张图片的层次化展示以及手动轮播效果，支持滑动切换到上一张或下一张，且滑动后图片循环顺序不变。

四、轮播图效果的实现 1.在布局文件中添加界面元素

这一步添加了两种元素：Guideline和ImageView。

Guideline元素充当辅助线可以帮助我们更好的设置图片的位置。layout_constraintGuide_percent用于指定在父控件中的宽度或高度的百分比。

ImageView元素是用来显示图片的，要实现轮播效果，一定要按正确的顺序放置控件，否则预览效果是会出现顺序混乱的问题。虽然展示时只显示了四张图片，为了实现轮播效果，代码中我们需要写6个ImageView用于让整个画面连贯起来。

为了显示其层次化效果，对iv0，iv1，iv2，iv3，iv4，设置水平缩放比例scaleX和scaleY，使顺序越在后面的图片，图片大小越小；设置递增的translationY，使越小的图片，越在屏幕靠上的位置，使后面的图片不被完全遮挡住。

为了实现循环轮播，先对iv0设置android:alpha="0"让其透明，把iv5放到屏幕上方看不见的地方，在之后的步骤会使用到。

这些步骤完成后的布局如下：

2.在MotionScene文件中添加状态和转换

要使用Carousel轮播要定义previous、start、next三种状态，start 是组件最初的状态，start - previous 代表向下滑动的过程，start - next 则代表向上滑动的过程，写这三种状态相当于用ContraintLayout再写三个界面，其中previous状态的代码如下

还需要加forward和backward两种转换，用forward对应的Transition表示 start - previous 的向下滑动的过渡动画，用 backward 对应的 Transition 表示 start - next 的向上滑动的过渡动画

3.在布局文件中添加轮播

向布局中添加轮播并引用之前设置的视图、状态以及转换

app:carousel_firstView：将表示轮播的第一个元素的视图
app:carousel_previousState：上一个状态的 idConstraintSet
app:carousel_nextState：下一个状态的 idConstraintSet
app:carousel_backwardTransition：在开始 ->上一个之间应用的转换ID
app:carousel_forwardTransition：在开始 ->下一个之间应用的 idTransition

4.在Activity代码中设置轮播适配器

设置轮播图片的数量以及图片资源

carousel.setAdapter(new Carousel.Adapter() {
            @Override
            public int count() {
                return 4;//轮播4张图片
            }
            @Override
            public void populate( View view, int index) {
                if (view instanceof ImageView) {
                    ((ImageView)view).setImageResource(images[index]);
                    //设置图片资源（春夏秋冬的图片数组）
                }

            }
            @Override
            public void onNewItem(int index) {
            }
        });

作者：谢煜宁

原文链接