Разработка
Поваренная книга 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)) } }
Предварительный просмотр для этого представления должен выглядеть следующим образом:
В этом примере имеется представление 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 } }
Предварительный просмотр для этого представления должен выглядеть следующим образом:
В этом примере мы имеем VStack
, содержащий несколько представлений Text
, каждое из которых имеет свой модификатор clipShape
.
Первое текстовое представление обрезается по форме круга с помощью Circle
. Второе текстовое представление привязывается к форме эллипса с помощью Ellipse
. Третий вид текста обрезается по форме капсулы с помощью Capsule
.
Наконец, четвертое текстовое представление демонстрирует обрезку по пользовательской форме. Вы определяете структуру CustomShape
, соответствующую протоколу Shape
, и реализуете метод path(in rect: CGRect)
для описания желаемой формы. В данном случае создается простая треугольная форма.
Применяя модификатор clipShape
с различными типами фигур, можно добиться различных эффектов обрезки, что позволяет создавать уникальные и креативные дизайны.
Не стесняйтесь экспериментировать с другими типами фигур и настраивать радиус угла или размеры фигур в соответствии со своими требованиями. Возможности обрезки в SwiftUI являются мощным инструментом формирования и преобразования представлений для создания визуально привлекательных пользовательских интерфейсов.
Предложите исправление: выделите текст и нажмите Ctrl+ Enter
← Предыдущая статья: Тени
-
Новости1 месяц назад
Видеозвонки с Лили, Приключения и пианино — обновления Duolingo
-
Новости1 месяц назад
Видео и подкасты о мобильной разработке 2024.39
-
Видео и подкасты для разработчиков4 недели назад
Lua – идеальный встраиваемый язык
-
Новости4 недели назад
Poolside, занимающийся ИИ-программированием, привлек $500 млн