Всем привет! Меня зовут Андрей. Я работаю iOS разработчиком в MAD Studio чуть больше года. Если вы только начинаете свой путь в iOS разработке, то этот блог для вас. Здесь я хочу поделиться полученным опытом с начинающими (как и я) iOS разработчиками, а также раскрывать темы, которые вас больше всего интересуют, поэтому в конце каждого блога будет опрос для того чтобы выбрать следующую тему обсуждения (Juniors Talks).
Открываю серию блогов на тему: “Прохождение тернистого пути к заветной мечте – Senior разработчик”.
Если вы уже опытный разработчик, то вам дальше, ничего нового уже не узнаете 🙂 Хотя, если вы все-таки будете читать, то будем рады услышать ваши советы.
Первое с чего стоит начать, если вы вообще ничего не знаете в этой области, это изучение данных ресурсов:
- https://swiftbook.ru/contents/doc/ – переведенная на русский язык английская документация от Apple;
- https://www.raywenderlich.com/ios/ – на самом интернет ресурсе есть много полезных уроков, а также стоит сначала обратить внимание на книжки, мне в свое время помогла «iOS Apprentice».
Любой экран в первую очередь начинается с создания интерфейса (верстки), поэтому и мы эту серию блогов начнем с верстки.
Разберем два способа создания интерфейса:
- Работая в Interface builder;
- Программно.
В обоих случаях используются constraints (ограничения).
Когда вы используете ограничения, то вам больше не надо переживать на каком размере экрана будет отображаться ваш интерфейс. Auto Layout динамически вычисляет размер и позицию всех views в иерархии superview, работая с теми ограничениями, которые вы установили для каждого элемента интерфейса.
Первый способ полезен тем, что вы можете наглядно видеть, что к чему и как привязываете.
Всем скучно читать теорию, поэтому перейдем к практике.
Допустим, у нас задача расположить на экране 7 одинаковых по размеру элементов, как на рисунке ниже.
- Стараемся расположить элементы согласно дизайну, пока не привязывая их;
- Все 7 views должны быть привязаны друг к другу по trailing & leading space constraints. Крайние должны быть привязаны к superView.
- Каждый элемент должен быть равен другому, в этом нам поможет Equal Width & Equal Height, которые проставляются друг на друга. Если вам нужна неизменная высота, то установите height constraint;
- Берем любую view и привязываем Equal Width к superView, элементы будут обладать шириной равной ширине экрана, но в нашем примере view должна обладать шириной равной 1/7 от ширины экрана. Для этого переходим в редактирование добавленного ограничения и в поле multiplier устанавливаем значение 1 : 7;
- Элементы должны располагаться на одном уровне, для этого соседние элементы должны быть привязаны по vertically in container constraint.
Я покажу, как программно реализовать такую же логику, только уже для 2х UIView.
// 1 lazy var firstView: UIView = { let view = UIView() view.translatesAutoresizingMaskIntoConstraints = false view.backgroundColor = .red return view }() lazy var secondView: UIView = { let view = UIView() view.translatesAutoresizingMaskIntoConstraints = false view.backgroundColor = .blue return view }() override func awakeFromNib() { super.awakeFromNib() //2 addSubview(firstView) addSubview(secondView) //3 translatesAutoresizingMaskIntoConstraints = false //4 let constraints = [ firstView.topAnchor.constraint(equalTo: self.topAnchor), firstView.bottomAnchor.constraint(equalTo: self.bottomAnchor), firstView.leftAnchor.constraint(equalTo: self.leftAnchor), firstView.rightAnchor.constraint(equalTo: secondView.leftAnchor), secondView.rightAnchor.constraint(equalTo: self.rightAnchor), firstView.widthAnchor.constraint(equalTo: secondView.widthAnchor), firstView.widthAnchor.constraint(equalTo: self.widthAnchor, multiplier: 1/2), firstView.heightAnchor.constraint(equalTo: secondView.heightAnchor), firstView.centerYAnchor.constraint(equalTo: secondView.centerYAnchor), firstView.heightAnchor.constraint(equalToConstant: 40) ] NSLayoutConstraint.activate(constraints)
- Объявляем две новые views. При объявлении задавайте нужные вам свойства, но обязательное свойство translatesAutoresizingMaskIntoConstraints устанавливается false иначе вы не увидите желаемого результата;
- Добавляем объявленные views;
- У корневого view также отключаем транслирование автоизменения размера;
- Создаем массив ограничений.
Результаты:
В этой статье мы узнали (кто-то повторил) что такое constraints и как ими пользоваться в реальной жизни. Увидели, что нет ничего страшного верстать программно, только не забывайте про отключать translatesAutoresizingMask.
Интересные ресурсы для прочтения и просмотра:
- https://www.raywenderlich.com/811496-auto-layout-tutorial-in-ios-getting-started
- https://www.youtube.com/watch?v=wn4YLDa_6e4
- https://medium.com/@brianclouser/swift-3-creating-a-custom-view-from-a-xib-ecdfe5b3a960
- https://theswiftdev.com/2018/06/14/mastering-ios-auto-layout-anchors-programmatically-from-swift/
- https://www.raywenderlich.com/492-adaptive-layout-tutorial-in-ios-11-getting-started