Программное создание экрана входа в систему с нуля

Новичок в iOS? Опытный нативный разработчик? В любом случае, многие из вас столкнутся с определенными проблемами при использовании раскадровки.

  1. Переходы. Во-первых, переходы иногда могут оказаться слишком беспорядочными для обработки по мере увеличения количества экранов в вашем приложении.
  2. Рефакторинг кода: всякий раз, когда мы меняем имена переменных маркеров - IBOutlets и IBActions - для оптимизации или удобочитаемости, нам часто приходится повторно подключать переменные, которые были подвергнуты рефакторингу, иначе приложение выйдет из строя.
  3. Ограничения. Когда-нибудь на одном экране располагалось много свойств пользовательского интерфейса, накладываемых друг на друга, вложенных подвидов? Необходимость индивидуальной установки этих ограничений может сбивать с толку, когда появляются предупреждающие знаки. Или, что еще хуже, когда вы случайно щелкнули по C Lear Constraints для Все представления в контроллере представления.

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

Однако ваш код может быть более устойчивым и надежным, если программно создать все приложение с нуля. Хотя для изучения и настройки этого подхода может потребоваться больше времени, вы определенно сможете ускорить процесс, когда освоите его.

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

Программное создание экрана входа в систему

Давай начнем! Мы будем создавать экран входа в систему полностью с нуля и, конечно же, программно. Вот краткий обзор:

  1. Удалите раскадровку (да, сейчас не стесняйтесь)
  2. Назначьте контроллер представления по умолчанию
  3. Создайте соответствующие свойства пользовательского интерфейса
  4. Установите ограничения

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

1. Удалите раскадровку.

Престижность вам! Вы решили совершить прыжок веры! Уверяю вас, это будет весело.

  • Создайте проект Xcode так же, как и для любых других приложений.
  • На панели "Навигатор проекта" удалите весь файл Main.storyboard .
  • Щелкните на самом верхнем уровне значка проекта.
  • В разделе Информация о развертывании очистите запись в основном интерфейсе.
  • Запустите проект.

2. Назначьте контроллер представления по умолчанию

Столкнулись с черным экраном на симуляторе и сообщением об ошибке от Xcode? Не волнуйтесь. Вот почему.

Удаление ссылки на Main.storyboard также приводит к удалению контроллера по умолчанию, который запускается вместе с вашим приложением. Следовательно, мы должны назначить root ViewController , который будет отображаться после запуска вашего приложения.

  • Переименуйте файл по умолчанию ViewController.swift в LoginScreenViewController.swift для лучшей читаемости.
  • Перейдите к файлу AppDelegate.swift .
  • В application method, который содержит didFinishLaunchingWithOptions, включите следующий код:

Теперь давайте разберем этот сегмент кода построчно.

Во-первых, startScreenViewController инициализируется как переменная общего UIViewController. Это позволяет вам добавлять дополнительные логические операторы, чтобы установить любое ViewController , которое вы хотите, в соответствии с различными состояниями вашего приложения.

Например, новому пользователю могут быть показаны экраны входа / регистрации, в то время как аутентифицированный пользователь может быть направлен на экран панели управления. Следовательно, вы можете заменить LoginScreenViewController() любым ViewController подклассом, который хотите. В этом руководстве мы будем использовать LoginScreenViewController() .

Во-вторых, инициализация startScreenNavController как UINavigationController позволяет вам переходить к различным экранам вашего приложения.

Третья строка просто вызывает метод pushViewController() , чтобы вставить startScreenViewController в startScreenNavController .

Затем window инициализируется границами экрана устройства.

И, согласно документации Apple, его метод makeKeyAndVisible() показывает текущее окно и размещает его перед всеми другими окнами того же уровня или ниже.

Наконец, последняя строка кода присваивает startScreenNavController rootViewController окна. У вас должно получиться что-то похожее на это:

Теперь, когда вы запустите проект, вы заметите, что черный экран был заменен пустым экраном. Это View Controller , который вы вставили в Navigation Controller.

Чтобы убедиться, что ваш код работает должным образом, вы можете изменить фон View Controller , перейдя к соответствующему файлу LoginScreenViewController.swift (имя вашего корня View Controller) и добавив эту строку кода под viewDidLoad() метод:

view.backgroundColor = .blue //set it to the color that you prefer

Симулятор должен выглядеть следующим образом:

3. Создайте соответствующие свойства пользовательского интерфейса.

Большой! Теперь, когда мы программно настроили контроллеры, мы, наконец, можем создать наш экран входа в систему!

В этом руководстве мы будем создавать только часть экрана пользовательского интерфейса, которая не будет обрабатывать никакую логику или API. Экран входа в систему обычно состоит из UITextFields и UIButtons. Перейдите к LoginScreenViewController.swift и добавьте фрагмент в начало класса, непосредственно перед методом viewDidLoad() .

Здесь мы объявляем и сразу вызываем UITextfields и UIButton . Мы установим ограничения и любые дальнейшие настройки позже. loginContentView , который мы здесь инициализировали, предназначен для соединения UITextFields и UIButton вместе, чтобы мы могли более удобно настраивать их.

Заметили ошибку использования неразрешенного идентификатора «loginButtonPressed»? Это потому, что нам еще предстоит создать этот метод, который будет обрабатывать события, когда мы нажимаем loginButton . Добавьте это после viewDidLoad() ; Я оставлю обработку событий на ваше усмотрение .

@objc func loginButtonPressed(sender: UIButton!) {
}

Теперь запустим проект. Мы по-прежнему видим только синий фон; ни одно из созданных нами свойств не появилось. Это потому, что нам еще предстоит добавить их в представление и установить их ограничения.

Ваш LoginScreenViewController.swift файл должен напоминать изображение ниже:

4. Установите ограничения

Для обеспечения удобочитаемости мне нравится создавать ограничения в отдельном файле Swift , который расширяет класс LoginScreenViewController() .

  • Создайте новый быстрый файл и назовите его LoginScreenView.swift .
  • Инициализируйте файл следующим образом:
extension LoginScreenViewController {
}
  • Внутри расширения мы сначала создаем метод для настройки loginContentView . Это UIView будет содержать UITextfields и UIButton , которые мы создали ранее.

addSubview method добавляет соответствующий UI properties к UIViews , который вызывает этот метод. Здесь мы добавляем loginContentView on к view и UITextfields and UIButton on к loginContentView. Мы группируем эти UI properties вместе, чтобы упростить обслуживание и настройку при необходимости.

Затем мы используем translatesAutoresizingMaskIntoConstraints to false , что Auto Layout может творить чудеса.

После этого мы добавляем якоря (ограничения). heightAnchor определяет, сколько пикселей loginContentView будет занимать по вертикали. С другой стороны, leftAnchor и rightAnchor контролируют протяженность loginContentView горизонтально.

centerYAnchor constraint центрирует loginContentView в соответствии с заданным параметром.

Наконец, три метода в конце предназначены для построения ограничений для других UI properties .

  • Затем создайте ограничения для каждого имеющегося у нас UI property . Моя любимая практика - создать метод для настройки каждого property:

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

Просто совет для новичков: вы также должны разделить некоторые из этих методов на модули, следуя концепции DRY!

  • Наконец, у вас все готово для запуска вашего (первого) программного экрана входа в систему!

Хотя это не самый красивый интерфейс, я надеюсь, что он был полезен в обучении программному созданию дизайна пользовательского интерфейса и что его легко понять. Вы можете найти исходный код этого проекта на github.

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