Запуск Auto Layout программно |

Я опубликовал пост для сравнения Auto Layout Programmatically и Storyboard и получил много просмотров. В этой теме вообще нет правильного ответа. Это зависит от вас и вашего опыта.

Я не мог жить без раскадровки, пока не нашел боль в раскадровке. Сегодня я расскажу вам, как я начал использовать Auto Layout Programmatically (ALP) и как я использую его каждый день в проектах своей компании.

Я следовал некоторым курсам из Давайте создадим это приложение и научился использовать код ALP по умолчанию от Apple. Действительно хороший источник для начала ALP.

Сегодня я покажу, как использовать ALP тремя разными способами. Я реализую этот экран тремя способами, и вы можете выбрать лучший для себя.

Давай сделаем это.

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

let imgView = UIImageView(image: UIImage(named: "air_balloon"))
imgView.translatesAutoresizingMaskIntoConstraints = false
imgView.contentMode = .scaleAspectFill

let termLabel = UILabel()
termLabel.translatesAutoresizingMaskIntoConstraints = false
termLabel.textAlignment = .center
termLabel.numberOfLines = 0
termLabel.text = "By signing up, you agree to our Terms & Privacy Policy"
termLabel.textColor = .white

let fbLoginButton = UIButton()
fbLoginButton.translatesAutoresizingMaskIntoConstraints = false
fbLoginButton.setTitle("Login with Facebook", for: .normal)
fbLoginButton.setTitleColor(.white, for: .normal)
fbLoginButton.backgroundColor = UIColor(red: 123/255, green: 107/255, blue: 173/255, alpha: 1)

let registerEmailButton = UIButton()
registerEmailButton.translatesAutoresizingMaskIntoConstraints = false
registerEmailButton.setTitle("Sign up with email", for: .normal)
registerEmailButton.setTitleColor(.white, for: .normal)
registerEmailButton.backgroundColor = UIColor(red: 163/255, green: 128/255, blue: 190/255, alpha: 1)

let loginButton = UIButton()
loginButton.translatesAutoresizingMaskIntoConstraints = false
loginButton.setTitle("I already have an account", for: .normal)
loginButton.setTitleColor(.white, for: .normal)
loginButton.backgroundColor = UIColor(red: 171/255, green: 163/255, blue: 177/255, alpha: 1)

Синтаксис по умолчанию от Apple. Довольно стандартно и важно. Вы должны полностью понять этот синтаксис. Никогда не полагайтесь на 100% ни от каких библиотек.

view.addSubview(imgView)
imgView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
imgView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
imgView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
imgView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true


view.addSubview(termLabel)
termLabel.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 16).isActive = true
termLabel.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -16).isActive = true


view.addSubview(fbLoginButton)
fbLoginButton.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
fbLoginButton.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
fbLoginButton.heightAnchor.constraint(equalToConstant: 64).isActive = true


view.addSubview(registerEmailButton)
registerEmailButton.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
registerEmailButton.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
registerEmailButton.heightAnchor.constraint(equalToConstant: 64).isActive = true


view.addSubview(loginButton)
loginButton.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
loginButton.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
loginButton.heightAnchor.constraint(equalToConstant: 48).isActive = true
loginButton.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

registerEmailButton.bottomAnchor.constraint(equalTo: loginButton.topAnchor).isActive = true
fbLoginButton.bottomAnchor.constraint(equalTo: registerEmailButton.topAnchor).isActive = true
termLabel.bottomAnchor.constraint(equalTo: fbLoginButton.topAnchor, constant: -16).isActive = true

Плюсы

• Способы по умолчанию, не зависящие от каких-либо библиотек
• Вы помните синтаксис.

Минусы

• Скучно: вводите или копируйте/вставляйте одни и те же вещи много раз.
• Много строк кода.

Заметки

• Вы можете добавить функции, чтобы сократить код. Я оставляю это для вас.
• Важный: Вы должны понять, как работает синтаксис по умолчанию, прежде чем переходить к любым библиотекам.

Snapkit очень популярен и имеет 14 245 звезд на Github. Вы можете попробовать некоторые альтернативные библиотеки

view.addSubview(imgView)
imgView.snp.makeConstraints({ (make) in
    make.left.equalToSuperview()
    make.right.equalToSuperview()
    make.top.equalToSuperview()
    make.bottom.equalToSuperview()
})


view.addSubview(termLabel)
termLabel.snp.makeConstraints { (make) in
    make.left.equalToSuperview().offset(16)
    make.right.equalToSuperview().offset(-16)
}


view.addSubview(fbLoginButton)
fbLoginButton.snp.makeConstraints { (make) in
    make.left.equalToSuperview()
    make.right.equalToSuperview()
    make.height.equalTo(64)
}


view.addSubview(registerEmailButton)
registerEmailButton.snp.makeConstraints { (make) in
    make.left.equalToSuperview()
    make.right.equalToSuperview()
    make.height.equalTo(64)
}


view.addSubview(loginButton)
loginButton.snp.makeConstraints { (make) in
    make.left.equalToSuperview()
    make.right.equalToSuperview()
    make.bottom.equalToSuperview()
    make.height.equalTo(32)
}

registerEmailButton.snp.makeConstraints { (make) in
    make.bottom.equalTo(loginButton.snp.top)
}

fbLoginButton.snp.makeConstraints { (make) in
    make.bottom.equalTo(registerEmailButton.snp.top)
}

termLabel.snp.makeConstraints { (make) in
    make.bottom.equalTo(fbLoginButton.snp.top).inset(-16)
}

Плюсы

• Гораздо лучше, более короткий синтаксис
• Легче читать

Минусы

• Иметь посредника snp. Не круто со мной
• Есть закрытие для настройки макета
• Одиночные ограничения не соответствуют хорошему синтаксису.

Честно говоря, на написание этого расширения повлиял Роберт-Хейн Хоойманс. Нравится, как он пишет свою библиотеку, TinyConstraint.

Я делаю что-то другое в своем расширении и сокращаю синтаксис.

view.addSubviews(views: imgView, termLabel, fbLoginButton, registerEmailButton, loginButton)
imgView.fill(toView: view)

termLabel.horizontal(toView: view, space: 16)
termLabel.verticalSpacingDown(toView: fbLoginButton, space: -16)

fbLoginButton.horizontal(toView: view)
fbLoginButton.height(64)
fbLoginButton.verticalSpacingDown(toView: registerEmailButton)

registerEmailButton.horizontal(toView: view)
registerEmailButton.height(64)
registerEmailButton.verticalSpacingDown(toView: loginButton)

loginButton.horizontal(toView: view)
loginButton.bottom(toView: view)
loginButton.height(32)

Плюсы

• Очень короткий синтаксис
• Читается легко, как короткий абзац.

Минусы

• Какой-то новый термин вроде horizontal, vertical, verticalSpacing, verticalSpacingDown

Я покажу вам 3 различных способа настройки Auto Layout по коду. Во всех отношениях есть плюсы и минусы.
Выберите удобный для вас способ запуска Auto Layout программно.
Вы можете скачать демо на мой гитхаб.

Наслаждайтесь программированием