Hình dạng trong Compose

Với Compose, bạn có thể tạo các hình dạng được tạo từ đa giác. Ví dụ: bạn có thể tạo các loại hình dạng sau:

Hình 1. Ví dụ về các hình dạng khác nhau mà bạn có thể tạo bằng thư viện graphics-shapes

Để tạo một đa giác bo tròn tuỳ chỉnh trong Compose, hãy thêm phần phụ thuộc graphics-shapes vào app/build.gradle:

implementation "androidx.graphics:graphics-shapes:1.0.1"

Thư viện này cho phép bạn tạo các hình dạng được tạo từ đa giác. Mặc dù hình đa giác chỉ có các cạnh thẳng và góc nhọn, nhưng những hình dạng này cho phép bo tròn các góc (không bắt buộc). Thư viện này giúp bạn dễ dàng biến đổi giữa hai hình dạng khác nhau. Việc biến đổi giữa các hình dạng tuỳ ý là rất khó và thường là một vấn đề về thời gian thiết kế. Nhưng thư viện này giúp đơn giản hoá bằng cách biến đổi giữa các hình dạng này bằng cấu trúc đa giác tương tự.

Lưu ý: Thư viện graphics-shapes là một tập hợp Hình dạng riêng biệt với các hình dạng tích hợp sẵn của Compose (như RoundedCornerShape). graphics-shapes được thiết kế để sử dụng với hệ thống Compose hoặc Khung hiển thị. Bạn có thể chuyển đổi hình dạng từ graphics-shapes thành hình dạng Compose bằng cách chuyển đổi hình dạng kết quả thành đối tượng Path, như trong một số ví dụ về mã dưới đây.

Thận trọng: Thư viện này không dùng để biến đổi giữa các đường dẫn tuỳ ý (ví dụ: biểu tượng phát thành biểu tượng tạm dừng), mà chỉ dùng để biến đổi giữa các hình đa giác này. Khi bạn có một đường dẫn tuỳ ý cần biến đổi giữa các đường dẫn, hãy sử dụng AnimatedVectorDrawables và một công cụ của bên thứ ba như shapeshifter.design để căn chỉnh các điểm đường dẫn một cách chính xác.

Tạo đa giác

Đoạn mã sau đây tạo một hình đa giác cơ bản có 6 điểm ở giữa vùng vẽ:

Box(
    modifier = Modifier
        .drawWithCache {
            val roundedPolygon = RoundedPolygon(
                numVertices = 6,
                radius = size.minDimension / 2,
                centerX = size.width / 2,
                centerY = size.height / 2
            )
            val roundedPolygonPath = roundedPolygon.toPath().asComposePath()
            onDrawBehind {
                drawPath(roundedPolygonPath, color = Color.Blue)
            }
        }
        .fillMaxSize()
)
ShapesSnippets.kt

Hình 2. Hình lục giác màu xanh dương ở giữa vùng vẽ.

Trong ví dụ này, thư viện tạo một RoundedPolygon chứa hình học đại diện cho hình dạng được yêu cầu. Để vẽ hình dạng đó trong ứng dụng Compose, bạn phải lấy đối tượng Path từ hình dạng đó để đưa hình dạng vào một biểu mẫu mà Compose biết cách vẽ.

Bo tròn các góc của đa giác

Để bo tròn các góc của đa giác, hãy sử dụng tham số CornerRounding. Hàm này nhận hai tham số: radius và smoothing. Mỗi góc bo tròn được tạo thành từ 1 đến 3 đường cong bậc ba, trong đó tâm có hình cung tròn, còn hai đường cong bên ("bên cạnh") chuyển từ cạnh của hình dạng sang đường cong ở giữa.

Bán kính

radius là bán kính của hình tròn dùng để làm tròn một đỉnh.

Ví dụ: hình tam giác có góc bo tròn sau đây được tạo như sau:

Hình 3. Hình tam giác có các góc bo tròn.

Hình 4. Bán kính bo tròn r xác định kích thước bo tròn của các góc bo tròn.

Bào phẳng

Làm mịn là một yếu tố xác định thời gian để chuyển từ phần bo tròn của góc sang cạnh. Hệ số làm mịn là 0 (không làm mịn, giá trị mặc định cho CornerRounding) sẽ tạo ra góc bo tròn hoàn toàn. Hệ số làm mịn khác 0 (tối đa là 1) sẽ khiến góc được làm tròn bằng 3 đường cong riêng biệt.

Hình 5. Hệ số làm mịn bằng 0 (không làm mịn) sẽ tạo ra một đường cong khối duy nhất theo một đường tròn quanh góc có bán kính làm tròn được chỉ định, như trong ví dụ trước.

Hình 6. Hệ số làm mịn khác 0 sẽ tạo ra ba đường cong bậc ba để làm tròn đỉnh: đường cong tròn bên trong (như trước) cộng với hai đường cong bên cạnh chuyển tiếp giữa đường cong bên trong và các cạnh đa giác.

Ví dụ: đoạn mã dưới đây minh hoạ sự khác biệt nhỏ khi đặt độ mượt thành 0 so với 1:

Box(
    modifier = Modifier
        .drawWithCache {
            val roundedPolygon = RoundedPolygon(
                numVertices = 3,
                radius = size.minDimension / 2,
                centerX = size.width / 2,
                centerY = size.height / 2,
                rounding = CornerRounding(
                    size.minDimension / 10f,
                    smoothing = 0.1f
                )
            )
            val roundedPolygonPath = roundedPolygon.toPath().asComposePath()
            onDrawBehind {
                drawPath(roundedPolygonPath, color = Color.Black)
            }
        }
        .size(100.dp)
)
ShapesSnippets.kt

Hình 7. Hai hình tam giác màu đen cho thấy sự khác biệt về tham số làm mượt.

Kích thước và vị trí

Theo mặc định, một hình dạng được tạo với bán kính 1 xung quanh tâm (0, 0). Bán kính này thể hiện khoảng cách giữa tâm và các đỉnh bên ngoài của đa giác mà hình dạng dựa vào. Xin lưu ý rằng việc bo tròn các góc sẽ tạo ra hình dạng nhỏ hơn vì các góc bo tròn sẽ gần tâm hơn so với các đỉnh được bo tròn. Để định kích thước đa giác, hãy điều chỉnh giá trị radius. Để điều chỉnh vị trí, hãy thay đổi centerX hoặc centerY của đa giác. Ngoài ra, hãy biến đổi đối tượng để thay đổi kích thước, vị trí và chế độ xoay của đối tượng bằng cách sử dụng các hàm biến đổi DrawScope tiêu chuẩn như DrawScope#translate().

Hình dạng biến đổi

Đối tượng Morph là một hình dạng mới đại diện cho ảnh động giữa hai hình dạng đa giác. Để biến đổi giữa hai hình dạng, hãy tạo hai đối tượng RoundedPolygons và một đối tượng Morph lấy hai hình dạng này. Để tính toán hình dạng giữa hình dạng bắt đầu và hình dạng kết thúc, hãy cung cấp giá trị progress từ 0 đến 1 để xác định hình dạng của hình dạng đó giữa hình dạng bắt đầu (0) và hình dạng kết thúc (1):

Box(
    modifier = Modifier
        .drawWithCache {
            val triangle = RoundedPolygon(
                numVertices = 3,
                radius = size.minDimension / 2f,
                centerX = size.width / 2f,
                centerY = size.height / 2f,
                rounding = CornerRounding(
                    size.minDimension / 10f,
                    smoothing = 0.1f
                )
            )
            val square = RoundedPolygon(
                numVertices = 4,
                radius = size.minDimension / 2f,
                centerX = size.width / 2f,
                centerY = size.height / 2f
            )

            val morph = Morph(start = triangle, end = square)
            val morphPath = morph
                .toPath(progress = 0.5f).asComposePath()

            onDrawBehind {
                drawPath(morphPath, color = Color.Black)
            }
        }
        .fillMaxSize()
)
ShapesSnippets.kt

Trong ví dụ trên, tiến trình nằm chính xác ở giữa hai hình dạng (hình tam giác tròn và hình vuông), tạo ra kết quả sau:

Hình 8. 50% giữa hình tam giác bo tròn và hình vuông.

Trong hầu hết các trường hợp, việc biến đổi được thực hiện dưới dạng một phần của ảnh động chứ không chỉ là một kết xuất tĩnh. Để tạo ảnh động giữa hai trạng thái này, bạn có thể sử dụng API Ảnh động chuẩn trong Compose để thay đổi giá trị tiến trình theo thời gian. Ví dụ: bạn có thể tạo ảnh động vô hạn cho hiệu ứng biến đổi giữa hai hình dạng này như sau:

val infiniteAnimation = rememberInfiniteTransition(label = "infinite animation")
val morphProgress = infiniteAnimation.animateFloat(
    initialValue = 0f,
    targetValue = 1f,
    animationSpec = infiniteRepeatable(
        tween(500),
        repeatMode = RepeatMode.Reverse
    ),
    label = "morph"
)
Box(
    modifier = Modifier
        .drawWithCache {
            val triangle = RoundedPolygon(
                numVertices = 3,
                radius = size.minDimension / 2f,
                centerX = size.width / 2f,
                centerY = size.height / 2f,
                rounding = CornerRounding(
                    size.minDimension / 10f,
                    smoothing = 0.1f
                )
            )
            val square = RoundedPolygon(
                numVertices = 4,
                radius = size.minDimension / 2f,
                centerX = size.width / 2f,
                centerY = size.height / 2f
            )

            val morph = Morph(start = triangle, end = square)
            val morphPath = morph
                .toPath(progress = morphProgress.value)
                .asComposePath()

            onDrawBehind {
                drawPath(morphPath, color = Color.Black)
            }
        }
        .fillMaxSize()
)
ShapesSnippets.kt

Hình 9. Biến đổi vô hạn giữa hình vuông và hình tam giác bo tròn.

Dùng đa giác làm vùng cắt

Thông thường, bạn nên sử dụng đối tượng sửa đổi clip trong Compose để thay đổi cách kết xuất một thành phần kết hợp và tận dụng bóng đổ xung quanh vùng cắt:

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

Sau đó, bạn có thể sử dụng đa giác làm đoạn cắt, như trong đoạn mã sau:

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

Điều này dẫn đến kết quả sau:

Hình 10. Hình lục giác có dòng chữ "Hello Compose" ở giữa.

Điều này có thể không khác nhiều so với những gì đã kết xuất trước đó, nhưng cho phép tận dụng các tính năng khác trong Compose. Ví dụ: bạn có thể sử dụng kỹ thuật này để cắt một hình ảnh và áp dụng bóng xung quanh vùng được cắt:

val hexagon = remember {
    RoundedPolygon(
        6,
        rounding = CornerRounding(0.2f)
    )
}
val clip = remember(hexagon) {
    RoundedPolygonShape(polygon = hexagon)
}
Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center
) {
    Image(
        painter = painterResource(id = R.drawable.dog),
        contentDescription = "Dog",
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .graphicsLayer {
                this.shadowElevation = 6.dp.toPx()
                this.shape = clip
                this.clip = true
                this.ambientShadowColor = Color.Black
                this.spotShadowColor = Color.Black
            }
            .size(200.dp)

    )
}
ShapesSnippets.kt

Hình 11. Đã áp dụng hình dạng tuỳ chỉnh làm đoạn video.

Nút biến đổi khi nhấp vào

Bạn có thể sử dụng thư viện graphics-shape để tạo một nút biến đổi giữa hai hình dạng khi nhấn. Trước tiên, hãy tạo một MorphPolygonShape mở rộng Shape, điều chỉnh tỷ lệ và dịch chuyển cho phù hợp. Lưu ý việc truyền tiến trình để hình dạng có thể tạo ảnh động:

class MorphPolygonShape(
    private val morph: Morph,
    private val percentage: Float
) : Shape {

    private val matrix = Matrix()
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        // Below assumes that you haven't changed the default radius of 1f, nor the centerX and centerY of 0f
        // By default this stretches the path to the size of the container, if you don't want stretching, use the same size.width for both x and y.
        matrix.scale(size.width / 2f, size.height / 2f)
        matrix.translate(1f, 1f)

        val path = morph.toPath(progress = percentage).asComposePath()
        path.transform(matrix)
        return Outline.Generic(path)
    }
}
ShapesSnippets.kt

Để sử dụng hình dạng biến đổi này, hãy tạo hai đa giác, shapeA và shapeB. Tạo và ghi nhớ Morph. Sau đó, áp dụng hiệu ứng biến đổi cho nút dưới dạng đường viền của đoạn video, sử dụng interactionSource khi nhấn làm động lực cho ảnh động:

val shapeA = remember {
    RoundedPolygon(
        6,
        rounding = CornerRounding(0.2f)
    )
}
val shapeB = remember {
    RoundedPolygon.star(
        6,
        rounding = CornerRounding(0.1f)
    )
}
val morph = remember {
    Morph(shapeA, shapeB)
}
val interactionSource = remember {
    MutableInteractionSource()
}
val isPressed by interactionSource.collectIsPressedAsState()
val animatedProgress = animateFloatAsState(
    targetValue = if (isPressed) 1f else 0f,
    label = "progress",
    animationSpec = spring(dampingRatio = 0.4f, stiffness = Spring.StiffnessMedium)
)
Box(
    modifier = Modifier
        .size(200.dp)
        .padding(8.dp)
        .clip(MorphPolygonShape(morph, animatedProgress.value))
        .background(Color(0xFF80DEEA))
        .size(200.dp)
        .clickable(interactionSource = interactionSource, indication = null) {
        }
) {
    Text("Hello", modifier = Modifier.align(Alignment.Center))
}
ShapesSnippets.kt

Điều này dẫn đến ảnh động sau đây khi người dùng nhấn vào hộp:

Hình 12. Hiệu ứng biến đổi được áp dụng dưới dạng một lượt nhấp giữa hai hình dạng.

Tạo ảnh động biến đổi hình dạng vô hạn

Để tạo ảnh động vô tận cho hình dạng biến đổi, hãy sử dụng rememberInfiniteTransition. Dưới đây là ví dụ về ảnh hồ sơ thay đổi hình dạng (và xoay) vô hạn theo thời gian. Phương pháp này điều chỉnh một chút đối với MorphPolygonShape nêu trên:

class CustomRotatingMorphShape(
    private val morph: Morph,
    private val percentage: Float,
    private val rotation: Float
) : Shape {

    private val matrix = Matrix()
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        // Below assumes that you haven't changed the default radius of 1f, nor the centerX and centerY of 0f
        // By default this stretches the path to the size of the container, if you don't want stretching, use the same size.width for both x and y.
        matrix.scale(size.width / 2f, size.height / 2f)
        matrix.translate(1f, 1f)
        matrix.rotateZ(rotation)

        val path = morph.toPath(progress = percentage).asComposePath()
        path.transform(matrix)

        return Outline.Generic(path)
    }
}

@Preview
@Composable
private fun RotatingScallopedProfilePic() {
    val shapeA = remember {
        RoundedPolygon(
            12,
            rounding = CornerRounding(0.2f)
        )
    }
    val shapeB = remember {
        RoundedPolygon.star(
            12,
            rounding = CornerRounding(0.2f)
        )
    }
    val morph = remember {
        Morph(shapeA, shapeB)
    }
    val infiniteTransition = rememberInfiniteTransition("infinite outline movement")
    val animatedProgress = infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 1f,
        animationSpec = infiniteRepeatable(
            tween(2000, easing = LinearEasing),
            repeatMode = RepeatMode.Reverse
        ),
        label = "animatedMorphProgress"
    )
    val animatedRotation = infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 360f,
        animationSpec = infiniteRepeatable(
            tween(6000, easing = LinearEasing),
            repeatMode = RepeatMode.Reverse
        ),
        label = "animatedMorphProgress"
    )
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Image(
            painter = painterResource(id = R.drawable.dog),
            contentDescription = "Dog",
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .clip(
                    CustomRotatingMorphShape(
                        morph,
                        animatedProgress.value,
                        animatedRotation.value
                    )
                )
                .size(200.dp)
        )
    }
}
ShapesSnippets.kt

Mã này cho ra kết quả thú vị sau:

Hình 13. Ảnh hồ sơ được cắt theo hình dạng vỏ sò xoay.

Đa giác tuỳ chỉnh

Nếu hình dạng được tạo từ đa giác đều không phù hợp với trường hợp sử dụng của bạn, thì bạn có thể tạo hình dạng tuỳ chỉnh hơn bằng danh sách đỉnh. Ví dụ: bạn có thể muốn tạo hình trái tim như sau:

Hình 14. Hình trái tim.

Bạn có thể chỉ định từng đỉnh của hình dạng này bằng cách sử dụng phương thức nạp chồng RoundedPolygon lấy một mảng số thực của toạ độ x, y.

Để chia nhỏ đa giác hình trái tim, hãy lưu ý rằng hệ toạ độ cực để chỉ định các điểm giúp việc này dễ dàng hơn so với việc sử dụng hệ toạ độ Descartes (x,y), trong đó 0° bắt đầu ở bên phải và tiếp tục theo chiều kim đồng hồ, với 270° ở vị trí 12 giờ:

Hình 15. Hình trái tim có toạ độ.

Giờ đây, bạn có thể xác định hình dạng theo cách dễ dàng hơn bằng cách chỉ định góc (𝜭) và bán kính từ tâm tại mỗi điểm:

Hình 16. Hình trái tim có toạ độ, không bo tròn.

Bây giờ, bạn có thể tạo các đỉnh và truyền đến hàm RoundedPolygon:

val vertices = remember {
    val radius = 1f
    val radiusSides = 0.8f
    val innerRadius = .1f
    floatArrayOf(
        radialToCartesian(radiusSides, 0f.toRadians()).x,
        radialToCartesian(radiusSides, 0f.toRadians()).y,
        radialToCartesian(radius, 90f.toRadians()).x,
        radialToCartesian(radius, 90f.toRadians()).y,
        radialToCartesian(radiusSides, 180f.toRadians()).x,
        radialToCartesian(radiusSides, 180f.toRadians()).y,
        radialToCartesian(radius, 250f.toRadians()).x,
        radialToCartesian(radius, 250f.toRadians()).y,
        radialToCartesian(innerRadius, 270f.toRadians()).x,
        radialToCartesian(innerRadius, 270f.toRadians()).y,
        radialToCartesian(radius, 290f.toRadians()).x,
        radialToCartesian(radius, 290f.toRadians()).y,
    )
}
ShapesSnippets.kt

Các đỉnh cần được chuyển đổi thành toạ độ Descartes bằng hàm radialToCartesian này:

internal fun Float.toRadians() = this * PI.toFloat() / 180f

internal val PointZero = PointF(0f, 0f)
internal fun radialToCartesian(
    radius: Float,
    angleRadians: Float,
    center: PointF = PointZero
) = directionVectorPointF(angleRadians) * radius + center

internal fun directionVectorPointF(angleRadians: Float) =
    PointF(cos(angleRadians), sin(angleRadians))
ShapesSnippets.kt

Đoạn mã trước cung cấp cho bạn các đỉnh thô của hình trái tim, nhưng bạn cần làm tròn các góc cụ thể để có được hình trái tim đã chọn. Các góc tại 90° và 270° không được bo tròn, nhưng các góc khác thì có. Để bo tròn tuỳ chỉnh cho từng góc, hãy sử dụng tham số perVertexRounding:

val rounding = remember {
    val roundingNormal = 0.6f
    val roundingNone = 0f
    listOf(
        CornerRounding(roundingNormal),
        CornerRounding(roundingNone),
        CornerRounding(roundingNormal),
        CornerRounding(roundingNormal),
        CornerRounding(roundingNone),
        CornerRounding(roundingNormal),
    )
}

val polygon = remember(vertices, rounding) {
    RoundedPolygon(
        vertices = vertices,
        perVertexRounding = rounding
    )
}
Box(
    modifier = Modifier
        .drawWithCache {
            val roundedPolygonPath = polygon.toPath().asComposePath()
            onDrawBehind {
                scale(size.width * 0.5f, size.width * 0.5f) {
                    translate(size.width * 0.5f, size.height * 0.5f) {
                        drawPath(roundedPolygonPath, color = Color(0xFFF15087))
                    }
                }
            }
        }
        .size(400.dp)
)
ShapesSnippets.kt

Điều này dẫn đến trái tim màu hồng:

Hình 17. Kết quả hình trái tim.

Nếu các hình dạng trước đó không phù hợp với trường hợp sử dụng của bạn, hãy cân nhắc sử dụng lớp Path để vẽ hình dạng tuỳ chỉnh hoặc tải tệp ImageVector từ ổ đĩa. Thư viện graphics-shapes không dùng cho các hình dạng tuỳ ý, mà chỉ dùng để đơn giản hoá việc tạo đa giác tròn và ảnh động biến đổi giữa các đa giác đó.

Tài nguyên khác

Để biết thêm thông tin và ví dụ, hãy xem các tài nguyên sau:

• Blog: Hình dạng của những điều sắp tới – Hình dạng
• Blog: Biến đổi hình dạng trong Android
• Bản minh hoạ về hình dạng trên GitHub