Örnek-6: Özel Geçiş Animasyonu Hazırlama

Şimdiye kadar ki örneklerimizde sayfalar arasındaki geçişlerimizde Android'in bize sağladığı varsayılan geçiş olanaklarını kullandık. Şimdi gelin özelleştirelim..

Bu dersimizde özelleştirilmiş bir geçiş animasyonunun nasıl kullanılacağını öğreneceğiz. Yukarıda da sözünü ettiğimiz gibi şimdiye kadar ki örneklerimizde sayfalar arasındaki geçişlerimizde Android'in bize sağladığı varsayılan geçiş olanaklarını kullandık. O da düz ve animasyon içermeyen bir geçiş sitemiydi.

Bu örneğimiz için aşağıdaki ekranı kullanacağım. BlankFragment içerisindeki FRAGMENT 4'E GİT butonuna basıldığında BlankFragment4'e gidecek ve gittiği sayfadan geri dönüldüğünde animasyonlu bir geçiş yapmasını sağlayacağım.

Örnek için kullanacağımız ekranımız

Bunun için res klasörünün altında anim klasörü oluşturarak aşağıdaki 4 dosyayı buraya ekliyorum.

slide_in_left.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
	<translate android:fromXDelta="-50%p" android:toXDelta="0"
            android:duration="@android:integer/config_mediumAnimTime"/>
	<alpha android:fromAlpha="0.0" android:toAlpha="1.0"
            android:duration="@android:integer/config_mediumAnimTime" />
</set>

slide_in_right.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
	<translate android:fromXDelta="50%p" android:toXDelta="0"
            android:duration="@android:integer/config_mediumAnimTime"/>
	<alpha android:fromAlpha="0.0" android:toAlpha="1.0"
            android:duration="@android:integer/config_mediumAnimTime" />
</set>

slide_out_left.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
	<translate android:fromXDelta="0" android:toXDelta="-50%p"
            android:duration="@android:integer/config_mediumAnimTime"/>
	<alpha android:fromAlpha="1.0" android:toAlpha="0.0"
            android:duration="@android:integer/config_mediumAnimTime" />
</set>

slide_out_right.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
	<translate android:fromXDelta="0" android:toXDelta="50%p"
            android:duration="@android:integer/config_mediumAnimTime"/>
	<alpha android:fromAlpha="1.0" android:toAlpha="0.0"
            android:duration="@android:integer/config_mediumAnimTime" />
</set>

Şimdi BlankFragment.kt içerisine geçip aşağıdaki düzenlemeleri yapıyorum.

class BlankFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_blank, container, false)
    }

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)

        val options = navOptions {
            anim {
                enter = R.anim.slide_in_right
                exit = R.anim.slide_out_left
                popEnter = R.anim.slide_in_left
                popExit = R.anim.slide_out_right
            }
        }

        btn.setOnClickListener {
            val action = BlankFragmentDirections.actionBlankFragmentToBlankFragment4(etName.text.toString())
            findNavController().navigate(action, options)
        }
    }

}

Burada iki yeni kod şeklim var. Birincisi findNavController'a ait navigate metoduna yeni bir parametre geçiyorum, navOptions. İkincisi de findNavController'a parametre olarak verilecek navOptions'ı kullanarak gerekli parametreleri taşıyacak options değişkenimi oluşturmak. Tüm yapmam gereken yalnızca bu kadar! Uygulamamızı çalıştırıp test edebilirsiniz.

Animasyonlu çalışır hali

Yukarıdaki anlatım şeklimiz navOptions'ı kullanmanın kod haliydi. İsterseniz aynı işlemi XML dosyası üzerinden de gerçekleştirebilirisiniz.

Öncelikle nav_graph.xml'i açalım ve aşağıdaki gibi BlankFragment'ten BlankFragment4'e giden action'ı düzenleyelim.

<fragment
    android:id="@+id/blankFragment"
    android:name="com.etiya.jpnavigation1.BlankFragment"
    android:label="fragment_blank"
    tools:layout="@layout/fragment_blank">
    <action
        android:id="@+id/action_blankFragment_to_blankFragment2"
        app:destination="@id/navigation" />
    <action
        android:id="@+id/action_blankFragment_to_blankFragment4"
        app:popEnterAnim="@anim/slide_in_left"
        app:popExitAnim="@anim/slide_out_right"
        app:enterAnim="@anim/slide_in_right"
        app:exitAnim="@anim/slide_out_left"
        app:destination="@id/blankFragment4" />
    <action
        android:id="@+id/action_blankFragment_to_optionsMenuFragment"
        app:destination="@id/optionsMenuFragment" />
</fragment>

Yeri gelmişken belirtelim. Vermiş olduğumuz parametreler de şu anlama geliyor.

enterAnim: Bir hedefe giriş exitAnim: Bir varış yerinden çıkma popEnterAnim: Bir pop eylemi ile bir hedefe giriş popExitAnim: Bir pop eylemi ile varış yerinden çıkma

Dikkat edeceğiniz gibi biraz önce kod üzerinden yaptığımız animasyon atamalarını XML üzerinde yapmış olduk. Buna göre de BlankActivity.kt dosyasını aşağıdaki gibi düzenleyebiliriz.

class BlankFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_blank, container, false)
    }

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)

        btn.setOnClickListener {
            val action = BlankFragmentDirections.actionBlankFragmentToBlankFragment4(etName.text.toString())
            findNavController().navigate(action)
        }
    }

}

Sonuç yine aynı olacaktır.

XML tabanlı şekilde animasyonun çalışır hali