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 động hơn khi người dùng cuộn.

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

Phương thức triển khai này yêu cầu bạn phải đặt minSDK của dự án thành API cấp 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 cuộn đến thành phần kết hợp cần hiệu ứng thị sai. Đoạn mã sau đây lấy hai phần tử hình ảnh lồng nhau (một hình ảnh và một khối văn bản) rồi cuộn các phần tử đó 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 đố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 với tốc độ chậm hơn Text, tạo ra hiệu ứng thị sai khi hai thành phần kết hợp dịch theo chiều dọc với tốc độ khác nhau.

Kết quả

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

Các 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 các bộ sưu tập Hướng dẫn nhanh được tuyển chọn này, 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 ở dạng hình ảnh dễ nhìn và dễ sử dụng cho người dùng.
Bộ sưu 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.
Bộ sưu 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 khác nhau để trình bày văn bản trong ứng dụng nhằm mang lại trải nghiệm thú vị cho người dùng.
Bộ sưu tập hướng dẫn nhanh

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

Hãy truy cập vào trang câu hỏi thường gặp để tìm hiểu về các hướng dẫn nhanh hoặc liên hệ với chúng tôi để cho chúng tôi biết suy nghĩ của bạn.
Chuyển đến phần Câu hỏi thường gặp Để lại ý kiến phản hồi