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

形状にクリップされた画像を表示する

画像を切り抜いた図形に合わせ、図形の周囲に影を描画して立体感を出すことができます。この手法は、アバターや商品のサムネイルなどのデザインを作成したり、カスタムシェイプのロゴを表示したりする場合に便利です。

図形にクリップされた画像を表示するには、次の操作を行う必要があります。

シェイプを作成します。
画像をシェイプにクリップします。

結果

六角形の中にいる犬。六角形の縁に影が付けられている — **図 1.** カスタムシェイプがクリップとして適用されました。

バージョンの互換性

この実装では、プロジェクトの minSDK を API レベル 21 以上に設定する必要があります。

依存関係

シェイプを作成する

次のコードは、丸みを帯びたポリゴンを動的に描画してレンダリングできるカスタムシェイプを作成します。

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

コードに関する主なポイント

RoundedPolygon.getBounds() は、RoundedPolygon クラスの拡張関数を定義して、その境界を計算します。
RoundedPolygonShape クラスは Shape インターフェースを実装しており、Jetpack Compose でカスタムシェイプ（丸みを帯びたポリゴン）を定義できます。
シェイプは Matrix を使用して、柔軟なレンダリングのためのスケーリングと変換のオペレーションを管理します。
createOutline() 関数は RoundedPolygon オブジェクトを受け取り、指定されたサイズに収まるようにスケーリングして変換し、描画される最終的な形状を記述する Outline オブジェクトを返します。

画像を特定の形にクリップする

次のコードでは、画像を六角形に切り抜き、わずかなドロップシャドウを追加して奥行きを出しています。

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

コードに関する主なポイント

RoundedPolygon オブジェクトと RoundedPolygonShape オブジェクトは、画像に六角形を定義して適用するために使用されます。
このコードでは、graphicsLayer を使用して、画像に高度ベースのシャドウを追加しています。これにより、奥行きが生まれ、背景から視覚的に分離されます。
remember ブロックを使用すると、シェイプとクリッピングの定義が 1 回だけ計算され、UI の後続の再コンポーズのために記憶されるため、パフォーマンスが最適化されます。