Để chỉ cho người dùng lần đầu biết cách khai thác tối đa ứng dụng của bạn, hãy trình bày khi khởi động ứng dụng. Dưới đây là một số ví dụ về quy trình tham gia của bạn:
- Trình bày thông tin chi tiết về các kênh khả dụng khi người dùng truy cập ứng dụng kênh trước tiên.
- Thu hút sự chú ý đến các tính năng đáng chú ý trong ứng dụng của bạn.
- Minh hoạ mọi bước bắt buộc hoặc được đề xuất mà người dùng nên thực hiện khi lần đầu tiên sử dụng ứng dụng.
Thư viện androidx.leanback cung cấp
Lớp OnboardingSupportFragment
cho
hiển thị thông tin về người dùng lần đầu. Hướng dẫn này mô tả cách sử dụng
OnboardingSupportFragment
lớp để trình bày
thông tin giới thiệu được hiển thị khi ứng dụng khởi chạy lần đầu tiên
bất cứ lúc nào.
OnboardingSupportFragment
sử dụng giao diện người dùng TV
các phương pháp hay nhất để trình bày thông tin sao cho phù hợp với kiểu giao diện người dùng của TV
và dễ dàng thao tác trên các thiết bị TV.
![](https://developer.android.google.cn/static/images/training/tv/playback/onboarding-fragment.png?authuser=19&hl=vi)
Hình 1. Ví dụ
OnboardingSupportFragment
.
OnboardingSupportFragment
không phù hợp cho mọi trường hợp sử dụng.
Không sử dụng OnboardingSupportFragment
khi bạn cần đưa vào
Các thành phần trên giao diện người dùng yêu cầu hoạt động đầu vào của người dùng, chẳng hạn như các nút và trường.
Ngoài ra, đừng sử dụng OnboardingSupportFragment
cho những tác vụ mà người dùng sẽ làm
thường xuyên. Cuối cùng, nếu bạn cần trình bày một giao diện người dùng nhiều trang yêu cầu
hoạt động đầu vào của người dùng, hãy cân nhắc sử dụng
GuidedStepSupportFragment
.
Thêm PreviewSupportFragment
Cách thêm OnboardingSupportFragment
cho ứng dụng của bạn, hãy triển khai một lớp mở rộng
lớp OnboardingSupportFragment
. Thêm
mảnh này đến một hoạt động, sử dụng XML bố cục của hoạt động hoặc
theo phương thức lập trình. Hãy đảm bảo hoạt động hoặc
sử dụng giao diện bắt nguồn từ
Theme_Leanback_Onboarding
,
như mô tả trong phần Tuỳ chỉnh giao diện.
Trong phương thức onCreate()
của
hoạt động chính của ứng dụng, gọi
startActivity()
bằng Intent
trỏ đến
hoạt động gốc của OnboardingSupportFragment
.
Điều này giúp đảm bảo rằng
OnboardingSupportFragment
xuất hiện dưới dạng
ngay khi ứng dụng khởi động.
Để giúp đảm bảo rằng
OnboardingSupportFragment
chỉ xuất hiện
Lần đầu tiên người dùng khởi động ứng dụng của bạn, hãy sử dụng
Đối tượng SharedPreferences
để theo dõi xem người dùng đã xem
OnboardingSupportFragment
. Xác định boolean
sẽ thay đổi thành true khi người dùng xem xong
OnboardingSupportFragment
. Séc
hãy nhấp vào giá trị này trong
onCreate()
và chỉ khởi động phương thức
Hoạt động của cha mẹ trong OnboardingSupportFragment
nếu
giá trị là false.
Ví dụ sau đây minh hoạ cơ chế ghi đè onCreate()
để kiểm tra một
Giá trị SharedPreferences
và nếu không được đặt thành true, các lệnh gọi
startActivity()
để hiển thị 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)); } }
Sau khi người dùng xem
OnboardingSupportFragment
, đánh dấu là đã xem
bằng cách sử dụng đối tượng SharedPreferences
. Để thực hiện việc này, hãy ghi đè
onFinishFragment()
trong OnboardingSupportFragment
và thiết lập SharedPreferences
thành đúng, như được thể hiện trong ví dụ sau:
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(); }
Thêm các trang IntroductionSupportFragment
OnboardingSupportFragment
hiển thị nội dung trong một loạt trang được sắp xếp theo thứ tự. Sau khi bạn thêm
OnboardingSupportFragment
, bạn cần xác định
các trang giới thiệu. Mỗi trang có thể có một tiêu đề, nội dung mô tả và
một số khung hiển thị phụ có thể chứa hình ảnh hoặc ảnh động.
![](https://developer.android.google.cn/static/images/training/tv/playback/onboarding-fragment-diagram.png?authuser=19&hl=vi)
Hình 2. OnboardingSupportFragment
phần tử trang.
Hình 2 cho thấy một trang mẫu có chú thích đánh dấu trang có thể tuỳ chỉnh
mà OnboardingSupportFragment
của bạn
có thể cung cấp. Các phần tử của trang bao gồm:
- Tiêu đề trang.
- Nội dung mô tả trang.
- Chế độ xem nội dung trang, trong trường hợp này, một dấu kiểm màu xanh lục đơn giản trong hộp màu xám. Chế độ xem này là không bắt buộc. Sử dụng chế độ xem này để minh hoạ các chi tiết của trang. Ví dụ: bạn có thể kèm theo ảnh chụp màn hình làm nổi bật tính năng của ứng dụng mà trang mô tả.
- Chế độ xem nền trang, trong trường hợp này là một dải chuyển màu xanh dương đơn giản. Chế độ xem này luôn hiển thị phía sau các khung hiển thị khác trên trang. Chế độ xem này là không bắt buộc.
- Chế độ xem nền trước của trang, trong trường hợp này là một biểu trưng. Chế độ xem này luôn hiển thị ở trước tất cả các chế độ xem khác trên trang. Chế độ xem này là không bắt buộc.
Khởi chạy thông tin trang khi
OnboardingSupportFragment
được tạo lần đầu tiên
hoặc được đính kèm vào hoạt động gốc, như trang yêu cầu hệ thống
khi tạo khung hiển thị của mảnh. Bạn có thể khởi chạy trang
trong hàm khởi tạo lớp hoặc trong phần ghi đè của
onAttach()
.
Ghi đè từng phương thức cung cấp thông tin trang sau đây đối với hệ thống:
getPageCount()
trả về số lượng trang trongOnboardingSupportFragment
getPageTitle()
trả về tiêu đề cho số trang được yêu cầu.getPageDescription()
trả về nội dung mô tả cho trang được yêu cầu số.
Ghi đè từng phương thức sau để cung cấp chế độ xem phụ không bắt buộc để hiển thị hình ảnh hoặc ảnh động:
onCreateBackgroundView()
trả về mộtView
mà bạn tạo để hoạt động như chế độ xem nền hoặc rỗng nếu không cần chế độ xem nền.onCreateContentView()
trả về mộtView
mà bạn tạo để đóng vai trò là khung hiển thị nội dung hoặc rỗng nếu không cần khung hiển thị nội dung.onCreateForegroundView()
trả về mộtView
mà bạn tạo để đóng vai trò là khung hiển thị trên nền trước hoặc rỗng nếu không cần khung hiển thị trên nền trước.
Hệ thống sẽ thêm View
mà bạn tạo vào trang
của bạn. Ví dụ sau đây ghi đè
onCreateContentView()
và trả về một
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; }
Thêm màn hình biểu trưng ban đầu
OnboardingSupportFragment
của bạn có thể bắt đầu
với màn hình biểu trưng tuỳ chọn giới thiệu ứng dụng của bạn. Nếu bạn muốn hiển thị
Drawable
làm màn hình biểu trưng, hãy gọi
setLogoResourceId()
có mã Drawable
của bạn
trong onCreate()
của OnboardingSupportFragment
.
Hệ thống mờ dần và hiển thị ngắn gọn
Drawable
rồi làm mờ Drawable
trước khi hiện trang đầu tiên trong OnboardingSupportFragment
.
Nếu bạn muốn cung cấp ảnh động tuỳ chỉnh cho màn hình biểu trưng, thay vì
đang gọi setLogoResourceId()
, ghi đè
onCreateLogoAnimation()
và trả về một Animator
để kết xuất ảnh động tuỳ chỉnh của bạn, như trong ví dụ sau:
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); }
Tuỳ chỉnh ảnh động trên trang
Hệ thống sử dụng hoạt ảnh mặc định khi hiển thị trang đầu tiên trong
OnboardingSupportFragment
và khi người dùng
chuyển đến một trang khác. Bạn có thể tuỳ chỉnh các ảnh động này bằng cách
trong
OnboardingSupportFragment
.
Cách tuỳ chỉnh ảnh động xuất hiện trên trang đầu tiên của bạn:
ghi đè
onCreateEnterAnimation()
và trả về một Animator
.
Ví dụ sau đây sẽ tạo một Animator
để điều chỉnh khung hiển thị nội dung theo tỷ lệ
theo chiều ngang:
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; }
Để tuỳ chỉnh ảnh động được sử dụng khi người dùng chuyển đến một trang khác,
ghi đè
onPageChanged()
.
Trong phương thức onPageChanged()
, hãy tạo các đối tượng Animator
xoá trang trước và hiển thị trang tiếp theo, thêm chúng vào
AnimatorSet
và phát nhóm. Nội dung sau đây
ví dụ này sử dụng ảnh động mờ dần để xoá trang trước, cập nhật
hình ảnh chế độ xem nội dung và sử dụng ảnh động rõ dần để hiển thị trang tiếp theo:
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(); }
Để biết thêm thông tin về cách tạo
Animator
đối tượng và
Đối tượng AnimatorSet
, hãy xem
Tổng quan về ảnh động thuộc tính.
Tuỳ chỉnh giao diện
OnboardingSupportFragment
bất kỳ
phải sử dụng
Giao diện Theme_Leanback_Onboarding
hoặc một giao diện kế thừa từ Theme_Leanback_Onboarding
. Thiết lập
cho OnboardingSupportFragment
bằng cách thực hiện một trong những thao tác sau:
- Thiết lập hoạt động gốc của
OnboardingSupportFragment
để sử dụng chủ đề mong muốn. Ví dụ sau đây trình bày cách thiết lập một hoạt động để sử dụngTheme_Leanback_Onboarding
trong tệp kê khai ứng dụng:<activity android:name=".OnboardingActivity" android:enabled="true" android:exported="true" android:theme="@style/Theme.Leanback.Onboarding"> </activity>
-
Đặt giao diện trong hoạt động gốc bằng cách dùng
LeanbackOnboardingTheme_onboardingTheme
trong một giao diện tuỳ chỉnh cho hoạt động. Trỏ thuộc tính này đến một thuộc tính khác mà chỉ cóOnboardingSupportFragment
mà các đối tượng trong hoạt động của bạn sử dụng. Hãy sử dụng phương pháp này nếu hoạt động của bạn đã sử dụng một giao diện tuỳ chỉnh và bạn không muốn áp dụngOnboardingSupportFragment
kiểu sang định dạng khác chế độ xem trong hoạt động. - Ghi đè
onProvideTheme()
rồi trả về giao diện mong muốn. Sử dụng phương pháp này nếu sử dụngOnboardingSupportFragment
hoặc nếu hoạt động gốc không thể sử dụng giao diện mong muốn. Ví dụ sau đây ghi đèonProvideTheme()
và trả vềTheme_Leanback_Onboarding
:Kotlin
override fun onProvideTheme(): Int = R.style.Theme_Leanback_Onboarding
Java
@Override public int onProvideTheme() { return R.style.Theme_Leanback_Onboarding; }