Советы для не дизайнеров, как сделать ваше приложение iOS красивым
Наконец-то у меня появилось свободное время, чтобы испачкать руки с SwiftUI - это были приятные несколько часов! Я начал новый проект - приложение для macOS, исходный код которого скоро может быть открытым. Но пока я подготовил статью о масках и накладках.
Оверлей
Что оно делает? Он накладывает вторичный вид перед видом. Звучит так же, как хорошо известный ZStack, но на самом деле он немного отличается. Итак, давайте углубимся в детали.
Эта функция принимает overlay представление, которое представляет собой просто еще один объект, соответствующий протоколу View, а также выравнивание, которое по умолчанию установлено по центру. Поскольку в SwiftUI практически каждый элемент пользовательского интерфейса - это View, мы можем использовать его практически для всего, что захотим.
В чем преимущество его использования перед ZStack? Когда вы применяете overlay к представлению, родительское представление продолжает предоставлять характеристики макета для своего дочернего представления. Это означает, что наше overlay представление никоим образом не изменит родительский вид фрейма. Благодаря этому мы можем легко разместить вид поверх другого вида и сохранить его в его кадре. С ZStack нам пришлось бы проделать некоторую дополнительную работу, чтобы достичь того же результата.
Допустим, мы хотим разместить изображение поверх другого изображения, оставив верхнее изображение внутри рамки родительского изображения. С overlay это всего несколько строк кода.
Вот результат:
Мы могли бы сделать это и с ZStack, но это потребует дополнительной работы. С SwiftUI всегда есть несколько способов добиться того же. Вы можете выбрать метод, который вам больше всего нравится. Например, мы могли бы использовать background вместо overlay, хотя в некоторых случаях результат может немного отличаться, поскольку это изменит иерархию родитель-потомок, и другое изображение будет отвечать за характеристики макета.
В любом случае, давайте перейдем к masks, которые, на мой взгляд, более интересны.
Маска
Это простая функция, которая принимает в качестве параметра только mask (другое представление), но эффект намного интереснее! Например, мы можем легко сделать интересный mask и применить его к нашему изображению:
Это дает нам результат ниже:
Это всего лишь пятиминутный пример. Возможности безграничны, ваше воображение - единственный предел того, что вы можете создать!
Смешивание
Пришло время привести несколько примеров, которые действительно могут быть использованы в нашем реальном приложении - приложении, над которым я сейчас работаю.
Допустим, мы хотим создать текст с приятным эффектом, а не просто сплошным цветом, поскольку это было бы слишком просто. Я покажу вам, как использовать два метода, которые мы только что узнали, для получения такого градиентного текста:
Для этого нам понадобится градиент, который легко создать в SwiftUI:
Затем мы можем использовать Text в качестве маски для представления градиента, например:
Если вы попробуете, то заметите небольшую проблему. Как вы, возможно, помните, характеристики макета берутся из родительского представления - в данном случае градиента - поэтому он выглядит не так, как мы хотим. Как это исправить?
Мы можем использовать оверлей и маску вместе, чтобы подогнать их под фактический размер текста:
Здесь мы создаем прозрачный текст, на который накладывается градиентный текст, как показано выше. Благодаря этому размер рамки подходит под текст.
Есть много потрясающих эффектов, которые вы можете сделать с помощью этих двух простых методов и комбинируя их с другими представлениями, такими как изображения или что-то еще, что вы хотите.
Заключение
Я просто начал копаться в SwiftUI и начал с чего-то простого. Надеюсь, вы сочтете это полезным. Скоро появятся более сложные статьи.
Несмотря на то, что SwiftUI - довольно свежий фреймворк и иногда он может сбивать с толку, с его помощью уже можно создавать отличные пользовательские интерфейсы. Лучше всего то, что в большинстве случаев это сделать намного быстрее, чем в UIKit.
Если у вас есть отзывы, просто оставьте комментарий ниже.
Спасибо за чтение!
