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

Нови за iOS? Опитен роден разработчик? Така или иначе, много от вас ще са се сблъскали с определени проблеми, когато става въпрос за използване на сценария.

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

Като се има предвид това, използването на разкадровка все още има своите плюсове — способност за визуализиране и много лесно разбиране — и създаването на потребителски интерфейси програмно може да представлява стръмна крива на обучение. По същество сторибордът е добър за визуализиране на потока на дизайна и позволява бързи макети за приложението.

Вашият код обаче може да бъде по-стабилен и надежден чрез програмно създаване на цялото приложение от нулата. Въпреки че този подход може да отнеме повече време за изучаване и настройка, определено можете да ускорите нещата, след като го овладеете.

Следователно, ако времето и ресурсите позволяват, определено препоръчвам на новите и опитни разработчици на iOS да се възползват от програмния начин.

Програмно изграждане на екран за влизане

Нека да започнем! Ние ще изградим екран за вход изцяло от нулата и, разбира се, програмно. Ето кратък преглед:

  1. Изтрийте своя Storyboard (Да, не се срамувайте сега.)
  2. Задайте контролер за преглед по подразбиране
  3. Създайте съответните свойства на потребителския интерфейс
  4. Задайте ограничения

Ако сте сравнително нов в разработката на iOS, горещо ви препоръчвам да прочетете за архитектурата на папките в iOS,за която ще говоря в бъдеще. Това ще ви позволи да структурирате по-добре проекта си, за да поддържате лесната достъпност.

1. Изтрийте вашия сценарий

Браво на теб! Решихте да направите скок на вярата! Уверявам ви, ще бъде забавно преживяване.

  • Създайте Xcode проект точно както бихте направили за всяко друго приложение.
  • В панела Project Navigator изтрийте целия 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().

  • Създайте нов swift файл и го наименувайте LoginScreenView.swift.
  • Инициализирайте файла, както следва:
extension LoginScreenViewController {
}
  • Вътре в разширението първо създаваме метод за настройка на loginContentView. Този UIView ще съдържа UITextfields и UIButton , които създадохме по-рано.

addSubview method добавя съответното UI propertieson към UIViews , което извиква този метод. Тук добавяме loginContentView on към view и UITextfields и UIButton on към loginContentView. Ние групираме тези UI propertiesзаедно за лесна поддръжка и корекции, ако е необходимо.

След това използваме translatesAutoresizingMaskIntoConstraints до false така че Auto Layoutможе да направи своята магия.

След това добавяме котвите (ограниченията). heightAnchor диктува колко пиксела loginContentView ще заема вертикално. От друга страна, leftAnchor и rightAnchor контролират разтягането на loginContentView хоризонтално.

Ограничението centerYAnchor центрира loginContentView според дадения параметър.

И накрая, трите метода в края са за конструиране на ограниченията за останалите UI properties.

  • След това конструирайте ограниченията за всяко UI property, което имаме. Любимата ми практика е да създам метод за настройка на всеки property:

Тук очевиден модел е, че методите, извиквани от всяко свойство на потребителския интерфейс, са много сходни, с изключение на дадените параметри. Тъй като това е само урок, не се колебайте да проучите други методи, като например задаване на шрифт или граница. Вашият файл с разширение трябва да е подобен, както следва:

Само съвет за начинаещи: Вие също трябва да модулирате някои от тези методи, като следвате концепцията DRY!

  • Най-накрая сте готови да стартирате вашия (първи по рода си) програмно създаден екран за вход!

Въпреки че не е най-красивият потребителски интерфейс, надявам се, че е бил полезен, за да ви научи как програмно да създаватеUI дизайни и че е бил лесен за разбиране. Можете да намерите изходния код за този проект в github.

Благодарим ви, че отделихте време да прочетете този материал. Чувствайте се свободни да оставите отзиви и коментари за това, което може да се подобри, както и вашите мисли за разработването на iOS по програмен начин!