Giúp người dùng mới làm quen với ứng dụng

Tạo dựng ứng dụng hiệu quả hơn với Compose
Tạo giao diện người dùng đẹp mắt với lượng mã tối thiểu bằng Jetpack Compose cho hệ điều hành Android TV.
Compose cho TV →

Để 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.

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.

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:

  1. Tiêu đề trang.
  2. Nội dung mô tả trang.
  3. 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ả.
  4. 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.
  5. 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 trong OnboardingSupportFragment
  • 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ột View 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ột View 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ột View 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ụng Theme_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ụng OnboardingSupportFragment 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ụng OnboardingSupportFragment 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;
}
Trước
Dùng các phương thức điều khiển phương tiện giao thông
Tiếp
Thêm một bước có hướng dẫn