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.
![](https://developer.android.com/static/images/training/tv/playback/onboarding-fragment.png?authuser=0000&hl=id)
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.
![](https://developer.android.com/static/images/training/tv/playback/onboarding-fragment-diagram.png?authuser=0000&hl=id)
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 diOnboardingSupportFragment
.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()
menampilkanView
yang {i>create<i} untuk bertindak sebagai tampilan latar belakang atau {i>null<i} jika tidak diperlukan tampilan latar belakang.onCreateContentView()
menampilkanView
yang buat agar berfungsi sebagai tampilan konten atau null jika tampilan konten tidak diperlukan.onCreateForegroundView()
menampilkanView
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 digunakanTheme_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 hanyaOnboardingSupportFragment
dalam penggunaan aktivitas Anda. Gunakan pendekatan ini jika aktivitas Anda sudah menggunakan tema kustom dan Anda tidak ingin menerapkanOnboardingSupportFragment
gaya ke lainnya tampilan di aktivitas Anda. - Ganti
onProvideTheme()
dan tampilkan tema yang diinginkan. Gunakan pendekatan ini jika menggunakanOnboardingSupportFragment
atau jika aktivitas induk tidak dapat menggunakan tema yang diinginkan. Contoh berikut menggantionProvideTheme()
dan menampilkanTheme_Leanback_Onboarding
:Kotlin
override fun onProvideTheme(): Int = R.style.Theme_Leanback_Onboarding
Java
@Override public int onProvideTheme() { return R.style.Theme_Leanback_Onboarding; }