Статьи

Быстрый совет для iOS: создание приложения UITabBar с раскадровками

В этом кратком учебном пособии я покажу вам, как быстро создать приложение UITabBar с раскадровками в Xcode 4. Пошли!


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


Как гласит заголовок, в этом уроке мы будем создавать приложение панели вкладок с раскадровками. Проект будет простым приложением с двумя вкладками, созданным с Xcode 4.x. Без лишних слов запустите Xcode и создайте новый проект. Выберите приложение Single View и дайте ему любое имя. Для этого урока я назову мой StoryboardTabBar. При создании проекта убедитесь, что выбраны «Использовать раскадровку» и «Использовать автоматический подсчет ссылок», а затем сохраните его где-нибудь на жестком диске, чтобы позже его было легко найти.

Прямо сейчас вы настроили приложение, которое содержит один контроллер представления и одно представление. У вас также есть файл раскадровки с вашим единственным контроллером представления. Теперь нам нужно создать новый контроллер представления, чтобы мы могли добавить еще одну вкладку. Сделайте это, перейдя в File> New> New File, а затем выбрав подкласс UIViewController и присвоив ему имя ViewController2 с подклассом UIViewController. Убедитесь, что «Targeted for iPad» и «With XIB for user interface» не отмечены, прежде чем добавить его в свой проект. Теперь у вас должно быть два контроллера вида. Конечно, ViewController2 на самом деле еще ничего не делает, потому что мы не связали с ним представление.

Если вы еще этого не сделали, откройте файл MainStoryboard.storyboard в Навигаторе проектов. Прелесть раскадровок в том, что вы можете просто выбрать текущий вид и перейти в «Редактор»> «Встроить»> «Контроллер панели вкладок». Это добавляет представление к контроллеру панели вкладок. Если это сработало, вы успешно создали приложение панели вкладок! Тем не менее, он содержит только одну вкладку, и нам нужно создать другую вкладку. Чтобы сделать это, нам нужно открыть библиотеку объектов, найти контроллер вида и перетащить его на сцену / холст.

Теперь у нас есть другое представление в нашей раскадровке. Однако это еще не подкласс ViewController2. Перейдите к Инспектору Идентичности справа от XCode с выбранным контроллером представления и присвойте ему класс ViewController2. Теперь вы успешно предоставили вашему представлению класс ViewController2, но он по-прежнему не отображается на панели вкладок.

Чтобы добавить новый контроллер представления в панель вкладок, вы просто нажимаете Control + Click и перетаскиваете из контроллера панели вкладок в новое представление. Это сформирует «отношение», и появится новая вкладка, которая будет отображать представление ViewController2. Затем выберите Отношения> viewControllers из HUD, который появляется, как только вы отпустите кнопку мыши при перетаскивании. Как по волшебству, вы увидите новую вкладку в контроллере панели вкладок! Теперь, чтобы убедиться, что каждая вкладка соответствует правильному представлению, добавьте метку из библиотеки объектов в каждое представление, а затем вставьте нечто уникальное для этого представления в каждую метку.

Чтобы убедиться, что все работает правильно, запустите приложение в iOS Simulator (5.0), и вы должны увидеть, что каждая вкладка соответствует правильному виду! К сожалению, обе вкладки внизу выглядят довольно грустно и скучно. Давайте оживим их иконками и именем! Вернитесь в Xcode и откройте раскадровку, если она закрыта.

Выберите первый вид и внизу должна быть панель вкладок с одним элементом. Дважды щелкните текст «Элемент», и вы сможете дать ему имя. Идите вперед и назовите его как угодно и сделайте то же самое для второго контроллера вида. Теперь мы можем добавить значок, чтобы вы могли перейти на веб-сайт, такой как Glyphish (http://glyphish.com/), и загрузить оттуда несколько красивых иконок, которые вы можете использовать в своем приложении для этого урока. Я использую альтернативные значки из Битов приложений (http://www.app-bits.com/free-icons/) — world.png и delivery.png. Добавьте их в свой проект, перейдя в меню «Файл»> «Добавить файлы» в «StoryboardTabBar» и добавьте файлы в свой проект. После добавления значков дважды щелкните значок на панели вкладок контроллера представления, а затем в Инспекторе атрибутов выберите свое изображение в раскрывающемся меню и сделайте то же самое для второго представления. Если вы хотите запустить свое приложение, вы увидите, что вкладки имеют названия, но также содержат значки и сейчас!

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