รองรับการจัดหน้าต่างเดสก์ท็อป

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

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

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

โดยค่าเริ่มต้นแล้ว แอปจะเปิดแบบเต็มหน้าจอในแท็บเล็ต Android หากต้องการเปิดแอปในหน้าต่างเดสก์ท็อป ให้กดแฮนเดิลหน้าต่างที่ด้านบนของหน้าจอค้างไว้ แล้วลากแฮนเดิลภายใน UI ดังที่แสดงในรูปที่ 2

เมื่อแอปเปิดในโหมดการแสดงหน้าต่างเดสก์ท็อป แอปอื่นๆ จะเปิดในหน้าต่างเดสก์ท็อปด้วย

นอกจากนี้ ผู้ใช้ยังเรียกใช้หน้าต่างเดสก์ท็อปจากเมนูที่ปรากฏใต้แฮนเดิลของหน้าต่างได้เมื่อแตะหรือคลิกแฮนเดิล หรือใช้แป้นพิมพ์ลัด Meta (Windows, Command หรือ Search) + Ctrl + ลูกศรลง

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

หากต้องการกลับไปใช้หน้าต่างเดสก์ท็อป ให้แตะหรือคลิกการ์ดพื้นที่เดสก์ท็อปในหน้าจอ "ล่าสุด"

โหมดปรับขนาดและความเข้ากันได้

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

แอปที่ประกาศว่าปรับขนาดไม่ได้ (กล่าวคือ resizeableActivity = false) จะมีการปรับขนาด UI ในขณะที่ยังคงสัดส่วนภาพเดิมไว้

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

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

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

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

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

การใช้งาน

หากต้องการวาดเนื้อหาที่กำหนดเองในแถบส่วนหัว ขั้นตอนแรกคือการทำให้พื้นหลังของแถบส่วนหัวโปร่งใส คุณทำได้โดยใช้แฟล็ก APPEARANCE_TRANSPARENT_CAPTION_BAR_BACKGROUND กับ WindowInsetsController

window.insetsController?.setSystemBarsAppearance(
    WindowInsetsController.APPEARANCE_TRANSPARENT_CAPTION_BAR_BACKGROUND,
    WindowInsetsController.APPEARANCE_TRANSPARENT_CAPTION_BAR_BACKGROUND
)
DesktopWindowing.kt

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

@OptIn(ExperimentalLayoutApi::class)
@Composable
fun CaptionBar() {
    if (WindowInsets.isCaptionBarVisible) {
        Row(
            modifier = Modifier
                .windowInsetsTopHeight(WindowInsets.captionBar)
                .fillMaxWidth()
                .background(if (isSystemInDarkTheme()) Color.White else Color.Black),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(
                text = "Caption Bar Title",
                style = MaterialTheme.typography.titleMedium,
                modifier = Modifier.padding(4.dp)
            )
        }
    }
}
DesktopWindowing.kt

• setSystemBarsAppearance(appearance,mask): กำหนดค่าลักษณะภาพ ของแถบระบบ พารามิเตอร์แรกกำหนดแฟล็กลักษณะเป้าหมาย ขณะที่พารามิเตอร์ที่ 2 ทำหน้าที่เป็นมาสก์เพื่อควบคุมว่าจะแก้ไขแฟล็กใด

• windowInsetsTopHeight(): ตั้งค่าความสูงของ Composable โดยอัตโนมัติให้ตรงกับแถบส่วนหัวของระบบ ซึ่งจะช่วยให้พื้นหลังที่กำหนดเองเติมพื้นที่คำบรรยายแทนเสียงได้โดยไม่ต้องฮาร์ดโค้ดค่าพิกเซล

• WindowInsets.captionBar: ระบุขนาดสำหรับการควบคุมหน้าต่างเดสก์ท็อป (ปิด ขยาย ฯลฯ) เพื่อให้ UI ปรับขนาดหรือซ่อนโดยอัตโนมัติเมื่อเข้าหรือออกจากการใช้หน้าต่างเดสก์ท็อป

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

ส่วนติดต่อผู้ใช้

Android 15 มีเมธอด WindowInsets#getBoundingRects() เพื่อหลีกเลี่ยงไม่ให้ UI ทับซ้อนกับปุ่มของระบบ เมธอดจะแสดงผลรายการออบเจ็กต์ Rect ซึ่งแสดงพื้นที่ที่องค์ประกอบของระบบครอบครอง พื้นที่ที่เหลือในแถบคำบรรยายแทนเสียงคือโซนปลอดภัยที่คุณวางเนื้อหาที่กำหนดเองได้อย่างปลอดภัย

สลับลักษณะขององค์ประกอบคำบรรยายแทนเสียงของระบบสำหรับธีมสว่างและธีมมืดโดยใช้ APPEARANCE_LIGHT_CAPTION_BARS เข้าถึงระยะขอบโดยใช้ WindowInsets.Companion.captionBar() ใน Compose หรือ WindowInsets.Type.captionBar() ใน Views

ดูข้อมูลเพิ่มเติมได้ที่เกี่ยวกับระยะขอบของหน้าต่าง

การรองรับมัลติทาสก์และหลายอินสแตนซ์

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

ตั้งแต่ Android 15 เป็นต้นไป คุณจะใช้ PROPERTY_SUPPORTS_MULTI_INSTANCE_SYSTEM_UI ได้ การตั้งค่าพร็อพเพอร์ตี้นี้ใน AndroidManifest.xml จะเป็นการระบุว่า UI ของระบบควรมีตัวเลือก (เช่น ปุ่ม "หน้าต่างใหม่") เพื่อให้แอปเปิดได้หลายอินสแตนซ์

<application>
    <property
        android:name="android.window.PROPERTY_SUPPORTS_MULTI_INSTANCE_SYSTEM_UI"
        android:value="true" />
</application>

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

จัดการอินสแตนซ์ของแอปด้วยท่าทางสัมผัสการลาก

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

โอนข้อมูลด้วยการลากและวาง

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

Android 15 มีแฟล็กสำคัญ 2 อย่างสำหรับการแสดงหน้าต่างสไตล์เดสก์ท็อปและการโต้ตอบแบบอินสแตนซ์หลายรายการ ดังนี้

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

Modifier.dragAndDropSource { _ ->
    DragAndDropTransferData(
        clipData = ClipData.newPlainText("label", "Your data"),
        flags = View.DRAG_FLAG_GLOBAL_SAME_APPLICATION
    )
}
DesktopWindowing.kt

• DRAG_FLAG_START_INTENT_SENDER_ON_UNHANDLED_DRAG: อนุญาตให้ผู้ใช้ เริ่มอินสแตนซ์ใหม่ของแอปโดยการวางเนื้อหาที่ลากไปยัง พื้นที่ว่างบนหน้าจอ หากไม่มีหน้าต่างอื่นจัดการการวาง
  • เมื่อใช้ Flag นี้ คุณต้องระบุ IntentSender โดยใช้ ClipData.Item.Builder#setIntentSender() ซึ่งระบบจะใช้เพื่อ เปิดใช้งานกิจกรรมใหม่หากเกิดการหยุดทำงานที่ไม่ได้จัดการ

Modifier.dragAndDropSource { _ ->
    val intent = Intent.makeMainActivity(activity.componentName).apply {
        putExtra("EXTRA_ITEM_ID", itemId)
        flags = Intent.FLAG_ACTIVITY_NEW_TASK or
                Intent.FLAG_ACTIVITY_MULTIPLE_TASK or
                Intent.FLAG_ACTIVITY_LAUNCH_ADJACENT
    }

    val pendingIntent = PendingIntent.getActivity(
        activity, 0, intent, PendingIntent.FLAG_IMMUTABLE
    )

    val data = ClipData(
        "Item $itemId",
        arrayOf(ClipDescription.MIMETYPE_TEXT_INTENT),
        ClipData.Item.Builder().setIntentSender(pendingIntent.intentSender).build()
    )

    DragAndDropTransferData(
        clipData = data,
        flags = View.DRAG_FLAG_GLOBAL_SAME_APPLICATION or
                View.DRAG_FLAG_START_INTENT_SENDER_ON_UNHANDLED_DRAG,
    )
}
DesktopWindowing.kt

รับข้อมูลที่โอน

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

Modifier.dragAndDropTarget(
    shouldStartDragAndDrop = { event ->
        event.toAndroidDragEvent().clipDescription.hasMimeType(ClipDescription.MIMETYPE_TEXT_PLAIN)
    },
    target = object : DragAndDropTarget {
        override fun onDrop(event: DragAndDropEvent): Boolean {
            requestDragAndDropPermissions(activity, event.toAndroidDragEvent())
            val clipData = event.toAndroidDragEvent().clipData
            val item = clipData?.getItemAt(0)?.text
            if (item != null) {
                // Process the dropped text item here
            }
            return item != null
        }
    }
)
DesktopWindowing.kt

ขั้นตอนสำคัญ

• ตัวกรอง: ใช้ shouldStartDragAndDrop เพื่อตรวจสอบว่าระบบรองรับข้อมูลขาเข้า (ประเภท MIME) หรือไม่
• สิทธิ์: เรียกใช้ requestDragAndDropPermissions(event) เพื่อเข้าถึงข้อมูล
• คำสั่ง: ดึงข้อมูลในonDrop ฟังก์ชันเรียกกลับ (callback)

การเพิ่มประสิทธิภาพเพิ่มเติม

ปรับแต่งการเปิดแอปและเปลี่ยนแอปจากการแสดงหน้าต่างบนเดสก์ท็อปเป็นแบบเต็ม หน้าจอ

ระบุขนาดและตำแหน่งเริ่มต้น

แอปบางแอปไม่จำเป็นต้องมีหน้าต่างขนาดใหญ่เพื่อมอบมูลค่าแก่ผู้ใช้ แม้ว่าจะปรับขนาดได้ก็ตาม คุณ สามารถใช้เมธอด ActivityOptions#setLaunchBounds() เพื่อระบุขนาดและตำแหน่งเริ่มต้นเมื่อเปิดใช้กิจกรรม

เข้าสู่โหมดเต็มหน้าจอจากพื้นที่เดสก์ท็อป

แอปสามารถเข้าสู่โหมดเต็มหน้าจอได้โดยเรียกใช้ Activity#requestFullScreenMode() เมธอดจะแสดงแอปแบบเต็มหน้าจอโดยตรงจากการแสดงหน้าต่างเดสก์ท็อป