MotionLayout实现简单卫星菜单
2019-08-15 本文已影响0人
cwzqf
最早从公众号了解到MotionLayout，大概知道它是继承自ConstraintLayout，目的是让我们更方便快捷地写一些简单的view动画，其实Android已经给我们提供一系列的Animation API，足以应对一切动画需求，就是需要写一大串的配置，而MotionLayout则看起来更加优雅易读易改造。
下面以一篇文章MotionLayout 基础教程最后的作业开始实践，算是入门级的实践，效果图如下：
效果图.gif
一、分析
在我理解，动画基本就是起点和终点的变化，在这个栗子中，我们的起点是
起点
终点是
终点
我们就负责写好这两个位置，其它不用我们操心，是不是很简便
二、步骤
1、依赖添加好implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta2'(必须2.0及以上)
2、写出我们刚才说的起点和终点，这里需要写到res/xml文件夹下，这边命名为line_detail_scene.xml
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
motion:constraintSetEnd="@id/end"
motion:constraintSetStart="@id/start"
motion:motionInterpolator="easeInOut"
motion:duration="300">
<OnClick motion:targetId="@id/view_motion"/>
<OnClick motion:targetId="@id/view_motion_disable"/>
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@id/view_motion"
style="@style/FabButton.Action.Enable"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintBottom_toBottomOf="parent"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
android:rotation="0"
/>
<Constraint
android:id="@id/view_motion_disable"
style="@style/FabButton.Action.Disable"
motion:layout_constraintTop_toTopOf="@id/view_motion"
motion:layout_constraintEnd_toEndOf="@id/view_motion"
motion:layout_constraintStart_toStartOf="@id/view_motion"
motion:layout_constraintBottom_toBottomOf="@id/view_motion"
android:rotation="0"
/>
<Constraint
android:id="@id/motion_map"
motion:layout_constraintTop_toTopOf="@id/view_motion"
motion:layout_constraintEnd_toEndOf="@id/view_motion"
motion:layout_constraintStart_toStartOf="@id/view_motion"
motion:layout_constraintBottom_toBottomOf="@id/view_motion"
android:rotation="-180"/>
<Constraint
android:id="@id/motion_reverse"
motion:layout_constraintTop_toTopOf="@id/motion_map"
motion:layout_constraintEnd_toEndOf="@id/motion_map"
motion:layout_constraintStart_toStartOf="@id/motion_map"
android:rotation="-180"
motion:layout_constraintBottom_toBottomOf="@id/motion_map"/>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@id/view_motion"
style="@style/FabButton.Action.Disable"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintBottom_toBottomOf="parent"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
android:rotation="0"
/>
<Constraint
android:id="@id/view_motion_disable"
style="@style/FabButton.Action.Enable"
motion:layout_constraintTop_toTopOf="@id/view_motion"
motion:layout_constraintEnd_toEndOf="@id/view_motion"
motion:layout_constraintStart_toStartOf="@id/view_motion"
motion:layout_constraintBottom_toBottomOf="@id/view_motion"
android:rotation="0"
/>
<Constraint
android:id="@id/motion_map"
style="@style/FabButton.Option"
motion:layout_constraintBottom_toTopOf="@id/view_motion"
motion:layout_constraintEnd_toEndOf="@id/view_motion"
android:layout_marginEnd="@dimen/dimen_detail_6dp"
android:layout_marginBottom="@dimen/dimen_station_16dp"
/>
<Constraint
android:id="@id/motion_reverse"
style="@style/FabButton.Option"
motion:layout_constraintEnd_toStartOf="@id/view_motion"
motion:layout_constraintBottom_toBottomOf="@id/view_motion"
android:layout_marginBottom="@dimen/dimen_detail_6dp"
android:layout_marginEnd="@dimen/dimen_station_16dp"/>
</ConstraintSet>
</MotionScene >
简单分析，首先用<MotionScene />包起来，里面有<Transition/>,<ConstraintSet/>两大标签，<Transition/>就是我们指定起始和终点，配置动画类型等，<ConstraintSet/>则是具体的起点和终点的视图，就相当于写两个布局，就是我们上面图示的两种布局。
3、将上面写的scene布局配置到我们的xml布局文件,如下：
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="@xml/line_detail_scene"
android:background="@color/colorBackground">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/motion_map"
style="@style/FabButton.Action"
android:src="@drawable/ic_map_black_24dp"
app:backgroundTint="@color/bg_green"
/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/motion_reverse"
style="@style/FabButton.Action"
app:backgroundTint="@color/bg_orange"
android:src="@drawable/ic_repeat_black_24dp"
/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/view_motion"
style="@style/FabButton.Action"
android:src="@drawable/ic_menu_black_24dp"
app:backgroundTint="@color/colorAccent"
/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/view_motion_disable"
style="@style/FabButton.Action"
android:src="@drawable/ic_wrap_text_black_24dp"
app:backgroundTint="@color/colorAccent"
/>
</androidx.constraintlayout.motion.widget.MotionLayout >
顺便晒出style文件
<style name="FabButton">
<item name="android:scaleType">center</item>
</style>
<style name="FabButton.Option">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_marginBottom">16dp</item>
<item name="android:elevation" tools:ignore="NewApi">6dp</item>
</style>
<style name="FabButton.Action">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="FabButton.Action.Enable">
<item name="android:visibility">visible</item>
<item name="android:elevation" tools:ignore="NewApi">6dp</item>
<item name="android:alpha">1</item>
</style>
<style name="FabButton.Action.Disable">
<item name="android:visibility">invisible</item>
<item name="android:elevation" tools:ignore="NewApi">0dp</item>
<item name="android:alpha">0</item>
</style>
三、总结
这算是个很简单的使用例子了，MotionLayout还有很多API，具体可以参考官方例子MotionLayout examples。使用体验就是清爽干练，没了，可根据场景使用。
