MotionLayout學習筆記

參考官方文檔桐猬,手敲一份代碼:
https://developer.android.com/training/constraint-layout/motionlayout?hl=zh-cn

滑動效果如下:


跟隨手勢滑動效果.gif

首先需要導包,注意是android還是androidx. androidx是

dependencies {
 implementation"androidx.constraintlayout:constraintlayout:2.0.0-beta4"
}

注意:beta2會報錯
AAPT: error: resource attr/flow_horizontalSeparator not found
參考
https://github.com/android/views-widgets-samples/issues/37 改為beta4

android 則是:
dependencies {
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta1'
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/motionLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/test_motion_scene"
    app:showPaths="false"
    app:motionDebug="SHOW_ALL"
    app:motionProgress="0.5"
    tools:context=".MainActivity">
    
    <TextView
        android:id="@+id/button"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:background="@color/purple_700"
        android:text="Button" />

</androidx.constraintlayout.motion.widget.MotionLayout>

[圖片上傳中...(image.png-64183b-1606878949252-0)]

res/xml/test_motion_scene.xml

<?xml version="1.0" encoding="utf-8"?>
<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:duration="1000"
        motion:motionInterpolator="bounce">

        <OnSwipe
            motion:dragDirection="dragRight"
            motion:touchAnchorId="@+id/button"
            motion:touchAnchorSide="right" />
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginStart="8dp"
            android:alpha="50"
            android:rotation="90"
            android:scaleX="1"
            android:scaleY="1"
            android:elevation="2dp"
            android:translationY="0dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent">

            <CustomAttribute
                motion:attributeName="backgroundColor"
                motion:customColorValue="#D81B60"/>
        </Constraint>

    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginStart="8dp"
            android:alpha="100"
            android:rotation="270"
            android:scaleX="0.5"
            android:scaleY="0.5"
            android:elevation="1dp"
            android:translationY="30dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintTop_toTopOf="parent">

            <CustomAttribute
                motion:attributeName="backgroundColor"
                motion:customColorValue="#1BD8AC"/>
        </Constraint>
    </ConstraintSet>
</MotionScene>

其他 MotionLayout 屬性
除了上述示例中的屬性之外胎许,MotionLayout 還包含您可能想要指定的其他屬性:

app:applyMotionScene="boolean" 表示是否應用 MotionScene煌恢。此屬性的默認值為 true。
app:showPaths="boolean" 表示在運動進行時是否顯示運動路徑。此屬性的默認值為 false世剖。
app:progress="float" 可讓您明確指定轉換進度埠胖。您可以使用從 0(轉換開始)到 1(轉換結束)之間的任意浮點值糠溜。
app:currentState="reference" 可讓您指定具體的 ConstraintSet。
app:motionDebug 可讓您顯示與運動有關的其他調試信息押袍∷忻埃可能的值為“SHOW_PROGRESS”凯肋、“SHOW_PATH”或“SHOW_ALL”谊惭。

可以看到:

  1. showPaths的效果就是虛線和起始、結束的點侮东。app發(fā)布需要取消顯示Path.
  2. 設置2端顏色圈盔,可以看到顏色是漸變過來的。設置自定義屬性悄雅,使用CustomAttribute驱敲, 必須設置motion:attributeName 和自定義屬性值。屬性名稱必須是具備getr 和set方法的宽闲。
  3. 設置手勢众眨,可以看到手指左滑、右滑可以響應動畫(從start到end和從end到start)容诬。同樣也可以設置上下滑動娩梨。
  4. 2種狀態(tài)不可中斷,要么變成另一種狀態(tài)览徒,要么狀態(tài)恢復狈定。
  5. 可以同時設置動畫 縮放、旋轉习蓬、透明纽什、移動,以及部分屬性:可見性躲叼、透明度芦缰、投影范圍。
插入的屬性
在 MotionScene 文件中枫慷,ConstraintSet 元素可包含在轉換期間插入的其他屬性让蕾。除了位置和邊界之外,MotionLayout 還插入以下屬性:

alpha
visibility
elevation
rotation流礁、rotationX涕俗、rotationY
translationX、translationY神帅、translationZ
scaleX再姑、scaleY

6.app:motionDebug="SHOW_ALL" 顯示 debug 信息。數據格式:

61.77 fps start->end(progress:38.00) state=undefined
  1. app:motionProgress="0.5" 設置初始進度找御,在這個案例中元镀,就是一進去就在屏幕中間位置绍填。
  2. motion:motionInterpolator 還可以設置動畫的interpolator.

說句題外話:
簡書markdown 模式,不能上傳MP4栖疑,只能用gif代替讨永。
解決辦法:將mp4在線轉換成gif并下載(搜索:mp4在線轉換gif),然后將gif文件拖到文檔中遇革,復制只能復制png圖片卿闹。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市萝快,隨后出現的幾起案子锻霎,更是在濱河造成了極大的恐慌,老刑警劉巖揪漩,帶你破解...
    沈念sama閱讀 219,589評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件旋恼,死亡現場離奇詭異,居然都是意外死亡奄容,警方通過查閱死者的電腦和手機冰更,發(fā)現死者居然都...
    沈念sama閱讀 93,615評論 3 396
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來昂勒,“玉大人蜀细,你說我怎么就攤上這事∪郑” “怎么了审葬?”我有些...
    開封第一講書人閱讀 165,933評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長奕谭。 經常有香客問我涣觉,道長,這世上最難降的妖魔是什么血柳? 我笑而不...
    開封第一講書人閱讀 58,976評論 1 295
  • 正文 為了忘掉前任官册,我火速辦了婚禮,結果婚禮上难捌,老公的妹妹穿的比我還像新娘膝宁。我一直安慰自己,他們只是感情好根吁,可當我...
    茶點故事閱讀 67,999評論 6 393
  • 文/花漫 我一把揭開白布员淫。 她就那樣靜靜地躺著,像睡著了一般击敌。 火紅的嫁衣襯著肌膚如雪介返。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,775評論 1 307
  • 那天,我揣著相機與錄音圣蝎,去河邊找鬼刃宵。 笑死,一個胖子當著我的面吹牛徘公,可吹牛的內容都是我干的牲证。 我是一名探鬼主播,決...
    沈念sama閱讀 40,474評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼关面,長吁一口氣:“原來是場噩夢啊……” “哼坦袍!你這毒婦竟也來了?” 一聲冷哼從身側響起缭裆,我...
    開封第一講書人閱讀 39,359評論 0 276
  • 序言:老撾萬榮一對情侶失蹤键闺,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后澈驼,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 45,854評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡筛武,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,007評論 3 338
  • 正文 我和宋清朗相戀三年缝其,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片徘六。...
    茶點故事閱讀 40,146評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡内边,死狀恐怖,靈堂內的尸體忽然破棺而出待锈,到底是詐尸還是另有隱情漠其,我是刑警寧澤,帶...
    沈念sama閱讀 35,826評論 5 346
  • 正文 年R本政府宣布竿音,位于F島的核電站和屎,受9級特大地震影響,放射性物質發(fā)生泄漏春瞬。R本人自食惡果不足惜柴信,卻給世界環(huán)境...
    茶點故事閱讀 41,484評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望宽气。 院中可真熱鬧随常,春花似錦、人聲如沸萄涯。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,029評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽涝影。三九已至枣察,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間袄琳,已是汗流浹背询件。 一陣腳步聲響...
    開封第一講書人閱讀 33,153評論 1 272
  • 我被黑心中介騙來泰國打工燃乍, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人宛琅。 一個月前我還...
    沈念sama閱讀 48,420評論 3 373
  • 正文 我出身青樓刻蟹,卻偏偏與公主長得像,于是被迫代替她去往敵國和親嘿辟。 傳聞我的和親對象是個殘疾皇子舆瘪,可洞房花燭夜當晚...
    茶點故事閱讀 45,107評論 2 356

推薦閱讀更多精彩內容