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), ) } }
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ơnText
, 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ả
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:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=vi)
Hiển thị danh sách hoặc lưới
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=vi)
Hiển thị hình ảnh
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=vi)