Halaman ini diterjemahkan oleh Cloud Translation API.

Memperkenalkan pengguna pemula ke aplikasi Anda

Untuk menunjukkan kepada pengguna baru cara mendapatkan hasil maksimal dari aplikasi Anda, presentasikan informasi orientasi saat aplikasi dimulai. Berikut beberapa contoh orientasi informasi:

Menyajikan informasi terperinci tentang saluran mana yang tersedia saat pengguna pertama kali mengakses aplikasi saluran.
Menarik perhatian pengguna ke fitur-fitur penting dalam aplikasi Anda.
Mengilustrasikan langkah-langkah yang diperlukan atau direkomendasikan untuk dilakukan pengguna saat menggunakan aplikasi untuk pertama kalinya.

Library androidx.Lean menyediakan Class OnboardingSupportFragment untuk menyajikan informasi tentang pengguna pemula. Panduan ini menjelaskan cara menggunakan OnboardingSupportFragment class untuk dipresentasikan informasi pengantar yang ditampilkan saat aplikasi diluncurkan untuk yang pertama baik.

OnboardingSupportFragment menggunakan UI TV praktik terbaik untuk menyajikan informasi dengan cara yang cocok dengan gaya UI TV dan mudah dijelajahi di perangkat TV.

Gambar 1. Contoh OnboardingSupportFragment.

OnboardingSupportFragment tidak sesuai untuk setiap kasus penggunaan. Jangan gunakan OnboardingSupportFragment saat Anda perlu menyertakan Elemen UI yang memerlukan input pengguna, seperti tombol dan kolom. Selain itu, jangan gunakan OnboardingSupportFragment untuk tugas yang akan dilakukan pengguna secara rutin. Terakhir, jika Anda perlu menyajikan UI multi-halaman yang memerlukan input pengguna, pertimbangkan untuk menggunakan GuidedStepSupportFragment.

Menambahkan OnboardingSupportFragment

Untuk menambahkan OnboardingSupportFragment ke aplikasi Anda, implementasikan kelas yang class OnboardingSupportFragment. Tambah fragmen ini ke aktivitas, baik menggunakan XML tata letak aktivitas maupun secara terprogram. Pastikan aktivitas atau menggunakan tema yang berasal dari Theme_Leanback_Onboarding, seperti yang dijelaskan di bagian Menyesuaikan tema.

Di metode onCreate() aktivitas utama aplikasi, panggil startActivity() dengan Intent yang mengarah ke aktivitas induk OnboardingSupportFragment Anda. Hal ini membantu memastikan bahwa OnboardingSupportFragment ditampilkan sebagai segera setelah aplikasi Anda dimulai.

Untuk membantu memastikan bahwa OnboardingSupportFragment hanya muncul pertama kali pengguna memulai aplikasi Anda, gunakan Objek SharedPreferences untuk melacak apakah pengguna sudah melihat OnboardingSupportFragment. Menentukan boolean yang akan berubah menjadi benar (true) ketika pengguna selesai melihat OnboardingSupportFragment. Periksa nilai ini dalam metode onCreate() dan hanya mulai Aktivitas induk OnboardingSupportFragment jika nilainya false.

Contoh berikut menunjukkan penggantian onCreate() yang memeriksa Nilai SharedPreferences dan, jika tidak ditetapkan ke true, akan memanggil startActivity() untuk menampilkan OnboardingSupportFragment:

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));
    }
}

Setelah pengguna melihat OnboardingSupportFragment, tandai sebagai telah dilihat menggunakan objek SharedPreferences. Untuk melakukannya, ganti onFinishFragment() di OnboardingSupportFragment dan setel SharedPreferences ke true, seperti yang ditunjukkan dalam contoh berikut:

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();
}

Menambahkan halaman OnboardingSupportFragment

OnboardingSupportFragment menampilkan konten dalam rangkaian halaman yang diurutkan. Setelah Anda menambahkan OnboardingSupportFragment, Anda perlu menentukan halaman orientasi. Setiap halaman dapat memiliki judul, deskripsi, dan beberapa subtampilan yang dapat berisi gambar atau animasi.

Gambar 2. OnboardingSupportFragment elemen halaman.

Gambar 2 menunjukkan halaman contoh dengan info yang menandai halaman yang dapat disesuaikan elemen yang OnboardingSupportFragment pelanggan. Elemen halaman tersebut adalah:

Judul halaman.
Deskripsi halaman.
Tampilan konten halaman, dalam hal ini tanda centang hijau sederhana dalam kotak abu-abu. Tampilan ini bersifat opsional. Gunakan tampilan ini untuk mengilustrasikan detail halaman. Sebagai contoh, Anda mungkin menyertakan screenshot yang menyoroti fitur aplikasi yang dijelaskan halaman tersebut.
Tampilan latar belakang halaman, dalam hal ini gradien warna biru sederhana. Tampilan ini selalu merender di belakang tampilan lain pada halaman. Tampilan ini bersifat opsional.
Tampilan latar depan halaman, dalam hal ini logo. Tampilan ini selalu merender di depan semua tampilan lain di halaman. Tampilan ini bersifat opsional.

Inisialisasi informasi halaman saat OnboardingSupportFragment pertama kali dibuat atau dilampirkan ke aktivitas induk, sebagaimana halaman permintaan sistem informasi saat membuat tampilan fragmen. Anda dapat melakukan inisialisasi pada halaman informasi di dalam konstruktor class atau dalam penggantian onAttach().

Ganti setiap metode berikut, yang memberikan informasi halaman ke sistem:

getPageCount() menampilkan jumlah halaman di OnboardingSupportFragment.
getPageTitle() menampilkan judul untuk nomor halaman yang diminta.
getPageDescription() menampilkan deskripsi untuk halaman yang diminta angka

Ganti setiap metode berikut untuk memberikan subtampilan opsional untuk menampilkan gambar atau animasi:

onCreateBackgroundView() menampilkan View yang {i>create<i} untuk bertindak sebagai tampilan latar belakang atau {i>null<i} jika tidak diperlukan tampilan latar belakang.
onCreateContentView() menampilkan View yang buat agar berfungsi sebagai tampilan konten atau null jika tampilan konten tidak diperlukan.
onCreateForegroundView() menampilkan View yang create untuk bertindak sebagai tampilan latar depan atau null jika tampilan latar depan tidak diperlukan.

Sistem akan menambahkan View yang Anda buat ke halaman tata letak. Contoh berikut mengganti onCreateContentView() dan menampilkan ImageView:

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;
}

Menambahkan layar logo awal

OnboardingSupportFragment Anda dapat dimulai dengan layar logo opsional yang memperkenalkan aplikasi Anda. Jika Anda ingin menampilkan Drawable sebagai layar logo, panggil setLogoResourceId() dengan ID Drawable Anda di onCreate() dari OnboardingSupportFragment Anda. Sistem memudar dan menampilkan sebentar Drawable, lalu memudarkan Drawable sebelum menampilkan halaman pertama OnboardingSupportFragment Anda.

Jika Anda ingin memberikan animasi kustom untuk layar logo, sebagai ganti memanggil setLogoResourceId(), mengganti onCreateLogoAnimation() dan tampilkan Animator yang merender animasi kustom Anda, seperti yang ditunjukkan pada contoh berikut:

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);
}

Menyesuaikan animasi halaman

Sistem menggunakan animasi default saat menampilkan halaman pertama OnboardingSupportFragment dan saat pengguna membuka halaman lain. Anda dapat menyesuaikan animasi ini dengan mengganti metode di OnboardingSupportFragment.

Untuk menyesuaikan animasi yang muncul di laman pertama Anda, abaikan onCreateEnterAnimation() dan menampilkan Animator. Contoh berikut membuat Animator yang menskalakan tampilan konten horizontal:

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;
}

Untuk menyesuaikan animasi yang digunakan saat pengguna menavigasi ke laman yang berbeda, abaikan onPageChanged(). Dalam metode onPageChanged() Anda, buat objek Animator yang menghapus halaman sebelumnya dan menampilkan halaman berikutnya, tambahkan AnimatorSet, dan mainkan set. Hal berikut menggunakan animasi fade-out untuk menghapus halaman sebelumnya, memperbarui gambar tampilan konten, dan menggunakan animasi fade-in untuk menampilkan halaman berikutnya:

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();
}

Untuk detail selengkapnya tentang cara membuat Animator objek dan AnimatorSet objek, lihat Ringkasan Animasi Properti.

Menyesuaikan tema

Yang Mana Pun OnboardingSupportFragment harus menggunakan Tema Theme_Leanback_Onboarding atau tema yang diturunkan dari Theme_Leanback_Onboarding. Setel untuk OnboardingSupportFragment Anda dengan melakukan salah satu tindakan berikut:

Tetapkan aktivitas induk OnboardingSupportFragment untuk menggunakan tema yang diinginkan. Contoh berikut menunjukkan cara menyetel aktivitas yang akan digunakan Theme_Leanback_Onboarding dalam manifes aplikasi:
```
<activity
   android:name=".OnboardingActivity"
   android:enabled="true"
   android:exported="true"
   android:theme="@style/Theme.Leanback.Onboarding">
</activity>
```
Atur tema dalam aktivitas induk menggunakan metode LeanbackOnboardingTheme_onboardingTheme dalam tema aktivitas khusus. Arahkan atribut ini ke atribut lain tema khusus yang hanya OnboardingSupportFragment dalam penggunaan aktivitas Anda. Gunakan pendekatan ini jika aktivitas Anda sudah menggunakan tema kustom dan Anda tidak ingin menerapkan OnboardingSupportFragment gaya ke lainnya tampilan di aktivitas Anda.
Ganti onProvideTheme() dan tampilkan tema yang diinginkan. Gunakan pendekatan ini jika menggunakan OnboardingSupportFragment atau jika aktivitas induk tidak dapat menggunakan tema yang diinginkan. Contoh berikut mengganti onProvideTheme() dan menampilkan Theme_Leanback_Onboarding:
Kotlin
override fun onProvideTheme(): Int = R.style.Theme_Leanback_Onboarding
Java
@Override public int onProvideTheme() { return R.style.Theme_Leanback_Onboarding; }

Sebelumnya

Menggunakan kontrol transportasi

Berikutnya

Menambahkan langkah yang dipandu