/ Swift

Swift 3 — Creating a custom view from a xib (Перевод)

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

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

Ниже приведено очень простое руководство, иллюстрирующее всю процедуру:

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

1_X8ocYJmVQWW20UbeNi1MJQ

2. Создайте xib файл
Щелкните правой кнопкой мыши на части экрана, где находятся файлы вашего проекта (контроллер просмотра, раскадровка и т. д.) и выберите «новый файл». Xcode предложит вам тип файла, который вы хотите создать. Выберите «Вид» в меню «Пользовательский интерфейс». При следующем всплытии вам будет предложено назвать ваш xib - мы вызвали наш «TestView».

1_rjTR1BfDou2PHtDeKd0AyA

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

1_TPaDBLyMgS4Y2iOzdmCzfw

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

1_H2zddqtZOo3KyEnN60sLmA

4. Создание пользовательского файла UIView
Теперь, когда у нас есть xib, нам нужно создать пользовательский класс UIView, который будет управлять им. Щелкните правой кнопкой мыши, где находятся все ваши файлы, и выберите «new file» (снова), но на этот раз выберите «Cocoa Touch Class» в меню «Source».

1_pRS2R3g7n3SVPIlNdNVNzg

Когда вам будет предложено указать новый файл, убедитесь, что вы сделали его подклассом «UIView». Xcode может по умолчанию использовать другой класс Cocoa. В этом уроке мы также назвали этот файл «TestView», поскольку он будет связан с уже созданным TestView xib.

1_zoqtltbirAiLQDBMA2H2mg

5. Переопределить оба инициализатора UIView
Здесь все становится немного сложнее. UIViews могут быть созданы двумя способами: в построителе интерфейса (т.е. storyboard или xib) или непосредственно в коде. У них есть инициализатор для каждого из этих методов создания, и мы должны переопределить их оба с помощью собственного пользовательского инициализатора.

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

1_mKRjtQzv5wymIXijXW6eTA

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

1_cJiT4ibDrTQ5MVo-pnWckg

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

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

Мы почти там - теперь у нас есть xib-файл и пользовательский UIView, мы просто должны подключить их.

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

1_Gh8ipXTaR_NCEf2wQz36GA

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

1_S3V5TM37xkuf_a7R2wL1Mw

Ctrl-перетащите ENTIRE VIEW в качестве outlet в файл вида. Вы можете назвать его как хотите, но это хороший шаблон, чтобы называть его «contentView», Вы также можете перетаскивать любые другие элементы в качестве IBoutlet. В этом случае все, что у нас есть, это наш ярлык, поэтому мы тоже его перенесли. Теперь наш файл выглядит следующим образом:

1_DGJDYJbtWRdjsqRZMbLl4Q

8. Загрузить xib в общий инициализатор
Введите следующие четыре строки кода в ваш commonInit:

1_QZWd4CneZ97UrIjN-7kLNQ

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

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

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

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

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

Нажмите на свой файл storyboard и перетащите на него UIView. Нажмите на инспектор идентификации в правом верхнем углу и измените класс на «TestView» (или как вы назвали ваш UIView)

1__kyC8D2SL_UYwyDy-01kkQ

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

Откройте снова assistant editor, на этот раз он должен открыть файл вашего контроллера. Перетащите «TestView» в виде IBOutlet. Теперь ваш контроллер просмотра должен выглядеть следующим образом:

1_9Bp7cSayFox-tIzk-dREkw

Последняя вешь - помните этот label на нашем view? Давайте изменим текст: я собираюсь использовать любимое приветствие моего старого босса:

1_Afe0lrEUxZy5LQJZ5MxmCQ

Вот и все - теперь давайте запустим проект:

1_4ZbJ3Wt_oePPIIBpwh98vg

Автор: Brian Clouser
Ссылка на статью: Swift 3 — Creating a custom view from a xib