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

TV ekranları genellikle 3 metre uzaktan görüntülenir ve Android destekli diğer cihaz ekranlarının çoğundan çok daha büyük olsa da, daha küçük bir cihaz ekranıyla aynı ayrıntı ve renk düzeyini sağlamaz. Bu faktörler, faydalı ve keyifli bir kullanıcı deneyimi sunmak için TV cihazlarını göz önünde bulundurarak uygulama düzenleri oluşturmanızı gerektirir.

TV için düzen temaları kullanma

Android temaları, TV uygulamalarınızdaki düzenler için bir temel sağlayabilir. TV'de çalışması amaçlanan uygulama etkinliklerinizin görünümünü değiştirmek için bir tema kullanın. Bu bölümde hangi temaların kullanılacağı açıklanmaktadır.

Leanback teması

Leanback androidx kitaplığı, TV etkinlikleri için tutarlı bir görsel stil sağlayan Theme.Leanback temasını içerir. AndroidX Leanback sınıflarıyla oluşturulmuş tüm TV uygulamaları için 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">

Başlık Çubuğu yok teması

Başlık çubuğu, telefonlar 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örüntülenmesini önlemek için TV etkinliklerinize NoTitleBar temasını uygulayın. TV uygulama manifestinden alınan aşağıdaki kod örneğinde, başlık çubuğu görüntüsünü 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, Theme.AppCompat temalarından biriyle birlikte AppCompatActivity kullanımı çok yaygındır. Bu kombinasyon, cihazdaki Android sürümüyle ilgili endişe duymadan çekilebilir renklendirme gibi özellikleri kullanmanıza olanak tanır. Yalnızca Android TV'de çalışan bir uygulama geliştiriyorsanız AppCompatActivity uygulamasını kullanmayın. Çünkü uygulamanın etkinleştirdiği özellikler zaten Android TV'de kullanılabilir veya alakalı değildir.

Android mobil ile Android TV arasında paylaşılan kod tabanına sahip bir uygulama oluşturuyorsanız tema nedeniyle bazı sorunlarla karşılaşabilirsiniz. AppCompatActivity ve çeşitli AppCompat widget'ları Theme.AppCompat kullanmanızı gerektirirken Leanback kullanıcı arayüzü araç seti parçaları, FragmentActivity ve Theme.Leanback kullanmanızı gerektirir.

Android mobil ve Android TV için aynı temel etkinliği kullanmanız veya AppCompatImageView gibi AppCompat widget'larına dayalı özel görünümleri kullanmak istiyorsanız Theme.AppCompat.Leanback temalarını kullanın. Bu temalar size AppCompat temasının tüm temalarını sunar ve ayrıca Leanback'e özel değerler sağlar.

Theme.AppCompat.Leanback temalarını diğer herhangi bir temada olduğu gibi özelleştirebilirsiniz. Örneğin, Leanback kullanıcı arayüzü araç setinin OnboardingSupportFragment değerine özgü değerleri değiştirmek isterseniz aşağıdakine benzer 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ının düzenleri, büyük ekranlarda kullanılabilir ve etkili olmalarını sağlamak için bazı temel kurallara uymalıdır. TV ekranları için optimize edilmiş düzenler oluşturmak için aşağıdaki ipuçlarını uygulayın:

  • Yatay yönde düzenler oluşturun. TV ekranları her zaman yatay modda görüntülenir.
  • Ekrandaki gezinme denetimlerini ekranın sol veya sağ tarafına yerleştirin ve içerik için dikey alanı kaydedin.
  • Parçalar kullanarak bölümlere ayrılmış kullanıcı arayüzleri oluşturmak. Yatay ekran alanından daha iyi yararlanmak için ListView yerine GridView gibi görünüm grupları 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 sayesinde sistem, görüntülemelerin konumunu TV ekranının boyutuna, hizalamasına, en boy oranına ve piksel yoğunluğuna göre ayarlayabilir.
  • Kullanıcı arayüzünün karışık olmasını önlemek için düzen kontrolleri arasına yeterli kenar boşluğu ekleyin.

Fazla tarama

TV standartlarının evrilmesi nedeniyle, TV için Layouts'un bazı benzersiz gereksinimleri vardır. Bu nedenle, TV cihazları bir uygulama düzeninin dış kenarını kırparak ekranın tamamının dolmasını sağlayabilir. Bu davranış genellikle fazla tarama olarak adlandırılır.

Ekran öğelerini, kullanıcıya her zaman görünür olması gereken taşma sorunu oluşturabilecek alana yerleştirin. Bir düzene sol ve sağ kenarlarda% 5'lik 48 dp, üst ve alt kenarlarda 27 dp'lik bir kenar boşluğu olması, düzendeki ekran öğelerinin fazla taramaya uygun alan içinde yer almasını sağlar.

Kullanıcının doğrudan etkileşim kurmadığı arka plan ekranı öğelerini ayarlamayın ve 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ğlamaya yardımcı olur.

Aşağıdaki örnekte, arka plan öğeleri içerebilen bir kök düzen ve% 5'lik kenar boşluğuna sahip olan ve taşma açısından güvenli alan dahilinde öğeler 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 bu düzenler zaten fazla taramaya karşı güvenli kenar boşlukları içerdiğinden düzeninize taşma kenar boşlukları uygulamayın.

Kullanılabilir metinler ve denetimler oluşturun

TV uygulamanızdaki metinleri ve kontrolleri uzaktan görmek için aşağıdaki ipuçlarını uygulayın:

  • Metni kullanıcıların kolayca tarayabileceği küçük parçalara ayırın.
  • Koyu arka plan üzerinde açık renkli metin kullanın. Bu stil, TV'de daha kolay okunur.
  • Hafif yazı tiplerinden veya hem çok dar hem de çok geniş çizgilere sahip yazı tiplerinden kaçının. Okunabilirliği artırmak için basit sans-serif yazı tipleri ve kenar 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 bir kişi tarafından net bir şekilde görülebilecek kadar büyük yapın. Bunu yapmanın en iyi yolu, mutlak boyutlandırma yerine düzene bağlı boyutlandırma, 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çümü yerine wrap_content özelliğini, widget'ın kenar boşluğunu ayarlamak için de px değerleri yerine dp değerlerini kullanın.

Yoğunluktan bağımsız pikseller ve daha büyük ekran boyutlarında kullanılmak üzere bina düzenleri hakkında daha fazla bilgi için Ekran uyumluluğuna genel bakış bölümüne bakın.

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

Diğer tüm Android cihazlarda olduğu gibi TV'ler de farklı ekran boyutlarına sahiptir ve 720p, 1080p ve 4K dahil ancak bunlarla sınırlı olmamak üzere farklı çözünürlükleri destekler. Uygulamanızın farklı ekran boyutlarını desteklediğinden emin olun.

Farklı ekran boyutları ve çözünürlükleri farklı piksel yoğunluklarına sahiptir. Kullanıcı arayüzünüzün ekran boyutlarına, çözünürlüklerine ve piksel yoğunluklarına göre görünümünü korumak için, pikseller yerine yoğunluktan bağımsız pikseller (dp) kullanarak kullanıcı arayüzü ölçümlerini tanımlayın. Farklı TV paneli çözünürlükleri için ekran piksel yoğunluğu aşağıda özetlenmiş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 bölümüne bakın.

Büyük ekranlar için düzenleri ve kaynakları optimize etme hakkında daha fazla bilgi edinmek için Ekran uyumluluğuna genel bakış konusuna bakın.

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

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

  • Telefon veya tablet düzenlerini yeniden kullanma: Bir telefon veya tablet uygulamasındaki düzenleri değişiklik yapmadan yeniden kullanmayın. Diğer Android cihazlar form faktörleri için oluşturulan düzenler, TV cihazları için çok uygun değildir ve TV'de çalıştırılmak üzere basitleştirilmelidir.
  • ActionBar kullanımı: İşlem çubuklarının telefon ve tabletlerde kullanılması önerilse de TV arayüzü için uygun değildir. Uzaktan kumandayla böyle bir menüde gezinmenin zor olması nedeniyle, TV uygulamalarında işlem çubuğu seçenekler menüsünün veya herhangi bir açılan menünün kullanılması kesinlikle önerilmez.
  • ViewPager kullanımı: Ekranlar arasında kaydırma özelliği telefon veya tablette harika performans gösterebilir. Ancak bunu TV'de denemeyin!

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

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

TV cihazları da, diğer Android cihazlar gibi sınırlı miktarda belleğe sahiptir. Uygulama düzeninizi çok yüksek çözünürlüklü görüntülerle derlerseniz veya uygulamanızı çalıştırırken çok sayıda yüksek çözünürlüklü resim kullanırsanız uygulama kısa sürede bellek sınırlarına takılarak bellek hatalarının oluşması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 grafikleri en iyi uygulamalarımıza bakın.

Etkili reklamcılık sağlama

Oturma odası ortamında, tam ekran görüntülenen ve 30 saniye içinde kapatılabilen video reklam çözümlerini kullanmanızı öneririz. Android TV'de reklam verme işlevine (ör. kapatma düğmeleri ve tıklamalar) dokunma yerine D-pad kullanılarak erişilebilmelidir.

Android TV web tarayıcısı sağlamaz. Reklamlarınız bir web tarayıcısı başlatmayı veya Android TV cihazları için onaylanmamış Google Play Store içeriğine yönlendirme yapmayı denememelidir.

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

Ek kaynaklar

TV için tasarım yapma