Руководство о том как создать простое приложение на iOS для iPhone: часть 1/3
Логотип www.it-type.ru
05 ноября 2012 в 04:10

Руководство о том как создать простое приложение на iOS для iPhone: часть 1/3

iPhone это превосходная платформа для инди разработчиков. Никогда не было проще превращать свои уникальные идеи в приложения, писать их, размещать где они будут доступны для миллионов потенциальных покупателей. В последнее время я получаю много вопросов от новичков, которые только начинают разрабатывать приложения на iOS, они спрашивают с чего начать. И так я решил, что будет полезным написать серию статей специально для начинающих. Мы не будем сосредотачиваться подробно на одной теме, вместо этого мы создадим одно большое приложение с нуля. Таким образом вы подчерпнете информацию их разных областей разработки для iPhone и спокойно, сможете углубится в любую область сами. Так что же за приложение мы собираемся сделать? Это история началась с этого…

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

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

Данное руководство для начинающих разработчиков iOS, однако оно предполагает, что вы знакомы с Objective-C и программированием в целом. Если вы новичок в Objective-C, я рекомендую прочитать сначала Руководство по программированию на языке Objective-C от Apple.

Что вам нужно

Первая и основная вещь которая вам нужна для разработки для iPhone, это Mac. Практически на любом Mac’е можно это делать, если он в состоянии для запуска версии Mac OS, Lion. Но если вы хотите пойти более дешевым путем, то можно подобрать mac mini он отлично подойдет для разработки.
Следующим шагом вам нужно скопировать Xcode, это среда разработки iOS от Apple. То есть если у вас есть зарегистрированный аккаунт или зарегистрировать его в iPhone Dev Center и загрузить копию из Mac App Store.
Если вы хотите то вы можете оформить платную подписку iPhone разработчика, которая позволяет выкладывать свои приложения в App Store, но если вы хотите просто попробовать создавать приложения под iOS, то для этого вполне хватит бесплатного аккаунта.
Если вы серьезно относитесь к разработке под iOS, вам нужно обладать реальным устройством (iPhone/iPod Touch/iPad). Вы можете тестировать приложение в симуляторе, но есть некоторые API которые не работают на симуляторе, и вы будете вынуждены иметь реальное устройство для тестирования производительности.
Если вы все это сделали, давайте продолжать.

Привет, Table View!

Давайте приступим к рассмотрению одного из контролеров в iOS - и это Table View. Вы могли наблюдать использование этого контролера в разных приложениях например:

Наше приложение будет иметь список жуков который будет отображаться в таблице.

Наше приложение будет иметь список жуков который будет отображаться в таблице. В начале запустим xcode, затем заходим в File\New Project. Выбераем iOS\Application\Master-Detail Application и нажмем next.

На следующей странице в поле Product Name вводим ScaryBugs, а в Company Indentifier напишем уникальное название вашей компании (com.yourcompanyname or com.yourname is best), для Device Family выбираем Iphone. Проверяем отмечены ли Use Storyboard и Use Automatic Reference Counting. Нажмем Next чтобы создать проект. Выбираем место куда сохранить ваш проект нажмем Create для его создания.

Прежде чем продолжить, давайте посмотрим, что у нас получилось. На панели инструментов, расположенной сверху выберите из списка Iphone Simulator и нажмите кнопку Run расположенную слева. И если до этого мы все сделали правильно, то вы увидите вот такую картину в симуляторе:

В данный момент можно нажать на кнопку «+» для создания новой записи, можно нажать на созданную запись что бы увидеть содержимое:

Как вы видите мы создали рабочий проект из шаблона Master-Detail Application. Мы не будем досконально разбирать этот шаблон, это выходит за рамки данного урока, но у нас есть пустая таблица готовая для использования - мы просто заполним её данными.
Для этого давайте создадим класс с и наполним таблицу страшными жуками.

Организация модели данных

Обратим внимание на иерархию каталогов в панели Project Navigator:?

В шаблоне уже содержатся базовые файлы и группа файлов поддержки (Supporting Files). Базовые группы используются только для организационных целей, так что не стесняйтесь их менять как вам удобно. В нашем случае мы создадим не один файл в проекте, поэтому давайте их организуем. Сначала создадим новую группу для хранения готовых файлов пользовательского интерфейса. Для этого нажмем правой кнопкой мыши на корневой группе с названием нашего проекта ScaryBugs и выберем New Group. Зададим название нашей новой группе «GUI» и нажмем Enter. Теперь перенесем уже созданные файлы из корневой группы ScaryBugs в нашу новую группу GUI, это должно выглядеть как на рисунке:

А теперь создадим вторую группу и дадим ей имя «Model», потому что классы от нашей модели мы будем добавлять именно туда. Теперь, наше дерево будет выглядеть следующем образом:

Прежде чем нам продолжить, давайте поговорим об организации данных:

  1. ScaryBugData: Будет содержать имя наших жуков и рейтинг.
  2. ScaryBugDoc: Будет содержать полноразмерную картинку, привью картинку и ScaryBugData.

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

Реализация модели данных

Хорошо давайте продолжим. Нажмите правой кнопкой мыши на группе Model, которую мы с вами создали ранее и выберите «New File...». В появившемся окне выберем iOS\Cocoa Touch?\Objective-C шаблон класса и нажмите Next.

?Введем имя класса ScaryBugData, NSObject для subclass и нажмем Next.

И в финальном всплывающем окне нажмите Create. Если все хорошо прошло то в панели ?Project Navigator будет выглядеть следующим образом:

А теперь пришло время для написания кода класса ScaryBugData. Замените ScaryBugData.h следующим содержанием:

#import <foundation/foundation.h>

@interface ScaryBugData : NSObject

@property(strong) NSString *title;
@property(assign) float rating;

-(id)initWithTitle:(NSString*) title rating:(float) rating;

@end

Здесь все просто, мы объявляем объект с двумя свойствами: строка для имени жука, и параметр float для определения рейтинга ужасности. Мы используем два атрибута для свойств:

Еще мы определили инциализатор класса, теперь мы можем установить имя и рейтинг при создании ячейки с жуком. Теперь перейдем к файлу реализации ScaryBugData.m и заменим его следующим содержанием:

#import "ScaryBugData.h"

@implementation ScaryBugData

@synthesize title _title;
@synthesize rating _rating;

-(id)initWithTitle:(NSString*)title rating:(float)rating {
	if((self = [super init])) {
		self.title = title;
		self.rating = rating;
	}
	return self;
}

@end

И здесь ничего сложного нет. Мы синтезируем наши свойства создавая инициализатор для заполнения переменных переданными параметрами. Обратите внимания мы не используем dealloc, потому что мы используем ARC. Так с подклассом ScaryBugData закончили. Сейчас необходимо проделать те же действия которые мы делали при создании класса выше, только с дургим подкласом NSObject его имя ScaryBugDoc. После создания замените ScaryBugDoc.h следующим содержимым:

#import <foundation/foundation.h>
@class ScaryBugData;

@interface ScaryBugDoc:NSObject

@property (strong)ScaryBugData *data;
@property (strong)UIImage *thumbImage;
@property (strong)UIImage *fullImage;

- (id)initWithTitle:(NSString*)title rating:(float)rating thumbImage:(UIImage *)thumbImage fullImage:(UIImage *)fullImage;

@end

Мы снова создаем нескольких переменных/свойств и инициализацию. Замените ScaryBugDoc.m следующим содержанием:

#import "ScaryBugDoc.h"
#import "ScaryBugData.h"

@implementation ScaryBugDoc

@synthesize data = _data;
@synthesize thumbImage = _thumbImage;
@synthesize fullImage = _fullImage;

-(id)initWithTitle:(NSString*)title rating:(float)rating thumbImage:(UIImage *)thumbImage fullImage:(UIImage *)fullImage {
	if((self = [super init])) {
		self.data = [[ScaryBugData alloc] initWithTitle:title rating:rating];
		self.thumbImage = thumbImage;
		self.fullImage = fullImage;
    }
    return self;
}

@end

И так на этом наша модель данных закончена. Пришло время для создания образца для отображения данных в таблице.

Списки жуков.

Сперва давайте настроим внешний вид обработчика списка ScaryBugDocs в таблице. Первое что мы изменим это динамически создаваемый список строк в нашей таблице(это не жестко закодированная строка, а изменяемый шаблон).
Начнем, откройте MainStoryboard.storyboard. Здесь можно визуально расположить «экраны» приложения. Как вы можете видеть в данный момент в приложении есть navigation controller (он позволяет перелистывать экраны), с корневым контролером “master” и вторичным “detail” контролером.

Выберите Master View Controller в левой панели и в открывшемся списек выберите Table View. С права выберите Attributes Inspector и для атрибута Content укажите значение Dynamic Prototypes.

Это нам позволить спроектировать вид ячейки таблицы и легко создавать их с помощью кода. Мы будем использовать базовый стиль содержимого ячейки, давайте выберем его. Выберете Table view cell на левой панели, и а Attributes Inspector установите атрибут Style равным Basic. После этого для Identifier введите MyBasicCell.

Больше информации о том как создавать свой вид ячеек читайте на Beginning Storyboards in iOS 5 Tutorial.

Хорошо, теперь у нас есть таблица с настроенным представлением и нам необходимо дополнить код чтобы заполнить нашу таблицу жуками.

Мы будем хранить наш ScaryBugDocs в NSMutableArray этот класс позволяет динамически менять размер массива.

Добавим следующую строку в MasterViewController.h между @interface и @end:

@property (strong)NSMutableArray *bugs;

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

Теперь перейдем в MasterViewController.m и внесем следующие изменения:

// в начало файла
#import "ScaryBugDoc.h"
#import "ScaryBugData.h"

// После @implementation
@synthesize bugs = _bugs;

// В конце viewDidLoad
self.title = @"Scary Bugs";

//Установим shouldAutorotateToInterfaceOrientation:
return YES;

//Вернем значение в tableView:numberOfRowsInSection:
return _bugs.count;

//Заменим tableView:cellForRowAtIndexPath на
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath*)indexPath 
{
    UITableViewCell *cell = [tableView
                             dequeueReusableCellWithIdentifier:@"MyBasicCell"];
    PIScaryBugDoc *bug = [self.bugs objectAtIndex:indexPath.row];
    cell.textLabel.text = bug.data.title;
    cell.imageView.image = bug.thumbImage;
    return cell;
}

Хорошо, теперь есть хоть что то интересное для обсуждения.

Сперва обратим внимание на то что мы установили свойству ‘title’ строку «Scary bugs». ‘title’ это специально свойство встроенное в контролере представления. Когда контролер навигации отображает контролер представления, свойство ‘title’ находится в строке заголовка. Таким образом установив это свойство, мы должны увидеть сверху заголовок ‘Scary Bugs’!

Теперь обратим внимание мы возвращаем ‘yes’ в shouldAutorotateToInterfaceOrientation, который сообщает операционной системе что она должна поддерживать все ориентации - портрет, ландшафт, как сверху так и снизу. Так как это класс который принадлежит к классу UITableViewController, это все что нужно сделать что бы представление переворачивалось автоматически.

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

Наконец, мы реализуем TableView:cellForRowAtIndexPath который, является, вероятно, наиболее важным методом при создании таблицы. В нем мы устанавливаем ячейку, которая будет отображаться для конкретной строки. Операционная система будет вызывать этот, метод единожды для каждой строки.

Давайте рассмотрим этот метод более подробно, так как он очень важен в нашем случае:

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath*)indexPath 
{
    UITableViewCell *cell = [tableView
                             dequeueReusableCellWithIdentifier:@"MyBasicCell"];
    PIScaryBugDoc *bug = [self.bugs objectAtIndex:indexPath.row];
    cell.textLabel.text = bug.data.title;
    cell.imageView.image = bug.thumbImage;
    return cell;
}

В первой строке вызывается вспомогательная функция “dequeueReusableCellWithIdentifier” что бы попытаться вернуть повторно используемые ячейки. Что все это значит?

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

Если невозможно обратиться к ячейке, то просто создается новая ячейка на основе стиля выбранного в Interface Builder (помните как мы установили basic и задали имя “MyBasicCell” ?)

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

Если вам интересно как выглядят различные стандартные варианты стилей ячеек, ищите раздел “Standard Styles for Table-View Cells” в Table View Programming Guide.

И в финале, мы настраиваем параметры ячейки textLabel и imageView (которые доступны в стандартном стиле).

Верите или нет это все что нужно было сделать. Теперь нам надо установить несколько простых данных для таблицы что увидеть их на экране.

Картинки ужасных жуков!

Конечно нам эти картинки нужно где то взять. Вы можете найти их сами в интернете или скачать здесь Scary Bug Pictures я нашел на stock.xchng.

Сначала вы должны взять скаченные файлы или свои которые у вас были, переместить их все в корневую директорию вашего дерева в Project Navigator. Когда появится всплывающее окно, отметьте “Copy items into destination group’s folder (if needed)” и нажмите Add.

Затем откройте AppDelegate.m и внесите следующие изменения:

// Добавте в начало файла
#import "MasterViewController.h"
#import "ScaryBugDoc.h"
 
// Начало application:didFinishLaunchingWithOptions
ScaryBugDoc *bug1 = [[ScaryBugDoc alloc] initWithTitle:@"Potato Bug" rating:4 
	thumbImage: [UIImage imageNamed:@"potatoBugThumb.jpg"] 
	fullImage:[UIImage imageNamed:@"potatoBug.jpg"]];
ScaryBugDoc *bug2 = [[ScaryBugDoc alloc] initWithTitle:@"House Centipede" rating:3 
	thumbImage:[UIImage imageNamed:@"centipedeThumb.jpg"] 
	fullImage:[UIImage imageNamed:@"centipede.jpg"]];
ScaryBugDoc *bug3 = [[ScaryBugDoc alloc] initWithTitle:@"Wolf Spider" rating:5 
	thumbImage:[UIImage imageNamed:@"wolfSpiderThumb.jpg"] 
	fullImage:[UIImage imageNamed:@"wolfSpider.jpg"]];
ScaryBugDoc *bug4 = [[ScaryBugDoc alloc] initWithTitle:@"Lady Bug" rating:1 
	thumbImage: [UIImage imageNamed:@"ladybugThumb.jpg"] 
	fullImage:[UIImage imageNamed:@"ladybug.jpg"]];
NSMutableArray *bugs = [NSMutableArray arrayWithObjects:bug1, bug2, bug3, bug4, nil];
 
UINavigationController * navController = (UINavigationController *) self.window.rootViewController;
MasterViewController * masterController = [navController.viewControllers objectAtIndex:0];
masterController.bugs = bugs;

Здесь мы работаем только с ScaryBugDoc, инициализатор создает четыре жука отличающихся названием, ретингом и изображением. Мы добавляем их всех в массив NSMutableArray и устанавливаем их в нашей таблице.

Дальше получаем указатель на RootViewController, потому что мы знаем что это первый контролер представления в стеке навигации контролера. Есть и другие способы получения этого указателя но это самый простой способ.

И теперь если скомпилировать и запустить приложение мы получим нашу таблицу наполненную жуками.



Что делать дальше?

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

Оригинал статьи взят отсюда How To Create A Simple iPhone App on iOS 5 Tutorial: Part 1/3

iOS, iPhone, iPad, Руководство


А знаете ли вы?
Когда появился первый жесткий диск?
Популярные теги

Отправить идею!
Отправить