Bạn có thể điều chỉnh hình ảnh cho vừa với một hình dạng đã cắt và vẽ bóng xung quanh chu vi của hình dạng đó để tạo cảm giác ba chiều. Kỹ thuật này hữu ích cho việc tạo các thiết kế như hình đại diện và hình thu nhỏ sản phẩm hoặc hiển thị biểu trưng có hình dạng tuỳ chỉnh.
Để hiển thị hình ảnh được cắt theo một hình dạng, bạn phải làm như sau:
- Tạo hình dạng.
- Cắt hình ảnh theo hình dạng.
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 hình dạng
Mã sau đây tạo một hình dạng tuỳ chỉnh có thể vẽ và kết xuất một đa giác bo tròn một cách linh động:
fun RoundedPolygon.getBounds() = calculateBounds().let { Rect(it[0], it[1], it[2], it[3]) } class RoundedPolygonShape( private val polygon: RoundedPolygon, private var matrix: Matrix = Matrix() ) : Shape { private var path = Path() override fun createOutline( size: Size, layoutDirection: LayoutDirection, density: Density ): Outline { path.rewind() path = polygon.toPath().asComposePath() matrix.reset() val bounds = polygon.getBounds() val maxDimension = max(bounds.width, bounds.height) matrix.scale(size.width / maxDimension, size.height / maxDimension) matrix.translate(-bounds.left, -bounds.top) path.transform(matrix) return Outline.Generic(path) } }
Các điểm chính về mã
RoundedPolygon.getBounds()
xác định một hàm mở rộng trên lớpRoundedPolygon
để tính toán các giới hạn của hàm đó.- Lớp
RoundedPolygonShape
triển khai giao diệnShape
, cho phép bạn xác định một hình dạng tuỳ chỉnh (đa giác bo tròn) trong Jetpack Compose. - Hình dạng này sử dụng
Matrix
để quản lý các thao tác điều chỉnh tỷ lệ và dịch để kết xuất linh hoạt. - Hàm
createOutline()
lấy một đối tượngRoundedPolygon
, điều chỉnh theo tỷ lệ và dịch đối tượng đó để vừa với một kích thước nhất định, đồng thời trả về một đối tượngOutline
mô tả hình dạng cuối cùng cần vẽ.
Cắt hình ảnh thành một hình dạng
Mã sau đây sẽ cắt hình ảnh thành hình lục giác và thêm một bóng đổ tinh tế để tạo cảm giác chiều sâu:
val hexagon = remember { RoundedPolygon( 6, rounding = CornerRounding(0.2f) ) } val clip = remember(hexagon) { RoundedPolygonShape(polygon = hexagon) } Box( modifier = Modifier .clip(clip) .background(MaterialTheme.colorScheme.secondary) .size(200.dp) ) { Text( "Hello Compose", color = MaterialTheme.colorScheme.onSecondary, modifier = Modifier.align(Alignment.Center) ) }
Các điểm chính về mã
- Các đối tượng
RoundedPolygon
vàRoundedPolygonShape
được dùng để xác định và áp dụng hình lục giác cho hình ảnh. - Mã này sử dụng
graphicsLayer
để thêm bóng dựa trên độ cao vào hình ảnh. Điều này tạo ra cảm giác về chiều sâu và sự tách biệt về hình ảnh với nền. - Việc sử dụng các khối
remember
giúp tối ưu hoá hiệu suất bằng cách đảm bảo rằng các định nghĩa về hình dạng và cắt chỉ được tính toán một lần và được ghi nhớ để kết hợp lại giao diện người dùng sau này.
Kết quả
![Chó trong hình lục giác với bóng đổ xung quanh các cạnh](https://developer.android.google.cn/static/develop/ui/compose/images/graphics/shapes/clip_with_shadow.png?hl=vi)
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.google.cn/static/images/quick-guides/collection-illustration.png?hl=vi)