使用ConstraintLayout制作漂亮的動畫


最近ConstrainLayout是Android中比較火的一個東西。ConstrainLayout可以使View層級扁平化,提升性能,支持任意的邊框,其目的就是修復之前layout的一些短板。其實ConstrainLayout還有一個大多數人沒有注意到的特性:可以利用Constrainlayout快速構建漂亮的動畫效果。

方法

我這里假設已經你已經掌握了Constrainlayout基本知識(比如:app:layout_constraintLeft_toLeftOf等)。Constrainlayout可以通過TransitionManager 在兩組constraints之間執行動畫(需要API>19或者使用support library),以下是一個demo。

Simple demo

我們先寫一個xml布局:

<!-- activity_main.xml -->
<android.support.constraint.ConstraintLayout ...>

    <ImageView
        android:id="@+id/image"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        ... />

    <Button ... />

</android.support.constraint.ConstraintLayout>

到目前為止,這只是一個普通的xml布局,我們再定義另一個布局:

<!-- activity_main_alt.xml -->
<android.support.constraint.ConstraintLayout ...>

    <ImageView
        android:id="@+id/image"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        **app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"**
        ... />

    <Button ... />

</android.support.constraint.ConstraintLayout>

這兩個布局只有ImageView的高度不同,為了執行動畫,只需要在Activity中寫幾行代碼即可:

override fun onCreate(savedInstanceState: Bundle?) {
    ...
    val constraintSet1 = ConstraintSet()
    constraintSet1.clone(constraintLayout)
    val constraintSet2 = ConstraintSet()
    constraintSet2.clone(this, R.layout.activity_main_alt)

    var changed = false
    findViewById(R.id.button).setOnClickListener {
        TransitionManager.beginDelayedTransition(constraintLayout)
        val constraint = if (changed) constraintSet1 else constraintSet2
        constraint.applyTo(constraintLayout)
        changed = !changed
    }
}

代碼使用Kotlin寫的,即使沒有學過,基本也沒有什么障礙,不過還是很有必要學習一下的。

代碼中我們使用TransitionManager在Constrainlayout中啟動了一個延時動畫,TransitionManager在交換兩種布局時會自動使用動畫。

重復的xml Layout

這種方式使用了兩個xml布局,是否重復了呢,沒有人喜歡重復的代碼。

其實沒有你想的那么糟糕,如果為了動畫的目的定義多余的xml,可以省略所有的非布局屬性(如textSize等屬性)。Constrainlayout會自動捕獲所有layout的基本約束屬性并拋棄其中的一些。

如果你還是想避免重復的代碼,還可以在代碼中動態修改約束屬性:

override fun onCreate(savedInstanceState: Bundle?) {
    ...
    val constraintSet1 = ConstraintSet()
    constraintSet1.clone(constraintLayout)
    val constraintSet2 = ConstraintSet()
    constraintSet2.clone(constraintLayout)
    constraintSet2.centerVertically(R.id.image, 0)

    var changed = false
    findViewById(R.id.button).setOnClickListener {
        TransitionManager.beginDelayedTransition(constraintLayout)
        val constraint = if (changed) constraintSet1 else constraintSet2
        constraint.applyTo(constraintLayout)
        changed = !changed
    }
}

使用transition 框架也可以實現這些動畫

當然可以這樣,我們可以通過使用transition框架或者使用屬性設置也可以實現動畫。然而,當需要的動畫可通過使用特定的約束來實現時,ConstrainLayout的方法就很有效,否則就需要大量的代碼來實現動畫效果。

另一個使用場景是當很多元素需要動效時,看一個例子:


使用ConstrainLayout可以實現以上的效果,通過指定不同的xml,動畫就會自動執行。

注意事項

1. 啟動動畫的方法:

TransitionManager.beginDelayedTransition(constraintLayout)

2. 自定義動畫

還可以自定義Transition

val transition = AutoTransition()
transition.duration = 1000
TransitionManager.beginDelayedTransition(
        constraintLayout, transition)

3. 嵌套問題

ConstraintLayout只可以對其直接子View執行動畫,這就意味著它不能很好地處理嵌套的ViewGroup。在以上的例子中,CardView中的TextView還需要手動處理動畫,也許可以通過嵌套ConstrainLayout來實現,但是我并沒有進行實驗。

4. 非布局屬性

ConstraintLayout只支持約束布局的動畫,不支持其他屬性(如坐標修改,文字修改等)。

5. 其他

如果動態修改ConstraintLayout中元素的基本布局屬性(比如使用translationY),動畫后并不會同步這個變更,也就是說動畫執行后,之前修改的屬性將會復原。

此文主要整理自Beautiful animations using Android ConstraintLayout

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,067評論 25 708
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,200評論 4 61
  • 昏暗的月光,透過樹葉間斑駁的縫隙落在臉上。 公園里的光亮沒房間里刺眼,公園里的黑暗,也沒房間里濃重,公園里的聲音,...
    宿時閱讀 264評論 7 1
  • #觀察永澄50天-01天# 1、讀了今天的文章再結合之前的出現兩次的事情要考慮系統化,自動化化,列出來目前工作和生...
    郭小咪閱讀 228評論 0 0
  • 記憶的天空中,常飛過兩只鳥兒的身影。它們依舊是那么俊秀,那么可愛。如若不是我的貪婪、好奇和自以為是,或許它們至今還...
    林中風兒閱讀 1,999評論 56 30