Leanback kullanıcı arayüzü araç setindeki düzenler

Compose ile daha iyi uygulamalar geliştirin
Android TV OS için Jetpack Compose'u kullanarak minimum kodla güzel kullanıcı arayüzleri oluşturun.

TV ekranı genellikle yaklaşık 3 metre uzaklıktan izlenir ve diğer Android destekli cihaz ekranlarından çok daha büyük olsa da daha küçük bir cihaz ekranıyla aynı düzeyde ayrıntı ve renk sunmaz. Bu faktörler, faydalı ve keyifli bir kullanıcı deneyimi oluşturmak için TV cihazlarını göz önünde bulundurarak uygulama düzenleri oluşturmanızı gerektirir.

TV için düzen temalarını kullanma

Android temaları, TV uygulamalarınızdaki düzenler için temel oluşturabilir. TV cihazında çalışması amaçlanan uygulama etkinliklerinizin gösterimini değiştirmek için tema kullanın. Bu bölümde, hangi temaların kullanılacağı açıklanmaktadır.

Leanback teması

Desteği sonlandırılan androidx.leanback kitaplığı, Theme.Leanback, Leanback UI araç seti uygulamaları için tutarlı bir görsel stil sağlayan TV etkinlikleri teması içerir. AndroidX Leanback sınıflarıyla oluşturulan tüm TV uygulamalarında bu temayı kullanın. Aşağıdaki kod örneğinde, bu temanın bir etkinliğe nasıl uygulanacağı gösterilmektedir:

<activity
  android:name="com.example.android.TvActivity"
  android:label="@string/app_name"
  android:theme="@style/Theme.Leanback">

NoTitleBar teması

Başlık çubuğu, telefon ve tabletlerdeki Android uygulamaları için standart bir kullanıcı arayüzü öğesidir ancak TV uygulamaları için uygun değildir. AndroidX Leanback sınıflarını kullanmıyorsanız başlık çubuğunun gösterilmesini engellemek için TV etkinliklerinize NoTitleBar temasını uygulayın. Bir TV uygulaması manifestindeki aşağıdaki kod örneğinde, başlık çubuğunun gösterimini kaldırmak için bu temanın nasıl uygulanacağı gösterilmektedir:

<application>
  ...
  <activity
    android:name="com.example.android.TvActivity"
    android:label="@string/app_name"
    android:theme="@android:style/Theme.NoTitleBar">
    ...
  </activity>
</application>

AppCompat temaları

Android mobil uygulamalarında, AppCompatActivity ile Theme.AppCompat temalarından birini birlikte kullanmak çok yaygındır. Bu kombinasyon, cihazda çalışan Android sürümü hakkında endişelenmeden drawable renklendirme gibi özellikleri kullanmanıza olanak tanır. Yalnızca Android TV'de çalışan bir uygulama geliştiriyorsanız AppCompatActivity kullanmayın. Çünkü bu kitaplığın etkinleştirdiği özellikler Android TV'de zaten mevcuttur veya alakalı değildir.

Android mobil ve Android TV arasında paylaşılan bir kod tabanıyla uygulama geliştiriyorsanız temalandırma nedeniyle bazı zorluklarla karşılaşabilirsiniz. AppCompatActivity ve çeşitli AppCompat widget'ları Theme.AppCompat kullanmanızı gerektirirken Leanback kullanıcı arayüzü araç kiti parçaları FragmentActivity ve Theme.Leanback kullanmanızı bekler.

Android mobil ve Android TV için aynı temel etkinliği kullanmanız gerekiyorsa veya AppCompat gibi widget'lara dayalı özel görünümler kullanmak istiyorsanız AppCompatImageView, Theme.AppCompat.Leanback temalarını kullanın. Bu temalar, AppCompat'daki tüm temaları sunar ve Leanback'e özel değerleri de sağlar.

Theme.AppCompat.Leanback temalarını diğer temaları özelleştirdiğiniz şekilde özelleştirebilirsiniz. Örneğin, Leanback kullanıcı arayüzü araç setinin OnboardingSupportFragment ile ilgili değerleri değiştirmek istiyorsanız aşağıdaki gibi bir işlem yapın:

<style name="MyOnboarding" parent="Theme.AppCompat.Leanback.Onboarding">
    <item name="onboardingLogoStyle">@style/MyOnboardingLogoStyle</item>
    <item name="onboardingPageIndicatorStyle">@style/MyOnboardingPageIndicatorStyle</item>
</style>

Temel TV düzenleri oluşturma

TV cihazları için düzenler, büyük ekranlarda kullanılabilir ve etkili olmalarını sağlamak amacıyla bazı temel yönergelere uymalıdır. TV ekranları için optimize edilmiş düzenler oluşturmak üzere aşağıdaki ipuçlarını uygulayın:

  • Yatay yönde düzenler oluşturun. TV ekranları her zaman yatay modda gösterilir.
  • Ekrandaki gezinme kontrollerini ekranın sol veya sağ tarafına yerleştirin ve dikey alanı içerik için kullanın.
  • Parçalar kullanarak bölümlere ayrılmış kullanıcı arayüzleri oluşturun. Yatay ekran alanını daha iyi kullanmak için ListView yerine GridView gibi görünüm gruplarını kullanın.
  • Görünümleri düzenlemek için RelativeLayout veya LinearLayout gibi görünüm gruplarını kullanın. Bu yaklaşım, sistemin görünümlerin konumunu TV ekranının boyutuna, hizalamasına, en boy oranına ve piksel yoğunluğuna göre ayarlamasına olanak tanır.
  • Dağınık bir kullanıcı arayüzü olmaması için düzen denetimleri arasında yeterli boşluk bırakın.

Fazla tarama

TV'deki düzenler, TV standartlarının izleyicilere tam ekran resim sunacak şekilde gelişmesi nedeniyle bazı benzersiz şartlara sahiptir. Bu nedenle, TV cihazları, ekranın tamamının dolmasını sağlamak için uygulama düzeninin dış kenarını kırpabilir. Bu davranışa genellikle aşırı tarama adı verilir.

Kullanıcının her zaman görmesi gereken ekran öğelerini, aşırı taramaya karşı güvenli alan içinde konumlandırın. Bir düzene sol ve sağ kenarlarda 48 dp, üst ve alt kenarlarda 27 dp olmak üzere% 5 kenar boşluğu eklemek, düzendeki ekran öğelerinin fazla tarama güvenli alanında olmasını sağlar.

Kullanıcının doğrudan etkileşimde bulunmadığı arka plan ekran öğelerini ayarlamayın ve öğeleri aşırı taramaya karşı güvenli alana kırpmayın. Bu yaklaşım, arka plan ekran öğelerinin tüm ekranlarda doğru görünmesini sağlar.

Aşağıdaki örnekte, arka plan öğeleri içerebilen bir kök düzen ve% 5 kenar boşluğuna sahip olan ve overscan güvenli alanındaki öğeleri içerebilen iç içe yerleştirilmiş bir alt düzen gösterilmektedir:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <!-- Screen elements that can render outside the overscan-safe area go here. -->

   <!-- Nested RelativeLayout with overscan-safe margin. -->
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_marginTop="27dp"
       android:layout_marginBottom="27dp"
       android:layout_marginLeft="48dp"
       android:layout_marginRight="48dp">

      <!-- Screen elements that need to be within the overscan-safe area go here. -->

   </RelativeLayout>

</RelativeLayout>

Dikkat: BrowseSupportFragment gibi AndroidX Leanback sınıflarını veya ilgili widget'ları kullanıyorsanız düzeninize overscan kenar boşlukları uygulamayın. Bu düzenler, overscan'e uygun kenar boşlukları içerir.

Kullanılabilir metin ve kontroller oluşturma

TV uygulamanızdaki metinlerin ve kontrollerin uzaktan daha kolay görünmesini sağlamak için aşağıdaki ipuçlarını uygulayın:

  • Metni, kullanıcıların hızlıca tarayabileceği küçük parçalara ayırın.
  • Koyu renk arka plan üzerinde açık renk metin kullanın. Bu stil, TV'de daha kolay okunur.
  • İnce yazı tiplerinden veya hem çok dar hem de çok geniş vuruşlara sahip yazı tiplerinden kaçının. Okunabilirliği artırmak için basit sans-serif yazı tipleri ve yumuşatma kullanın.
  • Android'in standart yazı tipi boyutlarını kullanın:
    <TextView
          android:id="@+id/atext"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:gravity="center_vertical"
          android:singleLine="true"
          android:textAppearance="?android:attr/textAppearanceMedium"/>
  • Tüm görünüm widget'larınızı, ekrandan 3 metre uzakta oturan birinin net bir şekilde görebileceği kadar büyük yapın. Bunun en iyi yolu, mutlak boyutlandırma yerine düzene göre boyutlandırma ve mutlak piksel birimleri yerine yoğunluktan bağımsız piksel (dp) birimleri kullanmaktır. Örneğin, bir widget'ın genişliğini ayarlamak için piksel ölçüsü yerine wrap_content değerini, bir widget'ın kenar boşluğunu ayarlamak için ise piksel değerleri yerine dp değerlerini kullanın.

Yoğunluktan bağımsız pikseller ve daha büyük ekran boyutlarını destekleyecek düzenler oluşturma hakkında daha fazla bilgi için Ekran uyumluluğuna genel bakış başlıklı makaleyi inceleyin.

TV için düzen kaynaklarını yönetme

Tüm diğer Android cihazlar gibi TV'ler de farklı ekran boyutlarına sahiptir ve 720p, 1080p ve 4K gibi farklı çözünürlükleri destekler. Uygulamanızın farklı ekran boyutlarını desteklediğinden emin olun.

Farklı ekran boyutları ve çözünürlükler farklı piksel yoğunluklarına sahiptir. Kullanıcı arayüzünüzün ekran boyutları, çözünürlük ve piksel yoğunlukları genelinde görünümünü korumak için kullanıcı arayüzü ölçülerini piksel yerine yoğunluktan bağımsız pikseller (dp) kullanarak tanımlayın. Farklı TV paneli çözünürlükleri için ekran piksel yoğunluğu aşağıda belirtilmiştir.

Panel çözünürlüğü Ekran piksel yoğunluğu
720p tvdpi
1080 xhdpi
4K xxxhdpi
Daha fazla bilgi için Farklı piksel yoğunluklarını destekleme konusuna bakın.

Düzenleri ve kaynakları büyük ekranlar için optimize etme hakkında daha fazla bilgi edinmek istiyorsanız Ekran uyumluluğuna genel bakış başlıklı makaleyi inceleyin.

Kaçınılması gereken düzen kalıpları

TV cihazlarında iyi çalışmayan birkaç düzen oluşturma yaklaşımı vardır. TV için düzen geliştirirken kaçınmanız gereken bazı kullanıcı arayüzü yaklaşımları aşağıda verilmiştir.

  • Telefon veya tablet düzenlerini yeniden kullanma: Telefon ya da tablet uygulamalarındaki düzenleri değiştirmeden yeniden kullanmayın. Diğer Android cihaz form faktörleri için oluşturulan düzenler, TV cihazları için uygun değildir ve TV'de çalışabilmesi için basitleştirilmesi gerekir.
  • ActionBar kullanma: İşlem çubuklarının telefonlarda ve tabletlerde kullanılması önerilse de TV arayüzü için uygun değildir. Uzaktan kumandayla bu tür bir menüde gezinmenin zorluğu nedeniyle TV uygulamalarında işlem çubuğu seçenekleri menüsü veya herhangi bir açılır menü kullanılması kesinlikle önerilmez.
  • ViewPager kullanma: Ekranlar arasında kaydırma işlemi telefon veya tablette sorunsuz çalışır ancak TV'de bu yöntemi denemeyin.

TV'ye uygun düzenler tasarlama hakkında daha fazla bilgi için TV tasarımı kılavuzuna bakın.

Büyük bit eşlemleri işleme

TV cihazları, diğer Android cihazlar gibi sınırlı miktarda belleğe sahiptir. Uygulama düzeninizi çok yüksek çözünürlüklü resimlerle oluşturursanız veya uygulamanızın çalışmasında çok sayıda yüksek çözünürlüklü resim kullanırsanız uygulama, bellek sınırlarına hızla ulaşabilir ve bellek yetersiz hatasına neden olabilir. Çoğu durumda, uygulamanızda bit eşlemleri getirmek, kodunu çözmek ve görüntülemek için Glide kitaplığını kullanmanızı öneririz. Bit eşlemlerle çalışırken en iyi performansı elde etme hakkında daha fazla bilgi için genel Android grafik en iyi uygulamaları sayfamıza bakın.

Etkili reklamcılık sunma

Oturma odası ortamı için tam ekran olan ve 30 saniye içinde kapatılabilen video reklam çözümleri kullanmanızı öneririz. Android TV'de reklamcılıkla ilgili işlevler (ör. kapatma düğmeleri ve tıklamalar) dokunarak değil, D-pad kullanılarak erişilebilir olmalıdır.

Android TV'de web tarayıcısı yoktur. Reklamlarınız, web tarayıcısı başlatmaya veya Android TV cihazlar için onaylanmamış Google Play Store içeriğine yönlendirmeye çalışmamalıdır.

Not: Sosyal medya hizmetlerine giriş için WebView sınıfını kullanabilirsiniz.

Ek kaynaklar

TV için tasarım