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

1. บทนำ

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

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

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

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

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

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

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

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

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

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

สิ่งที่ต้องมี

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 ให้ทำตามขั้นตอนต่อไปนี้

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

เทอร์มินัล

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

เรียกใช้แอป

ทำตามขั้นตอนต่อไปนี้ให้เสร็จ

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

info-avocado.png

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

4. สร้างเกณฑ์พื้นฐาน

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

สำรวจการสาธิต

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

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

info-avocado.png

  1. แตะต้นไม้ใดก็ได้ในแคตตาล็อกต้นไม้ (สำหรับตัวอย่างนี้ เราจะใช้ผลอะโวคาโด)

plant-catalog.png

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

info-avocado.png

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

Surveys-page-1.png

Surveys-page-2.png

Surveys-page-3.png

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

sunflower-back-nav-returns-to-the-plant-detail.gif

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

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

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

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

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

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

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

อัปเกรดการอ้างอิง

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

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 เพื่อจัดการท่าทางสัมผัส "ย้อนกลับ

สร้าง Callback และลบล้างเมธอด 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 ทำงานอย่างถูกต้อง

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

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

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

sunflower-back-nav-stuck-survey.gif

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

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

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

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

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

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

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

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

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

sunflower-back-nav-fixed.gif

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

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

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

animation.gif

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

สื่อการเรียนการสอนเพิ่มเติม

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