หากต้องการแสดงวิธีใช้แอปให้เกิดประโยชน์สูงสุดแก่ผู้ใช้ครั้งแรก ให้นำเสนอ ข้อมูลการเริ่มต้นใช้งานเมื่อเริ่มต้นแอป ตัวอย่างการเริ่มต้นใช้งานมีดังนี้ ข้อมูล:
- นำเสนอข้อมูลโดยละเอียดเกี่ยวกับแชแนลที่มีให้บริการเมื่อผู้ใช้ใช้งาน เข้าถึงแอปช่องก่อน
- สร้างความน่าสนใจให้กับฟีเจอร์ที่น่าสนใจในแอป
- แสดงขั้นตอนที่ผู้ใช้ต้องดำเนินการหรือแนะนำ ที่ใช้แอปเป็นครั้งแรก
ไลบรารี androidx.leanback จะมี
OnboardingSupportFragment
ชั้นเรียนสำหรับ
การนำเสนอข้อมูลผู้ใช้ครั้งแรก คู่มือนี้อธิบายวิธีใช้
OnboardingSupportFragment
ชั้นเรียนที่จะนำเสนอ
ข้อมูลเบื้องต้นที่จะแสดงเมื่อแอปเปิดตัวเป็นครั้งแรก
OnboardingSupportFragment
ใช้ UI ของ TV
แนวทางปฏิบัติที่ดีที่สุดในการนำเสนอข้อมูลให้ตรงตามรูปแบบ UI ของทีวี
และไปยังส่วนต่างๆ ได้ง่ายบนอุปกรณ์ทีวี
![](https://developer.android.com/static/images/training/tv/playback/onboarding-fragment.png?authuser=0000&hl=th)
รูปที่ 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
คุณต้องระบุ
หน้าเริ่มต้นใช้งาน แต่ละหน้าสามารถมีชื่อ คำอธิบาย และ
มุมมองย่อยหลายรายการที่อาจมีรูปภาพหรือภาพเคลื่อนไหวได้
![](https://developer.android.com/static/images/training/tv/playback/onboarding-fragment-diagram.png?authuser=0000&hl=th)
รูปที่ 2 OnboardingSupportFragment
ของหน้า
รูปที่ 2 แสดงหน้าตัวอย่างที่มีข้อความไฮไลต์ซึ่งทำเครื่องหมายหน้าเว็บที่ปรับแต่งได้
องค์ประกอบที่OnboardingSupportFragment
ที่คุณสามารถให้ได้ องค์ประกอบของหน้ามีดังนี้
- ชื่อหน้า
- คำอธิบายหน้า
- การดูเนื้อหาของหน้าเว็บ ซึ่งในกรณีนี้เครื่องหมายถูกสีเขียวจะหมายถึงกล่องสีเทา มุมมองนี้เป็นแบบไม่บังคับ ใช้มุมมองนี้เพื่อแสดงรายละเอียดหน้า ตัวอย่างเช่น คุณอาจ ใส่ภาพหน้าจอที่ไฮไลต์ฟีเจอร์ของแอปในหน้าที่อธิบาย
- มุมมองพื้นหลังของหน้า ซึ่งในกรณีนี้คือการไล่ระดับสีสีฟ้าแบบเรียบง่าย มุมมองนี้ จะแสดงผลหลังมุมมองอื่นๆ บนหน้าเว็บเสมอ มุมมองนี้เป็นแบบไม่บังคับ
- มุมมองพื้นหน้าของหน้า ซึ่งในกรณีนี้คือโลโก้ มุมมองนี้จะแสดงผลเสมอ ที่อยู่หน้ามุมมองอื่นๆ ทั้งหมดบนหน้าเว็บนั้น มุมมองนี้เป็นแบบไม่บังคับ
เริ่มต้นข้อมูลหน้าเว็บเมื่อ
สร้าง 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; }