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

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

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

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

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

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

รูปที่ 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()

เพิ่มการดำเนินการย่อย

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

รูปที่ 2 การดำเนินการย่อยของขั้นตอนที่แนะนำ

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

หากต้องการเพิ่มการดำเนินการย่อย ให้สร้างและป้อนข้อมูลรายการออบเจ็กต์ 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()เพื่อเพิ่ม ขั้นตอนถัดไปในลำดับลงในสแต็กของ Fragment

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ก่อนหน้าในสแต็กของ Fragment หากคุณ ระบุ GuidedAction ของคุณเอง ซึ่งกลับไปยังขั้นตอนก่อนหน้า คุณจะใช้ลักษณะการทำงานของปุ่มย้อนกลับได้โดยเรียกใช้ getFragmentManager().popBackStack() หากต้องการนำผู้ใช้กลับไปยังขั้นตอนก่อนหน้าในลำดับ ให้ใช้ popBackStackToGuidedStepSupportFragment() เพื่อกลับไปยัง GuidedStepSupportFragment ที่เฉพาะเจาะจงในสแต็กของ Fragment

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

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

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

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

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

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

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

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