Để 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 thông tin giới thiệu khi khởi động ứng dụng. Dưới đây là một số ví dụ về thông tin giới thiệu:
- Trình bày thông tin chi tiết về những kênh có sẵn khi người dùng truy cập lần đầu vào một ứng dụng kênh.
- 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 nên thực hiện mà người dùng nên thực hiện khi sử dụng ứng dụng lần đầu tiên.
Thư viện androidx.leanback cung cấp lớp OnboardingSupportFragment
để trình bày thông tin về người dùng lần đầu. Hướng dẫn này mô tả cách sử dụng lớp OnboardingSupportFragment
để 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.
OnboardingSupportFragment
sử dụng các phương pháp hay nhất về giao diện người dùng TV để trình bày thông tin theo cách phù hợp với kiểu giao diện người dùng 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=8&hl=vi)
Hình 1. Ví dụ: OnboardingSupportFragment
.
OnboardingSupportFragment
không phù hợp cho mọi trường hợp sử dụng.
Đừ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 thao tác mà người dùng thường làm. 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
Để thêm OnboardingSupportFragment
vào ứng dụng, hãy triển khai lớp mở rộng lớp OnboardingSupportFragment
. Thêm mảnh này vào 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. Đảm bảo hoạt động hoặc mảnh 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, hãy gọi startActivity()
bằng Intent
trỏ đến hoạt động gốc của OnboardingSupportFragment
.
Việc này giúp đảm bảo rằng OnboardingSupportFragment
của bạn xuất hiện ngay khi ứng dụng khởi động.
Để giúp đảm bảo rằng OnboardingSupportFragment
chỉ xuất hiện trong 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 liệu người dùng đã xem OnboardingSupportFragment
hay chưa. Xác định giá trị boolean thay đổi thành true khi người dùng xem xong OnboardingSupportFragment
. Hãy kiểm tra
giá trị này trong phương thức
onCreate()
của hoạt động chính và chỉ bắt đầu
hoạt động mẹ OnboardingSupportFragment
nếu
giá trị đó là false.
Ví dụ sau đây cho thấy chế độ ghi đè onCreate()
để kiểm tra giá trị SharedPreferences
và nếu bạn không đặt giá trị này thành true, 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
, hãy đá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à đặt giá trị SharedPreferences
thành true, như 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
Một OnboardingSupportFragment
hiển thị nội dung trong một loạt trang được sắp xếp theo thứ tự. Sau khi thêm OnboardingSupportFragment
, bạn cần xác định các trang giới thiệu. Mỗi trang có thể có 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=8&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 các phần tử trang có thể tuỳ chỉnh mà OnboardingSupportFragment
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ể cung cấp ả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. Khung hiển thị này luôn hiển thị 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. Khung hiển thị này luôn hiển thị trước mọi khung hiển thị khác trên trang. Chế độ xem này là không bắt buộc.
Khởi động 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, vì hệ thống yêu cầu thông tin trang khi tạo chế độ xem của mảnh. Bạn có thể khởi tạo thông tin trang trong hàm khởi tạo lớp hoặc trong phần ghi đè onAttach()
.
Ghi đè từng phương thức sau đây (các phương thức cung cấp thông tin về trang cho hệ thống):
getPageCount()
trả về số trang trongOnboardingSupportFragment
.getPageTitle()
trả về tiêu đề cho số trang được yêu cầu.getPageDescription()
trả về nội dung mô tả cho số trang được yêu cầu.
Ghi đè từng phương thức sau để cung cấp các khung hiển thị phụ không bắt buộc nhằm hiển thị hình ảnh hoặc ảnh động:
onCreateBackgroundView()
trả về mộtView
mà bạn tạo để đóng vai trò là chế độ xem nền hoặc trả về giá trị 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 trả về giá trị rỗng nếu không cần khung hiển thị nội dung nào.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 trả về giá trị 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 bố cục
trang. Ví dụ sau đây sẽ 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ó thể bắt đầu bằng 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 Drawable
làm màn hình biểu trưng, hãy gọi setLogoResourceId()
với mã nhận dạng của Drawable
trong phương thức onCreate()
của OnboardingSupportFragment
.
Hệ thống hiện dần và hiển thị nhanh Drawable
, sau đó mờ dần Drawable
trước khi hiển thị trang đầu tiên của 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ì gọi setLogoResourceId()
, hãy ghi đè onCreateLogoAnimation()
và trả về một đối tượng Animator
sẽ hiển thị ảnh động tuỳ chỉnh, 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 ảnh động mặc định khi hiển thị trang đầu tiên của 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 ghi đè các phương thức trong OnboardingSupportFragment
.
Để tuỳ chỉnh ảnh động xuất hiện trên trang đầu tiên, hãy ghi đè onCreateEnterAnimation()
và trả về một Animator
.
Ví dụ sau đây sẽ tạo một Animator
điều chỉnh tỷ lệ khung hiển thị nội dung 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 dùng khi người dùng chuyển đến một trang khác, hãy ghi đè onPageChanged()
.
Trong phương thức onPageChanged()
, tạo các đối tượng Animator
xoá trang trước và hiển thị trang tiếp theo, thêm các đối tượng này vào AnimatorSet
và phát tập hợp. Ví dụ sau đâ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 với hiệu ứng mờ 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 chi tiết về cách tạo đối tượng Animator
và đối tượng AnimatorSet
, hãy xem bài viết
Tổng quan về ảnh động thuộc tính.
Tuỳ chỉnh giao diện
Mọi hoạt động triển khai OnboardingSupportFragment
đều phải sử dụng giao diện Theme_Leanback_Onboarding
hoặc giao diện kế thừa từ Theme_Leanback_Onboarding
. Đặt giao diện cho OnboardingSupportFragment
bằng cách thực hiện một trong những thao tác sau:
- Đặt hoạt động gốc của
OnboardingSupportFragment
để sử dụng giao diện mong muốn. Ví dụ sau đây cho biết 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 thuộc tính
LeanbackOnboardingTheme_onboardingTheme
trong giao diện tuỳ chỉnh của hoạt động. Trỏ thuộc tính này đến một giao diện tuỳ chỉnh khác mà chỉ các đối tượngOnboardingSupportFragment
trong hoạt động của bạn sử dụng. Hãy 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ụng kiểuOnboardingSupportFragment
cho các thành phần hiển thị khác trong hoạt động. - Ghi đè
onProvideTheme()
và trả về giao diện mong muốn. Hãy dùng phương pháp này nếu nhiều hoạt động sử dụngOnboardingSupportFragment
của bạn 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 sẽ 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; }