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

Compose ile daha iyi hizmet verin
Android TV OS için Jetpack Compose'u kullanarak minimum kodla etkileyici kullanıcı arayüzleri oluşturun.

Bir TV ekranı genellikle yaklaşık 3 metre uzaktan görüntülenir ve çoğundan çok daha büyüktür. diğer Android destekli cihaz ekranlarında, bir TV ekranında aynı düzeyde daha küçük bir cihaz ekranı gibi düşünün. Bu faktörler için, uygulama düzeninde TV cihazlarıyla uyumlu ve keyifli bir kullanıcı deneyimi sunmak istiyoruz.

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

Android temaları, şunlar için bir temel sağlayabilir: TV uygulamalarınızda düzenler. Uygulama etkinliklerinizin görüntülenme şeklini değiştirmek için bir TV cihazında çalışacak şekilde tasarlanır. Bu bölümde, hangi temaların kullanılacağı açıklanmaktadır.

Leanback teması

androidx.leanback kitaplığında, TV etkinliklerine yönelik bir tema olan Theme.Leanback bulunur. tutarlı bir görsel stil sağlar. Geliştirdiğiniz tüm TV uygulamaları için bu temayı kullanın test edebilirsiniz. Aşağıdaki kod örneğinde, bu temanın bir etkinlik:

<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 şuna uygulayın: NoTitleBar temasını TV etkinliklerinize ekleyerek başlık çubuğunun görüntülenmesini önleyin. Aşağıdaki kod örneği TV uygulaması manifestinden, 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, AppCompatActivity. Theme.AppCompat temadan biri ile birlikte. Bu kombinasyon, özellikleri kullanmanıza olanak tanır örneğin cihazda çalışan Android sürümü dert etmeden çekilebilir renk tonlama gibi özellikler sunar. Şu durumda: sadece Android TV üzerinde çalışan bir uygulama geliştiriyorsanız, AppCompatActivity, çünkü etkinleştirdiği özellikler olup olmadığını kontrol edin.

Android mobil ile Android TV arasında paylaşılan kod tabanına sahip bir uygulama oluşturuyorsanız zorluklara zaman ayırabilirler. AppCompatActivity ve çeşitli AppCompat widget'ları Theme.AppCompat kullanmanızı gerektirirken Leanback kullanıcı arayüzü araç seti parçaları kullanmanızı bekliyor FragmentActivity ve Theme.Leanback.

Android mobil ve Android TV için aynı temel etkinliği kullanmanız gerekiyorsa veya gibi AppCompat widget'a dayalı özel görünümler AppCompatImageView, Theme.AppCompat.Leanback temalarını kullanın. Bu temalar size tüm temaları AppCompat ile başlar ve Leanback'e özgü değerler sağlar.

Theme.AppCompat.Leanback temayı diğer temalarla aynı şekilde özelleştirebilirsiniz. tıklayın. Örneğin, Leanback kullanıcı arayüzü araç setleri OnboardingSupportFragment, 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, cihazların kullanılabilir ve etkilidir. TV ekranları için optimize edilmiş düzenler oluşturmak üzere aşağıdaki ipuçlarını uygulayın:

  • Yatay yönlü 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 dikey alan kullanabilirsiniz.
  • Parçalar kullanarak bölümlere bölünmüş kullanıcı arayüzleri oluşturun. Şunun gibi görüntüleme grupları kullan: GridView. Varolan: ListView daha verimli bir şekilde kullanmanızı sağlar.
  • Şunun gibi görüntüleme grupları kullan: RelativeLayout. veya LinearLayout görüntüleme sayısını ayarlayın. Bu yaklaşım, sistemin görünümlerin konumunu boyuta göre ayarlamasına olanak tanır. TV ekranının hizalaması, en boy oranı ve piksel yoğunluğu.
  • Kullanıcı arayüzünün karışık olmasını önlemek için düzen denetimleri arasına yeterli kenar boşluğu ekleyin.

Fazla tarama

TV'ye ilişkin düzenler, TV standartlarının değişmesi nedeniyle bazı benzersiz gereksinimlere sahiptir. tam ekran olarak gösterebileceksiniz. Bu nedenle, TV cihazları bir uygulamanın dış kenarını kırpabilir tüm ekranın doldurulmasını sağlar. Bu davranış genellikle fazla tarama yapma.

Kullanıcı tarafından her zaman görünür olması gereken ekran öğelerini fazla tarama için güvenli zaman alanında konumlandırın alanı. Sol ve sağ kenarlara% 58 dp, üst ve alt kenarlardan 27 dp kenar boşluğu ekleyerek kenarları bir düzene oturtmak, düzendeki ekran öğelerinin aşırı tarama açısından güvenli kapsamında olmasını sağlar. alanı.

Kullanıcının doğrudan etkileşimde bulunmadığı ve klip oluşturmadığı arka plan ekranı öğelerini ayarlamayın güvenli alana gönderir. Bu yaklaşım, arka plan ekranı öğelerinin doğru görünmesini sağlar. kontrol edebilirsiniz.

Aşağıdaki örnekte, arka plan öğeleri ve iç içe yerleştirilmiş bir %5 kenar boşluğuna sahip ve fazla tarama açısından güvenli alandaki öğeler içerebilen alt öğe düzeni:

<?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: Şunun gibi AndroidX Leanback sınıfları: BrowseSupportFragment veya alakalı widget'lar oluşturabilirsiniz. Çünkü bu düzenler zaten aşırı tarama için güvenli kenar boşlukları içerir.

Kullanılabilir metin ve denetimler oluşturma

TV uygulamanızdaki metin 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 arka plan üzerinde açık renk metin kullanın. Bu stil, TV'de daha kolay okunur.
  • Çizgileri hem çok dar hem de çok geniş olan hafif yazı tipleri veya yazı tipleri kullanmaktan 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ın kullanıcılar tarafından açıkça görülebilecek kadar büyük olmasını sağlayın 3 metre uzakta oturuyorlar. İlgili içeriği oluşturmak için kullanılan bunu yapmanın en iyi yolu mutlak boyutlandırma yerine düzene bağlı boyutlandırmadır. Mutlak piksel birimleri yerine yoğunluktan bağımsız piksel (dp) birimleri. Örneğin, bir widget'ın genişliğini ayarlamak için piksel ölçümü yerine wrap_content kullanın ve kenar boşluğunu ayarlamak istiyorsanız piksel değerleri yerine dp değerleri kullanın.

Yoğunluktan bağımsız pikseller ve daha büyük boyutlu bina düzenleri ekran boyutları için Ekran uyumluluğuna bakın 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 farklı özellikleri destekler. 720p, 1080p ve 4K dahil ancak bunlarla sınırlı olmamak üzere çözünürlük ayarlarını kullanır. Uygulamanızın farklı ekran boyutlarını desteklediğinden emin olun.

Farklı ekran boyutları ve çözünürlüklerin farklı piksel yoğunlukları vardır. Görünümünü korumak için farklı ekran boyutlarına, çözünürlüklere ve piksel yoğunluklarına piksel yerine yoğunluktan bağımsız piksel (dp). Farklı TV panelinin ekran piksel yoğunluğu ilgili adımlar aşağıda özetlenmiştir.

Panel çözünürlüğü Ekran piksel yoğunluğu
720p tvdpi
1080 xhdpi
4K xxxhdpi
Görüntüleyin Farklı piksel yoğunluklarını destekleyin daha fazla bilgi edinin.

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

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

Çalışmayan yerleşim düzenlerine dair birkaç yaklaşım vardır TV'lerde de çalışır. Aşağıda bazı kullanıcı arayüzü yaklaşımları birkaç temel kural var.

  • Telefon veya tablet düzenlerini yeniden kullanma: Düzenleri telefon veya tabletlerdeki tablet uygulaması yok. Diğer Android cihaz form faktörleri için oluşturulan düzenler TV cihazları için uygundur ve TV'de kolayca çalıştırılabilmesini gerektirir.
  • ActionBar kullanımı: ancak işlem çubuklarının kullanılması önerilir TV arayüzü için uygun değildir. Bir işlem çubuğu seçenekleri menüsü veya herhangi bir açılır menü, TV uygulamalarında uzaktan kumandayla gezinmenin zorluğuna da tanık olduk.
  • ViewPager kullanarak: Ekranlar arasında kaydırma özelliği telefonda veya tablette sorunsuz bir şekilde çalışabilir. ama bunu TV'de denemeyin.

TV'ye uygun düzenler tasarlama hakkında daha fazla bilgi için TV tasarım rehberini inceleyin.

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

TV cihazları da, diğer Android cihazlar gibi sınırlı miktarda belleğe sahiptir. Bir çok yüksek çözünürlüklü resimler içeren uygulama düzeni veya işlem sırasında birçok yüksek çözünürlüklü resim kullanma uygulamanız, bellek sınırlarıyla hızlı bir şekilde karşılaşabilir ve bellek yetersizliği hatalarına neden olabilir. Çoğu bazı durumlarda Glide uygulamanızda bit eşlemler getirmek, kodunu çözmek ve görüntülemek için kitaplık. Gmail'i kullanmaya başlama hakkında daha fazla bilgi için en iyi performansa ulaşmak için Android grafikleriyle ilgili en iyi uygulamalar.

Etkili reklamcılık

Oturma odası ortamı için video reklam çözümlerini kullanmanızı öneririz. Tam ekran olan ve 30 saniye içinde kapatılabilen reklamlar. İşlevler Android TV'deki reklamlar (ör. kapatma düğmeleri ve tıklamalar) ve bunlara dokunmak yerine D-pad'i kullanarak erişebilirsiniz.

Android TV bir web tarayıcısı sağlamaz. Reklamlarınız şunları denememelidir: aşağıdaki hâliyle gelen bir web tarayıcısı başlatın veya Android TV cihazları için onaylanmıştır.

Not: WebView sınıfını kullanabilirsiniz sosyal medya hizmetlerine giriş yapmalarına izin verir.

Ek kaynaklar

TV için tasarım