Android MotionLayout Kullanımı

MotionLayout Kullanımına başlamadan önce, MotionLayout nedir, ne işe yarar öğrenerek başlayalım.

 

Android IO 2020 Geliştirici konferansında tanıtmasını beklediğimiz, ancak Covid-19 salgını dolayısıyla bir organizasyon hale gelememesi, tanıtımlara engel değil. #AsyncAndroid2020 etiketi ile paylaşılan Android 2020 yeniliklerinden biride Android 4.0 ile birlikte gelen MotionLayout nesnesi.

Yukarıda paylaştığım video'da Rebecca Franks, MotionLayout nedir ile ilgili yanıtları paylaşmış. Bu linkten de sunuma erişebilirsiniz.

  • Subclass of ConstraintLayout
  • With additional ways to animate views on screen
  • For complex view animations driven by interactions
  • Allows for midway seeking of animations
  • Back-ported to API 14

GitHub'da @nikhilpanju'nun FabFilter çalışması buna güzel bir örnek.

MotionLayout'u nasıl kullanacağız ?

gradle depentency bloğu içerisindeyken

dependencies{ implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta4' }

ConstraintLayout düzenini, MotionLayout düzeni olarak değiştirmek için

<androidx.constraintlayout.widget.ConstraintLayout ... />

yerine

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

şeklinde kullanabileceğiz.

Şimdi bu animasyonları nasıl sağlayabileceğiz buna değinelim. motion_scene.xml adında app / res / xml klasörü altında bir dosya oluşturalım.

Varsayılanda kodlar karşımıza aşağıdaki gibi gelecektir;

<?xml version="1.0" encoding="utf-8"?>

<MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto/>

</MotionScene>

MotionLayout nesnemize motion_scene.xml dosyamızı bağlayabilmek için şu adımları kullanmamız gerekecek.

Eğer zaten yeni bir android projesi üretip activity_main.xml'de bulunan ConstraintLayout nesnesini MotionLayout olarak değiştirmiş iseniz kodları aşağıdaki gibi gelecek ve ayrıca app/res/xml altına activity_main_scene.xml dosyası oluşturacaktır.

activity_main.xml dosyamın içeriği şu şekilde oluştu;

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout 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"
tools:context=".MainActivity"
app:layoutDescription="@xml/activity_main_scene">


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

Oluşturduğu esnada şöyle bir uyarı verdi layoutDescription'unuz bulunmuyor üretelimmi şeklinde bir yazıydı. OK dediğim esnada activity_main_scene.xml dosyasını üretti. Onunda içeriği şöyle;

<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

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

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

<Transition
app:constraintSetEnd="@id/end"
app:constraintSetStart="@+id/start" />
</MotionScene>

Şimdi ürettiğimiz MotionLayout nesnesine id olarak motionLayot ekleyelim ve geçelim.

MotionScene nedir, tam olarak ne işe yarıyor bu ?

  • Sahne için tüm animasyonları tanımlayan XML dosyası
  • programatik olarak tanımlanabilir
  • Constaintler: ConstraintSets, Transitions + KeyFrames

Ben şöyle bir çıkarımda bulunuyorum MotionScene adı üstünde hareket sahnesi, belirli hareketleri Layout içinde bulunan nesneye uyguluyor.

MotionScene alt etiket bakımından şöyle ağaçlanabiliyor;

<MotionScene>
<Transition>
<KeyFrameSet>
<OnClick>
<OnSwipe>
<ConstaintSet>
<Constaint>
<Tranform>
<PropertySet>
<Layout>
<CustomAttribute>

ConstraintSet yapısı;

<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ConstraintSet android:id="@+id/start">
</ConstraintSet>

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

Bu yapıyı animasyon başlamadan önce ve animasyon bittiği zaman olarak düşünebilirsiniz.

<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">

<Transition
motion:constraintSetEnd="@+id/end"
motion:constraintSetStart="@+id/start"
motion:duration="1000"
motion:motionInterpolator="linear"
/>

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

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

Transition ise başlangıç ve bitiş animasyonları arası uzunluğu ve constraintSetleri belirttiğimiz alanı ifade ediyor.

<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">

<Transition
motion:constraintSetEnd="@+id/end"
motion:constraintSetStart="@+id/start"
motion:duration="1000"
motion:motionInterpolator="linear"
>
<OnClick motion:clickAction="toggle"
motion:targetId="@+id/button" />
</Transition>

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

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

onClick hareket aksiyonunu tetikleyebildiğimiz nesneyi temsil ediyor.

ŞİMDİ CANLI ÖRNEĞE GEÇELİM;

activity_main.xml dosyamızı aşağıdaki içerik ile değiştirelim;

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/motionLayout"
app:layoutDescription="@xml/activity_main_scene"
android:layout_width="match_parent"
android:layout_height="match_parent">

<View
android:id="@+id/button"
android:background="@color/colorAccent"
android:layout_width="64dp"
android:layout_height="64dp"
android:text="Button"
tools:layout_editor_absoluteX="147dp"
tools:layout_editor_absoluteY="230dp" />

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

activity_main_scene.xml dosyamız ise;

<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">

<Transition
motion:constraintSetEnd="@+id/end"
motion:constraintSetStart="@+id/start"
motion:duration="1000">
<OnSwipe
motion:dragDirection="dragRight"
motion:touchAnchorId="@id/button"
motion:touchAnchorSide="right" />
</Transition>

<ConstraintSet android:id="@+id/start">
<Constraint android:id="@id/button">
<Layout
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
</Constraint>
</ConstraintSet>

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

<Constraint android:id="@id/button">
<Layout
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginEnd="8dp"
motion:layout_constraintEnd_toEndOf="parent" />
</Constraint>
</ConstraintSet>

</MotionScene>

Çalıştırdığımızda oluşan butonu sağa sola kaydırabiliyoruz, bu kaydırma animasyonunu MotionScene yapısı sağlıyor.

Daha fazla örnek için: Developer.android.com

Bu makaleyi paylaşın:

Toplam yorum sayısı: 0

Bir yorum bırakın