Tạo hiệu ứng cuộn theo hiệu ứng thị giác

Cuộn thị sai là một kỹ thuật trong đó nội dung nền và nội dung nền trước cuộn ở các tốc độ khác nhau. Bạn có thể triển khai kỹ thuật này để cải thiện giao diện người dùng của ứng dụng, tạo ra trải nghiệm linh hoạt hơn khi người dùng cuộn.

Kết quả

Hình 1. Một danh sách cuộn có hiệu ứng thị sai.

Khả năng tương thích giữa các phiên bản

Việc triển khai này yêu cầu bạn đặt minSDK của dự án thành cấp độ API 21 trở lên.

Phần phụ thuộc

Tạo hiệu ứng thị sai

Để đạt được hiệu ứng thị sai, bạn áp dụng một phần giá trị cuộn từ thành phần kết hợp có thể cuộn vào thành phần kết hợp cần hiệu ứng thị sai. Đoạn mã sau đây lấy 2 phần tử trực quan lồng nhau (một hình ảnh và một khối văn bản) rồi cuộn chúng theo cùng một hướng ở các tốc độ khác nhau:

@Composable
fun ParallaxEffect() {
    fun Modifier.parallaxLayoutModifier(scrollState: ScrollState, rate: Int) =
        layout { measurable, constraints ->
            val placeable = measurable.measure(constraints)
            val height = if (rate > 0) scrollState.value / rate else scrollState.value
            layout(placeable.width, placeable.height) {
                placeable.place(0, height)
            }
        }

    val scrollState = rememberScrollState()
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .verticalScroll(scrollState),
    ) {

        Image(
            painterResource(id = R.drawable.cupcake),
            contentDescription = "Android logo",
            contentScale = ContentScale.Fit,
            // Reduce scrolling rate by half.
            modifier = Modifier.parallaxLayoutModifier(scrollState, 2)
        )

        Text(
            text = stringResource(R.string.detail_placeholder),
            modifier = Modifier
                .background(Color.White)
                .padding(horizontal = 8.dp),

        )
    }
}
ParallaxEffect.kt

Các điểm chính về mã

  • Tạo một đối tượng sửa đổi layout tuỳ chỉnh để điều chỉnh tốc độ cuộn của thành phần kết hợp.
  • Image cuộn chậm hơn Text, tạo ra hiệu ứng thị sai khi hai thành phần kết hợp này dịch theo chiều dọc với tốc độ khác nhau.

Bộ sưu tập chứa hướng dẫn này

Hướng dẫn này là một phần của bộ sưu tập Hướng dẫn nhanh được tuyển chọn, bao gồm các mục tiêu phát triển Android rộng hơn:

Danh sách và lưới cho phép ứng dụng của bạn hiển thị các bộ sưu tập theo một hình thức bắt mắt và dễ dàng cho người dùng sử dụng.
Tuyển tập hướng dẫn nhanh
Khám phá các kỹ thuật sử dụng hình ảnh tươi sáng, bắt mắt để mang lại giao diện đẹp mắt cho ứng dụng Android của bạn.
Tuyển tập hướng dẫn nhanh

Văn bản hiển thị

Văn bản là phần chính của mọi giao diện người dùng. Tìm hiểu các cách trình bày văn bản trong ứng dụng để mang lại trải nghiệm thú vị cho người dùng.
Tuyển tập hướng dẫn nhanh

Bạn có câu hỏi hoặc ý kiến phản hồi

Truy cập vào trang câu hỏi thường gặp của chúng tôi để tìm hiểu về các hướng dẫn nhanh hoặc liên hệ với chúng tôi để chia sẻ ý kiến của bạn.
Chuyển đến phần Câu hỏi thường gặp Gửi ý kiến phản hồi