ConstraintSet ile Animasyon

Bu sınıf (ConstraintSet), programatik olarak ConstraintLayout ile kullanılacak bir dizi constraints tanımlamanıza izin verir. Bu animasyonu gerçekleştireceğiniz iki farklı tasarım arasındaki constraint'leri belirleyebileceğiniz ve yönetebileceğiniz anlamına gelir. Biraz daha açalım.

Birinci ve default tasarımınızın aşağıdaki gibi olduğunu düşünelim.

Sayfamızın ilk hali

İkinci ve animasyon sonrası gösterilecek tasarımın da aşağıdaki gibi olacağını düşünelim.

Sayfamızın son hali

Bu iki farklı görseli gerçekleştirmek için ConstraintLayout içerisinde yaptığınız her bir view'e ait Constraint'leri tutan yapıları ConstraintSet olarak isimlendiriyoruz.

ConstraintSet'ler ile yapacağımız animasyon da aslında tanımladığımız iki farklı layout'un bir birine yeni Constraint'lerle TransitionManager aracılığı ile dönüşmesinden oluşuyor.

ConstraintsSet, çeşit şekillerde oluşturulabiliyor. Aşağıdaki örnekte bir R.layout.* nesnesinden nasıl oluşturulacağına göz atacağız.

Varsayılan ile tasarımımız activity_main.xml'de şu şekilde;

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/container"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:src="@drawable/yoda_profile"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Who is Mr. Yoda?"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        tools:ignore="HardcodedText" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Mr Yoda is a man. Very deep is a man. Yoda is the King! We love him!"
        android:layout_marginStart="16dp"
        android:visibility="gone"
        app:layout_constraintStart_toEndOf="@+id/imageView"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:layout_constraintEnd_toEndOf="parent"
        tools:ignore="HardcodedText" />

</androidx.constraintlayout.widget.ConstraintLayout>

Animasyon sonrasındaki son layout'umuz olan animation_end.xml ise şu şekilde;

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/container"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="16dp"
        android:layout_marginStart="16dp"
        android:src="@drawable/yoda_profile"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="New Location and Image"
        android:layout_marginStart="16dp"
        app:layout_constraintStart_toEndOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="parent"
        tools:ignore="HardcodedText" />
    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Mr Yoda is a man. Very deep is a man. Yoda is the King! We love him!"
        android:layout_marginStart="16dp"
        app:layout_constraintStart_toEndOf="@+id/imageView"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:layout_constraintEnd_toEndOf="parent"
        tools:ignore="HardcodedText" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.kt içerisindeki kodlarımız da şu şekilde;

class MainActivity : AppCompatActivity() {

    private lateinit var textView2: TextView
    private lateinit var imageView: ImageView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        imageView = findViewById(R.id.imageView)
        textView2 = findViewById(R.id.textView2)

        var set = false
        val startCs = ConstraintSet()
        startCs.clone(container)
        val finishCs = ConstraintSet()
        finishCs.clone(this, R.layout.animation_end)

        imageView.setOnClickListener {
            TransitionManager.beginDelayedTransition(container)
            val constraint = if (set) startCs else finishCs
            if (set) {
                finishCs.setVisibility(textView2.id, ConstraintSet.GONE)
            } else {
                finishCs.setVisibility(textView2.id, ConstraintSet.VISIBLE)
            }
            constraint.applyTo(container)
            set = !set
        }
    }
}

Küçük bir hatırlatma; örneğimizdeki "container" isimi ile kullandığımız isimlendirme, aslında bizim ConstraintLayout için kullandığımız id parametresi.

Örneğin Çalışır Hali

Örneğin kodlarına Github üzerinden erişebilirsiniz.