Автоматическая компоновка с раскадровкой и программно

Я начал разработку iOS как разработчик .NET. Мое первое впечатление, Раскадровка действительно очень интересная. 80% пользовательского интерфейса моих приложений встроены в раскадровку. Я не могу представить, как я могу разрабатывать iOS без Storyboard.

Есть много дискуссий о том, что Auto Layout with Storyboard или Programmatically лучше. Но никто не выигрывает. У каждого свой разум и убеждения.

Этот пост является моим личным мнением. Это написано разработчиком не может жить без раскадровки, и теперь он отказывается от нее.

3 причины почему он программно перешел на Auto Layout.

1. Слишком много шагов к изменениям

Я разработал очень хороший пользовательский интерфейс, подключил розетку, начал кодирование логики, закончил эту функцию. Однажды мне пришлось провести рефакторинг кода, и я нашел некоторое улучшение. Немного UILabel были жесты, следует изменить на UIButton. Ничего страшного, внес изменения. Что я сделал?

• Нашел UILabel нужно изменить
• Удаляйте по одному.
• Добавить новое UIButton
• Подключить новые розетки
• Настройте ограничения Auto Layout. (Это самый болезненный шаг, нужно настроить десятки ограничений)
• Найти и изменить другие вещи в коде

И когда я программно перешел на Auto Layout:

• Нашел UILabel нужно изменить
• Изменять UILabel к UIButton
• Найти и изменить другие вещи в коде

Намного проще, да? В частности, никаких изменений в настройке ограничений.

2. Open Storyboard — заноза в заднице

В моем первом проекте была огромная раскадровка, все-в-одном. Больше, чем 30 контроллеров были в 1 файл раскадровки. Это кошмар. Несколько раз у меня возникали конфликты с коммитами других участников. Устранение конфликтов в XML — еще один кошмар.

Слава богу, некоторые опытные разработчики рассказывают о разделении. Раскадровка должна содержать от 3 до 5 контроллеров, не более. Его следует разделить на функции, например, Membership Раскадровка содержит Landing, Register, Login Контроллеры или Password Контроллер содержит ForgotPassword, Confirmation, NewPassword Контроллеры. Это большое улучшение, которое спасло много жизней разработчикам iOS.

Это лучше, но не лучший выбор. Конфликты обычно возникают с Storyboard, и их нельзя избежать. Кроме того, список ограничений представляет собой беспорядок, действительно беспорядок, и его легко вывести из себя.

Вы можете обсудить выбор элемента управления и выбрать нужное ограничение вместо поиска в списке. Поверьте мне, много раз вы не можете этого сделать, и вскоре вы злитесь на это.

3. Динамическая настройка элемента управления с помощью Auto Layout программно.

Что бы вы сделали с этим элементом управления в раскадровке? Вы можете создать собственный вид с помощью 1 UILabel для названия, 1 UITextField для ввода текста и 1 UIView для подчеркивания, 1 UIButton для правой кнопки.

Как это использовать? Перетащите UIView для раскадровки выберите подкласс. Помните, это UIView. Вы должны получить доступ к экземпляру представления, текстовому полю и изменить свойства.

Но с Auto Layout программно это UITextField. Вы можете легко изменить textColor, font, backgroundColor. Опять же, это UITextField.

Вы можете увидеть, как я реализую этот обычай UITextField в knGistTextField

Слишком много кода в файле

Да, я должен признать это. В моем файле 600-700 строк кода. Но эту проблему легко решить с помощью Расширение. Почему бы нам не определить и не настроить ограничения в файле, (LoginControllerUI.swiftнапример) и переместить весь обработчик, логику в новый файл, LoginControllerHandler.swift.

Пишите одни и те же коды много раз

Определите UIButton с Auto Layout программно

 let button: UIButton = {
    let title = "Sample"
    let image = "Sample"
    let color = UIColor.black

    let button = UIButton()
    button.translatesAutoresizingMaskIntoConstraints = false
    button.setTitle(title, for: .normal)
    button.setTitleColor(color, for: .normal)
    button.setImage(UIImage(named: image), for: .normal)
    return button
}()

Каждый раз, когда мне нужен UIButton, мне нужно найти и скопировать этот код? Нет, фрагмент кода может вам помочь.

Узнайте, как это помогает здесь. Я определяю кнопку выше с помощью knButton ключ в моем XCode. проще найти и перетащить UIButton а затем отформатировать его в раскадровке, верно?

Лучший путь

Вы создаете статическую функцию и легко ее используете.

static func makeButton(title: String? = nil,
                       titleColor: UIColor = .black,
                       font: UIFont? = nil,
                       background: UIColor = .clear,
                       cornerRadius: CGFloat = 0,
                       borderWidth: CGFloat = 0,
                       borderColor: UIColor = .clear) -> UIButton {
    let button = UIButton()
    button.translatesAutoresizingMaskIntoConstraints = false
    button.setTitle(title, for: .normal)
    button.setTitleColor(titleColor, for: .normal)
    button.titleLabel?.font = font
    button.setCorner(radius: cornerRadius)
    button.setBorder(borderWidth, color: borderColor)
    return button
}

Код слишком длинный и нечитаемый

// (1)
let underline = UIView()
underline.backgroundColor = UIColor.lightGray
underline.translatesAutoresizingMaskIntoConstraints = false
addSubview(underline)

// (2)
underline.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -8).isActive = true
underline.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
underline.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
underline.heightAnchor.constraint(equalToConstant: 1).isActive = true

(1)

• То же самое для всех элементов управления в Auto Layout программно, вы должны сохранить этот формат для всех элементов управления. Вы можете сделать это лучше с кодом ниже

extension UIView {
    func addToView(view: UIView) {
        translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(self)
    }
}

(1) можно изменить на

let underline = UIView() 
underline.addToView(view)

(2)

• Это стандартный код Apple, почему бы нам не сделать его более читабельным и красивым?

underline.bottom(toView: view, space: -8)
underline.horizontal(toView: view)
underline.height(1)

Достаточно ли красиво? Он взят из моей собственной библиотеки Auto Layout. Вы можете найти его на knConstraints

Если вы хотите попробовать жизнь без раскадровки, почему бы вам не попробовать следующие инструкции?

• Настройте свои собственные фрагменты кода
• Попробуйте мою библиотеку Auto Layout knConstraints
• Разработайте несколько простых пользовательских представлений с помощью Auto Layout программно.

Пожалуйста, не стесняйтесь прикасаться ко мне, оставляя комментарии или планируя сеанс со мной.

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