Создание iOS-приложения для демонстрации слайд-шоу на iPad

С использованием XML, XCode и API iOS

Научитесь создавать iOS-приложение для демонстрации слайд-шоу с помощью пошаговых инструкций, приведенных в этой статье. Пример приложения устанавливает связь с Web-сервером для получения XML-определения слайд-шоу и отображает содержащиеся в нем фотоснимки.

Джек Д Херрингтон, главный инженер-программист, Leverage Software Inc.

Джек Д. Херрингтон (Jack D. Herrington) - главный инженер-программист с более чем двадцатилетним опытом работы. Он автор трех книг: "Генерирование кода в действии", "Podcasting Hacks" и "PHP Hacks". Написал более 30 статей. Вы можете связаться с Джеком по адресу jherr@pobox.com.



03.12.2012

Введение

Используемые сокращения

  • IDE: Integrated Development Environment - интегрированная среда разработки;
  • iOS: мобильная операционная система Apple
  • OS X: операционная система компьютеров Apple Macintosh;

Не секрет, что написание приложений для iOS-устройств, таких как iPad или iPhone, ― весьма популярное занятие: эти устройства великолепны и просты в применении. Миллионы пользователей делают эту платформу весьма привлекательной для разработчиков приложений. Людям нравится просматривать свои фотографии на шикарном дисплее iPhon или iPad.

Эта статья учит создавать iOS-приложение фото слайд-шоу "с нуля". Мы разместим на сервере некоторый XML-код и файлы фотографий, построим приложение iOS, добавим представление для просмотра фотографий, извлечем XML и выполним анимацию слайд-шоу.

Создание серверной части

Серверная часть примера приложения слайд-шоу - это просто XML-файл, который можно положить на сервер. Листинг 1 представляет собой пример XML-документа со ссылками на примеры изображений.

Листинг 1. photos.xml
<photos>
<photo url="http://localhost/photos/CRW_0675.jpg" />
<photo url="http://localhost/photos/CRW_1488.jpg" />
<photo url="http://localhost/photos/CRW_3273.jpg" />
<photo url="http://localhost/photos/CRW_3296.jpg" />
<photo url="http://localhost/photos/CRW_3303.jpg" />
<photo url="http://localhost/photos/CRW_3359.jpg" />
<photo url="http://localhost/photos/CRW_3445.jpg" />
<photo url="http://localhost/photos/CRW_3752.jpg" />
<photo url="http://localhost/photos/CRW_3754.jpg" />
<photo url="http://localhost/photos/CRW_4525.jpg" />
<photo url="http://localhost/photos/CRW_4547.jpg" />
<photo url="http://localhost/photos/CRW_4700.jpg" />
<photo url="http://localhost/photos/CRW_4860.jpg" />
</photos>

XML-документ предельно прост. Тег <photos> содержит ряд тегов <photo>. Каждый тег <photo> содержит URL-адрес отображаемой фотографии. URL-адрес должен быть полностью правомочным и абсолютным; клиентское приложение будет загружать URL-адрес непосредственно — без всякого браузера, который обрабатывал бы относительные URL-адреса.

Для завершения серверной части дополним XML-файл ссылками на фотографии и загрузим его в определенное место на сервере. Если все идет хорошо, XML можно открыть с помощью Safari (или любого другого браузера) и увидеть примерно то, что показано на рисунке 1.

Рисунок 1. XML-файл на сервере
XML-файл (листинг 1) в браузере

Рисунок 1 иллюстрирует XML-файл из листинга 1 в текстовом формате. Результат будет зависеть от браузера, так как это просто XML-файл (и у браузеров нет для него стандартного представления).

Чтобы проверить правильность URL-адреса:

  1. Выберите один из URL-адресов.
  2. Скопируйте и вставьте его в область URL браузера.
  3. Нажмите клавишу Return.

Вы должны увидеть нечто похожее на рисунок 2.

Рисунок 2. Одна из фотографий на сервере
Фото CRW_1488.jpg с лицом девочки

Ссылки на фотографии, расположенные на сервере, содержатся в URL-адресах в XML-файле. Если вы не видите XML-файла или фотографий, проверьте конфигурацию Web-сервера и URL-адреса. Если вы не видите фотографию в браузере, то и ваше новое iOS-приложение тоже не "увидит" ее.


Создание клиентского приложения для демонстрации слайд-шоу

Когда сервер настроен и фотографии загружены, можно приступать к созданию приложения для iOS. Сначала необходимо установить Apple Developer Tools (см. ссылку в разделе Ресурсы). Если вы работаете:

  • с версией Mac OS X до Lion, загрузите инструменты разработки с сайта Apple Developer (см. ссылку в разделе Ресурсы);
  • с версией Lion для загрузки инструментов можно использовать Mac App Store (см. ссылку в разделе Ресурсы).

Установив инструменты разработчика, запустите среду XCode, которая представляет собой IDE Apple для разработки приложений под iOS и Mac OS X. В среде XCode выберите пункт меню New Project. Вы должны увидеть первую страницу мастера, который мы будем использовать для создания приложений для iOS или Mac OS X, как показано на рисунке 3.

Рисунок 3. Мастер приложений
Шаблон нового проекта

Можно выбрать один из нескольких шаблонов приложений. Для этого примера выберете View-based Application и нажмите Next. Вы должны увидеть заключительную страницу мастера, как показано на рисунке 4.

Рисунок 4. Варианты проектов
Варианты шаблонов нового проекта

На второй странице мастера присвойте своему приложению имя и выберите семейство устройств по умолчанию (iPad или iPhone). Приложение-пример называется slideshow. Значение в поле Company Identifier указывает, что приложение находится в пространстве имен com.jherrington. (Конечно, вы можете выбрать любое имя и любой идентификатор компании). Выберите семейство устройств iPad и нажмите Next.

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


Добавление представления изображений

Следующим шагом нужно добавить представление для изображений. Платформа iOS поставляется с богатым набором встроенных элементов управления, которые можно использовать для создания приложения. Например, воспользуемся элементом управления UIImageView. С помощью UIImageView можно отображать изображения, встроенные в приложение, хранящиеся на устройстве локально или, как в нашем примере, загруженные с Web-сайта.

Чтобы добавить UIImageView, откройте файл slideshowControllerView.XIB, который представляет собой файл определения интерфейса пользователя для slideshowControllerView. Открыв XIB, перейдите на палитру объектов и выберите Image View, как показано на рисунке 5.

Рисунок 5. Добавление объекта UIImageView к контроллеру представлений XIB
Выбран параметр Image View

Выбрав объект Image View, поместите его в slideshowControllerView. Обычно IDE автоматически масштабирует элементы управления по размеру доступного пространства. Если это не сделано, просто потащите за элемент управления, чтобы отрегулировать его размер, пока он не заполнит все окно.

Когда элемент управления находится в представлении, нужно установить некоторые параметры, чтобы приложение приняло оптимальный вид. На рисунке 6 показаны значения атрибутов экрана для элемента управления Image View.

Рисунок 6. Настройка UIImageView
Атрибуты элемента управления Image View

Нужно изменить режим (Mode) и фон (Background). Установите режим Aspect Fit, чтобы изображение масштабировалось с сохранением исходных пропорций. В противном случае ваши фотографии будут растягиваться на все окно — и это может выглядеть некрасиво.

Поскольку изображение не всегда соответствует области окна, необходимо также задать атрибут фона (Background) Dark Text Color или выбрать черный цвет из палитры. По умолчанию устанавливается белый фон. На глянцевом белом фоне большинство фотографий выглядит плохо.

Сохраните файл XIB и перейдите к файлу SlideshowViewController.h. Внесем небольшое изменение в листинг 2.

Листинг 2. SlideshowViewController.h
#import <UIKit/UIKit.h>

@interface slideshowViewController : UIViewController {
    IBOutlet UIImageView *imgView;
}

@end

К slideshowViewController необходимо добавить Outlet, что позволит элементу управления, определенному в XIB, подключиться к классу контроллера представлений.

После добавления outlet вернитесь к файлу XIB, выберите UIImageView и используйте инспектор соединений для подключения объекта UIImageView к переменной imgView в классе slideshowViewController.

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

Листинг 3. SlideshowViewController.m
#import "slideshowViewController.h"

@implementation slideshowViewController

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
}

#pragma mark - View lifecycle

- (void)viewDidLoad
{
    [super viewDidLoad];

    NSURL *imageURL = [NSURL URLWithString:@"http://localhost/photos/CRW_0675.jpg"];
    NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
    UIImage *image = [UIImage imageWithData:imageData];
    [imgView setImage:image];
}

- (void)viewDidUnload
{
    [super viewDidUnload];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:
   (UIInterfaceOrientation)interfaceOrientation
{
    return YES;
}

@end

Серьезная работа в классе slideshowViewController производится в методе viewDidLoad, который теперь:

  • загружает данные с URL-адреса;
  • преобразует их в изображение;
  • применяет метод SetImage к представлению изображения, чтобы отобразить его.

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

Рисунок 7. Первое изображение с сервера
Изображение (лицо девочки) в браузере

Если вы не видите изображения, проблема, скорее всего, связана с вызовом метода SetImage в imgView. Убедитесь, что объект UIImageView правильно подключен к переменной imgView. Если приложение не доходит до этого места, возможно, вы неправильно указали URL-адрес, или что-то не так на сервере.


Синтаксический анализ XML

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

Разверните сам класс с помощью интерфейса NSXMLParserDelegate, который указывает платформе iOS, что этот класс может принимать обратные вызовы от анализатора XML. Еще нужно добавить массив photos, содержащий список URL-адресов, которые извлекаются из XML. Обновления показаны в листинге 4.

Листинг 4. SlideshowViewController.h с фотографиями
#import <UIKit/UIKit.h>

@interface slideshowViewController : UIViewController<NSXMLParserDelegate> {
    IBOutlet UIImageView *imgView;
    NSMutableArray *photos;
}

@end

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

Чтобы использовать анализатор XML, расширим класс контроллера представлений, как показано в листинге 5.

Листинг 5. SlideshowViewController.h с фотографиями
- (void)viewDidLoad
{
    [super viewDidLoad];

    photos = [[NSMutableArray alloc] init];

    NSXMLParser *photoParser = [[[NSXMLParser alloc] 
       initWithContentsOfURL:
       [NSURL URLWithString:@"http://localhost/photos/index.xml"]] autorelease];
    [photoParser setDelegate:self];
    [photoParser parse];

    NSURL *imageURL = [NSURL URLWithString:[photos objectAtIndex:0]];
    NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
    UIImage *image = [UIImage imageWithData:imageData];
    [imgView setImage:image];
}

- (void)parser:(NSXMLParser *)parser didStartElement:(NSString *)elementName 
   namespaceURI:(NSString *)namespaceURI qualifiedName:(NSString *)qName 
   attributes:(NSDictionary *)attributeDict { 
    if ( [elementName isEqualToString:@"photo"]) {
        [photos addObject:[attributeDict objectForKey:@"url"]];
    }
}

Теперь этот класс создает синтаксический анализатор в методе viewDidLoad, запрашивая и анализируя XML с сервера. Он также назначает делегата для анализатора к самому себе, чтобы получать обратные вызовы.

В этом примере нужно прослушивать обратный вызов didStartElement, который запускается всякий раз, когда встречается тег. Затем функция DidStartElement смотрит на имя тега, чтобы определить, не тег ли это фотографии. Если да, то didStartElement добавляет в массив фотографий значение атрибута url.

Когда массив фотографий готов, метод viewDidLoad продолжает работать и выбирает первое изображение из массива.

Запустите приложение, чтобы проверить, что получилось. Вы должны увидеть в эмуляторе первое изображение, указанное в XML. Если его нет, это может быть вызвано проблемами с XML-файлом на сервере. Установите точку прерывания в методе didStartElement, чтобы проверить, вызывается ли он. Если нет, значит вы не получаете никаких допустимых XML-документов с севера.


Анимация слайд-шоу

На последнем шаге воспользуемся массивом фотографии для анимирования слайд-шоу. Нам понадобятся две вещи:

  • таймер и
  • переменная для хранения текущего местоположения в слайд-шоу.

Добавим оба эти элемента в определение класса, как показано в листинге 6.

Листинг 6. Готовый SlideshowViewController.h
#import <UIKit/UIKit.h>

@interface slideshowViewController : UIViewController<NSXMLParserDelegate> {
    IBOutlet UIImageView *imgView;
    NSMutableArray *photos;
    NSTimer *timer;
    int currentImage;
}

@end

Таймер представляет собой объект, который будет выдавать события с указанным интервалом. CurrentImage - это просто индекс в массиве фотографий, который будет использоваться для перебора всех изображений.

В листинге 7 показана окончательная версия кода приложения слайд-шоу.

Листинг 7. Готовый SlideshowViewController.m
#import "slideshowViewController.h"

@implementation slideshowViewController

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
}

#pragma mark - View lifecycle

- (void)viewDidLoad
{
    [super viewDidLoad];

    photos = [[NSMutableArray alloc] init];

    NSXMLParser *photoParser = [[[NSXMLParser alloc] 
      initWithContentsOfURL:[NSURL URLWithString:
      @"http://localhost/photos/index.xml"]] autorelease];
    [photoParser setDelegate:self];
    [photoParser parse];

    currentImage = 0;

    NSURL *imageURL = [NSURL URLWithString:[photos objectAtIndex:0]];
    NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
    [imgView setImage:[UIImage imageWithData:imageData]];

    timer = [NSTimer scheduledTimerWithTimeInterval: 5.0
                                             target: self
                                           selector: @selector(handleTimer:)
                                           userInfo: nil
                                            repeats: YES];
}

- (void) handleTimer: (NSTimer *) timer {
    currentImage++;
    if ( currentImage >= photos.count )
        currentImage = 0;

    NSURL *imageURL = [NSURL URLWithString:[photos objectAtIndex:currentImage]];
    NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
    [imgView setImage:[UIImage imageWithData:imageData]];
}

- (void)parser:(NSXMLParser *)parser didStartElement:(NSString *)elementName 
   namespaceURI:(NSString *)namespaceURI qualifiedName:(NSString *)qName 
   attributes:(NSDictionary *)attributeDict { 
    if ( [elementName isEqualToString:@"photo"]) {
        [photos addObject:[attributeDict objectForKey:@"url"]];
    }
}

- (void)viewDidUnload
{
    [super viewDidUnload];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:
     (UIInterfaceOrientation)interfaceOrientation
{
    return YES;
}

@end

Два новых элемента в листинге 7 ― это создание таймера в методе viewDidLoad и добавление метода handleTimer, который вызывается, когда срабатывает таймер. Метод HandleTimer просто увеличивает значение currentImage, а затем возвращается к началу индекса, если тот указывает на конец массива. Он также использует стандартную логику извлечения изображений для получения изображения с заданным индексом и его отображения.

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


Заключение

В этой статье мы создали простое приложение для iOS. Теперь его можно развивать в нескольких направлениях. Платформа iOS CoreGraphics предоставляет богатый набор переходных эффектов, которые можно использовать для анимации переходов между изображениями. Можно использовать PHP на сервере для динамической генерации XML. Или даже воспользоваться API CoreAudio и создать фоновую музыку для слайд-шоу.

Ресурсы

Научиться

Получить продукты и технологии

  • Mac App Store: загрузите и установите приложения на свой Мас.

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=XML, Open source
ArticleID=838818
ArticleTitle=Создание iOS-приложения для демонстрации слайд-шоу на iPad
publish-date=12032012