Отобразить изображение, обрезанное по контуру фигуры.

Вы можете подогнать изображение к обрезанной фигуре и нарисовать тени по периметру фигуры, чтобы придать ей трехмерный вид. Этот метод полезен для создания таких элементов дизайна, как аватары и миниатюры товаров, а также для отображения логотипов с использованием нестандартных форм.

Для отображения изображения, обрезанного по контуру фигуры, необходимо выполнить следующие действия:

  • Создайте фигуру.
  • Привяжите изображение к нужной фигуре.

Результаты

Собака в форме шестиугольника с тенью по краям.
Рисунок 1. Пользовательская фигура, примененная в качестве клипа.

Совместимость версий

Для данной реализации требуется, чтобы в вашем проекте был установлен уровень 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)
    }
}

Основные моменты, касающиеся кода.

  • 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)
    )
}

Основные моменты, касающиеся кода.

  • Объекты RoundedPolygon и RoundedPolygonShape используются для определения и применения шестиугольной формы к изображению.
  • В коде используется graphicsLayer для добавления тени к изображению, зависящей от высоты. Это создает ощущение глубины и визуальное отделение от фона.
  • Использование блоков remember оптимизирует производительность, гарантируя, что определения формы и обрезки вычисляются только один раз и запоминаются для последующего пересоставления пользовательского интерфейса.

Коллекции, содержащие это руководство

Данное руководство является частью подборки кратких руководств, охватывающих более широкие цели разработки под Android:

Узнайте о методах использования ярких и привлекательных визуальных элементов, которые придадут вашему Android-приложению красивый внешний вид и удобство использования.
Краткий справочник

Есть вопросы или отзывы?

Перейдите на страницу часто задаваемых вопросов и ознакомьтесь с краткими руководствами или свяжитесь с нами и поделитесь своими мыслями.
Перейти к разделу часто задаваемых вопросов Оставить отзыв