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

Хотелось ли вам когда-нибудь создать View с уникальной формой, например, в виде закругленного прямоугольника или круга? SwiftUI предоставляет простой способ добиться этого с помощью обрезки (clipping) представления.

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

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

struct ContentView: View {
  var body: some View {
    Text("Hello, ClipShape!")
      .font(.largeTitle)
      .padding()
      .background(Color.blue)
      .foregroundColor(.white)
      .clipShape(RoundedRectangle(cornerRadius: 20))
  }
}

struct ContentView: View {

  var body: some View {

    Text("Hello, ClipShape!")

      .font(.largeTitle)

      .padding()

      .background(Color.blue)

      .foregroundColor(.white)

      .clipShape(RoundedRectangle(cornerRadius: 20))

  }

}

​

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

Пример обрезания формы представления в SwiftUI.

В этом примере имеется представление Text, в котором отображается текст «Hello, ClipShape!». Применяются различные модификаторы, чтобы придать тексту стиль, установить синий фон и сделать текст белым.

Интересным является модификатор .clipShape(RoundedRectangle(cornerRadius: 20)). Это привязывает View к форме скругленного прямоугольника с радиусом угла 20.

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

Вот что происходит за кулисами. Обрезать вид — значит определить его видимую область. В предыдущем примере модификатор clipShape обрезает вид, применяя форму скругленного прямоугольника. Видимой будет только та часть вида, которая находится в границах скругленного прямоугольника.

Другие примеры обрезания представлений

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

struct ContentView: View {
  var body: some View {
    VStack(spacing: 20) {
      Text("Circle")
        .frame(width: 200, height: 100)
        .font(.title)
        .padding()
        .background(.orange)
        .foregroundColor(.white)
        .clipShape(Circle())

      Text("Ellipse")
        .frame(width: 200, height: 100)
        .font(.title)
        .padding()
        .background(.green)
        .foregroundColor(.white)
        .clipShape(Ellipse())

      Text("Capsule")
        .frame(width: 200, height: 100)
        .font(.title)
        .padding()
        .background(.purple)
        .foregroundColor(.white)
        .clipShape(Capsule())

      Text("Custom")
        .frame(width: 200, height: 100)
        .font(.title)
        .padding()
        .background(.yellow)
        .foregroundColor(.black)
        .clipShape(CustomShape())
    }
  }
}

struct CustomShape: Shape {
  func path(in rect: CGRect) -> Path {
    var path = Path()
    path.move(to: CGPoint(x: rect.midX, y: rect.minY))
    path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
    path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
    path.closeSubpath()
    return path
  }
}

xxxxxxxxxx

struct ContentView: View {

  var body: some View {

    VStack(spacing: 20) {

      Text("Circle")

        .frame(width: 200, height: 100)

        .font(.title)

        .padding()

        .background(.orange)

        .foregroundColor(.white)

        .clipShape(Circle())

​

      Text("Ellipse")

        .frame(width: 200, height: 100)

        .font(.title)

        .padding()

        .background(.green)

        .foregroundColor(.white)

        .clipShape(Ellipse())

​

      Text("Capsule")

        .frame(width: 200, height: 100)

        .font(.title)

        .padding()

        .background(.purple)

        .foregroundColor(.white)

        .clipShape(Capsule())

​

      Text("Custom")

        .frame(width: 200, height: 100)

        .font(.title)

        .padding()

        .background(.yellow)

        .foregroundColor(.black)

        .clipShape(CustomShape())

    }

  }

}

​

struct CustomShape: Shape {

  func path(in rect: CGRect) -> Path {

    var path = Path()

    path.move(to: CGPoint(x: rect.midX, y: rect.minY))

    path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))

    path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))

    path.closeSubpath()

    return path

  }

}

​

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

Другие примеры клиппинга в SwiftUI.

В этом примере мы имеем VStack, содержащий несколько представлений Text, каждое из которых имеет свой модификатор clipShape.

Первое текстовое представление обрезается по форме круга с помощью Circle. Второе текстовое представление привязывается к форме эллипса с помощью Ellipse. Третий вид текста обрезается по форме капсулы с помощью Capsule.

Наконец, четвертое текстовое представление демонстрирует обрезку по пользовательской форме. Вы определяете структуру CustomShape, соответствующую протоколу Shape, и реализуете метод path(in rect: CGRect) для описания желаемой формы. В данном случае создается простая треугольная форма.

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

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

Предложите исправление: выделите текст и нажмите Ctrl+ Enter

← Предыдущая статья: Тени

Источник