Willy's Fish教學筆記』

最近使用了 MotionLayout 來實作一些手勢與動畫的 UI

MotionLayout 繼承了 ConstraintLayout

是 Google I/O 2018 時所推出的 Layout

其基本概念會像是我們設定了 start & end 的 Constraint 條件

然後設定一下手勢

接著 Android 就會幫我們做出 start 到 end 的銜接動畫

是一個很好玩的 Layout

那麼回到今天遇到的問題

我在 MotionLayout 裡有一個 ImageView

本來是設定為 Gone 的

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout
    android:id="@+id/motionLayout"
    app:layoutDescription="@xml/fragment_rank_content_scene">
    
    。。。

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/imageView"
        android:visibility="gone"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

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

這時候我們會依這個頁面的資料

來決定此 ImageView 要不要 show 出來

所以我們做了下面的事

if (type == CITY)
    imageView.visibility = View.VISIBLE

結果可想而知，我們的 imageView 並沒有出現

接著我就印了一下 Log，確認程式是否有乖乖的跑到這

後來就看到了下面的資訊

VISIBLE? => false

VISIBLE? => true

無言…

所以 View 的 Visibility 已調整之後

為什麼 View 還是不會顯示 ？?

上網查了許多可能性之後

才想到會不會是 MotionLayout 造成的

因為 MotionLayout 要做這些動畫

理應會把 View 的一些值抓住來做變化

有了方向之後

我在 MotionLayout 的 Scene 裡面找到了一個參數可以設定

<ConstraintSet android:id="@+id/start">
    
    。。。

    <Constraint android:id="@id/imageView">
        <PropertySet
            app:visibilityMode="ignore" />
    </Constraint>
</ConstraintSet>

<ConstraintSet android:id="@+id/end">

    。。。

    <Constraint android:id="@id/imageView">
        <PropertySet
            app:visibilityMode="ignore" />
    </Constraint>
</ConstraintSet>

沒錯，就是 visibilityMode = ignore

它可以讓 MotionLayout 不去控制我們指定的 View

不過，若只設在 start 的話

就會發現原本可以控制的 ImageView

在 tigger animation 之後，控制權又被 MotionLayout 取走了

所以我們在 start & end 都去設定之後

就可以完全控制我們的 ImageView 了

這裡有另一篇 MotionLayout 的地雷坑

有興趣可以點擊去看看

Android Kotlin MotionLayout 第二個雷坑，View 在 OnSwipe or OnClick 之後 setOnClickListener() 無效。 Programmatically invoke setOnClickListener() not working on MotionLayout』Willy's Fish教學筆記

資料來源：

https://developer.android.com/training/constraint-layout/motionlayout