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.
İkinci ve animasyon sonrası gösterilecek tasarımın da aşağıdaki gibi olacağını düşünelim.
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.
