Uygulamanızı ilk kez kullananları tanıtma

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

Uygulamanızı ilk kez kullanan bir kullanıcıya uygulamanızdan en iyi şekilde nasıl yararlanacağını göstermek için uygulama başlatılırken ilk katılım bilgilerini sunun. İlk katılım bilgileriyle ilgili bazı örnekler:

  • Kullanıcılar bir kanal uygulamasına ilk kez eriştiğinde hangi kanalların kullanılabileceği hakkında ayrıntılı bilgiler sunun.
  • Uygulamanızdaki dikkate değer özelliklere dikkat çekin.
  • Kullanıcıların uygulamayı ilk kez kullanırken yapmaları gereken veya önerilen adımları gösterin.

androidx.leanback kitaplığı, ilk kez kullanıcı bilgilerini sunmak için OnboardingSupportFragment sınıfını sağlar. Bu kılavuzda, uygulama ilk kez başlatıldığında gösterilen giriş bilgilerini sunmak için OnboardingSupportFragment sınıfının nasıl kullanılacağı açıklanmaktadır.

OnboardingSupportFragment, bilgileri TV kullanıcı arayüzü stillerine uygun ve TV cihazlarında kolayca gezinilebilecek şekilde sunmak için TV kullanıcı arayüzü en iyi uygulamalarından yararlanır.

Şekil 1. Örnek: OnboardingSupportFragment.

OnboardingSupportFragment her kullanım alanı için uygun değildir. Düğmeler ve alanlar gibi kullanıcı girişi gerektiren kullanıcı arayüzü öğeleri eklemeniz gerektiğinde OnboardingSupportFragment özelliğini kullanmayın. Ayrıca, kullanıcının düzenli olarak gerçekleştireceği görevler için OnboardingSupportFragment öğesini kullanmayın. Son olarak, kullanıcı girişi gerektiren çok sayfalı bir kullanıcı arayüzü sunmanız gerekiyorsa GuidedStepSupportFragment kullanabilirsiniz.

OnboardingSupportFragment ekleyin

Uygulamanıza OnboardingSupportFragment eklemek için OnboardingSupportFragment sınıfını genişleten bir sınıf uygulayın. Etkinliğin düzen XML'sini kullanarak veya programatik olarak bu parçayı bir etkinliğe ekleyin. Etkinlik veya parçanın, Temaları özelleştirme bölümünde açıklandığı gibi Theme_Leanback_Onboarding kaynağından türetilen bir tema kullandığından emin olun.

Uygulamanızın ana etkinliğinin onCreate() yönteminde, OnboardingSupportFragment cihazınızın üst etkinliğine işaret eden bir Intent ile startActivity() çağrısı yapın. Bu şekilde, OnboardingSupportFragment uygulamanız başlar başlamaz görünür.

OnboardingSupportFragment öğesinin yalnızca kullanıcı uygulamanızı ilk kez başlattığında görünmesini sağlamak için bir SharedPreferences nesnesi kullanarak kullanıcının OnboardingSupportFragment öğesini daha önce görüntüleyip görüntülemediğini izleyin. Kullanıcı OnboardingSupportFragment öğesini görüntülemeyi bitirdiğinde doğru olarak değişen bir boole değeri tanımlayın. Ana etkinliğinizin onCreate() yönteminde bu değeri kontrol edin ve OnboardingSupportFragment üst etkinliğini yalnızca değer yanlışsa başlatın.

Aşağıdaki örnekte, SharedPreferences değerini kontrol eden bir onCreate() geçersiz kılması gösterilmektedir. Politika doğru değerine ayarlanmazsa startActivity() çağrısında OnboardingSupportFragment gösterilir:

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    PreferenceManager.getDefaultSharedPreferences(this).apply {
        // Check if we need to display our OnboardingSupportFragment
        if (!getBoolean(MyOnboardingSupportFragment.COMPLETED_ONBOARDING_PREF_NAME, false)) {
            // The user hasn't seen the OnboardingSupportFragment yet, so show it
            startActivity(Intent(this@OnboardingActivity, OnboardingActivity::class.java))
        }
    }
}

Java

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    SharedPreferences sharedPreferences =
            PreferenceManager.getDefaultSharedPreferences(this);
    // Check if we need to display our OnboardingSupportFragment
    if (!sharedPreferences.getBoolean(
            MyOnboardingSupportFragment.COMPLETED_ONBOARDING_PREF_NAME, false)) {
        // The user hasn't seen the OnboardingSupportFragment yet, so show it
        startActivity(new Intent(this, OnboardingActivity.class));
    }
}

Kullanıcı OnboardingSupportFragment öğesini görüntüledikten sonra SharedPreferences nesnesini kullanarak sayfayı görüntülendi olarak işaretleyin. Bunu yapmak için OnboardingSupportFragment etiketinizde onFinishFragment() değerini geçersiz kılın ve SharedPreferences değerinizi aşağıdaki örnekte gösterildiği gibi doğru olarak ayarlayın:

Kotlin

override fun onFinishFragment() {
    super.onFinishFragment()
    // User has seen OnboardingSupportFragment, so mark our SharedPreferences
    // flag as completed so that we don't show our OnboardingSupportFragment
    // the next time the user launches the app
    PreferenceManager.getDefaultSharedPreferences(context).edit().apply {
        putBoolean(COMPLETED_ONBOARDING_PREF_NAME, true)
        apply()
    }
}

Java

@Override
protected void onFinishFragment() {
    super.onFinishFragment();
    // User has seen OnboardingSupportFragment, so mark our SharedPreferences
    // flag as completed so that we don't show our OnboardingSupportFragment
    // the next time the user launches the app
    SharedPreferences.Editor sharedPreferencesEditor =
            PreferenceManager.getDefaultSharedPreferences(getContext()).edit();
    sharedPreferencesEditor.putBoolean(
            COMPLETED_ONBOARDING_PREF_NAME, true);
    sharedPreferencesEditor.apply();
}

OnboardingSupportFragment sayfaları ekleme

OnboardingSupportFragment, içerikleri sıralanmış bir dizi sayfada gösterir. OnboardingSupportFragment ekledikten sonra ilk katılım sayfalarını tanımlamanız gerekir. Her sayfanın bir başlığı, açıklaması ve resim ya da animasyon içerebilen birkaç alt görünümü olabilir.

Şekil 2. OnboardingSupportFragment sayfa öğelerine ekleyebilirsiniz.

Şekil 2'de, OnboardingSupportFragment uygulamanızın sağlayabileceği özelleştirilebilir sayfa öğelerini işaretleyen açıklama metinlerinin bulunduğu bir örnek sayfa gösterilmektedir. Sayfa öğeleri şunlardır:

  1. Sayfa başlığı.
  2. Sayfa açıklaması.
  3. Sayfa içeriği görünümü. Bu örnekte, gri bir kutu içinde basit yeşil bir onay işareti yer alır. Bu görünüm isteğe bağlıdır. Sayfa ayrıntılarını göstermek için bu görünümü kullanın. Örneğin, sayfada açıklanan uygulama özelliğini vurgulayan bir ekran görüntüsü ekleyebilirsiniz.
  4. Sayfanın arka plan görünümü. Bu örnekte, basit bir mavi gradyan. Bu görünüm her zaman sayfadaki diğer görünümlerin arkasında oluşturulur. Bu görünüm isteğe bağlıdır.
  5. Sayfanın ön planı görünümü (bu örnekte logo). Bu görünüm her zaman sayfadaki diğer tüm görünümlerin önünde oluşturulur. Bu görünüm isteğe bağlıdır.

Sistem, parçanın görünümünü oluştururken sayfa bilgilerini istediğinden, OnboardingSupportFragment ilk oluşturulduğunda veya üst etkinliğe eklendiğinde sayfa bilgilerini başlatın. Sayfa bilgilerini sınıf oluşturucunuzda veya onAttach() geçersiz kılmasında başlatabilirsiniz.

Sisteme sayfa bilgileri sağlayan aşağıdaki yöntemlerin her birini geçersiz kılın:

Resimleri veya animasyonları görüntülemek üzere isteğe bağlı alt görünümler sağlamak için aşağıdaki yöntemlerin her birini geçersiz kılın:

  • onCreateBackgroundView(), arka plan görünümü olarak çalışması için oluşturduğunuz bir View değerini veya arka plan görünümü gerekli değilse null değerini döndürür.
  • onCreateContentView(), içerik görüntüleme işlevi görmesi için oluşturduğunuz View öğesini veya içerik görüntüleme gerekmiyorsa null değerini döndürür.
  • onCreateForegroundView(), ön plan görünümü olarak çalışması için oluşturduğunuz bir View değerini veya ön plan görünümü gerekli değilse null değerini döndürür.

Sistem, oluşturduğunuz View öğesini sayfa düzenine ekler. Aşağıdaki örnek onCreateContentView() değerini geçersiz kılar ve bir ImageView döndürür:

Kotlin

private lateinit var contentView: ImageView
...
override fun onCreateContentView(inflater: LayoutInflater?, container: ViewGroup?): View? {
    return ImageView(context).apply {
        scaleType = ImageView.ScaleType.CENTER_INSIDE
        setImageResource(R.drawable.onboarding_content_view)
        setPadding(0, 32, 0, 32)
        contentView = this
    }
}

Java

private ImageView contentView;
...
@Override
protected View onCreateContentView(LayoutInflater inflater, ViewGroup container) {
    contentView = new ImageView(getContext());
    contentView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
    contentView.setImageResource(R.drawable.onboarding_content_view);
    contentView.setPadding(0, 32, 0, 32);
    return contentView;
}

İlk logo ekranı ekleme

OnboardingSupportFragment, uygulamanızı tanıtan isteğe bağlı bir logo ekranıyla başlayabilir. Logo ekranınız olarak bir Drawable görüntülemek istiyorsanız OnboardingSupportFragment cihazınızın onCreate() yönteminde Drawable kimliği ile setLogoResourceId() numaralı telefonu arayın. Sistem kararır ve kısa bir süre boyunca Drawable öğesini görüntüler, ardından OnboardingSupportFragment cihazınızın ilk sayfasını görüntülemeden önce Drawable yavaşça kaybolur.

Logo ekranınız için özel bir animasyon sağlamak isterseniz setLogoResourceId() yöntemini çağırmak yerine onCreateLogoAnimation() politikasını geçersiz kılın ve aşağıdaki örnekte gösterildiği gibi özel animasyonunuzu oluşturan bir Animator nesnesi döndürün:

Kotlin

public override fun onCreateLogoAnimation(): Animator =
        AnimatorInflater.loadAnimator(context, R.animator.onboarding_logo_screen_animation)

Java

@Override
public Animator onCreateLogoAnimation() {
    return AnimatorInflater.loadAnimator(getContext(),
            R.animator.onboarding_logo_screen_animation);
}

Sayfa animasyonlarını özelleştir

Sistem, OnboardingSupportFragment sayfanızın ilk sayfasını görüntülerken ve kullanıcı farklı bir sayfaya gittiğinde varsayılan animasyonları kullanır. OnboardingSupportFragment içindeki yöntemleri geçersiz kılarak bu animasyonları özelleştirebilirsiniz.

İlk sayfanızda görünen animasyonu özelleştirmek için onCreateEnterAnimation() öğesini geçersiz kılıp Animator hatası döndürün. Aşağıdaki örnekte, içerik görünümünü yatay olarak ölçeklendiren bir Animator oluşturulur:

Kotlin

override fun onCreateEnterAnimation(): Animator =
    ObjectAnimator.ofFloat(contentView, View.SCALE_X, 0.2f, 1.0f)
            .setDuration(ANIMATION_DURATION)

Java

@Override
protected Animator onCreateEnterAnimation() {
    Animator startAnimator = ObjectAnimator.ofFloat(contentView,
            View.SCALE_X, 0.2f, 1.0f).setDuration(ANIMATION_DURATION);
    return startAnimator;
}

Kullanıcı farklı bir sayfaya gittiğinde kullanılan animasyonu özelleştirmek için onPageChanged() öğesini geçersiz kılın. onPageChanged() yönteminizde, önceki sayfayı kaldıran ve sonraki sayfayı gösteren Animator nesne oluşturun, bunları bir AnimatorSet öğesine ekleyin ve grubu oynatın. Aşağıdaki örnekte önceki sayfayı kaldırmak için belirme animasyonu kullanılır, içerik görüntüleme resmi güncellenir ve sonraki sayfayı görüntülemek için kararma animasyonu kullanılır:

Kotlin

override fun onPageChanged(newPage: Int, previousPage: Int) {
    // Create a fade-out animation for previousPage and, once
    // done, swap the contentView image with the next page's image
    val fadeOut = ObjectAnimator.ofFloat(mContentView, View.ALPHA, 1.0f, 0.0f)
            .setDuration(ANIMATION_DURATION)
            .apply {
                addListener(object : AnimatorListenerAdapter() {

                    override fun onAnimationEnd(animation: Animator) {
                        mContentView.setImageResource(pageImages[newPage])
                    }
                })
            }
    // Create a fade-in animation for nextPage
    val fadeIn = ObjectAnimator.ofFloat(mContentView, View.ALPHA, 0.0f, 1.0f)
            .setDuration(ANIMATION_DURATION)
    // Create AnimatorSet with fade-out and fade-in animators and start it
    AnimatorSet().apply {
        playSequentially(fadeOut, fadeIn)
        start()
    }
}

Java

@Override
protected void onPageChanged(final int newPage, int previousPage) {
    // Create a fade-out animation for previousPage and, once
    // done, swap the contentView image with the next page's image
    Animator fadeOut = ObjectAnimator.ofFloat(mContentView,
            View.ALPHA, 1.0f, 0.0f).setDuration(ANIMATION_DURATION);
    fadeOut.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            mContentView.setImageResource(pageImages[newPage]);
        }
    });
    // Create a fade-in animation for nextPage
    Animator fadeIn = ObjectAnimator.ofFloat(mContentView,
            View.ALPHA, 0.0f, 1.0f).setDuration(ANIMATION_DURATION);
    // Create AnimatorSet with fade-out and fade-in animators and start it
    AnimatorSet set = new AnimatorSet();
    set.playSequentially(fadeOut, fadeIn);
    set.start();
}

Animator nesneleri ve AnimatorSet nesnelerinin nasıl oluşturulacağı hakkında daha fazla bilgi için Mülk Animasyonuna Genel Bakış bölümüne göz atın.

Temaları özelleştirin

Tüm OnboardingSupportFragment uygulamaları, Theme_Leanback_Onboarding temasını veya Theme_Leanback_Onboarding öğesinden devralan bir temayı kullanmalıdır. Aşağıdakilerden birini yaparak OnboardingSupportFragment için temayı ayarlayın:

  • İstenen temayı kullanmak için OnboardingSupportFragment öğesinin üst etkinliğini ayarlayın. Aşağıdaki örnek, uygulama manifest'inde Theme_Leanback_Onboarding kullanmak için bir etkinliğin nasıl ayarlanacağını gösterir:
    <activity
       android:name=".OnboardingActivity"
       android:enabled="true"
       android:exported="true"
       android:theme="@style/Theme.Leanback.Onboarding">
    </activity>
    
  • Özel bir etkinlik temasında LeanbackOnboardingTheme_onboardingTheme özelliğini kullanarak üst etkinlikte temayı ayarlayın. Bu özelliği, yalnızca etkinliğinizdeki OnboardingSupportFragment nesnelerinin kullandığı başka bir özel temaya yönlendirin. Etkinliğiniz zaten özel bir tema kullanıyorsa ve etkinlikteki diğer görünümlere OnboardingSupportFragment stillerini uygulamak istemiyorsanız bu yaklaşımı kullanın.
  • onProvideTheme() öğesini geçersiz kılıp istenen temayı döndürün. Birden fazla etkinlik OnboardingSupportFragment öğenizi kullanıyorsa veya üst etkinlik istenen temayı kullanamıyorsa bu yaklaşımı kullanın. Aşağıdaki örnek onProvideTheme() değerini geçersiz kılar ve Theme_Leanback_Onboarding değerini döndürür:

    Kotlin

    override fun onProvideTheme(): Int = R.style.Theme_Leanback_Onboarding
    

    Java

    @Override
    public int onProvideTheme() {
       return R.style.Theme_Leanback_Onboarding;
    }