Запуск 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 программно.
Вы можете скачать демо на мой гитхаб.

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

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *