เพิ่มการรองรับภาพเคลื่อนไหวย้อนกลับแบบคาดเดา

เมื่อใช้ API การย้อนกลับของระบบ คุณสามารถเลือกรับภาพเคลื่อนไหวในแอปและรองรับการเปลี่ยนที่กำหนดเองได้

วิดีโอที่ 1: ภาพเคลื่อนไหวของการย้อนกลับที่คาดการณ์ได้

หลังจากเลือกใช้แล้ว แอปจะแสดงภาพเคลื่อนไหวสำหรับการกลับไปที่หน้าแรก การข้ามกิจกรรม และการข้ามงาน

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

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีเพิ่มการรองรับท่าทางสัมผัสการย้อนกลับที่คาดการณ์ได้

เพิ่มการเปลี่ยนภาพและภาพเคลื่อนไหวที่กำหนดเองในแอป

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

เพิ่มการเปลี่ยนที่กำหนดเองใน Jetpack Compose

คุณสามารถใช้ PredictiveBackHandler เพื่อจัดการท่าทางสัมผัสการย้อนกลับที่คาดการณ์ได้ใน Jetpack Compose เพื่อสร้างการเปลี่ยนที่กำหนดเองในแอป ฟีเจอร์นี้พร้อมใช้งานใน androidx.activity:activity-compose:1.8.0-alpha01 ขึ้นไป

PredictiveBackHandler มี Lambda ของ Callback ที่แสดง Flow<BackEventCompat> ซึ่งจะส่งเหตุการณ์เมื่อผู้ใช้ปัดกลับจากขอบ เหตุการณ์เหล่านี้จะให้ข้อมูลเกี่ยวกับตำแหน่งการแตะของผู้ใช้ ขอบการปัด และที่สำคัญที่สุดคือ progress ซึ่งสามารถใช้เพื่อทำให้คอมโพเนนต์เคลื่อนไหวออกไปโดยเป็นส่วนหนึ่งของการจัดการท่าทางสัมผัสเพื่อย้อนกลับ

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

@Composable
fun DetailScreen(onBack: () -> Unit) {
    var scale by remember { mutableFloatStateOf(1f) }
    var xOffset by remember { mutableFloatStateOf(0f) }
    val scope = rememberCoroutineScope()

    PredictiveBackHandler { progressFlow ->
        try {
            progressFlow.collectLatest { backEvent ->
                scale = 1f - backEvent.progress
                xOffset = backEvent.progress * 100f
            }
            // User completed gesture.
            onBack()
        } catch (e: CancellationException) {
            // User cancelled gesture.
            // Animate scale and xOffset back to 1f and 0f respectively.
            scope.launch {
                animate(scale, 1f) { value, _ -> scale = value }
            }
            scope.launch {
                animate(xOffset, 0f) { value, _ -> xOffset = value }
            }
        }
    }
    Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Surface(
            modifier = Modifier
                .size(200.dp)
                .scale(scale)
                .offset { IntOffset(x = xOffset.dp.roundToPx(), y = 0) },
            color = Color.Blue
        ) {}
    }
}