เพิ่มขั้นตอนที่แนะนํา

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

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

ไลบรารี androidx.leanback มีคลาสสำหรับการใช้งานของผู้ใช้ที่มีหลายขั้นตอน หน้านี้ จะพูดถึงวิธีใช้ GuidedStepSupportFragment ชั้นเรียน เพื่อนำทางผู้ใช้ผ่านชุดการตัดสินใจเพื่อทำงานให้สำเร็จ GuidedStepSupportFragment ใช้แนวทางปฏิบัติแนะนำเกี่ยวกับ UI ทีวีเพื่อให้งานที่มีหลายขั้นตอนเข้าใจง่ายและไปยังส่วนต่างๆ ในอุปกรณ์ทีวีได้

ระบุรายละเอียดขั้นตอน

GuidedStepSupportFragment แสดงขั้นตอน 1 ขั้นตอนในชุด หลายขั้นตอน โดยจะแสดงมุมมองคำแนะนำพร้อมด้วย รายการการดำเนินการหรือการตัดสินใจที่เป็นไปได้สำหรับขั้นตอนนั้นๆ

รูปที่ 1 ตัวอย่างขั้นตอนที่แนะนำ

สำหรับแต่ละขั้นตอนในงานที่มีหลายขั้นตอน ให้ขยายเวลา GuidedStepSupportFragmentและให้ข้อมูลบริบทเกี่ยวกับ ขั้นตอนและการดำเนินการที่ผู้ใช้ทำได้ ลบล้าง onCreateGuidance() และส่งคืน GuidanceStylist.Guidance ที่มีบริบท เช่น ชื่อขั้นตอน คำอธิบาย และไอคอน ดังที่ปรากฏในตัวอย่างต่อไปนี้

Kotlin

override fun onCreateGuidance(savedInstanceState: Bundle?): GuidanceStylist.Guidance {
    return GuidanceStylist.Guidance(
            getString(R.string.guidedstep_first_title),
            getString(R.string.guidedstep_first_description),
            getString(R.string.guidedstep_first_breadcrumb),
            activity.getDrawable(R.drawable.guidedstep_main_icon_1)
    )
}

Java

@Override
public GuidanceStylist.Guidance onCreateGuidance(Bundle savedInstanceState) {
    String title = getString(R.string.guidedstep_first_title);
    String breadcrumb = getString(R.string.guidedstep_first_breadcrumb);
    String description = getString(R.string.guidedstep_first_description);
    Drawable icon = getActivity().getDrawable(R.drawable.guidedstep_main_icon_1);
    return new GuidanceStylist.Guidance(title, description, breadcrumb, icon);
}

เพิ่มคลาสย่อย GuidedStepSupportFragment ตามต้องการ กิจกรรมโดยการโทร วันที่ GuidedStepSupportFragment.add() ในเมธอด onCreate() ของกิจกรรม

หากกิจกรรมมีเฉพาะ GuidedStepSupportFragment ออบเจ็กต์ ให้ใช้GuidedStepSupportFragment.addAsRoot() แทน add() เพื่อเพิ่ม GuidedStepSupportFragment แรก การใช้ addAsRoot() ช่วยให้มั่นใจได้ว่าหากผู้ใช้กดปุ่มย้อนกลับบนรีโมตทีวีขณะดู GuidedStepSupportFragment แรก ทั้ง GuidedStepSupportFragment และกิจกรรมของผู้ปกครองปิดลง

หมายเหตุ: เพิ่ม GuidedStepSupportFragment ออบเจ็กต์แบบเป็นโปรแกรม ไม่อยู่ในไฟล์ XML เลย์เอาต์ของคุณ

สร้างและจัดการการดำเนินการของผู้ใช้

เพิ่มการดำเนินการของผู้ใช้โดยการลบล้าง onCreateActions() ในการลบล้าง ให้เพิ่ม GuidedAction ใหม่สําหรับแต่ละรายการ และระบุสตริงการดำเนินการ คำอธิบาย และรหัส ใช้ GuidedAction.Builder เพื่อเพิ่มการดำเนินการใหม่

Kotlin

override fun onCreateActions(actions: MutableList<GuidedAction>, savedInstanceState: Bundle?) {
    super.onCreateActions(actions, savedInstanceState)

    // Add "Continue" user action for this step
    actions.add(GuidedAction.Builder()
            .id(CONTINUE)
            .title(getString(R.string.guidedstep_continue))
            .description(getString(R.string.guidedstep_letsdoit))
            .hasNext(true)
            .build())
    ...

Java

@Override
public void onCreateActions(List<GuidedAction> actions, Bundle savedInstanceState) {
    // Add "Continue" user action for this step
    actions.add(new GuidedAction.Builder()
           .id(CONTINUE)
           .title(getString(R.string.guidedstep_continue))
           .description(getString(R.string.guidedstep_letsdoit))
           .hasNext(true)
           .build());
...

การกระทำไม่ได้จำกัดเฉพาะการเลือกบรรทัดเดียว ต่อไปนี้คือประเภทอื่นๆ ของ การดำเนินการที่คุณสามารถสร้างได้:

  • เพิ่มการดำเนินการสำหรับป้ายกำกับข้อมูลเพื่อให้ข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกของผู้ใช้โดยการตั้งค่า infoOnly(true) เมื่อ infoOnly เป็นจริง ผู้ใช้จะเลือกการดำเนินการไม่ได้
  • เพิ่มการดำเนินการกับข้อความที่แก้ไขได้โดยการตั้งค่า editable(true) เมื่อ editable เป็นจริง ผู้ใช้สามารถป้อนข้อความในการดำเนินการที่เลือกโดยใช้ ระยะไกลหรือแป้นพิมพ์ที่เชื่อมต่อ ลบล้าง onGuidedActionEditedAndProceed() เพื่อรับข้อความที่แก้ไขที่ผู้ใช้ป้อน คุณยังลบล้าง onGuidedActionEditCanceled() ได้ด้วยเพื่อให้ทราบเมื่อผู้ใช้ยกเลิกการป้อนข้อมูล
  • เพิ่มชุดการดำเนินการที่ทำงานเหมือนกับปุ่มตัวเลือกที่ตรวจสอบได้โดยใช้ checkSetId() ด้วยค่ารหัสทั่วไปเพื่อจัดกลุ่มการดำเนินการเป็นชุด การดำเนินการทั้งหมดในรายการเดียวกันโดยใช้ รหัสชุดการตรวจสอบจะถือว่าลิงก์กัน เมื่อผู้ใช้เลือกการทำงานอย่างใดอย่างหนึ่งภายในชุดนั้น จะมีการเลือกไว้และการดำเนินการอื่นๆ ทั้งหมดจะถูกยกเลิกการเลือก
  • เพิ่มการดำเนินการเลือกวันที่โดยใช้ GuidedDatePickerAction.Builder แทนที่จะเป็น GuidedAction.BuilderในonCreateActions() ลบล้าง onGuidedActionEditedAndProceed() เพื่อรับค่าวันที่ที่แก้ไขที่ผู้ใช้ป้อน
  • เพิ่มการกระทําที่ใช้การกระทําย่อยเพื่อให้ผู้ใช้เลือกจากรายการเพิ่มเติม ตัวเลือกทั้งหมด คำอธิบายย่อยมีอธิบายไว้ในส่วนเพิ่มการดำเนินการย่อย
  • เพิ่มการทำงานของปุ่มที่ปรากฏทางด้านขวาของรายการการทำงานและทำได้อย่างง่ายดาย สามารถเข้าถึงได้ การทำงานของปุ่มจะอธิบายไว้ในปุ่มเพิ่ม การดำเนินการ

คุณยังเพิ่มสัญญาณบอกสถานะซึ่งมองเห็นได้ว่าการเลือกการทำงาน ไปสู่ขั้นตอนใหม่โดย hasNext(true)

สำหรับแอตทริบิวต์ต่างๆ ทั้งหมดที่คุณสามารถตั้งค่า โปรดดู GuidedAction

หากต้องการตอบกลับการดำเนินการ ให้ลบล้าง onGuidedActionClicked() และประมวลผลการส่งผ่าน GuidedAction ค้นหาการดำเนินการที่เลือกตาม กำลังตรวจสอบ GuidedAction.getId()

เพิ่มการกระทำย่อย

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

รูปที่ 2 การดำเนินการย่อยที่แนะนำ

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

หากต้องการเพิ่มการดำเนินการย่อย ให้สร้างและป้อนข้อมูลรายการ GuidedAction ออบเจ็กต์ที่ทำหน้าที่เป็นการกระทำย่อย ดังที่แสดงในตัวอย่างต่อไปนี้

Kotlin

subActions.add(GuidedAction.Builder()
        .id(SUBACTION1)
        .title(getString(R.string.guidedstep_subaction1_title))
        .description(getString(R.string.guidedstep_subaction1_desc))
        .build())
...

Java

List<GuidedAction> subActions = new ArrayList<GuidedAction>();
subActions.add(new GuidedAction.Builder()
       .id(SUBACTION1)
       .title(getString(R.string.guidedstep_subaction1_title))
       .description(getString(R.string.guidedstep_subaction1_desc))
       .build());
...

สร้างระดับบนสุดใน onCreateActions() GuidedAction ที่แสดง รายการการกระทำย่อยเมื่อเลือก

Kotlin

    ...
    actions.add(GuidedAction.Builder()
            .id(SUBACTIONS)
            .title(getString(R.string.guidedstep_subactions_title))
            .description(getString(R.string.guidedstep_subactions_desc))
            .subActions(subActions)
            .build())
    ...

Java

@Override
public void onCreateActions(List<GuidedAction> actions, Bundle savedInstanceState) {
...
    actions.add(new GuidedAction.Builder()
           .id(SUBACTIONS)
           .title(getString(R.string.guidedstep_subactions_title))
           .description(getString(R.string.guidedstep_subactions_desc))
           .subActions(subActions)
           .build());
...
}

สุดท้าย ตอบกลับการเลือกการดำเนินการย่อยโดยการลบล้าง onSubGuidedActionClicked():

Kotlin

override fun onSubGuidedActionClicked(action: GuidedAction): Boolean {
    // Check for which action was clicked and handle as needed
    when(action.id) {
        SUBACTION1 -> {
            // Subaction 1 selected
        }
    }
    // Return true to collapse the subactions menu or
    // false to keep the menu expanded
    return true
}

Java

@Override
public boolean onSubGuidedActionClicked(GuidedAction action) {
   // Check for which action was clicked and handle as needed
   if (action.getId() == SUBACTION1) {
       // Subaction 1 selected
   }
   // Return true to collapse the subactions menu or
   // false to keep the menu expanded
   return true;
}

เพิ่มการทำงานของปุ่ม

หากขั้นตอนที่แนะนำมีรายการการดำเนินการจำนวนมาก ผู้ใช้อาจต้องเลื่อนดูในรายการ เพื่อเข้าถึงการดําเนินการที่ใช้บ่อยที่สุด ใช้การทำงานของปุ่มเพื่อแยก การดำเนินการที่ใช้กันโดยทั่วไปจากรายการ "การดำเนินการ" การทำงานของปุ่มจะปรากฏถัดจาก รายการการดำเนินการและไปยังส่วนต่างๆ ได้ง่าย

รูปที่ 3 การทำงานของปุ่มขั้นตอนที่แนะนํา

การดำเนินการกับปุ่มจะสร้างขึ้นและจัดการเช่นเดียวกับการดำเนินการทั่วไป แต่คุณเป็นผู้สร้าง การทำงานของปุ่มใน onCreateButtonActions() แทนที่จะเป็น onCreateActions() ตอบสนองต่อการทำงานของปุ่มใน onGuidedActionClicked()

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

จัดกลุ่มขั้นตอนที่แนะนําเป็นลําดับที่มีคําแนะนํา

GuidedStepSupportFragment แสดงถึงขั้นตอนเดียว หากต้องการสร้างลำดับขั้นตอนที่เรียงตามลำดับ ให้จัดกลุ่มหลายรายการ GuidedStepSupportFragment ออบเจ็กต์รวมกันโดยใช้ เพิ่ม GuidedStepSupportFragment.add() ขั้นตอนถัดไปในลำดับไปยังชุดแฟรกเมนต์

Kotlin

override fun onGuidedActionClicked(action: GuidedAction) {
    val fm = fragmentManager
    when(action.id) {
        CONTINUE -> GuidedStepSupportFragment.add(fm, SecondStepFragment())
    }
}

Java

@Override
public void onGuidedActionClicked(GuidedAction action) {
    FragmentManager fm = getFragmentManager();
    if (action.getId() == CONTINUE) {
       GuidedStepSupportFragment.add(fm, new SecondStepFragment());
    }
...

หากผู้ใช้กดปุ่มย้อนกลับบนรีโมตทีวี อุปกรณ์จะแสดง GuidedStepSupportFragment บนแฟรกเมนต์สแต็ก หากคุณ ให้ GuidedAction ของคุณเองซึ่ง กลับไปยังขั้นตอนก่อนหน้า คุณสามารถใช้ลักษณะการทำงาน "ย้อนกลับ" ได้โดยเรียกใช้ getFragmentManager().popBackStack() หากต้องการให้ผู้ใช้ไปยังขั้นตอนก่อนหน้าในลำดับ ให้ใช้ popBackStackToGuidedStepSupportFragment() เพื่อกลับไปยัง GuidedStepSupportFragment ที่เฉพาะเจาะจงในกลุ่ม Fragment

เมื่อผู้ใช้ทำขั้นตอนสุดท้ายในลำดับเสร็จ ให้ใช้ finishGuidedStepSupportFragments()เพื่อนำออกทั้งหมด อินสแตนซ์ GuidedStepSupportFragment รายการ จากสแต็กปัจจุบันและกลับไปยังกิจกรรมระดับบนสุด หาก เพิ่ม GuidedStepSupportFragment แรกแล้ว กำลังใช้ addAsRoot() กำลังโทร finishGuidedStepSupportFragments() จะปิดกิจกรรมของผู้ปกครองด้วย

ปรับแต่งการนำเสนอขั้นตอน

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

หากต้องการใช้ธีมที่กำหนดเองกับ GuidedStepSupportFragment ทำสิ่งใดสิ่งหนึ่งต่อไปนี้

  • ใช้ธีมกับกิจกรรมระดับบนสุดโดยตั้งค่าแอตทริบิวต์ android:theme เป็น ในไฟล์ Manifest ของ Android การตั้งค่าแอตทริบิวต์นี้จะใช้ธีมกับผู้เผยแพร่โฆษณาย่อยทั้งหมด และเป็นวิธีที่ง่ายที่สุดในการใช้ธีมที่กำหนดเอง หากกิจกรรมหลักมีเพียง ออบเจ็กต์ GuidedStepSupportFragment รายการ
  • หากกิจกรรมใช้ธีมที่กำหนดเองอยู่แล้วและคุณไม่ต้องการใช้ธีมดังกล่าว GuidedStepSupportFragment สไตล์ไปยังมุมมองอื่นๆ ในกิจกรรม เพิ่ม LeanbackGuidedStepTheme_guidedStepTheme ลงในธีมกิจกรรมที่กำหนดเองที่มีอยู่ แอตทริบิวต์นี้ชี้ไปยังธีมที่กำหนดเองซึ่ง เฉพาะออบเจ็กต์ GuidedStepSupportFragment รายการใน การใช้กิจกรรม
  • หากคุณใช้ GuidedStepSupportFragment ออบเจ็กต์ในที่ต่างๆ ที่เป็นส่วนหนึ่งของงานแบบหลายขั้นตอนโดยรวม และต้องการใช้ ธีมภาพในทุกขั้นตอน ลบล้าง GuidedStepSupportFragment.onProvideTheme() แล้วส่งคืนธีมที่กำหนดเอง

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีเพิ่มสไตล์และธีมได้ที่ สไตล์และธีม

ชั้นเรียน GuidedStepSupportFragment ใช้แบบพิเศษ คลาสสไตลิสต์เพื่อเข้าถึงและใช้แอตทริบิวต์ของธีม ชั้นเรียน GuidanceStylist ใช้ข้อมูลธีม เพื่อควบคุมการนำเสนอมุมมองคำแนะนำด้านซ้าย ขณะที่ ชั้นเรียน GuidedActionsStylist ใช้ข้อมูลธีม เพื่อควบคุมการนำเสนอมุมมองการดำเนินการที่เหมาะสม

หากต้องการปรับแต่งสไตล์ภาพของขั้นตอนต่างๆ นอกเหนือจากการปรับแต่งธีมที่มีให้ คลาสย่อย GuidanceStylist หรือ GuidedActionsStylistและส่งคืนคลาสย่อยใน GuidedStepSupportFragment.onCreateGuidanceStylist() หรือ GuidedStepSupportFragment.onCreateActionsStylist() สำหรับรายละเอียดเกี่ยวกับสิ่งที่คุณปรับแต่งได้ในคลาสย่อยเหล่านี้ โปรดดูเอกสารประกอบที่ GuidanceStylist และ GuidedActionsStylist