Главная | Пиротехника

Наша совместная команда Banwar.org

Связаться с нами

  • (097) ?601-88-87
    (067) ?493-44-27
    (096) ?830-00-01

Статьи

Створення iOS-додатки для демонстрації слайд-шоу на iPad

  1. Використані скорочення
  2. Створення серверної частини
  3. Лістинг 1. photos.xml
  4. Малюнок 1. XML-файл на сервері
  5. Малюнок 2. Одна з фотографій на сервері
  6. Створення клієнтської програми для демонстрації слайд-шоу
  7. Малюнок 3. Майстер додатків
  8. Малюнок 4. Варіанти проектів
  9. Додавання представлення зображень
  10. Малюнок 5. Додавання об'єкта UIImageView до контролера уявлень XIB
  11. Малюнок 6. Налаштування UIImageView
  12. Лістинг 2. SlideshowViewController.h
  13. Лістинг 3. SlideshowViewController.m
  14. Малюнок 7. Перше зображення з сервера
  15. Синтаксичний аналіз XML
  16. Лістинг 4. SlideshowViewController.h з фотографіями
  17. Лістинг 5. SlideshowViewController.h з фотографіями
  18. Анімація слайд-шоу
  19. Лістинг 6. Готовий SlideshowViewController.h
  20. Лістинг 7. Готовий SlideshowViewController.m
  21. висновок
  22. Ресурси для скачування

З використанням XML, XCode і API iOS

Використані скорочення
  • 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, XCode і API iOS Використані скорочення IDE: Integrated Development Environment - інтегроване середовище розробки; iOS: мобільна операційна система Apple OS X: операційна система комп'ютерів Apple Macintosh; Не секрет, що саме писання додатків для iOS-пристроїв, таких як iPad або iPhone, - вельми популярне заняття: ці пристрої прекрасні і прості в застосуванні

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

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

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

Ви повинні побачити щось схоже на малюнок 2 .

Малюнок 2. Одна з фотографій на сервері

Посилання на фотографії, розташовані на сервері, містяться в 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, помістіть його в slideshowControllerView. Зазвичай IDE автоматично масштабує елементи управління за розміром доступного простору. Якщо це не зроблено, просто потягніть за елемент керування, щоб відрегулювати його розмір, поки він не заповнить всі вікно.

Коли елемент управління знаходиться в поданні, потрібно встановити деякі параметри, щоб додаток прийняло оптимальний вид. на малюнку 6 показані значення атрибутів екрана для елемента управління Image View.

Малюнок 6. Налаштування UIImageView

Потрібно змінити режим (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 і створити фонову музику для слайд-шоу.

Ресурси для скачування

Схожі теми

Підпишіть мене на повідомлення до коментарів

Новости

Banwar.org
Наша совместная команда Banwar.org. Сайт казино "Пари Матч" теперь доступен для всех желающих, жаждущих волнения и азартных приключений.