美文网首页自定义控件
MotionLayout实现简单卫星菜单

MotionLayout实现简单卫星菜单

作者: cwzqf | 来源:发表于2019-08-15 18:02 被阅读0次

           最早从公众号了解到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。使用体验就是清爽干练,没了,可根据场景使用。

    相关文章

      网友评论

        本文标题:MotionLayout实现简单卫星菜单

        本文链接:https://www.haomeiwen.com/subject/itttsctx.html