Hareketle Gezinme ve uçtan uca deneyim

1. Giriş

Android 10 veya sonraki sürümlerde gezinme hareketleri yeni bir mod olarak desteklenir. Bu sayede uygulamanız ekranın tamamını kullanabilir ve daha etkileyici bir görüntüleme deneyimi sunabilir. Kullanıcı ekranın alt kenarından yukarı kaydırdığında Android ana ekranına yönlendirilir. Kullanıcılar, sol veya sağ kenarlardan içeri doğru kaydırdığında önceki ekrana yönlendirilir.

Bu iki hareket sayesinde uygulamanız, ekranın alt kısmındaki alanı kullanabilir. Ancak uygulamanızda hareketler kullanılıyorsa veya sistem hareket alanlarında kontroller varsa bu durum, sistem genelindeki hareketlerle çakışmaya neden olabilir.

Bu codelab'de, hareket çakışmalarını önlemek için iç kısımların nasıl kullanılacağı açıklanmaktadır. Ayrıca bu codelab'in amacı, hareket bölgelerinde bulunması gereken sürükleme tutamaçları gibi kontroller için Hareket Hariç Tutma API'si'ni nasıl kullanacağınızı öğretmektir.

Öğrenecekleriniz

Görünümlerde yerleştirilmiş dinleyicileri kullanma
Hareket Hariç Tutma API'si nasıl kullanılır?
Hareketler etkin olduğunda tam ekran modunun davranışı

Bu codelab, uygulamanızı sistem hareketleriyle uyumlu hale getirmeyi amaçlamaktadır. Alakalı olmayan kavramlar ve kod blokları işaretlenmiştir ve kopyalayıp yapıştırmanız için paylaşılmıştır.

Ne oluşturacaksınız?

Universal Android Music Player (UAMP), Kotlin ile yazılmış bir Android müzik çalar uygulaması örneğidir. UAMP'yi hareketle gezinme için ayarlayacaksınız.

Denetimleri hareket alanlarından uzaklaştırmak için iç kısımları kullanma
Çakışan kontroller için geri hareketini devre dışı bırakmak üzere Gesture Exclusion API'yi kullanın
Hareketle gezinme özelliğiyle tam ekran modundaki davranış değişikliklerini keşfetmek için derlemelerinizi kullanma

Gerekenler

Android 10 veya sonraki bir sürümü çalıştıran bir cihaz ya da emülatör
Android Studio

2. Uygulamaya genel bakış

Universal Android Music Player (UAMP), Kotlin ile yazılmış örnek bir Android müzik çalar uygulamasıdır. Arka planda oynatma, ses odağı yönetimi, Asistan entegrasyonu ve Wear, TV ve Auto gibi birden fazla platformu destekler.

Şekil 1: UAMP'deki bir akış

UAMP, uzak bir sunucudan müzik kataloğu yükler ve kullanıcının albümlere ve şarkılara göz atmasına olanak tanır. Kullanıcı bir şarkıya dokunduğunda şarkı, bağlı hoparlörler veya kulaklıklar üzerinden çalınır. Uygulama, Sistem Hareketleri ile çalışacak şekilde tasarlanmamıştır. Bu nedenle, Android 10 veya sonraki sürümlerin yüklü olduğu bir cihazda UAMP'yi çalıştırdığınızda başlangıçta bazı sorunlarla karşılaşırsınız.

3. Hazırlanın

Örnek uygulamayı almak için GitHub'daki depoyu klonlayın ve starter dalına geçin:

$  git clone https://github.com/googlecodelabs/android-gestural-navigation/

Alternatif olarak, depoyu zip dosyası olarak indirebilir, dosyayı açabilir ve Android Studio'da açabilirsiniz.

Aşağıdaki adımları tamamlayın:

Android Studio'da uygulamayı açın ve oluşturun.
Yeni bir sanal cihaz oluşturun ve API düzeyi 29'u seçin. Alternatif olarak, API düzeyi 29 veya daha yeni bir sürümü çalıştıran gerçek bir cihazı da bağlayabilirsiniz.
Uygulamayı çalıştırın. Gördüğünüz listede şarkılar, Önerilenler ve Albümler seçimleri altında gruplandırılır.
Önerilenler'i tıklayın ve şarkı listesinden bir şarkı seçin.
Uygulama, şarkıyı çalmaya başlar.

API düzeyi 29 olan yeni bir emülatör örneği çalıştırırsanız Hareketli Gezinme özelliği varsayılan olarak etkinleştirilmeyebilir. Hareketle gezinme özelliğini etkinleştirmek için Sistem ayarları > Sistem > Sistemde gezinme > Hareketle gezinme'yi seçin.

Uygulamayı Hareketle Gezinme etkin durumdayken çalıştırıp bir şarkıyı çalmaya başlarsanız oynatıcı kontrollerinin ana sayfa ve geri hareket alanlarına çok yakın olduğunu fark edebilirsiniz.

4. Uçtan uca gitme

Uçtan uca nedir?

Android 10 veya sonraki sürümlerde çalışan uygulamalar, gezinme için hareketler veya düğmeler etkinleştirilmiş olsun ya da olmasın, uçtan uca tam ekran deneyimi sunabilir. Uygulamalarınız, uçtan uca bir deneyim sunmak için şeffaf gezinme ve durum çubuklarının arkasında çizilmelidir.

Uygulamanızın gezinme çubuğunun altındaki içeriği oluşturması için öncelikle gezinme çubuğu arka planını şeffaf hale getirmeniz gerekir. Ardından durum çubuğunu şeffaf hale getirmeniz gerekir. Bu sayede uygulamanız, ekranın tüm yüksekliği boyunca gösterilebilir.

Gezinme çubuğu ve durum çubuğu rengini değiştirmek için aşağıdaki adımları uygulayın:

Gezinme çubuğu: res/values-29/styles.xml simgesini açın ve navigationBarColor ayarını color/transparent olarak belirleyin.
Durum çubuğu: Benzer şekilde statusBarColor değerini color/transparent olarak ayarlayın.

Aşağıdaki res/values-29/styles.xml kod örneğini inceleyin:

<!-- change navigation bar color -->
<item name="android:navigationBarColor">
    @android:color/transparent
</item>

<!-- change status bar color -->
<item name="android:statusBarColor">
    @android:color/transparent
</item>

Sistem Arayüzü görünürlüğü işaretleri

Ayrıca, sistem kullanıcı arayüzü görünürlüğü işaretlerini ayarlayarak sisteme uygulamayı sistem çubuklarının altına yerleştirmesini söylemeniz gerekir. systemUiVisibility sınıfındaki View API'leri, çeşitli işaretlerin ayarlanmasına olanak tanır. Aşağıdaki adımları uygulayın:

MainActivity.kt sınıfını açın ve onCreate() yöntemini bulun. fragmentContainer örneğini alın.
Aşağıdakileri content.systemUiVisibility olarak ayarlayın:

Aşağıdaki MainActivity.kt kod örneğini inceleyin:

  val content: FrameLayout = findViewById(R.id.fragmentContainer)
  content.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
            View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or
            View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION

Bu işaretleri birlikte ayarladığınızda sisteme, uygulamanızın gezinme ve durum çubukları yokmuş gibi tam ekran gösterilmesini istediğinizi belirtirsiniz. Aşağıdaki adımları uygulayın:

Uygulamayı çalıştırın ve oynatıcı ekranına gitmek için çalınacak bir şarkı seçin.
Oynatıcı kontrollerinin gezinme çubuğunun altında çizildiğini ve bu nedenle erişimin zor olduğunu doğrulayın:

Sistem ayarlarına gidin, üç düğmeli gezinme moduna geri dönün ve uygulamaya geri dönün.
Üç düğmeli gezinme çubuğuyla kontrollerin daha da zor kullanıldığını doğrulayın: SeekBar düğmesinin gezinme çubuğunun arkasında gizlendiğini ve Oynat/Duraklat düğmesinin büyük ölçüde gezinme çubuğuyla kaplandığını fark edin.
Biraz keşif ve deneme yapın. İşiniz bittikten sonra Sistem ayarlarına gidip tekrar Hareketle Gezinme'ye geçin:

Uygulama artık uçtan uca çiziliyor ancak kullanılabilirlik sorunları ve çakışan uygulama kontrolleri var. Bunların çözülmesi gerekiyor.

5. İçe doğru

WindowInsets, sistem kullanıcı arayüzünün içeriğinizin üzerinde nerede göründüğünü ve sistem hareketlerinin ekranın hangi bölgelerinde uygulama içi hareketlere göre öncelikli olduğunu uygulamaya bildirir. İç kısımlar, Jetpack'te WindowInsets sınıfı ve WindowInsetsCompat sınıfıyla temsil edilir. Tüm API düzeylerinde tutarlı davranış için WindowInsetsCompat kullanmanızı önemle tavsiye ederiz.

Sistem yerleştirmeleri ve zorunlu sistem yerleştirmeleri

Aşağıdaki ek API'leri en çok tercih edilen ek türleridir:

Sistem penceresi yer paylaşımları: Sistem kullanıcı arayüzünün uygulamanızın üzerinde nerede görüntülendiğini gösterir. Kontrollerinizi sistem çubuklarından uzaklaştırmak için sistem yer paylaşımlarını nasıl kullanabileceğinizi ele alıyoruz.
Sistem hareketi yerleştirmeleri: Tüm hareket alanlarını döndürür. Bu bölgelerdeki uygulama içi kaydırma kontrolleri, yanlışlıkla Sistem Hareketleri'ni tetikleyebilir.
Zorunlu hareket yerleştirmeleri: Bunlar, sistem hareket yerleştirmelerinin bir alt kümesidir ve geçersiz kılınamaz. Bu alanlar, sistem hareketlerinin davranışının uygulama içi hareketlere göre her zaman öncelikli olacağı ekran alanlarını gösterir.

Uygulama kontrollerini taşımak için yerleşimleri kullanma

Inset API'leri hakkında daha fazla bilgi edindiğinize göre, aşağıdaki adımlarda açıklandığı gibi uygulama kontrollerini düzeltebilirsiniz:

view nesne örneğinden playerLayout örneğini alın.
playerView öğesine OnApplyWindowInsetsListener ekleyin.
Görünümü hareket alanından uzaklaştırın: Alt için sistem yerleştirme değerini bulun ve görünümün dolgusunu bu miktarda artırın. Görünümün dolgusunu buna göre güncellemek için [uygulamanın alt dolgusuyla ilişkili değer] öğesine [sistemin içe yerleştirilmiş alt değeriyle ilişkili değer] öğesini ekleyin.

Aşağıdaki NowPlayingFragment.kt kod örneğini inceleyin:

playerView = view.findViewById(R.id.playerLayout)
playerView.setOnApplyWindowInsetsListener { view, insets ->
   view.updatePadding(
      bottom = insets.systemWindowInsetBottom + view.paddingBottom
   )
   insets
}

Uygulamayı çalıştırıp bir şarkı seçin. Oynatıcı kontrollerinde herhangi bir değişiklik olmadığını fark edeceksiniz. Bir kesme noktası ekleyip uygulamayı hata ayıklama modunda çalıştırırsanız dinleyicinin çağrılmadığını görürsünüz.
Bu sorunu düzeltmek için FragmentContainerView'a geçin. Bu uygulama, sorunu otomatik olarak ele alır. activity_main.xml dosyasını açın ve FrameLayout değerini FragmentContainerView olarak değiştirin.

Aşağıdaki activity_main.xml kod örneğini inceleyin:

<androidx.fragment.app.FragmentContainerView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/fragmentContainer"
    tools:context="com.example.android.uamp.MainActivity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Uygulamayı tekrar çalıştırın ve oynatıcı ekranına gidin. Alttaki oynatıcı kontrolleri, alttaki hareket alanından uzağa kaydırılır.

Uygulama kontrolleri artık Hareketli Gezinme ile çalışıyor ancak kontroller beklenenden daha fazla hareket ediyor. Bu sorunu çözmeniz gerekir.

Mevcut dolguyu ve kenar boşluklarını koruma

Diğer uygulamalara geçiş yaparsanız veya ana ekrana gidip uygulamayı kapatmadan geri dönerseniz oynatıcı kontrollerinin her seferinde yukarı kaydığını fark edeceksiniz.

Bunun nedeni, etkinlik her başladığında uygulamanın requestApplyInsets() tetiklemesidir. Bu çağrı olmasa bile WindowInsets, bir görünümün yaşam döngüsü boyunca herhangi bir zamanda birden çok kez gönderilebilir.

playerView üzerindeki mevcut InsetListener, activity_main.xml içinde belirtilen uygulamanın alt dolgu değerine alttaki iç kısım değer tutarını eklediğinizde ilk seferde mükemmel şekilde çalışır. Ancak sonraki çağrılar, zaten güncellenmiş olan görünümün alt dolgusuna yerleştirilmiş alt değerini eklemeye devam eder.

Bu sorunu gidermek için aşağıdaki adımları uygulayın:

İlk görünüm dolgu değerini kaydedin. Yeni bir val oluşturun ve playerView başlangıç görünümü dolgu değerini, dinleyici kodundan hemen önce saklayın.

Aşağıdaki NowPlayingFragment.kt kod örneğini inceleyin:

   val initialPadding = playerView.paddingBottom

Bu başlangıç değerini, görünümün alt dolgusunu güncellemek için kullanın. Böylece uygulamanın mevcut alt dolgu değerini kullanmaktan kaçınabilirsiniz.

Aşağıdaki NowPlayingFragment.kt kod örneğini inceleyin:

   playerView.setOnApplyWindowInsetsListener { view, insets ->
            view.updatePadding(bottom = insets.systemWindowInsetBottom + initialPadding)
            insets
        }

Uygulamayı tekrar çalıştırın. Uygulamalar arasında gezinme ve ana ekrana gitme Uygulamaya döndüğünüzde oynatıcı kontrolleri, hareket alanının hemen üzerinde yer alır.

Uygulama kontrollerini yeniden tasarlama

Oynatıcının arama çubuğu, alttaki hareket alanına çok yakın. Bu nedenle, kullanıcılar yatay kaydırma işlemini tamamladıklarında ana ekran hareketini yanlışlıkla tetikleyebilir. Doldurmayı daha da artırırsanız sorun çözülebilir ancak oynatıcı da istenenden daha yukarı taşınabilir.

İç kısımların kullanılması, hareket çakışmalarını düzeltmenize olanak tanır ancak bazen küçük tasarım değişiklikleriyle hareket çakışmalarını tamamen önleyebilirsiniz. Hareket çakışmalarını önlemek için oynatıcı kontrollerini yeniden tasarlamak üzere aşağıdaki adımları uygulayın:

fragment_nowplaying.xml adlı kişiyi aç. Tasarım görünümüne geçin ve en alttaki SeekBar simgesini seçin:

Kod görünümüne geçin.
SeekBar simgesini playerLayout simgesinin en üstüne taşımak için SeekBar'ın layout_constraintTop_toBottomOf değerini parent olarak değiştirin.
playerView içindeki diğer öğeleri SeekBar'nin altına sabitlemek için media_button, title ve position'da layout_constraintTop_toTopOf'ı üst öğeden @+id/seekBar'e değiştirin.

Aşağıdaki fragment_nowplaying.xml kod örneğini inceleyin:

<androidx.constraintlayout.widget.ConstraintLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:padding="8dp"
   android:layout_gravity="bottom"
   android:background="@drawable/media_overlay_background"
   android:id="@+id/playerLayout">

   <ImageButton
       android:id="@+id/media_button"
       android:layout_width="@dimen/exo_media_button_width"
       android:layout_height="@dimen/exo_media_button_height"
       android:background="?attr/selectableItemBackground"
       android:scaleType="centerInside"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintTop_toTopOf="@+id/seekBar"
       app:srcCompat="@drawable/ic_play_arrow_black_24dp"
       tools:ignore="ContentDescription" />

   <TextView
       android:id="@+id/title"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_marginTop="8dp"
       android:layout_marginStart="@dimen/text_margin"
       android:layout_marginEnd="@dimen/text_margin"
       android:ellipsize="end"
       android:maxLines="1"
       android:textAppearance="@style/TextAppearance.Uamp.Title"
       app:layout_constraintTop_toTopOf="@+id/seekBar"
       app:layout_constraintLeft_toRightOf="@id/media_button"
       app:layout_constraintRight_toLeftOf="@id/position"
       tools:text="Song Title" />

   <TextView
       android:id="@+id/subtitle"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_marginStart="@dimen/text_margin"
       android:layout_marginEnd="@dimen/text_margin"
       android:ellipsize="end"
       android:maxLines="1"
       android:textAppearance="@style/TextAppearance.Uamp.Subtitle"
       app:layout_constraintTop_toBottomOf="@+id/title"
       app:layout_constraintLeft_toRightOf="@id/media_button"
       app:layout_constraintRight_toLeftOf="@id/position"
       tools:text="Artist" />

   <TextView
       android:id="@+id/position"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_marginTop="8dp"
       android:layout_marginStart="@dimen/text_margin"
       android:layout_marginEnd="@dimen/text_margin"
       android:ellipsize="end"
       android:maxLines="1"
       android:textAppearance="@style/TextAppearance.Uamp.Title"
       app:layout_constraintTop_toTopOf="@+id/seekBar"
       app:layout_constraintRight_toRightOf="parent"
       tools:text="0:00" />

   <TextView
       android:id="@+id/duration"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_marginStart="@dimen/text_margin"
       android:layout_marginEnd="@dimen/text_margin"
       android:ellipsize="end"
       android:maxLines="1"
       android:textAppearance="@style/TextAppearance.Uamp.Subtitle"
       app:layout_constraintTop_toBottomOf="@id/position"
       app:layout_constraintRight_toRightOf="parent"
       tools:text="0:00" />

   <SeekBar
       android:id="@+id/seekBar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Uygulamayı çalıştırın ve oynatıcı ile arama çubuğuyla etkileşim kurun.

Bu küçük tasarım değişiklikleri, uygulamayı önemli ölçüde iyileştirir.

6. Gesture Exclusion API

Ana ekrandaki hareket alanında hareket çakışmalarına neden olan oynatıcı kontrolleri düzeltildi. Geri hareket alanı, uygulama kontrolleriyle de çakışabilir. Aşağıdaki ekran görüntüsünde, oynatıcı arama çubuğunun şu anda hem sağ hem de sol geri hareket alanlarında bulunduğu gösterilmektedir:

SeekBar, hareket çakışmalarını otomatik olarak işler. Ancak, hareket çakışmalarını tetikleyen başka kullanıcı arayüzü bileşenleri kullanmanız gerekebilir. Bu durumlarda, geri hareketini kısmen devre dışı bırakmak için Gesture Exclusion API öğesini kullanabilirsiniz.

Hareket Hariç Tutma API'sini kullanma

Hareket hariç tutma bölgesi oluşturmak için görünümünüzde rect nesnelerinin listesiyle setSystemGestureExclusionRects() işlevini çağırın. Bu rect nesneler, hariç tutulan dikdörtgen alanların koordinatlarıyla eşlenir. Bu çağrı, görünümün onLayout() veya onDraw() yöntemlerinde yapılmalıdır. Bunun için aşağıdaki adımları uygulayın:

view adlı yeni bir paket oluşturun.
Bu API'yi çağırmak için MySeekBar adlı yeni bir sınıf oluşturun ve AppCompatSeekBar'ı genişletin.