Wyświetlanie obrazu przyciętego do kształtu

Możesz dopasować obraz do przyciętego kształtu i narysować cienie wokół jego obwodu, aby nadać mu trójwymiarowy wygląd. Ta technika jest przydatna do tworzenia projektów takich jak awatary i miniatury produktów czy wyświetlania logo o niestandardowych kształtach.

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

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

Wyniki

Pies w sześciokącie z cieniem na krawędziach
Rysunek 1. Kształt niestandardowy zastosowany jako klip.

Zgodność wersji

Ta implementacja wymaga, aby minimalny pakiet SDK projektu był ustawiony na poziom API 21 lub wyższy.

Zależności

Tworzenie kształtu

Poniższy kod tworzy niestandardowy kształt, 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)
    }
}

Najważniejsze informacje o kodzie

  • RoundedPolygon.getBounds() definiuje funkcję rozszerzenia w klasie RoundedPolygon, która oblicza jej granice.
  • Klasa RoundedPolygonShape implementuje interfejs Shape, co umożliwia zdefiniowanie niestandardowego kształtu (zaokrąglonego wielokąta) w Jetpack Compose.
  • Kształt używa Matrix do zarządzania operacjami skalowania i przesuwania w celu elastycznego renderowania.
  • Funkcja createOutline() przyjmuje obiekt RoundedPolygon, skaluje go i przekształca, aby dopasować go do danego rozmiaru, a następnie zwraca obiekt Outline, który opisuje ostateczny kształt do narysowania.

Przycinanie obrazu do kształtu

Poniższy kod przycina obraz do sześciokąta i dodaje subtelny cień, aby nadać mu 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)
    )
}

Najważniejsze informacje o kodzie

  • Obiekty RoundedPolygon i RoundedPolygonShape służą do definiowania i stosowania sześciokątnego kształtu do obrazu.
  • Kod używa graphicsLayer, aby dodać do obrazu cień na podstawie wysokości. Dzięki temu powstaje wrażenie głębi i wizualnego oddzielenia od tła.
  • Użycie bloków remember optymalizuje wydajność, ponieważ kształt i definicje przycinania są obliczane tylko raz i zapamiętywane na potrzeby późniejszych ponownych kompozycji interfejsu.

Kolekcje, które zawierają ten przewodnik

Ten przewodnik jest częścią tych wybranych kolekcji przewodników, które obejmują szersze cele związane z programowaniem na Androida:

Poznaj techniki wykorzystywania jasnych, atrakcyjnych elementów wizualnych, aby nadać aplikacji na Androida piękny wygląd i styl.
Zbiór krótkich przewodników

Masz pytania lub chcesz podzielić się opinią?

Odwiedź stronę z najczęstszymi pytaniami, aby zapoznać się z przewodnikami, lub skontaktuj się z nami i podziel się swoimi przemyśleniami.
Zobacz najczęstsze pytania Prześlij opinię