อัปเดตแอปเพื่อรองรับท่าทางสัมผัสการย้อนกลับแบบคาดการณ์ในอนาคต

1. บทนำ

ใน Android 13 เราได้เพิ่ม API ที่เป็นรากฐานของการรองรับท่าทางสัมผัสย้อนกลับแบบคาดการณ์ที่จะเปิดตัวในอนาคต

ฟีเจอร์นี้จะช่วยให้ผู้ใช้ดูตัวอย่างผลลัพธ์ของท่าทางสัมผัสย้อนกลับก่อนที่จะดำเนินการให้เสร็จสมบูรณ์ได้ ซึ่งโดยพื้นฐานแล้วจะช่วยให้ผู้ใช้ตัดสินใจได้ว่าจะอยู่ในมุมมองปัจจุบันหรือดำเนินการให้เสร็จสมบูรณ์และกลับไปที่หน้าจอหลัก กิจกรรมก่อนหน้า หรือหน้าเว็บที่เข้าชมก่อนหน้านี้ใน WebView ตัวอย่างลักษณะที่ปรากฏมีดังนี้

$ภาพเคลื่อนไหวนี้แสดงการประมาณการใช้งานในอนาคต\n ซึ่งแสดงให้เห็นลักษณะที่ผู้ใช้เปิดเบราว์เซอร์ Chrome\n ดูเบราว์เซอร์ Chrome ในอุปกรณ์เคลื่อนที่ Android แล้วปัด\n กลับเพื่อดูหน้าจอหลักเป็นปลายทางถัดไปที่แสดง\n อยู่ด้านหลัง$

Android 13 เพิ่ม API แพลตฟอร์มระดับหน้าต่างใหม่ OnBackInvokedCallback เพื่อรองรับท่าทางสัมผัสย้อนกลับแบบคาดการณ์ API นี้จะมาแทนที่ KeyEvent.KEYCODE_BACK API และคลาสแพลตฟอร์มทั้งหมดที่ใช้ OnBackPressed ซึ่งมีแผนที่จะเลิกใช้งานและจะต้องมีการย้ายข้อมูลในการเปิดตัว Android เวอร์ชันหลักถัดไปหลังจากเวอร์ชัน 13 ดูรายละเอียดได้ในเอกสารประกอบ

ใน Codelab นี้ เราจะแก้ไขส่วนย่อยของแบบสำรวจที่ใช้ WebView

เป้าหมายของ Codelab นี้

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

สิ่งที่คุณจะสร้าง

ใน Codelab นี้ คุณจะได้ใช้ไลบรารี AndroidX API เพื่อจัดการท่าทางสัมผัสย้อนกลับในแอป Sunflower

สิ่งที่คุณจะได้เรียนรู้

วิธีสกัดกั้นการเรียกใช้ "ย้อนกลับ" สำหรับ AndroidX
วิธีกู้คืนเหตุการณ์ย้อนกลับไปยังระบบ
ตัวเลือกอื่นๆ สำหรับการจัดการท่าทางสัมผัสย้อนกลับ
ประสบการณ์ของผู้ใช้ใหม่ใน Android 13 ขึ้นไปซึ่งจะช่วยให้การนำทางด้วยท่าทางสัมผัสย้อนกลับคาดการณ์ได้มากขึ้น

สิ่งที่คุณต้องมี

Android Studio
อุปกรณ์ Android ที่เปิดใช้การนำทางด้วยท่าทางสัมผัส
(ไม่บังคับ) Git

2. วางแผนรองรับท่าทางสัมผัสย้อนกลับแบบคาดเดา

ใช้ AndroidX API เพื่อติดตั้งใช้งานฟีเจอร์นี้

Codelab นี้ออกแบบมาสำหรับแอปที่ใช้ AndroidX อยู่แล้ว

คุณจะใช้ OnBackPressedDispatcher และ OnBackPressedCallback เพื่อรองรับการนำทางย้อนกลับ

ตัวเลือกอื่นๆ

เรามีตัวเลือกอื่นๆ ในการจัดการฟีเจอร์นี้ โดยขึ้นอยู่กับความต้องการที่แตกต่างกันของแอป

สำหรับแอปที่ใช้ AndroidX ไม่ได้ - หากคุณเป็นหนึ่งในนั้น เรามีวิธีแก้ปัญหาให้ ใช้คลาสแพลตฟอร์ม OnBackInvokedDispatcher และ OnBackInvokedCallback ใหม่ที่เราจะเปิดตัวใน Android 13 ซึ่งจะช่วยให้คุณใช้ API แบบล่วงหน้าได้โดยไม่ต้องใช้ AndroidX ดูรายละเอียดได้ในเอกสารประกอบ
สำหรับแอปที่ย้ายข้อมูลไม่ได้ชั่วคราว - หากคุณเป็นผู้ใช้กลุ่มนี้ เราก็พร้อมช่วยเหลือเช่นกัน คุณเลือกไม่ใช้ท่าทางสัมผัสย้อนกลับแบบคาดการณ์ได้หากไม่สามารถย้ายข้อมูลไปยังไลบรารี AndroidX หรือ API ของแพลตฟอร์มได้ในขณะนี้ ดูรายละเอียดได้ในเอกสารประกอบ

3. ก่อนเริ่มต้น

ติดตั้ง Android Studio

ติดตั้ง Android Studio และ Android 13 SDK

ขอรับอุปกรณ์

คุณใช้อุปกรณ์ Android เสมือนหรืออุปกรณ์จริงเพื่อเรียกใช้แอปที่สร้างขึ้นโดยใช้ Codelab นี้ได้

หากเรียกใช้อินสแตนซ์โปรแกรมจำลองใหม่ที่มี API ระดับ 29 ระบบอาจไม่ได้เปิดการนำทางด้วยท่าทางสัมผัสไว้โดยค่าเริ่มต้น หากต้องการเปิดใช้การนำทางด้วยท่าทางสัมผัส ให้เลือกการตั้งค่าระบบ > ระบบ > การนำทางของระบบ > การนำทางด้วยท่าทางสัมผัส

รับโค้ด

รับรหัสด้วยวิธีใดวิธีหนึ่งต่อไปนี้

ดาวน์โหลดไฟล์ ZIP

ดาวน์โหลดผ่าน Git

หากต้องการดาวน์โหลดโค้ดโดยใช้ Git ให้ทำตามขั้นตอนต่อไปนี้

ติดตั้ง Git
โคลนสาขา starter-code หรือ main เพื่อรับแอปสำหรับการฝึกนี้

เทอร์มินัล

// Get starter app.
git clone --branch starter-code \
https://github.com/android/codelab-handling-back-navigation.git

เรียกใช้แอป

ทำตามขั้นตอนต่อไปนี้ให้ครบถ้วน

เปิดและสร้างแอปใน Android Studio
สร้างอุปกรณ์เสมือนใหม่ แล้วเลือก Tiramisu หรือจะเชื่อมต่ออุปกรณ์จริงที่ใช้ API ระดับ 33 ขึ้นไปก็ได้
เรียกใช้แอป Sunflower

จากนั้นคุณจะกำหนดเกณฑ์พื้นฐานและดูประสบการณ์ที่ไม่ดีซึ่งเป็นส่วนหนึ่งของแอป Sunflower

4. กำหนดพื้นฐาน

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

สำรวจเดโม

มาเริ่มจากหน้าจอหลักและดูเวิร์กโฟลว์หลักของแอปเพื่อตรวจสอบประสบการณ์การใช้งานที่ไม่ดีด้วยฟังก์ชัน WebView กัน

ในหน้าจอเริ่มต้นของแอป Sunflower ให้แตะรายการพืช

แตะพืชใดก็ได้ในแคตตาล็อกพืช (ในตัวอย่างนี้ เราจะใช้ผลไม้คืออะโวคาโด)

ในหน้าจอข้อมูลของพืชที่คุณแตะ ให้แตะไอคอนยกนิ้วโป้ง (ที่มุมขวาบน) เพื่อให้คะแนนพืช

เริ่มกรอกแบบสำรวจ แต่หยุดเมื่อถึงคำถามที่ 3

ปัดเข้าจากขอบด้านซ้าย (หรือขวา) ของหน้าจอเพื่อใช้ท่าทางสัมผัสย้อนกลับ โปรดทราบว่าการปัดกลับจะนำคุณไปยังรายละเอียดของพืช (ในตัวอย่างนี้คือหน้าข้อมูลอะโวคาโด) แทนที่จะนำคุณไปยังคำถามข้อที่ 2 ในแบบสำรวจ ซึ่งจะทำให้คุณสูญเสียคำตอบและทำให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ไม่ดี

มาเริ่มแก้ไขปัญหาเหล่านี้กันเลย

5. เปิดใช้ท่าทางสัมผัสย้อนกลับแบบคาดเดา

แอปของเราใช้ AndroidX อยู่แล้ว ดังนั้นคุณจึงต้องใช้ Back Navigation API ซึ่งรองรับโมเดลล่วงหน้าอยู่แล้ว

กำหนดเป้าหมายเป็น Android 13

ในโปรเจ็กต์ Studio ของแอป ให้อัปเดตการกำหนดค่าบิลด์ของแอปเพื่อกำหนดเป้าหมายเป็น Android 13 ดังที่แสดงในข้อมูลโค้ดต่อไปนี้

build.gradle (โปรเจ็กต์)

buildscript {
   ext {
       // Sdk and tools
       minSdkVersion = 29
       compileSdkVersion = 33
       targetSdkVersion = 33
   }
...
}

อัปเกรดทรัพยากร Dependency

ใน build.gradle ให้ตั้งค่า appCompatVersion เป็น 1.6.0 ขึ้นไป

build.gradle (โปรเจ็กต์)

buildscript {
   ext {

    // App dependencies
    appCompatVersion = '1.6.0-rc01' // Built original with changes

...
}

อัปเกรดเป็น AndroidX Activity 1.6.0 ขึ้นไป

build.gradle (โมดูล)

dependencies {
    implementation "androidx.activity:activity-ktx:1.6.0"
    ...
}

เปิดใช้ท่าทางสัมผัสย้อนกลับแบบคาดเดา

หากต้องการเปิดใช้ API ของท่าทางสัมผัสย้อนกลับแบบคาดเดา ให้ตั้งค่า enableOnBackInvokedCallback เป็น true ในไฟล์ Manifest

AndroidManifest.xml

<application
   ...
   android:enableOnBackInvokedCallback="true" // Enables this feature.
   ... >
...
</application>

ประกาศและลงทะเบียน OnBackPressedCallback เพื่อจัดการท่าทางสัมผัสย้อนกลับ

สร้างการเรียกกลับและแทนที่เมธอด handleOnBackPressed เพื่อจัดการท่าทางสัมผัสย้อนกลับ สำหรับกรณีการใช้งาน WebView ให้ใช้ท่าทางสัมผัสย้อนกลับเพื่อกลับไปในสแต็กหน้าเว็บจนกว่าจะไม่มีหน้าเว็บเหลืออยู่

SurveyFragment.kt

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
...
  val onBackPressedCallback = object: OnBackPressedCallback(true) {
    override fun handleOnBackPressed() {
      when {
        webView.canGoBack() -> webView.goBack()
      }
    }
  }
  requireActivity().onBackPressedDispatcher
    .addCallback(onBackPressedCallback)
}

ลองใช้สิ่งที่คุณสร้าง

ตอนนี้คุณจะทดสอบว่าการไปยังส่วนต่างๆ ของ WebView ทำงานอย่างถูกต้อง

ใน Android Studio ให้สร้างและเรียกใช้แอปอีกครั้ง
เช่นเดียวกับตอนที่คุณเรียกใช้เดโมครั้งแรก ให้แตะพืชที่คุณต้องการ แล้วแตะไอคอนยกนิ้ว จากนั้นกรอกแบบสำรวจจนถึงคำถามที่ 3
ปัดเข้าจากขอบด้านซ้าย (หรือขวา) ของหน้าจอเพื่อใช้ท่าทางสัมผัสย้อนกลับ WebView ควรนำคุณกลับไปที่คำถามข้อที่ 2 ในแบบสำรวจ

นี่คือลักษณะการทำงานที่ถูกต้อง อย่างไรก็ตาม เราเพิ่งดำเนินการไปได้ครึ่งทางเท่านั้น ปัญหานี้จึงยังไม่ได้รับการแก้ไขอย่างสมบูรณ์ มาดูกันต่อว่าเราหมายถึงอะไร

จากคำถาม #2 ให้ปัดกลับไปที่คำถาม #1 แล้วปัดกลับอีกครั้งเพื่อพยายามกลับไปที่รายละเอียดของพืช

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

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

6. แก้ไขท่าทางสัมผัสการย้อนกลับ

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

ลบล้างเมธอด doUpdateVisitedHistory เพื่อพิจารณาว่าควรสกัดกั้นการนำทางย้อนกลับหรือไม่ ตรรกะในการจัดการการนำทางย้อนกลับมีดังนี้
- หากมีหน้าเว็บเพิ่มเติมที่ต้องย้อนกลับใน WebView (webView.canGoBack()) คุณควรเปิดใช้เมธอด OnBackPressedCallback
- ในทางกลับกัน หากไม่มีหน้าเว็บที่จะย้อนกลับใน WebView อีกต่อไป ก็ควรปิดใช้เมธอด OnBackPressedCallback ด้วยเหตุนี้ ท่าทางสัมผัสย้อนกลับจึงจะกลับไปที่ Fragment บนสุดใน Back Stack

SurveyFragment.kt

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
  ...
  requireActivity().onBackPressedDispatcher
    .addCallback(onBackPressedCallback)

  disableOnBackPressedCallback(webView, onBackPressedCallback)
  }
}

private fun disableOnBackPressedCallback(webView: WebView, onBackPressedCallback: OnBackPressedCallback) {
  webView.webViewClient = object: WebViewClient() {
    override fun doUpdateVisitedHistory(view: WebView?, url: String?, isReload: Boolean) {
      // Disable the on-back press callback if there are no more questions in the
      // WebView to go back to, allowing us to exit the WebView and go back to
      // the fragment.
      onBackPressedCallback.isEnabled = webView.canGoBack()

    }
  }
}

หากต้องการทดสอบ WebView อีกครั้ง ให้กรอกแบบสำรวจอีกครั้งจนกว่าจะถึงคำถามที่ 3
ใช้ท่าทางสัมผัสย้อนกลับเพื่อกลับไปที่มุมมองรายละเอียดพืช คุณควรจะดำเนินการได้โดยไม่มีปัญหา

ตัวอย่างลักษณะที่ควรจะเป็นหลังจากที่คุณแก้ไขแล้วมีดังนี้

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

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

คุณดูตัวอย่างการไปยังส่วนต่างๆ ด้วยท่าทางสัมผัสใหม่เพื่อกลับไปที่หน้าแรกได้โดยเปิดใช้ตัวเลือกสำหรับนักพัฒนาแอป

7. ขอแสดงความยินดี

ยินดีด้วย คุณได้พูดถึงเนื้อหามากมาย เราหวังว่าคุณจะเข้าใจตัวเลือกและ API ต่างๆ ได้ดียิ่งขึ้นเพื่อเริ่มอัปเดตแอปให้รองรับท่าทางสัมผัสย้อนกลับแบบคาดการณ์ที่ Android มีให้

สิ่งที่เราได้พูดถึงไปแล้ว

วิธีเปิดใช้แอปเพื่อเริ่มใช้ API ที่รองรับท่าทางสัมผัสย้อนกลับแบบคาดการณ์
วิธีสกัดกั้นการเรียกใช้ "ย้อนกลับ" สำหรับ AndroidX
วิธีกู้คืนการนำทางด้วยปุ่มย้อนกลับไปยังระบบ
ตัวเลือกอื่นๆ ในการจัดการท่าทางสัมผัสย้อนกลับ
ประสบการณ์ UX ใหม่ที่กำลังจะมาใน Android 13 ซึ่งจะช่วยให้ท่าทางสัมผัสย้อนกลับคาดการณ์ได้มากขึ้น

Codelab ที่ทำเสร็จแล้ว

// Get completed app.
git clone --branch main \
https://github.com/android/codelab-handling-back-navigation.git

สื่อเพิ่มเติม

คู่มือนักพัฒนาซอฟต์แวร์

เอกสารอ้างอิง

OnBackPressedDispatcher และ OnBackPressedCallback
OnBackInvokedDispatcher และ OnBackInvokedCallback

1. บทนำ

เป้าหมายของ Codelab นี้

สิ่งที่คุณจะสร้าง

สิ่งที่คุณจะได้เรียนรู้

สิ่งที่คุณต้องมี

2. วางแผนรองรับท่าทางสัมผัสย้อนกลับแบบคาดเดา

ใช้ AndroidX API เพื่อติดตั้งใช้งานฟีเจอร์นี้

ตัวเลือกอื่นๆ

3. ก่อนเริ่มต้น

ติดตั้ง Android Studio

ขอรับอุปกรณ์

เปิดใช้การนำทางด้วยท่าทางสัมผัส

รับโค้ด

ดาวน์โหลดไฟล์ ZIP

ดาวน์โหลดผ่าน Git

เรียกใช้แอป

4. กำหนดพื้นฐาน

สำรวจเดโม

5. เปิดใช้ท่าทางสัมผัสย้อนกลับแบบคาดเดา

กำหนดเป้าหมายเป็น Android 13

อัปเกรดทรัพยากร Dependency

เปิดใช้ท่าทางสัมผัสย้อนกลับแบบคาดเดา

ประกาศและลงทะเบียน OnBackPressedCallback เพื่อจัดการท่าทางสัมผัสย้อนกลับ

ลองใช้สิ่งที่คุณสร้าง

6. แก้ไขท่าทางสัมผัสการย้อนกลับ

เปิดหรือปิดใช้การนำทางย้อนกลับด้วย OnBackPressedCallback

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

7. ขอแสดงความยินดี

สิ่งที่เราได้พูดถึงไปแล้ว

Codelab ที่ทำเสร็จแล้ว

สื่อเพิ่มเติม

เอกสารอ้างอิง