Поваренная книга SwiftUI: добавление кастомной формы к представлению SwiftUI

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

Чтобы создать пользовательскую форму, необходимо создать новую структуру, соответствующую протоколу Shape. Протокол Shape требует, чтобы вы реализовали один метод: path(in rect: CGRect) -> Path. Метод path должен возвращать объект Path, определяющий форму.

Вот пример того, как создать пользовательскую форму:

struct DiamondShape: Shape {
  func path(in rect: CGRect) -> Path {
    var path = Path()
    let center = CGPoint(x: rect.width / 2, y: rect.height / 2)

    path.move(to: CGPoint(x: center.x, y: 0))
    path.addLine(to: CGPoint(x: rect.width, y: center.y))
    path.addLine(to: CGPoint(x: center.x, y: rect.height))
    path.addLine(to: CGPoint(x: 0, y: center.y))
    path.addLine(to: CGPoint(x: center.x, y: 0))

    return path
  }
}

В этом примере мы создаем структуру DiamondShape, соответствующую протоколу Shape. В методе path вы определяете серию точек и линий, чтобы нарисовать алмаз.

Создав пользовательскую форму, вы можете использовать ее в любом представлении, вызвав модификатор .fill() или .stroke() на представлении, передав в качестве аргумента свою форму. Вот пример использования DiamondShape в представлении:

struct ContentView: View {
  var body: some View {
    DiamondShape()
      .fill(Color.red)
      .frame(width: 200, height: 200)
  }
}

Теперь предварительный просмотр этого вида должен выглядеть следующим образом:

Пример кастомной формы в SwiftUI.

В этом примере мы создаем DiamondView, который использует пользовательскую фигуру DiamondShape и устанавливает красный цвет заливки. Мы также задаем представлению фиксированную ширину и высоту в 200 точек.

← Предыдущая статья: Создание кастомного модификатора представления

Источник