Мое путешествие по переобучению iOS, часть 1

Идея этого блога состоит в том, чтобы как можно подробнее поделиться с вами тем, что я узнал, и закрепить/ответить на любые вопросы, которые у меня возникали, когда я изучал учебники «от нуля до героя».

В этом посте я начну с чего-то ЧРЕЗВЫЧАЙНО простого, на создание которого у опытного разработчика может уйти 5 минут или меньше. Но эй, мы все откуда-то начинаем, так почему бы и не здесь

Вот предварительный просмотр того, что мы будем делать здесь:

Как и в любой традиции языка программирования, мы будем делать приложение «hello world», в котором, когда пользователь нажимает кнопку, вышеприведенный текст будет случайным образом отображать текст «hello world» на разных языках.

Цель этого приложения — понять самые основы:

1. UILable, UIButton и UIImageView UIKit.
2. Объявления Swift Variable и Array.
3. IBOutlets и IBActions.

Итак, приступим!

Сначала откройте свой Xcode и создайте новое приложение следующим образом:

Вот ключевая часть: выберите касание iOS вместо многоплатформенного касания, иначе вы не сможете выбрать раскадровку позже и должны работать со SwiftUI.

Теперь в разделе «Название продукта» введите «Hello World App» или любые другие причудливые имена, которые вы, возможно, захотите назвать. Это действительно зависит от вашего творчества!

Теперь, что, черт возьми, такое идентификатор организации?

Идентификатор организации — это уникальное имя вашего приложения, по которому другие пользователи могут найти ваше приложение в App Store. Я бы порекомендовал вам ввести здесь свою фамилию, а затем имя, чтобы упростить этот проект.

Таким образом, ваш идентификатор пакета (прямо под идентификатором организации) будет выглядеть примерно так:

doejohn.Hello-World-App

Некоторые старые версии Xcode могут отображать com.doejohn.Hello-World-App. Для вашего сведения это называется обратным доменным именем.

Теперь нажмите « Далее » и сохраните свой проект в удобном для вас месте, нажмите « Создать » , и мы приступим к самой интересной части!

После завершения ваш Xcode должен выглядеть примерно так:

Итак, давайте кратко пробежимся по тому, что мы здесь видим:

• Оранжевый раздел — это ваша сторона навигатора, где в данный момент отображается ваш навигатор проектов. Здесь вы видите, что ваш проект Hello World расположен вверху с тремя папками: Hello World , Hello WorldTest и Hello WorldUITests . В папке Hello World мы будем выполнять кодирование и редактирование. Тесты Hello WorldTest и Hello WorldUITest автоматически создаются для нас, когда мы оставили флажок « Включить тесты » при создании нашего проекта на этапе создания имени. Я пройдусь по двум папкам в другом посте, так что следите за обновлениями!
• Зеленый раздел — это часть общей информации и редактирования нашего приложения. Под общим нажатием здесь мы видим, что у нас есть отображаемое имя (имя нашего приложения), идентификатор пакета (то, что мы обсуждали ранее об обратном имени домена), версия (например, игры, у нас есть версии 1.0, 1.1, 2.x… так далее )
• Фиолетовый раздел « Информация о разработке » — это место, на обсуждение которого я хотел бы потратить немного больше времени. Давайте пойдем сверху вниз здесь.
• В самом верху у нас есть iOS 15.2 с отмеченными iPhone и iPad, но Mac Catalyst. Это связано с тем, что когда мы создавали наш проект, мы выбрали «iOS», а не «многоплатформенность», следовательно, говоря: «Мы хотим, чтобы наше приложение запускалось только на устройствах iOS». Часть iOS 15.2 говорит: «Минимальная версия iOS для запуска нашего приложения». Вы можете щелкнуть по нему и выбрать другую версию iOS, по крайней мере, которую вы хотите, чтобы ваши пользователи использовали. Не забудьте проверить, поддерживаются ли функции, которые вы хотите запустить, в минимальной версии, на которой должны работать ваши пользователи. Для этого приложения вы должны быть в порядке. Ориентация устройства говорит, что ваше приложение работает только в портретном, перевернутом, альбомном левом или альбомном правом , как вы можете себе представить, как некоторые игры позволяют игрокам играть только в определенной ориентации. Строка состояния — это место, где вы можете установить стиль отображения строки состояния. Вы можете поэкспериментировать с ним и посмотреть, как должно выглядеть ваше приложение. Для этого приложения мы просто оставим все настройки по умолчанию, чтобы все было просто.
• Желтая секция — это место, где находятся ваши инспекторы. Таким образом, в этом разделе можно найти такие вещи, как имя вашего приложения, полный путь к вашему файлу и т. д. Это станет более удобным, когда мы будем разрабатывать наше приложение с помощью Storyboard.

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

Сначала ваш экран может выглядеть так, но вы можете просто щелкнуть любую сторону, которую хотите изменить, чтобы отобразить ViewController, и щелкнуть ViewController в разделе Navigator, после чего он изменится.

Ваш экран должен выглядеть так, когда вы закончите. Теперь давайте еще раз кратко пробежимся по тому, что означают строки кода, которые мы видим в ViewController:

В самом верху мы видим строку import UIKit , в которой говорится: «Эй, мы хотим импортировать этот фреймворк/библиотеку для использования в этом файле ViewController!» В данном случае мы хотим работать с UIKit, поэтому импортируем его сюда. В будущем мы будем импортировать больше, например Google Firebase или некоторые библиотеки анимации пользовательского интерфейса, которые вы хотите добавить!

Далее у нас есть класс ViewController: UIViewController{} это говорит о том, что у нас есть класс ViewController , который наследуется от UIViewController. Наследование в классе означает, что мы, подкласс (ViewController), хотим иметь возможность использовать все методы, свойства и другие характеристики суперкласса (UIViewController).

Внутри нашего класса ViewController у нас есть следующее:

Это называется функцией. Эта конкретная функция говорит, что должно произойти, когда это представление изначально загружается. Например, если мы хотим, чтобы переменная Star всегда была равна 0 при загрузке этого представления, у нас будет здесь var star = 0 .

Теперь я хочу, чтобы вы посмотрели на среднюю часть вашего Xcode, на самой верхней панели должен быть знак +, например:

Нажмите на это, и мы должны увидеть объекты списка, которые мы можем перетащить в нашу основную раскадровку.

Как вы видите, в Xcode у нас есть все эти предопределенные объекты, готовые к использованию. Итак, давайте перетащим объекты Label и Button в нашу основную раскадровку.

Как вы можете видеть, когда мы впервые перетаскиваем объект Label на нашу раскадровку, мы можем перетаскивать его куда угодно, какого бы размера мы ни хотели. Итак, давайте расширим нашу метку до ширины первых синих пунктирных линий с левой и правой стороны. Эти строки — это то, что Xcode говорит нам о «безопасной зоне» для существования наших объектов. Давайте также изменим текст с Label на Hello World, дважды щелкнув объект Label.

Теперь, перед этим, я хочу, чтобы мы посмотрели на участок желтого квадрата на изображении выше. Это называется инспектором атрибутов , где мы можем изменить такие вещи, как цвет текста, шрифт, размер шрифта и т. д. для выбранного объекта. Здесь мы изменим размер шрифта на 50 и текст с Label на Hello World, как показано ниже.

Далее мы сделаем то же самое для объекта Button. Я сэкономлю нам немного времени и передам это вам (тут уж точно не ленитесь )

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

Теперь вот большой вопрос: как наше замечательное приложение узнает, что делать, когда пользователь нажимает на кнопку? Или что он должен делать, когда пользователь нажимает кнопку? Или что должно сделать приложение, когда обнаружит, что наши пользователи, как и писатель, переживают экзистенциальный кризис?

Что ж, последний вопрос, вероятно, выходит за рамки этого урока, но с первыми двумя мы справимся без проблем.

Xcode сделал нам одолжение и сделал это очень простым: Control + щелкните Obecjt и перетащите его в файл ViewController следующим образом:

Будьте очень осторожны, НЕ перетаскивайте его в метод viewDidLoad().

Появится диалоговое окно, похожее на то, что мы видим в разделе с желтым квадратом, и Xcode запросит у вас имя для этой метки, назовем ее helloWorldText . Это соглашение об именовании называется Camel Casing.

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

Обратите внимание, что вы можете увидеть закрашенный кружок рядом со строкой кода IBOutlet. Это означает, что этот объект связан с чем-то в раскадровке.

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

Убедитесь, что в разделе «Подключение» выбрано «Действие». Здесь мы можем назвать его HelloWorldAction . В разделе «Событие» мы определяем, что происходит, когда пользователь что-то здесь делает. Здесь мы выбрали Touch Up Inside, что означает, когда пользователь нажимает (касается и отпускает) кнопки.

Теперь мы можем сказать, что должно делать наше приложение, когда пользователь нажимает на него программно! Ура

Хорошо, давайте перейдем к сочным частям нашего приложения. Давайте добавим две строки кода под наш UILabel:

вар helloTextNumber = 0

var helloTextArray = ["привет, мир", "Hej Verden!", "Hello Wereld!", "Ciao mondo!", "Hei Verden!", "你好世界!"]

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

helloTextArray — это массив, который мы хотим использовать для выбора нашего «Hello World» на другом языке здесь. Здесь у нас есть массив String из 6 строк (строки — это просто тип с «» в нем). Как и во многих других языках, массив начинается с 0, а не с 1! Так что будьте осторожны, когда вы перебираете Swift Arrays!

Итак, helloTextArray[0] будет «hello world», helloTextArray[3] — «Ciao mondo», а helloTextArray[5] — «你好世界! ”

Вот ссылка на документацию Apple Swift о Array. Подробнее об этом можно прочитать здесь:

Как мы видели выше, для того, чтобы получить элемент из hellTextArray, нам нужно сообщить ему, какой номер мы хотим (поэтому первый мы говорим helloTextArray[0], второй helloTextArray[1], третий helloTextArray[2]… и т. д.) но мы не можем просто вручную вводить каждое из них и не должны ожидать, что наши пользователи введут число за нас (всегда ожидайте от пользователя меньшего. Принцип, который я усвоил). Так что же нам делать?

А вот и helloTextNumber. helloTextNumber — это переменная Integer (Int), которую мы хотим использовать в качестве заполнителя для того, какой элемент нашего массива мы хотим отобразить. У нас будет метод, который генерирует случайное целое число от 0 до 5 и использует helloTextNumber для хранения этого числа. Таким образом, мы можем отобразить элемент из нашего helloTextArray случайным образом. Если вы немного запутались в этой части, не волнуйтесь, это прояснится в следующей части.

Вот код, который я хочу, чтобы вы добавили:

Давайте рассмотрим, что делает наш блок кода hellowWorldAction.

Здесь мы установили для helloTextNumber значение Int.random(in:0…5). Эта строка кода означает, что мы хотим, чтобы наш helloTextNumber был случайно сгенерированным целым числом от 0 до 5 включительно (то есть включая 5).

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

helloWorldText.text = helloTextArray[helloTextNumber]

В Swift эта запись через точку следует правилу

Кто.Что = Ценность

который распадается на:

«Кого нужно изменить»

«точка»

«Что нужно изменить»

«равно»

«на что его следует заменить».

Итак, с нашим кодом мы говорим, что:

Мы хотим, чтобы текст helloWorldText (кто) (что) был изменен на элемент helloTextNumber из helloTextArray.

Итак, когда мы запустим эту строку кода, мы изменим helloWorldText для отображения любого элемента в helloWorldTextArray случайно сгенерированного числового метода Int.random(), сгенерированного для нашего helloWorldTextNumber.

Теперь, когда мы запускаем наш симулятор ( commnad + r или кнопка ▶️ на верхней панели Xcode), когда мы нажимаем нашу кнопку, наш текст должен меняться всякий раз, когда мы нажимаем кнопку!

Ура! Мы закончили программную часть нашего приложения!

Последняя вещь. Наш фон на самом деле довольно уродлив Мы хотели бы добавить какое-нибудь фоновое изображение, чтобы оно не выглядело так просто. Итак, найдите изображение, которое вам действительно нравится, и добавьте его в качестве фона для вашего приложения. Для меня я буду использовать изображение земли (так как это привет, мир, верно?).

Теперь давайте нажмем «Assests» в папке «Hello World», и вы должны увидеть что-то вроде того, что показано ниже. Перетащите выбранное изображение и поместите его в столбец с «AccentColor» и «Appicon». Здесь наш образ будет находиться и будет использоваться.

Теперь давайте вернемся к «Главному» и перетащим объект изображения из библиотеки объектов (если вы забыли, как это сделать, прокрутите вверх, чтобы увидеть, где мы говорили об объектах «Ярлык» и «Кнопка»). Я хочу, чтобы вы расширили объект изображения настолько, чтобы он покрывал весь экран вашего телефона. Теперь я хочу, чтобы вы щелкнули по этому объекту изображения и перешли к инспекторам (правая панель) и нашли это:

В разделе «Изображение» я хочу, чтобы вы щелкнули раскрывающийся список «Изображение» и выбрали фоновое изображение, которое вы ранее перетащили в «Активы». Здесь мы можем определить, какой объект изображения должен отображать, без необходимости что-либо кодировать в нем. Аккуратный! Чем меньше кода, тем лучше!

Теперь ваш экран может выглядеть примерно так:

Подождите минутку… что здесь происходит? Что случилось с нашими ярлыком и кнопкой, над созданием которых мы так усердно работали?

То, что произошло здесь, просто проблема слоя. Представьте, что у нас есть тарелка, яблоко и апельсин. Что мы сделали, так это то, что сначала отобразили яблоко и апельсин, затем поместили тарелку поверх этих двух, поэтому мы видим только последнее (фоновое изображение), а не наше яблоко (ярлык) и апельсин (кнопка). Мы хотим поставить сначала нашу тарелку, затем яблоко и апельсин сверху.

Итак, как мы это делаем? Должны ли мы просто удалить весь наш проект и переделать все заново?

Что ж, если вы хотите сделать это, чтобы закрепить то, что вы здесь узнали, то добро пожаловать! НО Apple предоставила нам гораздо более простой способ сделать это.

В левой части предыдущего снимка экрана мы видим «Просмотр сцены контроллера». Под этим у нас есть «Контроллер представления», а под ним у нас есть «Вид». Это наслоение нашего текущего представления с нашими объектами в нем (метка, кнопка и изображение) вместе с «безопасной областью» по умолчанию, синими пунктирными линиями, которые мы видим, когда перетаскиваем наши объекты.

Теперь просто перетащите объект изображения снизу вправо под «Безопасной зоной» следующим образом:

И вуаля! Мы видим нашу Ярлык и Кнопку! И когда мы запустим это приложение в нашем симуляторе, мы должны увидеть, что все работает, как задумано!

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

Но я продолжу писать больше уроков в будущем, несмотря ни на что очень жаль, если я вам не нравлюсь

Мир ✌