ทำความเข้าใจส่วนที่เว้นไว้ในหน้าต่างใน WebView

WebView จัดการการจัดแนวเนื้อหาโดยใช้ 2 วิวพอร์ต ได้แก่ วิวพอร์ตเลย์เอาต์ (ขนาดหน้าเว็บ) และวิวพอร์ตภาพ (ส่วนของหน้าเว็บที่ผู้ใช้เห็นจริง) แม้ว่าโดยทั่วไปแล้ววิวพอร์ตของเลย์เอาต์จะคงที่ แต่วิวพอร์ตภาพ จะเปลี่ยนแปลงแบบไดนามิกเมื่อผู้ใช้ซูม เลื่อน หรือเมื่อองค์ประกอบ UI ของระบบ (เช่น แป้นพิมพ์เสมือน) ปรากฏขึ้น

ความเข้ากันได้ของฟีเจอร์

การรองรับการแทรกหน้าต่างของ WebView มีการพัฒนามาเรื่อยๆ เพื่อให้ลักษณะการทำงานของเนื้อหาเว็บสอดคล้องกับความคาดหวังของแอป Android เนทีฟ ดังนี้

Milestone เพิ่มฟีเจอร์แล้ว ขอบเขต
M136 displayCutout() และรองรับ systemBars() ผ่าน CSS safe-area-insets เฉพาะ WebView แบบเต็มหน้าจอ
M139 ime() (ตัวแก้ไขวิธีการป้อนข้อมูล ซึ่งเป็นแป้นพิมพ์) ผ่านการปรับขนาดวิวพอร์ตภาพ WebView ทั้งหมด
M144 displayCutout() และsystemBars() WebView ทั้งหมด (ไม่ว่าจะอยู่ในสถานะเต็มหน้าจอหรือไม่ก็ตาม)

ดูข้อมูลเพิ่มเติมได้ที่ WindowInsetsCompat

กลไกหลัก

WebView จัดการระยะขอบผ่านกลไกหลัก 2 อย่าง ได้แก่

  • พื้นที่ปลอดภัย (displayCutout, systemBars): WebView จะส่งต่อขนาดเหล่านี้ไปยังเนื้อหาเว็บผ่านตัวแปร CSS safe-area-inset-* ซึ่งช่วยให้นักพัฒนาแอปป้องกันไม่ให้รอยบากหรือแถบสถานะบดบังองค์ประกอบแบบอินเทอร์แอกทีฟของตนเอง (เช่น แถบนำทาง)

  • การปรับขนาดวิวพอร์ตภาพโดยใช้ตัวแก้ไขวิธีการป้อนข้อมูล (IME): ตั้งแต่ M139 เป็นต้นไป ตัวแก้ไขวิธีการป้อนข้อมูล (IME) จะปรับขนาดวิวพอร์ตภาพโดยตรง กลไกการปรับขนาดนี้ยังอิงตามจุดตัดของ WebView กับหน้าต่างด้วย ตัวอย่างเช่น ในโหมดมัลติทาสก์ของ Android หากด้านล่างของ WebView ขยายออกไป 200dp ใต้ด้านล่างของหน้าต่าง วิวพอร์ตภาพจะมีขนาดเล็กกว่าขนาดของ WebView 200dp การปรับขนาดวิวพอร์ตที่มองเห็นได้นี้ (ทั้งสำหรับ IME และการตัดกันของ WebView-Window) จะมีผลกับด้านล่างของ WebView เท่านั้น กลไกนี้ไม่รองรับการปรับขนาดสำหรับการทับซ้อนด้านซ้าย ขวา หรือบน ซึ่งหมายความว่าแป้นพิมพ์ที่เชื่อมต่อซึ่งปรากฏที่ขอบเหล่านั้นจะไม่ทําให้เกิดการปรับขนาดวิวพอร์ตด้วยภาพ

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

ตรรกะขอบเขตและการทับซ้อน

WebView ควรได้รับค่าระยะขอบที่ไม่ใช่ 0 เฉพาะเมื่อองค์ประกอบ UI ของระบบ (แถบ รอยบากบนจอแสดงผล หรือแป้นพิมพ์) ทับซ้อนกับขอบเขตหน้าจอของ WebView โดยตรง หาก WebView ไม่ทับซ้อนกับองค์ประกอบ UI เหล่านี้ (เช่น หาก WebView อยู่ตรงกลางหน้าจอและไม่แตะแถบระบบ) WebView ควรได้รับระยะขอบเหล่านั้นเป็น 0

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

Kotlin

ViewCompat.setOnApplyWindowInsetsListener(myWebView) { _, windowInsets ->
    // By returning the original windowInsets object, we override the default
    // behavior that zeroes out system insets (like system bars or display
    // cutouts) when they don't directly overlap the WebView's screen bounds.
    windowInsets
}

Java

ViewCompat.setOnApplyWindowInsetsListener(myWebView, (v, windowInsets) -> {
    // By returning the original windowInsets object, we override the default
    // behavior that zeroes out system insets (like system bars or display
    // cutouts) when they don't directly overlap the WebView's screen bounds.
    return windowInsets;
});

จัดการเหตุการณ์การปรับขนาด

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

  1. ผู้ใช้โฟกัสที่องค์ประกอบอินพุต
  2. แป้นพิมพ์จะปรากฏขึ้น ซึ่งทําให้เกิดเหตุการณ์การปรับขนาด
  3. โค้ดของเว็บไซต์จะล้างโฟกัสเพื่อตอบสนองต่อการปรับขนาด
  4. แป้นพิมพ์จะซ่อนเนื่องจากสูญเสียโฟกัส

หากต้องการลดลักษณะการทำงานนี้ ให้ตรวจสอบ Listener ฝั่งเว็บเพื่อให้แน่ใจว่าการเปลี่ยนแปลง Viewport ไม่ได้ทริกเกอร์blur()ฟังก์ชัน JavaScript หรือ ลักษณะการทำงานในการล้างโฟกัสโดยไม่ตั้งใจ

ใช้การจัดการระยะขอบ

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

การเว้นขอบสองชั้นคือกรณีที่เลย์เอาต์เนทีฟและเนื้อหาเว็บใช้ขนาดระยะขอบเดียวกัน ส่งผลให้เกิดการเว้นวรรคที่ซ้ำซ้อน ตัวอย่างเช่น สมมติว่า โทรศัพท์มีแถบสถานะขนาด 40 พิกเซล ทั้งมุมมองเนทีฟและ WebView จะเห็นขอบ 40 พิกเซล ทั้ง 2 รายการเพิ่มระยะขอบ 40 พิกเซล ส่งผลให้ผู้ใช้เห็นช่องว่าง 80 พิกเซล ที่ด้านบน

แนวทางการปรับเป็นศูนย์

หากต้องการป้องกันการเพิ่มระยะห่างจากขอบซ้ำ คุณต้องตรวจสอบว่าหลังจากมุมมองเนทีฟใช้ ขนาดสำหรับการเว้นส่วนที่เว้นไว้สำหรับการเพิ่มระยะห่างจากขอบแล้ว ให้รีเซ็ตขนาดดังกล่าวเป็น 0 โดยใช้ Insets.NONE ในออบเจ็กต์ WindowInsets ใหม่ก่อนที่จะส่งออบเจ็กต์ที่แก้ไขแล้ว ลงในลำดับชั้นการแสดงผลไปยัง WebView

เมื่อใช้ระยะห่างจากขอบกับมุมมองหลัก โดยทั่วไปคุณควรใช้แนวทาง "การตั้งค่าเป็น 0" โดยการตั้งค่า Insets.NONE แทน WindowInsetsCompat.CONSUMED การกด WindowInsetsCompat.CONSUMED อาจใช้ได้ในบางสถานการณ์ อย่างไรก็ตาม อาจเกิดปัญหาได้หากตัวแฮนเดิลของแอปเปลี่ยน Inset หรือเพิ่ม Padding ของตัวเอง แต่วิธีการตั้งค่าเป็น 0 จะไม่มีข้อจำกัดเหล่านี้

หลีกเลี่ยงการเว้นวรรคที่มองไม่เห็นโดยการตั้งค่าระยะขอบเป็น 0

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

ตัวอย่างต่อไปนี้แสดงการโต้ตอบที่ขัดข้องระหว่างแอปกับ WebView

  1. สถานะเริ่มต้น: ตอนแรกแอปจะส่ง Inset ที่ไม่ได้ใช้ (เช่น displayCutout() หรือ systemBars()) ไปยัง WebView ซึ่งจะใช้ การเว้นวรรคภายในกับเนื้อหาเว็บ
  2. การเปลี่ยนแปลงสถานะและข้อผิดพลาด: หากแอปเปลี่ยนสถานะ (เช่น แป้นพิมพ์ซ่อนอยู่) และแอปเลือกที่จะจัดการ Inset ที่เกิดขึ้นโดยการส่งคืน WindowInsetsCompat.CONSUMED
  3. การแจ้งเตือนถูกบล็อก: การใช้ส่วนที่เว้นไว้จะป้องกันไม่ให้ระบบ Android ส่งการแจ้งเตือนการอัปเดตที่จำเป็นลงในลำดับชั้นการแสดงผลไปยัง WebView
  4. ระยะขอบที่มองไม่เห็น: เนื่องจาก WebView ไม่ได้รับการอัปเดต จึงยังคงมีระยะขอบจากสถานะก่อนหน้า ทำให้เกิดระยะขอบที่มองไม่เห็น (เช่น การรักษาระยะขอบของแป้นพิมพ์หลังจากซ่อนแป้นพิมพ์)

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

Kotlin

ViewCompat.setOnApplyWindowInsetsListener(rootView) { view, windowInsets ->
    // 1. Identify the inset types you want to handle natively
    val types = WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout()

    // 2. Extract the dimensions and apply them as padding to the native container
    val insets = windowInsets.getInsets(types)
    view.setPadding(insets.left, insets.top, insets.right, insets.bottom)

    // 3. Return a new WindowInsets object with the handled types set to NONE (zeroed).
    // This informs the WebView that these areas are already padded, preventing
    // double-padding while still allowing the WebView to update its internal state.
    WindowInsetsCompat.Builder(windowInsets)
        .setInsets(types, Insets.NONE)
        .build()
}

Java

ViewCompat.setOnApplyWindowInsetsListener(rootView, (view, windowInsets) -> {
    // 1. Identify the inset types you want to handle natively
    int types = WindowInsetsCompat.Type.systemBars() | WindowInsetsCompat.Type.displayCutout();

    // 2. Extract the dimensions and apply them as padding to the native container
    Insets insets = windowInsets.getInsets(types);
    rootView.setPadding(insets.left, insets.top, insets.right, insets.bottom);

    // 3. Return a new Insets object with the handled types set to NONE (zeroed).
    // This informs the WebView that these areas are already padded, preventing
    // double-padding while still allowing the WebView to update its internal
    // state.
    return new WindowInsetsCompat.Builder(windowInsets)
            .setInsets(types, Insets.NONE)
            .build();
});

วิธีการเลือกไม่ใช้

หากต้องการปิดใช้ลักษณะการทำงานสมัยใหม่เหล่านี้และกลับไปใช้การจัดการ Viewport แบบเดิม ให้ทำดังนี้

  1. Intercept insets: ใช้ setOnApplyWindowInsetsListener หรือแทนที่ onApplyWindowInsets ในคลาสย่อย WebView

  2. ล้าง Inset: แสดงชุด Inset ที่ใช้แล้ว (เช่น WindowInsetsCompat.CONSUMED) จากจุดเริ่มต้น การดำเนินการนี้จะป้องกันไม่ให้การแจ้งเตือนที่แทรก แพร่กระจายไปยัง WebView ทั้งหมด ซึ่งจะเป็นการ ปิดใช้การปรับขนาดวิวพอร์ตสมัยใหม่และบังคับให้ WebView คงขนาดวิวพอร์ตภาพเริ่มต้น ไว้