Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Hiển thị hình ảnh được cắt thành một hình dạng

Bạn có thể điều chỉnh hình ảnh cho vừa với hình dạng bị 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 rất hữu ích khi tạo các thiết kế như hình đại diện và hình thu nhỏ của 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.

Kết quả

Chú chó trong hình lục giác có bóng đổ xung quanh các cạnh — **Hình 1.** Đã áp dụng hình dạng tuỳ chỉnh làm mặt nạ.

Khả năng tương thích với 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 hình dạng

Đoạn 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)
    }
}ShapesSnippets.kt

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

RoundedPolygon.getBounds() xác định một hàm mở rộng trên lớp RoundedPolygon để tính toán ranh giới của lớp đó.
Lớp RoundedPolygonShape triển khai giao diện Shape, 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 chia tỷ lệ và dịch cho quá trình kết xuất linh hoạt.
Hàm createOutline() nhận một đối tượng RoundedPolygon, điều chỉnh tỷ lệ và dịch đối tượng đó cho phù hợp với một kích thước nhất định, đồng thời trả về một đối tượng Outline mô tả hình dạng cuối cùng sẽ được vẽ.

Cắt hình ảnh thành một hình dạng

Đoạn mã sau đây cắt hình ảnh thành một hình lục giác và thêm một bóng đổ tinh tế để tạo cảm giác 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)
    )
}ShapesSnippets.kt

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ề mặt thị giác 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à đường viền chỉ được tính toán một lần và được ghi nhớ cho các lần kết hợp lại giao diện người dùng sau này.

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, bao gồm các mục tiêu phát triển Android rộng hơn: