ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 10.01.2024
Просмотров: 52
Скачиваний: 1
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
STACKS AND SPACER
SHAPES AND STROKE
Круг:
Circle()
.stroke(Color.black, lineWidth: 2)
.frame(width: 44, height: 44)
Ellipse:
Ellipse()
.stroke(Color.black, lineWidth: 2)
.frame(width: 44, height: 88)
Прямоугольник:
Rectangle()
.foregroundColor(.blue)
.ignoresSafeArea()
Прямоугольниксзакругленнымиуглами:
RoundedRectangle(cornerRadius: 30, style: .continuous)
.fill(Color.green)
.frame(height: 44)
.overlay(Text("Sign up").bold())
Капусула:
Capsule()
.fill(Color.green)
.frame(height: 44)
.overlay(Text("Sign up").bold())
ZStack {
Rectangle()
.fill(Color.blue).ignoresSafeArea()
VStack {
Circle()
.stroke(Color.black, lineWidth: 2)
.frame(width: 44, height: 44)
Text("Meng To").bold()
Capsule()
.foregroundColor(Color.green)
.frame(height: 44)
.overlay(Text("Sign up"))
}
.padding()
.background(Color.white)
.clipShape(RoundedRectangle(cornerRadius: 25.0, style: .continuous))
.padding()
}
Боковая панель
Боковая панель
NavigationView {
List {
Label("Courses", systemImage: "book")
Label("Tutorials", systemImage: "square")
}
.navigationTitle("Learn")
}
Начальный экран и заголовок
Чтобы установить начальный экран, вам нужно объявить свой вид после списка.
NavigationView {
// List
HomeView()
}
Заголовок навигации устанавливается внутри этого представления.
struct HomeView: View {
var body: some View {
Text("Courses")
.navigationTitle("Courses")
}
}
Навигационная ссылка
Чтобы разрешить навигацию, вам нужно установить NavigationLink для каждого элемента списка.
NavigationLink(destination: HomeView()) {
Label("Courses", systemImage: "book")
}
Панель инструментов(Toolbar)
Navigation View Toolbar
NavigationView {
Text("My app")
.toolbar {
ToolbarItem {
Image(systemName: "person.crop.circle")
}
}
}
ToolbarItem Placement (Размещение элемента панели инструментов)
ToolbarItem(placement: .bottomBar) {
Button(action: {}) {
Image(systemName: "person.crop.circle")
}
}
ToolbarItemGroup (Группа элементов панели инструментов)
ToolbarItemGroup(placement: .confirmationAction) {
Image(systemName: "person")
Image(systemName: "ellipsis")
}
ToolbarItemGroup(placement: .bottomBar) {
Image(systemName: "person")
Spacer()
Image(systemName: "ellipsis")
Spacer()
Image(systemName: "trash")
}
Окончательный код
NavigationView {
Text("My app")
.toolbar {
ToolbarItemGroup(placement: .bottomBar) {
Image(systemName: "person")
HStack {
Image(systemName: "ellipsis")
Divider()
Image(systemName: "trash")
.frame(width: 32, height: 32)
.background(Color.blue)
.mask(Circle())
}
}
}
}
Image View
Изменение размера изображения
Image("Illustration")
.resizable()
Соотношение сторон
Image("Illustration")
.resizable()
.aspectRatio(contentMode: .fit)
Выравнивание кадра
Вы также можете выровнять изображение в пределах рамки.
Image("Illustration")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 200, height: 200, alignment: .center)
Safe Area Layout
Игнорировать безопасную зону
Для пользовательского фона обычно применяется ignoreSafeArea. По умолчанию это будет применяться ко всем сторонам: верхней , нижней , ведущей , конечной , всем сразу.
Color.blue.ignoresSafeArea()
Края безопасной зоны
Если вы хотите игнорировать только одно ребро, вы можете настроить значение ребра на .top, .bottom, .leading или .trailing.
Color.blue.ignoresSafeArea(.all, edges: .top)
Избегайте применения к контенту
Safe Area очень помогает вам справляться с проблемами пользовательского интерфейса, которые возникают из-за выемки и пробелов индикатора дома. Рекомендуется избегать применения ignoreSafeArea к содержимому. Вместо этого вы должны отделить элементы, которые игнорируют безопасную область, например фоновый элемент.
ZStack {
Color.blue.ignoresSafeArea()
VStack {
Text("SwiftUI for iOS 14")
.bold()
}
.frame(width: 300, height: 200)
.background(Color.white)
}
Max Width and Frame Alignment
Типичным способом выравнивания элементов является использование HStack + Spacer(). Однако для этого может потребоваться слишком много контейнеров, особенно если вы хотите выровнять по левому верхнему углу. Альтернативой является использование модификатора фрейма с maxWidth и выравниванием.
Стеки и альтернативы разделителям(StacksandSpacerAlternatives)
VStack {
HStack {
Image(systemName: "xmark")
.frame(width: 32, height: 32)
.background(Circle().stroke())
Spacer()
}
Spacer()
}
.padding()
Максимальная ширина и выравнивание(MaxWidth
andAlignment)
Используя модификатор кадра с maxWidth и maxHeight , установленными на бесконечность , и выравниванием , установленным на topTrailing , вы получите тот же результат.
Image(systemName: "xmark")
.frame(width: 32, height: 32)
.background(Circle().stroke())
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing)
.padding()
Наложение(Overlay)
Плавающую кнопку закрытия можно поместить в модификатор наложения, который помещает элемент над содержимым.
Rectangle()
.fill(Color.blue)
.overlay(
Image(systemName: "xmark")
.frame(width: 32, height: 32)
.background(Circle().stroke())
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing)
.padding()
)
Тени и непрозрачность цвета
Тени идеально подходят для добавления глубины пользовательскому интерфейсу. Когда ваш текст, кнопки и карточки слишком сильно сливаются с фоном, вы можете использовать тени, чтобы выделить их.
Тень по умолчанию
Использование модификатора тени со значением радиуса даст вам внешний вид тени iOS по умолчанию. Настройте радиус, чтобы сделать его меньше или больше.
RoundedRectangle(cornerRadius: 25)
.shadow(radius: 10)
Пользовательская тень и непрозрачность
Если вам нужны дополнительные параметры, вы можете изменить цвет, радиус, значения x и y. Один трюк, который я люблю использовать, это применение непрозрачности к полному цвету. Это даст вам максимальную гибкость для стилей и анимации.
.shadow(color: Color.black.opacity(0.3), radius: 20, x: 0, y: 10)
Множественные тени
Чтобы добавить несколько теней, вы можете использовать несколько модификаторов теней. Убедитесь, что комбинированные тени не слишком сильные, с непрозрачностью менее 50%. Чем светлее ваш фон, тем ниже должен быть этот процент. Мне лично нравится, когда радиус удваивается по оси y.
.shadow(color: Color.black.opacity(0.2), radius: 5, x: 0, y: 2)
.shadow(color: Color.pink.opacity(0.3), radius: 20, x: 0, y: 10)
Тень текста
Text("App of the day")
.font(.title).bold()
.foregroundColor(.white)
.shadow(radius: 20)
Цветовая тень
Используя технику «Цвет плюс непрозрачность», вы можете легко создавать тени, используя тот же цвет, что и цвет вашей карты.
.shadow(color: Color.pink.opacity(0.3), radius: 20, x: 0, y: 10)
Теперь у нас есть красивая карточка с хорошо контрастным текстом и свечением с помощью модификатора тени.
VStack {
Text("App of the day")
.font(.title).bold()
.foregroundColor(.white)
.shadow(radius: 20)
}
.frame(width: 300, height: 400)
.background(Color.pink)
.cornerRadius(20)
.shadow(color: Color.black.opacity(0.2), radius: 5, x: 0, y: 2)
.shadow(color: Color.pink.opacity(0.3), radius: 20, x: 0, y: 10)
Mask and Transparency (Маска и прозрачность)
Transparency Mask
Обрезка особенно хороша для маскировки контента, такого как текст и изображения. В этом примере и содержимое, и фон будут иметь непрозрачность 30%.
VStack {
Text("Mask and Transparency")
.font(.title3).bold()
}
.padding()
.background(Color.blue)
.mask(Color.black.opacity(0.3))
Альфа-градиентная маска
Отличная стратегия работы с контентом, который резко обрезается, — это применение непрозрачной градиентной маски. В этом примере мы маскируем содержимое, используя градиент сверху при непрозрачности 100%, вниз при непрозрачности 0%.
.mask(
LinearGradient(gradient: Gradient(colors: [Color.black, Color.black.opacity(0)]), startPoint: .top, endPoint: .bottom)
)
Окончательный макет
В этом примере макета мы применяем маску градиента к обрезанному содержимому, которое прекрасно адаптируется к фону.
struct ContentView: View {
var body: some View {
ZStack {
LinearGradient(gradient: Gradient(colors: [Color(#colorLiteral(red: 0.2196078449, green: 0.007843137719, blue: 0.8549019694, alpha: 1)), Color(#colorLiteral(red: 0.2588235438, green: 0.7568627596, blue: 0.9686274529, alpha: 1))]), startPoint: .topLeading, endPoint: .bottomTrailing)
.ignoresSafeArea()
VStack {
ForEach(0 ..< 5) { item in
Text("Mask and Transparency")
.font(.title3).bold()
.padding(.vertical)
.frame(maxWidth: .infinity, alignment: .leading)
Divider()
}
}
.frame(height: 300, alignment: .top)
.padding()
.background(Color.white)
.mask(
LinearGradient(gradient: Gradient(colors: [Color.black, Color.black, Color.black, Color.black.opacity(0)]), startPoint: .top, endPoint: .bottom)
)
.cornerRadius(30)
.padding()
}
}
}
Clip Shape and Smooth Corners (Форма зажима и сглаженные углы)
Карточка с закругленными углами
Начнем с простого макета с картой и фоном.
ZStack {
Color.blue.ignoresSafeArea()
VStack {
Text("SwiftUI for iOS 14")
.bold()
}
.frame(width: 300, height: 200)
.background(Color.white)
}
Круг в форме зажима
Вы можете использовать clipShape, чтобы замаскировать содержимое любой формы, например Circle или Capsule .
.clipShape(Circle())
Стиль углового радиуса Непрерывный
Чтобы применить непрерывные закругленные углы, которые повсеместно используются в iOS, используйте фигуру RoundedRectangle .
.clipShape(RoundedRectangle(cornerRadius: 25, style: .continuous))
Окончательный код
ZStack {
Color.blue.ignoresSafeArea()
VStack {
Text("SwiftUI for iOS 14")
.bold()
}
.frame(width: 300, height: 200)
.background(Color.white)
.clipShape(RoundedRectangle(cornerRadius: 25.0, style: .continuous))
}
Tab View Pagination (Пагинация просмотра вкладок)
Представление вкладок со стилем страницы
TabView имеет модификатор tabViewStyle, который позволяет создавать горизонтальную прокрутку с разбиением на страницы. В этом макете у нас есть 3 представления. Каждый из этих RoundedRectangle может быть заменен выделенным представлением.
TabView {
RoundedRectangle(cornerRadius: 30).padding()
RoundedRectangle(cornerRadius: 30).padding()
RoundedRectangle(cornerRadius: 30).padding()
}
.tabViewStyle(PageTabViewStyle())
Показать или скрыть точки
Вы можете установить indexDisplayMode для PageTabViewStyle на всегда, автоматически или никогда .
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
TabView {
RoundedRectangle(cornerRadius: 30)
.fill(Color.blue)
.padding()
RoundedRectangle(cornerRadius: 30)
.fill(Color.red)
.padding()
RoundedRectangle(cornerRadius: 30)
.fill(Color.purple)
.padding()
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
Lazy Stacks (Ленивые стеки)
Лучшая производительность
Ленивые стеки обеспечивают большую оптимизацию и лучший пользовательский интерфейс, поскольку элементы будут загружаться быстрее, только когда они видны. Для элементов, которые могут находиться за пределами экрана, следует использовать LazyVStack или LazyHStack вместо HStack и VStack.
ЛенивыйVStack
Чтобы проверить производительность, мы создаем 10 000 строк, расположенных вертикально, с помощью LazyVStack , встроенного в ScrollView. Вы заметите значительно лучшую производительность во время прокрутки и при начальной загрузке по сравнению с использованием VStack.
ScrollView {
LazyVStack(spacing: 16) {
ForEach(0 ..< 10000) { item in
RoundedRectangle(cornerRadius: 20)
.fill(Color.white)
.frame(height: 100)
.shadow(radius: 100)
}
}
.padding()
}
LazyVGrid
Так же, как LazyVStack, вы можете использовать LazyVGrid для загрузки ваших элементов, только когда они находятся в поле зрения.
ScrollView {
LazyVGrid(columns: [GridItem(.adaptive(minimum: 100))]) {
ForEach(0 ..< 10000) { item in
RoundedRectangle(cornerRadius: 20)
.fill(Color.white)
.frame(height: 100)
.shadow(radius: 100)
}
}
.padding()
}
Вид навигации
Оболочка представления навигации
На корневом уровне вашей навигационной структуры вы должны обернуть все внутри навигационного представления. Это автоматически создаст панель навигации. Обратите внимание, что вы должны сделать это только один раз, включая все дочерние представления.