В этом уроке мы рассмотрим как работает условный оператор «если» (if) на примере компонента Switch (обычный переключатель). Этот переключатель будет переводить наше приложение в «Ночной режим», то есть делать его фон черным, а элементы, наоборот, - светлыми. И возвращать всё назад при выключении. Так же в этом уроке мы научимся управлять цветом верхнего StatusBar, на котором располагаются часы, заряд батареи и уровень сигнала. Хоть это и не элемент нашего приложения, а самой операционной системы iOS, но мы хотим чтоб этот элемент так же изменял свой цвет под наши нужды. Погнали!
- Запускаем Xcode и создаем новый проект. Далее открываем файл storyboard.
- Размещаем на экране по центру надпись «Приложуха от Bakh», и вместо черного текста делаем красный.
Пункты 1 и 2 мы разобрали в первом уроке: YouTube урок, Описание и исходный код на GitHub. Если Вы его еще не смотрели, то рекомендуем Вам сначала пройти первый урок.
- Далее необходимо перенести стандартный переключатель под надпись. Компонент называется Switch.
- Этот переключатель будет включать и выключать «Ночной режим». По умолчанию этот режим у нас выключен, поэтому необходимо перевести переключатель в позицию выключено. Для этого заходим в Attributes inspector, выбираем State и назначаем его off.
- Теперь нам необходимо определить позицию Switch`a на экране с помощью инструмента Constraint:
- Используя инструмент Align, расположим Switch горизонтально по центру;
- Инструмент Add new constraints необходим для того, чтобы задать верхний отступ: с помощью него выставляем 20. По умолчанию этот отступ будет от ближайшего элемента, а так как мы его разместили ПОД надписью, то 20 обозначает расстояние от нижней границы Label до верхней границы Switch. Такое позиционирование удобно тем, что при перемещении Label компонент Switch будет следовать за ним, сохраняя отступ;
- Так же в Add new constraints необходимо выставить Width и Height. Достаточно просто отметить их галочками, так как значения по умолчанию (49 и 31 соответственно) нас вполне устраивают.
- Открываем Assistant editor с помощью кнопки в правом верхнем углу. Убедимся что в появившемся окне выбран автоматический режим. Делается это прямо над открывшемся кодом. Необходимо, чтоб открылся файл, содержащий исполняемый код, относящийся к экрану, который мы создали.
- Для этого нам понадобится «связать» Label, Switch и сам экран с переменными в коде, чтобы управлять ими. Звучит сложно, но на деле всё как обычно просто. Справа в окне выбираем Connections inspector и сделаем 3 связи:
- Выбираем наш Switch в Storyboard`e, затем зажимаем + напротив пункта New Referencing Outlet и тащим в код. Xcode нам подскажет куда мы можем вставить эту связь. У программистов зачастую принято объявлять переменные выше по коду, сделаем так же, объявим как можно выше в коде. Появится окно с возможностью назвать переменную. Её можно назвать как нам удобно, но мы в примере назовём switcher;
- Теперь выбираем Label в Storyboard`e и повторяем всё тоже самое. В примере мы назвали просто label;
- Теперь нажимаем на свободное пространство в Storyboard`e и повторяем ещё раз. Назовем его background. Как Вы наверно заметили все названия мы писали с маленькой буквы. Это вовсе не обязательно, если хотите. то можете писать с прописных букв. Хорошие привычки в программировании как и в любом деле лучше заводить с самого начала 😉.
-
До сих пор мы не написали и строчки кода 🤪, но уже близко. Теперь нам надо создать функцию, которая будет связана с нашим switcher`ом и реагировать на его нажатие. Выбираем его в Storyboard`e, а в Connections Inspector нам нужно выбрать Value changed (можно использовать и другие, о которых мы Вам расскажем в следующих уроках) и зажав + перетащить его в код. Если переменные мы объявляли как можно выше, то функции же, наоборот, будем стараться объявлять пониже. Это не обязательно и является еще одной «хорошей» привычкой в программировании. Назовём функцию на пример changeColor.
-
Программисты мы или нет в конце концов? Пора бы нам уже что-нибудь написать 😆. Должен получиться такой код:
@IBAction func changeColor(_ sender: Any) {
if (switcher.isOn) {
background.backgroundColor = UIColor.black
label.textColor = UIColor.white
UIApplication.shared.statusBarStyle = .lightContent
} else {
background.backgroundColor = UIColor.white
label.textColor = UIColor.red
UIApplication.shared.statusBarStyle = .default
}
}Давайте его немного разберем:
- Первая и последняя строка - это то, что за нас любезно «написал» Xcode в пункте 8. Подобные коды мы будем разбирать позднее, пока просто оставляем его без изменений, единственное, на что нам надо обратить внимание, - это символы { и } в самой первой строке и в самой последней. Наш код относящийся к обработчику нажатия на switcher должен находится между этими фигурными скобками;
- Вторая строка наш if. Пишется оператор if, после этого в круглых скобках указывается условие, которое мы будем проверять. В данном случае условие такое: switcher.isOn. Кажется всё просто: обращаемся к нашему switcher, с помощью точки обращаемся к его внутренним свойствам. Нас интересует включен он или нет, а именно свойство под названием isOn. После этого закрываем круглую скобку и открываем фигурную, означающую, что теперь пойдет код, который будет выполняться если условие выполнилось;
- Далее идут две строки назначения двух свойств. У элемента background мы меняем свойство backgroundColor. В iOS есть набор стандартных цветов. К ним и обратимся. Один из классов для работы с цветам в коде в swift является UIColor. Просто обратимся к черному цвету так: UIColor.black. А нашему label назначим textColor равным UIColor.white. Само собой, это не все возможности swift в работе с цветами. Некоторые параметры, функции и переменные мы будем рассматривать по мере необходимости;
- Следующая строка назначает верхнему StatusBar светлый текст. Здесь мы обращаемся к объекту UIApplication.shared, о нём мы Вам расскажем в следующих уроках. Всё, что нам надо понимать - это то, к чему мы приравниваем: .lightContent - светлый, .default - чёрный (по умолчанию);
- Далее мы видим простую строку. Закрытие фигурной скобки, которую открыли у if. Это означает что код, выполняющийся при выполнении условия со второй строки окончен. Далее видим оператор else и открывается фигурная скобка, сигнализирующая нам о том, что далее идет код если условие НЕ выполнилось;
- Следующие строки отдельно разбирать нет смысла, так как мы просто назначаем противоположные значения.
- Запустим и проверим, что у нас получилось. На первый взгляд всё отлично. Но заметно, что верхний StatusBar не меняется. Что же не так? 🤨. А дело в том, что для этого действия приложению требуется разрешение, которое можно включить в файле Info.plist. В этом файле нажимаем + в самой верхней строке. Появляется новая опция. Туда вписываем разрешение UIViewControllerBasedStatusBarAppearance. Проверяем, что его значение выставлено в NO.
- Теперь всё как надо!)
Сейчас попробуйте по памяти все повторить, желательно 2-3 раза.