Как создать собственное представление из XIB с помощью Swift

Часто проще всего создать собственное представление в файле XIB, где вы можете визуализировать, разметить и отредактировать внешний вид того, что вы пытаетесь создать.

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

Ниже приводится очень простой учебник, который иллюстрирует всю процедуру.

Создание нового проекта приложения с единым представлением

2. Создайте файл XIB.

Щелкните правой кнопкой мыши ту часть экрана, где находятся файлы вашего проекта (контроллер представления, раскадровка и т. Д.), И выберите new file.

Xcode предложит вам, для какого типа файла вы хотите создать. Выберите параметр View в меню пользовательского интерфейса. В следующем всплывающем окне вам будет предложено назвать свой XIB - мы назвали наш TestView.

3. Создайте свое представление в Интерфейсном Разработчике

Мы вставили UILabel и ограничили его центром экрана. Возможно, вам захочется чего-то более активного.

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

Если вы хотите изменить форму XIB, щелкните attributes inspector в верхнем правом углу и измените размер на freeform.

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

4. Создайте собственный файл UIView.

Теперь, когда у нас есть XIB, нам нужно создать собственный класс UIView, который будет им управлять.

Щелкните правой кнопкой мыши там, где находятся все ваши файлы, и выберите new file (снова), но на этот раз выберите Cocoa Touch Class в меню Source.

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

В этом руководстве мы также назвали этот файл TestView, так как он будет связан с TestView XIB, который мы только что создали.

5. Переопределите оба инициализатора UIView.

Здесь все становится немного сложнее. UIViews можно создавать двумя способами - в построителе интерфейса (например, в раскадровке или XIB) или непосредственно в коде.

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

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

Удалите комментарии и введите следующее:

Мы просто переопределили оба инициализатора UIView и вызвали наш инициализатор с именем commonInit (вы можете называть его как хотите). К сожалению, наш инициализатор пока ничего не делает. Мы доберемся туда через секунду.

6. Добавьте UIView в качестве владельца файла XIB.

Мы почти там. Теперь у нас есть файл XIB и пользовательский UIView. Нам просто нужно соединить их.

Вернитесь в свой XIB-файл и выберите File’s Owner в разделе заполнителя. Затем в правой части экрана в поле Identity Inspector введите имя файла UIView (TestView) как Class. Это должно быть автозаполнение - в противном случае вы, вероятно, сделали что-то неправильно.

7. Добавить весь вид как выход IB в файл UIView

Теперь, когда вы добавили пользовательский интерфейс UIView в качестве владельца файла, вы сможете нажать кнопку assistant editor в правом верхнем углу и загрузить представление рядом с XIB.

Ctrl-drag весь вид в качестве выхода для вашего файла просмотра. Вы можете называть его как хотите, но это хорошая привычка называть его contentView.

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

8. Загрузите XIB в общий инициализатор

Введите в commonInit следующие четыре строки кода:

В первой строке мы загрузили XIB по имени из памяти. Если вы назвали свой XIB-файл как-то иначе, вам нужно будет изменить строку TestView в функции loadNibNamed.

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

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

9. Используйте свое мнение

Были сделаны! Теперь у нас есть настраиваемое представление, созданное из файла XIB, которое мы можем использовать в нашем проекте. Посмотрим, как это выглядит.

Щелкните файл раскадровки и перетащите его в UIView. Щелкните identity inspector в правом верхнем углу и измените класс на TestView (или как вы назвали свой UIView).

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

Снова откройте свой помощник редактора. На этот раз он должен открыться в вашем файле контроллера представления. Перетащите TestView как IBOutlet. Теперь ваш контроллер представления должен выглядеть так:

И последнее - помните этот ярлык с нашей точки зрения? Давайте изменим текст. Я собираюсь использовать любимое приветствие моего старого босса:

Вот и все. Запустим проект!

Вот и все - приложение, которое имитирует жизнь в фронт-офисе НБА.

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

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

Вопросы или комментарии? Дайте мне знать! Для всех, кто интересуется инвестированием, пожалуйста, ознакомьтесь с Stock Genius, новым приложением для отслеживания акций, которое я разработал и показывает цены в реальном времени прямо с биржи (и множество пользовательских представлений, созданных из xibs!).