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

ดังที่แสดงใน Google I/O 2025 จอแสดงผลที่เชื่อมต่อช่วยให้ผู้ใช้เชื่อมต่ออุปกรณ์ Android กับจอภาพภายนอกและเข้าถึงหน้าต่างเดสก์ท็อปได้ทันที แอปสามารถใช้ในหน้าต่างแบบอิสระหรือหน้าต่างที่ขยายใหญ่สุด และผู้ใช้สามารถทำงานหลายอย่างพร้อมกันได้เช่นเดียวกับในระบบปฏิบัติการเดสก์ท็อป

Google และ Samsung ได้ร่วมมือกันเพื่อมอบประสบการณ์การแสดงหน้าต่างเดสก์ท็อปที่ราบรื่นและทรงพลังให้กับอุปกรณ์ต่างๆ ในระบบนิเวศ Android ที่ใช้ Android 16 ขณะเชื่อมต่อกับจอแสดงผลภายนอก 
ตอนนี้ฟีเจอร์นี้พร้อมให้บริการแก่ผู้ใช้ที่มีอุปกรณ์ที่รองรับ* ซึ่งเชื่อมต่อโทรศัพท์ Pixel และ Samsung ที่รองรับกับจอภาพภายนอกได้แล้ว โดยจะช่วยเปิดโอกาสใหม่ๆ ในการสร้างประสบการณ์การใช้งานแอปที่น่าสนใจและมีประสิทธิภาพมากขึ้นซึ่งปรับให้เข้ากับรูปแบบต่างๆ

หลักการทำงาน

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

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

โทรศัพท์เชื่อมต่อกับจอแสดงผลภายนอกที่มีเซสชันเดสก์ท็อปบนจอแสดงผล ขณะที่โทรศัพท์ยังคงสถานะของตัวเอง

เมื่อเชื่อมต่ออุปกรณ์ที่รองรับการแสดงหน้าต่างเดสก์ท็อป (เช่น แท็บเล็ตอย่าง Samsung Galaxy Tab S11) กับจอแสดงผลภายนอก ระบบจะขยายเซสชันเดสก์ท็อปไปยังจอแสดงผลทั้ง 2 จอ ซึ่งจะช่วยให้คุณมีพื้นที่ทำงานที่กว้างขวางยิ่งขึ้น จากนั้นจอแสดงผลทั้ง 2 จะทำงานเป็นระบบเดียวอย่างต่อเนื่อง ซึ่งช่วยให้หน้าต่างแอป เนื้อหา และเคอร์เซอร์เคลื่อนที่ระหว่างจอแสดงผลได้อย่างอิสระ

แท็บเล็ตเชื่อมต่อกับจอแสดงผลภายนอก ซึ่งขยายเซสชันเดสก์ท็อปไปยังทั้ง 2 จอแสดงผล

ทำไมจึงสำคัญ

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

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

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

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

การสร้างสรรค์เพื่ออนาคตของเดสก์ท็อปด้วยเครื่องมือที่ทันสมัย

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

คลาสขนาดหน้าต่างใหม่: ใหญ่และใหญ่พิเศษ

การอัปเดตที่สำคัญที่สุดใน Jetpack WindowManager 1.5.0 คือการเพิ่มคลาสขนาดหน้าต่างความกว้างใหม่ 2 คลาส ได้แก่ ขนาดใหญ่และขนาดใหญ่พิเศษ

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

โดยมีจุดพักความกว้างใหม่ดังนี้

• ขนาดใหญ่: สำหรับความกว้างระหว่าง 1200dp ถึง 1600dp
• ใหญ่พิเศษ: สำหรับความกว้าง ≥1600dp

คลาสขนาดหน้าต่างต่างๆ ตามความกว้างของจอแสดงผล

ในอุปกรณ์ขนาดใหญ่มาก การปรับขนาดเลย์เอาต์ขยายของแท็บเล็ตอาจไม่ใช่ประสบการณ์ของผู้ใช้ที่ดีที่สุดเสมอไป เช่น โปรแกรมรับส่งอีเมลอาจแสดง 2 บานหน้าต่าง (กล่องจดหมายและข้อความ) ได้อย่างสะดวกในคลาสขนาดหน้าต่างแบบขยาย แต่ในจอภาพเดสก์ท็อปขนาดใหญ่พิเศษ โปรแกรมรับส่งอีเมลอาจแสดง 3 หรือ 4 บานหน้าต่างได้อย่างสวยงาม เช่น กล่องจดหมาย รายการข้อความ เนื้อหาข้อความทั้งหมด และแผงปฏิทิน/งาน ทั้งหมดพร้อมกัน

หากต้องการรวมคลาสขนาดหน้าต่างใหม่ไว้ในโปรเจ็กต์ เพียงเรียกใช้ฟังก์ชันจากชุด WindowSizeClass.BREAKPOINTS_V2 แทน WindowSizeClass.BREAKPOINTS_V1

val currentWindowMetrics =
    WindowMetricsCalculator.getOrCreate()
    .computeCurrentWindowMetrics(LocalContext.current)

val sizeClass = WindowSizeClass.BREAKPOINTS_V2
    .computeWindowSizeClass(currentWindowMetrics)

จากนั้นใช้เลย์เอาต์ที่ถูกต้องเมื่อแน่ใจว่าแอปมีพื้นที่อย่างน้อยเท่าที่ระบุ

if(sizeClass.isWidthAtLeastBreakpoint(
    WindowSizeClass.WIDTH_DP_LARGE_LOWER_BOUND)){
    ...
	// Window is at least 1200 dp wide.
}

สร้างเลย์เอาต์แบบปรับอัตโนมัติด้วย Jetpack Navigation 3

Navigation 3 เป็นส่วนเสริมล่าสุดในคอลเล็กชัน Jetpack Navigation 3 ซึ่งเพิ่งเปิดตัวเวอร์ชันเสถียรเป็นครั้งแรกเป็นไลบรารีการนำทางที่มีประสิทธิภาพซึ่งออกแบบมาให้ทำงานร่วมกับ Compose

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

ระบบนี้สำหรับการจัดการโฟลว์ UI ของแอปอิงตาม Scene ฉากคือเลย์เอาต์ที่แสดงปลายทางอย่างน้อย 1 แห่งพร้อมกัน SceneStrategy จะกำหนดว่าสร้าง Scene ได้หรือไม่ การเชื่อมโยงอินสแตนซ์ SceneStrategy เข้าด้วยกันช่วยให้คุณสร้างและแสดงฉากต่างๆ สำหรับขนาดหน้าจอและการกำหนดค่าอุปกรณ์ที่แตกต่างกันได้

สำหรับเลย์เอาต์มาตรฐานสำเร็จรูป เช่น รายการ-รายละเอียดและแผงสนับสนุน คุณสามารถใช้ฉากจากไลบรารี Compose Material 3 Adaptive (พร้อมใช้งานในเวอร์ชัน 1.3 ขึ้นไป)

นอกจากนี้ คุณยังสร้างฉากที่กำหนดเองได้ง่ายๆ โดยแก้ไขสูตรฉากหรือเริ่มต้นจากศูนย์ ตัวอย่างเช่น ลองพิจารณาฉากที่แสดง 3 บานหน้าต่างแบบเคียงข้างกัน

class ThreePaneScene<T : Any>(
    override val key: Any,
    override val previousEntries: List<NavEntry<T>>,
    val firstEntry: NavEntry<T>,
    val secondEntry: NavEntry<T>,
    val thirdEntry: NavEntry<T>
) : Scene<T> {
    override val entries: List<NavEntry<T>> = listOf(firstEntry, secondEntry, thirdEntry)
    override val content: @Composable (() -> Unit) = {
        Row(modifier = Modifier.fillMaxSize()) {
            Column(modifier = Modifier.weight(1f)) {
                firstEntry.Content()
            }
            Column(modifier = Modifier.weight(1f)) {
                secondEntry.Content()
            }
            Column(modifier = Modifier.weight(1f)) {
                thirdEntry.Content()
            }
        }
    }

ในสถานการณ์นี้ คุณสามารถกำหนด SceneStrategy เพื่อแสดง 3 แผงได้หากความกว้างของหน้าต่างกว้างพอ และรายการจาก Back Stack ได้ประกาศว่ารองรับการแสดงในฉากแบบ 3 แผง

class ThreePaneSceneStrategy<T : Any>(val windowSizeClass: WindowSizeClass) : SceneStrategy<T> {
    override fun SceneStrategyScope<T>.calculateScene(entries: List<NavEntry<T>>): Scene<T>? {
        if (windowSizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_LARGE_LOWER_BOUND)) {
            val lastThree = entries.takeLast(3)
            if (lastThree.size == 3 && lastThree.all { it.metadata.containsKey(MULTI_PANE_KEY) }) {
                val firstEntry = lastThree[0]
                val secondEntry = lastThree[1]
                val thirdEntry = lastThree[2]


                return ThreePaneScene(
                    key = Triple(firstEntry.contentKey, secondEntry.contentKey, thirdEntry.contentKey),
                    previousEntries = entries.dropLast(3),
                    firstEntry = firstEntry,
                    secondEntry = secondEntry,
                    thirdEntry = thirdEntry
                )
            }
        }
        return null
    }
}

คุณสามารถใช้ ThreePaneSceneStrategy ร่วมกับกลยุทธ์อื่นๆ เมื่อสร้าง NavDisplay ตัวอย่างเช่น เรายังเพิ่ม TwoPaneStrategy เพื่อแสดง 2 แผงแบบเคียงข้างกันได้เมื่อมีพื้นที่ไม่เพียงพอที่จะแสดง 3 แผง

val strategy = ThreePaneSceneStrategy() then TwoPaneSceneStrategy()

NavDisplay(..., 
  sceneStrategy = strategy,
  entryProvider = entryProvider { 
    entry<MyScreen>(metadata = mapOf(MULTI_PANE_KEY to true))) { ... }
    ... other entries...
  }
)

หากมีพื้นที่ไม่เพียงพอที่จะแสดง 3 หรือ 2 บานหน้าต่าง กลยุทธ์ฉากที่กำหนดเองทั้ง 2 แบบจะแสดง nullในกรณีนี้ NavDisplay จะกลับไปแสดงรายการสุดท้ายใน Back Stack ในบานหน้าต่างเดียวโดยใช้ SinglePaneScene 

การใช้ฉากและกลยุทธ์จะช่วยให้คุณเพิ่มเลย์เอาต์แบบ 1, 2 และ 3 บานหน้าต่างลงในแอปได้

แอปที่ปรับเปลี่ยนอัตโนมัติแสดงการนำทางแบบ 3 บานหน้าต่างบนหน้าจอแบบกว้าง

ดูเอกสารประกอบเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีสร้างเลย์เอาต์ที่กำหนดเองโดยใช้ Scene ใน Navigation 3

เลย์เอาต์ที่ปรับเปลี่ยนตามพื้นที่โฆษณาสแตนด์อโลน

หากต้องการเลย์เอาต์แบบสแตนด์อโลน ไลบรารี Compose Material 3 Adaptive จะช่วยคุณสร้าง UI แบบปรับได้ เช่น เลย์เอาต์รายการ-รายละเอียดและเลย์เอาต์แผงสนับสนุน ซึ่งจะปรับให้เข้ากับการกำหนดค่าหน้าต่างโดยอัตโนมัติตามคลาสขนาดหน้าต่างหรือท่าทางของอุปกรณ์ 

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

คุณเพียงแค่ต้องเลือกใช้โดยประกาศในไฟล์ Gradle Build ว่าต้องการใช้เบรกพอยต์ใหม่

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

เริ่มต้นใช้งาน

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

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

ความคิดเห็น

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

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

*หมายเหตุ: ในขณะที่เขียนบทความนี้ จอแสดงผลที่เชื่อมต่อรองรับใน Pixel 8, 9, 10 Series และอุปกรณ์ Samsung หลากหลายรุ่น ซึ่งรวมถึง S26, Fold7, Flip7 และ Tab S11