อุปกรณ์ Android ขยายไปยังจอแสดงผลที่เชื่อมต่อได้อย่างราบรื่น

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

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

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

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

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

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

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

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

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

ข่าวประชาสัมพันธ์นี้มีความสำคัญอย่างไร

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

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

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

• อย่าถือว่าออบเจ็กต์ 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 ของแอปนี้อิงตามฉาก ฉากคือเลย์เอาต์ที่แสดงปลายทางอย่างน้อย 1 รายการพร้อมกัน SceneStrategy จะกำหนดว่าจะสร้างฉากได้หรือไม่ การเชื่อมโยงอินสแตนซ์ SceneStrategy เข้าด้วยกันช่วยให้คุณสร้างและแสดงฉากต่างๆ สำหรับขนาดหน้าจอและการกำหนดค่าอุปกรณ์ที่แตกต่างกันได้

สำหรับเลย์เอาต์ Canonical ที่พร้อมใช้งานทันที เช่น รายการ-รายละเอียดและแผงสนับสนุน คุณสามารถใช้ฉากจากไลบรารี 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 แผงในหน้าจอแบบกว้าง

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

เลย์เอาต์แบบปรับขนาดได้สแตนด์อโลน

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

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

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

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

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

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

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

ความคิดเห็น

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

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

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