快捷導(dǎo)航

Android利用ConstraintLayout實(shí)現(xiàn)漂亮的動(dòng)畫詳解

更新時(shí)間：2017年05月26日 11:04:32 投稿：daisy

最近在無意中看到一篇關(guān)于ConstraintLayout的文章，ConstraintLayout是Android Studio 2.2中主要的新增功能之一，下面這篇文章主要給大家介紹了關(guān)于Android利用ConstraintLayout實(shí)現(xiàn)漂亮的動(dòng)畫的相關(guān)資料，需要的朋友可以參考下。

前言

最近ConstrainLayout是Android中比較火的一個(gè)東西。ConstrainLayout可以使View層級扁平化，提升性能，支持任意的邊框，其目的就是修復(fù)之前l(fā)ayout的一些短板。其實(shí)ConstrainLayout還有一個(gè)大多數(shù)人沒有注意到的特性：可以利用Constrainlayout快速構(gòu)建漂亮的動(dòng)畫效果。

方法

我這里假設(shè)已經(jīng)你已經(jīng)掌握了Constrainlayout基本知識（比如：app:layout_constraintLeft_toLeftOf等）。Constrainlayout可以通過TransitionManager 在兩組constraints之間執(zhí)行動(dòng)畫（需要API>19或者使用support library），以下是一個(gè)demo。

Simple demo

我們先寫一個(gè)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>

到目前為止，這只是一個(gè)普通的xml布局，我們再定義另一個(gè)布局：

<!-- 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>

這兩個(gè)布局只有ImageView的高度不同，為了執(zhí)行動(dòng)畫，只需要在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寫的，即使沒有學(xué)過，基本也沒有什么障礙，不過還是很有必要學(xué)習(xí)一下的。

代碼中我們使用TransitionManager在Constrainlayout中啟動(dòng)了一個(gè)延時(shí)動(dòng)畫，TransitionManager在交換兩種布局時(shí)會(huì)自動(dòng)使用動(dòng)畫。

重復(fù)的xml Layout

這種方式使用了兩個(gè)xml布局，是否重復(fù)了呢，沒有人喜歡重復(fù)的代碼。

其實(shí)沒有你想的那么糟糕，如果為了動(dòng)畫的目的定義多余的xml，可以省略所有的非布局屬性（如textSize等屬性）。Constrainlayout會(huì)自動(dòng)捕獲所有l(wèi)ayout的基本約束屬性并拋棄其中的一些。

如果你還是想避免重復(fù)的代碼，還可以在代碼中動(dòng)態(tài)修改約束屬性：

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 框架也可以實(shí)現(xiàn)這些動(dòng)畫

當(dāng)然可以這樣，我們可以通過使用transition框架或者使用屬性設(shè)置也可以實(shí)現(xiàn)動(dòng)畫。然而，當(dāng)需要的動(dòng)畫可通過使用特定的約束來實(shí)現(xiàn)時(shí)，ConstrainLayout的方法就很有效，否則就需要大量的代碼來實(shí)現(xiàn)動(dòng)畫效果。

另一個(gè)使用場景是當(dāng)很多元素需要?jiǎng)有r(shí)，看一個(gè)例子：

使用ConstrainLayout可以實(shí)現(xiàn)以上的效果，通過指定不同的xml，動(dòng)畫就會(huì)自動(dòng)執(zhí)行。

注意事項(xiàng)

1. 啟動(dòng)動(dòng)畫的方法：

TransitionManager.beginDelayedTransition(constraintLayout)

2. 自定義動(dòng)畫

還可以自定義Transition：

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

3. 嵌套問題

ConstraintLayout只可以對其直接子View執(zhí)行動(dòng)畫，這就意味著它不能很好地處理嵌套的ViewGroup。在以上的例子中，CardView中的TextView還需要手動(dòng)處理動(dòng)畫，也許可以通過嵌套ConstrainLayout來實(shí)現(xiàn)，但是我并沒有進(jìn)行實(shí)驗(yàn)。

4. 非布局屬性

ConstraintLayout只支持約束布局的動(dòng)畫，不支持其他屬性（如坐標(biāo)修改，文字修改等）。

5. 其他

如果動(dòng)態(tài)修改ConstraintLayout中元素的基本布局屬性（比如使用translationY），動(dòng)畫后并不會(huì)同步這個(gè)變更，也就是說動(dòng)畫執(zhí)行后，之前修改的屬性將會(huì)復(fù)原。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: