แนะนำให้ผู้ที่ใช้แอปเป็นครั้งแรก

สร้างได้ดียิ่งขึ้นด้วย Compose
สร้าง UI ที่สวยงามด้วยโค้ดแบบเรียบง่ายโดยใช้ Jetpack Compose สำหรับระบบปฏิบัติการ Android TV
Compose สำหรับรายการทีวี →

หากต้องการแสดงวิธีใช้แอปให้เกิดประโยชน์สูงสุดแก่ผู้ใช้ครั้งแรก ให้นำเสนอ ข้อมูลการเริ่มต้นใช้งานเมื่อเริ่มต้นแอป ตัวอย่างการเริ่มต้นใช้งานมีดังนี้ ข้อมูล:

  • นำเสนอข้อมูลโดยละเอียดเกี่ยวกับแชแนลที่มีให้บริการเมื่อผู้ใช้ใช้งาน เข้าถึงแอปช่องก่อน
  • สร้างความน่าสนใจให้กับฟีเจอร์ที่น่าสนใจในแอป
  • แสดงขั้นตอนที่ผู้ใช้ต้องดำเนินการหรือแนะนำ ที่ใช้แอปเป็นครั้งแรก

ไลบรารี androidx.leanback จะมี OnboardingSupportFragment ชั้นเรียนสำหรับ การนำเสนอข้อมูลผู้ใช้ครั้งแรก คู่มือนี้อธิบายวิธีใช้ OnboardingSupportFragment ชั้นเรียนที่จะนำเสนอ ข้อมูลเบื้องต้นที่จะแสดงเมื่อแอปเปิดตัวเป็นครั้งแรก

OnboardingSupportFragment ใช้ UI ของ TV แนวทางปฏิบัติที่ดีที่สุดในการนำเสนอข้อมูลให้ตรงตามรูปแบบ UI ของทีวี และไปยังส่วนต่างๆ ได้ง่ายบนอุปกรณ์ทีวี

รูปที่ 1 ตัวอย่าง OnboardingSupportFragment

OnboardingSupportFragment ไม่เหมาะกับการใช้งานทุกกรณี อย่าใช้ OnboardingSupportFragment หากต้องการใส่ข้อมูล องค์ประกอบ UI ที่ผู้ใช้ต้องป้อนข้อมูล เช่น ปุ่มและช่อง และอย่าใช้ OnboardingSupportFragment กับงานที่ผู้ใช้จะทำ เป็นประจำ และสุดท้าย หากคุณต้องการนำเสนอ UI แบบหลายหน้าที่ต้องใช้ ข้อมูลจากผู้ใช้ ให้พิจารณาใช้ GuidedStepSupportFragment

เพิ่ม OnboardingSupportFragment

วิธีเพิ่ม OnboardingSupportFragment กับแอปของคุณ ใช้คลาสที่ขยาย ชั้นเรียน OnboardingSupportFragment เพิ่ม ส่วนย่อยนี้ไปยังกิจกรรม ซึ่งอาจใช้ XML การจัดวางของกิจกรรมหรือ แบบเป็นโปรแกรม ตรวจสอบว่ากิจกรรมหรือ Fragment ใช้ธีมที่ได้มาจาก Theme_Leanback_Onboarding, ตามที่อธิบายไว้ในส่วนปรับแต่งธีม

ในเมธอด onCreate() ของ กิจกรรมหลักของแอป, การโทร วันที่ startActivity() ด้วย Intent ที่ชี้ไปยัง กิจกรรมของผู้ปกครองใน OnboardingSupportFragment ของคุณ วิธีนี้จะช่วยให้มั่นใจได้ว่า OnboardingSupportFragment ปรากฏเป็น ทันทีที่แอปของคุณเริ่มทำงาน

เพื่อให้มั่นใจว่าฟังก์ชัน OnboardingSupportFragment จะปรากฏเฉพาะ ครั้งแรกที่ผู้ใช้เริ่มต้นแอปของคุณ ให้ใช้ ออบเจ็กต์ SharedPreferences รายการ เพื่อติดตามว่าผู้ใช้ได้ดู OnboardingSupportFragment กำหนดบูลีน ค่าที่เปลี่ยนเป็น true เมื่อผู้ใช้ดูเสร็จแล้ว OnboardingSupportFragment ตรวจสอบ ค่านี้ในการเข้าชม onCreate() และเริ่มต้นเฉพาะ OnboardingSupportFragment กิจกรรมของผู้ปกครองหาก ค่านั้นเป็น "เท็จ"

ตัวอย่างต่อไปนี้แสดงการลบล้างของ onCreate() ที่ตรวจหา ค่า SharedPreferences และหากไม่ได้ตั้งค่าเป็น "จริง" จะเรียกใช้ startActivity() เพื่อแสดง 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));
    }
}

หลังจากที่ผู้ใช้ดู OnboardingSupportFragment ทำเครื่องหมายว่าดูแล้ว โดยใช้ออบเจ็กต์ SharedPreferences ซึ่งทำได้โดยลบล้าง onFinishFragment() ใน OnboardingSupportFragment และตั้งค่า SharedPreferences เป็นจริง ดังที่แสดงในตัวอย่างต่อไปนี้

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

เพิ่มหน้า OnboardingSupportFragment

OnboardingSupportFragment จะแสดงเนื้อหาเป็นชุดของหน้าตามลำดับ หลังจากเพิ่ม OnboardingSupportFragment คุณต้องระบุ หน้าเริ่มต้นใช้งาน แต่ละหน้าสามารถมีชื่อ คำอธิบาย และ มุมมองย่อยหลายรายการที่อาจมีรูปภาพหรือภาพเคลื่อนไหวได้

รูปที่ 2 OnboardingSupportFragment ของหน้า

รูปที่ 2 แสดงหน้าตัวอย่างที่มีข้อความไฮไลต์ซึ่งทำเครื่องหมายหน้าเว็บที่ปรับแต่งได้ องค์ประกอบที่OnboardingSupportFragment ที่คุณสามารถให้ได้ องค์ประกอบของหน้ามีดังนี้

  1. ชื่อหน้า
  2. คำอธิบายหน้า
  3. การดูเนื้อหาของหน้าเว็บ ซึ่งในกรณีนี้เครื่องหมายถูกสีเขียวจะหมายถึงกล่องสีเทา มุมมองนี้เป็นแบบไม่บังคับ ใช้มุมมองนี้เพื่อแสดงรายละเอียดหน้า ตัวอย่างเช่น คุณอาจ ใส่ภาพหน้าจอที่ไฮไลต์ฟีเจอร์ของแอปในหน้าที่อธิบาย
  4. มุมมองพื้นหลังของหน้า ซึ่งในกรณีนี้คือการไล่ระดับสีสีฟ้าแบบเรียบง่าย มุมมองนี้ จะแสดงผลหลังมุมมองอื่นๆ บนหน้าเว็บเสมอ มุมมองนี้เป็นแบบไม่บังคับ
  5. มุมมองพื้นหน้าของหน้า ซึ่งในกรณีนี้คือโลโก้ มุมมองนี้จะแสดงผลเสมอ ที่อยู่หน้ามุมมองอื่นๆ ทั้งหมดบนหน้าเว็บนั้น มุมมองนี้เป็นแบบไม่บังคับ

เริ่มต้นข้อมูลหน้าเว็บเมื่อ สร้าง OnboardingSupportFragment ครั้งแรก หรือแนบอยู่กับกิจกรรมระดับบนสุดในฐานะหน้าคำขอของระบบ เมื่อสร้างมุมมองของส่วนย่อย คุณสามารถเริ่มต้นหน้าเว็บ ในเครื่องมือสร้างชั้นเรียนของคุณหรือในการลบล้าง onAttach()

ลบล้างแต่ละวิธีการต่อไปนี้ซึ่งระบุข้อมูลหน้าเว็บ กับระบบ:

  • getPageCount() แสดงผลจำนวนหน้าใน OnboardingSupportFragment
  • getPageTitle() ส่งคืนชื่อสำหรับเลขหน้าที่ขอ
  • getPageDescription() ส่งคืนคำอธิบายสำหรับหน้าเว็บที่ขอ หมายเลข

ลบล้างแต่ละวิธีต่อไปนี้เพื่อให้แสดงมุมมองย่อยที่ไม่บังคับ เพื่อแสดงรูปภาพหรือภาพเคลื่อนไหว

  • onCreateBackgroundView() แสดงผล View ที่คุณ สร้างเพื่อทำหน้าที่เป็นมุมมองพื้นหลังหรือค่าว่างหากไม่มีมุมมองพื้นหลัง
  • onCreateContentView() แสดงผล View ที่คุณ สร้างเพื่อทำหน้าที่เป็นมุมมองเนื้อหาหรือค่าว่างหากไม่มีมุมมองเนื้อหา
  • onCreateForegroundView() แสดงผล View ที่คุณ สร้างเพื่อทำหน้าที่เป็นมุมมองพื้นหน้าหรือค่าว่างหากไม่มีมุมมองเบื้องหน้า

ระบบจะเพิ่ม View ที่คุณสร้างลงในหน้า เลย์เอาต์ ตัวอย่างต่อไปนี้จะลบล้าง onCreateContentView() และแสดงผล 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;
}

เพิ่มหน้าจอโลโก้เริ่มต้น

OnboardingSupportFragment เริ่มใช้งานได้ ด้วยหน้าจอโลโก้แบบไม่บังคับที่จะช่วยแนะนำแอปของคุณ หากต้องการแสดง Drawable เป็นหน้าจอโลโก้ โทร setLogoResourceId() ด้วยรหัส Drawable ของคุณ ในonCreate() ของ OnboardingSupportFragment ระบบจะค่อยๆ ปรากฏขึ้นและค่อยๆ แสดง Drawable แล้วค่อยๆ หายไป Drawable ก่อนแสดงหน้าแรกของ OnboardingSupportFragment ของคุณ

หากต้องการจัดเตรียมภาพเคลื่อนไหวที่กำหนดเองสำหรับหน้าจอโลโก้แทน กำลังเรียก setLogoResourceId(), ลบล้าง onCreateLogoAnimation() และส่งกลับ Animator ที่แสดงภาพเคลื่อนไหวที่กำหนดเอง ดังที่ปรากฏในตัวอย่างต่อไปนี้

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

ปรับแต่งภาพเคลื่อนไหวของหน้า

ระบบจะใช้ภาพเคลื่อนไหวเริ่มต้นเมื่อแสดงหน้าแรกของ OnboardingSupportFragment และเมื่อผู้ใช้ ไปยังหน้าอื่น คุณปรับแต่งภาพเคลื่อนไหวเหล่านี้ได้โดย การลบล้างวิธีการใน OnboardingSupportFragment

วิธีปรับแต่งภาพเคลื่อนไหวที่ปรากฏในหน้าแรก ลบล้าง onCreateEnterAnimation() แล้วแสดงผล Animator ตัวอย่างต่อไปนี้สร้าง Animator ที่ปรับขนาดมุมมองเนื้อหา แนวนอน

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

หากต้องการปรับแต่งภาพเคลื่อนไหวที่ใช้เมื่อผู้ใช้ไปยังหน้าอื่น ลบล้าง onPageChanged() ในเมธอด onPageChanged() ให้สร้างออบเจ็กต์ Animator รายการ ที่ลบหน้าก่อนหน้าและแสดงหน้าถัดไป ให้เพิ่มหน้าเหล่านี้ลงใน AnimatorSet แล้วเล่นทั้งชุด ดังต่อไปนี้ ตัวอย่างใช้ภาพเคลื่อนไหวที่ค่อยๆ เบาลง เพื่อนำหน้าก่อนหน้าออก อัปเดต รูปภาพดูเนื้อหา และใช้ภาพเคลื่อนไหวแบบจางลงเพื่อแสดงหน้าถัดไป

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

สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับวิธีสร้าง Animator ออบเจ็กต์และ AnimatorSet วัตถุ โปรดดู ภาพรวมภาพเคลื่อนไหวของพร็อพเพอร์ตี้

ปรับแต่งธีม

OnboardingSupportFragmentใดก็ได้ ต้องใช้เมธอด ธีม Theme_Leanback_Onboarding หรือธีมที่รับช่วงมาจาก Theme_Leanback_Onboarding ตั้งค่า ธีมสำหรับ OnboardingSupportFragment โดยทำตามวิธีใดวิธีหนึ่งต่อไปนี้

  • ตั้งค่ากิจกรรมของผู้ปกครองของ OnboardingSupportFragment เพื่อใช้ ธีมที่ต้องการ ตัวอย่างต่อไปนี้แสดงวิธีกำหนดกิจกรรมที่จะใช้ Theme_Leanback_Onboarding ในไฟล์ Manifest ของแอป 
    <activity
   android:name=".OnboardingActivity"
   android:enabled="true"
   android:exported="true"
   android:theme="@style/Theme.Leanback.Onboarding">
</activity>
  • กำหนดธีมในกิจกรรมหลักโดยใช้ LeanbackOnboardingTheme_onboardingTheme ในธีมกิจกรรมที่กำหนดเอง ชี้แอตทริบิวต์นี้ไปยังแอตทริบิวต์อื่น ธีมที่กำหนดเองซึ่งมีเพียง OnboardingSupportFragment ในกิจกรรมของคุณ ใช้วิธีนี้หากใช้กิจกรรมอยู่แล้ว ธีมที่กำหนดเองและคุณไม่ต้องการใช้ OnboardingSupportFragment สไตล์เป็นอื่นๆ ครั้งในกิจกรรม
  • ลบล้าง onProvideTheme()และกลับไปยังธีมที่ต้องการ ใช้วิธีการนี้หาก กิจกรรมหลายอย่างใช้ OnboardingSupportFragment หรือหากกิจกรรมของผู้ปกครองใช้ธีมที่ต้องการไม่ได้ ตัวอย่างต่อไปนี้จะลบล้าง onProvideTheme() และแสดงผล Theme_Leanback_Onboarding:

    Kotlin

    override fun onProvideTheme(): Int = R.style.Theme_Leanback_Onboarding

    Java

    @Override
public int onProvideTheme() {
   return R.style.Theme_Leanback_Onboarding;
}
ก่อนหน้า
ใช้ตัวควบคุมการนำส่ง
ถัดไป
เพิ่มขั้นตอนที่แนะนํา