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

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

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 เข้าด้วยกันช่วยให้คุณสร้างและแสดงฉากต่างๆ สำหรับขนาดหน้าจอและการกำหนดค่าอุปกรณ์ต่างๆ ได้

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

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

แอปแบบปรับได้ที่แสดงการนำทาง 3 บานหน้าต่างบนหน้าจอแบบกว้าง

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

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

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

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

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

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

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

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

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

ความคิดเห็น

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

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

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