Wyświetlanie obrazu przyciętego do kształtu

Możesz dopasować obraz do wyciętego kształtu i narysować cienie wokół jego obwodu, aby nadać mu trójwymiarowy charakter. Ta technika jest przydatna do tworzenia projektów takich jak awatary i miniatury produktów lub wyświetlania logo z niestandardowymi kształtami.

Aby wyświetlić obraz przycięty do kształtu, wykonaj te czynności:

• Utwórz kształt.
• Przytnij obraz do kształtu.

Zgodność wersji

Ta implementacja wymaga, aby minimalna wersja pakietu SDK projektu była ustawiona na poziom API 21 lub wyższy.

Zależności

Tworzenie kształtu

Podany niżej kod tworzy kształt niestandardowy, który może dynamicznie rysować i renderować zaokrąglony wieloką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

Najważniejsze informacje o kodzie

• Funkcja RoundedPolygon.getBounds() definiuje funkcję rozszerzenia klasy RoundedPolygon, aby obliczyć jej granice.
• Klasa RoundedPolygonShape implementuje interfejs Shape, dzięki czemu możesz zdefiniować niestandardowy kształt (zaokrąglony wielokąt) w Jetpack Compose.
• Kształt używa Matrix do zarządzania operacjami skalowania i translacji na potrzeby elastycznego renderowania.
• Funkcja createOutline() przyjmuje obiekt RoundedPolygon, skaluje go i przesuwa, aby pasował do danego rozmiaru, a następnie zwraca obiekt Outline, który opisuje ostateczny kształt do narysowania.

Przycinanie obrazu do kształtu

Ten kod przycina obraz do sześciokąta i dodaje subtelny cień, aby nadać obrazowi głębi:

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

Najważniejsze informacje o kodzie

• Obiekty RoundedPolygon i RoundedPolygonShape służą do definiowania i zastosowywania na obrazie sześciokąta.
• Kod używa funkcji graphicsLayer, aby dodać do obrazu cień na podstawie wysokości. Daje to poczucie głębi i wizualnego oddzielenia od tła.
• Korzystanie z bloków remember optymalizuje wydajność, ponieważ definicje kształtu i przycinania są obliczane tylko raz i zapamiętywane na potrzeby późniejszych rekompozycji interfejsu.

Wyniki

Kolekcje zawierające ten przewodnik

Ten przewodnik należy do tych kolekcji krótkich przewodników, które obejmują szersze zagadnienia związane z tworzeniem aplikacji na Androida:

Wyświetl obrazy

Poznaj techniki tworzenia jasnych i przyciągających uwagę elementów wizualnych, które nadadzą Twojej aplikacji na Androida atrakcyjny wygląd.

Kolekcja krótkich przewodników

Masz pytania lub chcesz przekazać opinię?

Otwórz stronę z najczęstszymi pytaniami i poznaj krótkie przewodniki lub skontaktuj się z nami i powiedz nam, co o tym myślisz.

Najczęstsze pytania Prześlij opinię