С более чем полумиллионом приложений Apple App Store может быть немного переполнен, но хорошая новость заключается в том, что умные разработчики могут добавить секретное оружие в свой арсенал в стремлении к доминированию в App Store. Этот секрет — дизайн! В этой серии из трех частей я покажу вам, как проектировать и создавать приложения для малого бизнеса с нуля.
Конечный эффект
Давайте назовем приложение для этой серии «Biz App», так как оно может быть использовано для демонстрации услуг малого бизнеса. Идея состоит в том, чтобы следовать и понимать, как разрабатываются приложения, чтобы вы могли выйти и заставить свои приложения качаться.
Готов? Пошли!
Создать проект
Создайте новый проект Xcode и используйте шаблон приложения с вкладками. Назовите его BizAppTutorial и убедитесь, что установлены флажки «Использовать раскадровку» и «Использовать автоматический подсчет ссылок». Нажмите Далее, выберите место для сохранения проекта, и вы готовы к работе.
Проектирование заставки
Выберите файл раскадровки, который называется MainStoryBoard_iPhone, и теперь у вас должно получиться изображение, похожее на изображение ниже. Это начальная пара контроллеров представления, которые Xcode создал для нас.
Первым шагом является реализация следующего экрана. Для этого выберите FirstViewController в раскадровке и удалите два образца меток на экране. Выберите файл FirstViewController.h и объявите следующие переменные:
|
1
2
3
4
5
6
7
8
9
|
@property (nonatomic, strong) IBOutlet UILabel* logoLabel;
@property (nonatomic, strong) IBOutlet UILabel* descriptionLabel;
@property (nonatomic, strong) IBOutlet UIButton* callUsButton;
@property (nonatomic, strong) IBOutlet UIButton* directionsButton;
@property (nonatomic, strong) IBOutlet UILabel* copyrightLabel;
|
Это элементы пользовательского интерфейса, которые присутствуют на этом экране, и мы скоро будем их настраивать.
Теперь давайте синтезируем эти переменные в файле FirstViewController.m
|
1
|
@synthesize logoLabel, descriptionLabel, callUsButton, directionsButton, copyrightLabel;
|
Следующим шагом является создание меток, которые будут добавлены на экран. Код ниже определяет функцию, которая создает метку с некоторыми настройками. Свойства, которые установлены на метке — это цвет, тень, shadowOffset и выравнивание.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
-(UILabel*)createLabelWithFrame:(CGRect)frame andFontSize:(float)fontSize andText:(NSString*)text
{
UILabel* label = [[UILabel alloc] initWithFrame:frame];
[label setFont:[UIFont systemFontOfSize:fontSize]];
[label setTextColor:[UIColor whiteColor]];
[label setShadowColor:[UIColor blackColor]];
[label setShadowOffset:CGSizeMake(0, -1)];
[label setTextAlignment:UITextAlignmentCenter];
[label setBackgroundColor:[UIColor clearColor]];
[label setText:text];
return label;
}
|
Теперь мы можем вызвать этот метод и присвоить возвращаемое значение двум нашим меткам. Каждый раз мы даем ему разные параметры. После этого мы добавляем метку в ViewController.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
— (void)viewDidLoad
{
self.descriptionLabel = [self createLabelWithFrame:CGRectMake(42, 91, 238, 55) andFontSize:19 andText:@»A short description goes here»];
self.copyrightLabel = [self createLabelWithFrame:CGRectMake(22, 379, 269, 23) andFontSize:11 andText:@»Copyright 2012 Attorney Biz»];
[self.view addSubview:descriptionLabel];
[self.view addSubview:copyrightLabel];
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
|
Если вы запустите приложение, вы увидите, что наши ярлыки были добавлены в представление, и они находятся в разных местах и разных размеров.
Мы не можем видеть этикетки из-за фона. Давайте добавим фоновую текстуру в представление. Изображение, которое будет использоваться, представляет собой синюю текстуру ткани, которую я разработал для одного из наших дизайнов приложений для iPhone , но в этом случае вы можете использовать его бесплатно! На самом деле, все образцы, используемые в этом руководстве, доступны в примере проекта, который сопровождает этот пост Mobiletuts + .
Это изображение называется bg-splash.pngm, и мы можем использовать это изображение в качестве фона, добавив следующий код в метод viewDidLoad. Это создаст цветной рисунок с изображением и затем установит фоновое изображение к цветному образцу.
|
1
2
|
UIColor *backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@»bg-splash.png»]];
[self.view setBackgroundColor:backgroundColor];
|
Если вы запустите приложение, вы должны увидеть синий фон за метками. Наше приложение сейчас принимает форму.
Добавление градиентной метки
Теперь нам нужно добавить градиентную метку на экран и для этого мы будем использовать компонент с открытым исходным кодом FXLabel . Apple не позволяет нам легко добавлять градиенты к ярлыкам без какого-либо пользовательского рисунка, следовательно, вспомогательного кода. Загрузите ZIP-файл с Github и добавьте два файла FXLabel.h и FXLabel.m в свой проект.
Добавьте это в начало метода viewDidLoad:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
self.logoLabel = [[FXLabel alloc] initWithFrame:CGRectMake(14, 11, 280, 87)];
[logoLabel setFont:[UIFont boldSystemFontOfSize:45]];
[logoLabel setTextColor:[UIColor whiteColor]];
[logoLabel setShadowColor:[UIColor blackColor]];
[logoLabel setShadowOffset:CGSizeMake(0, 2)];
[logoLabel setTextAlignment:UITextAlignmentCenter];
[logoLabel setBackgroundColor:[UIColor clearColor]];
[logoLabel setText:@»Attorney Biz»];
[logoLabel setGradientStartColor:[UIColor colorWithRed:163.0/255 green:203.0/255 blue:222.0/255 alpha:1.0]];
[logoLabel setGradientEndColor:[UIColor whiteColor]];
[self.view addSubview:logoLabel];
|
Это делает настройку, аналогичную нашим предыдущим меткам, но в этом случае мы добавляем градиент от небесно-голубого до белого. Если вы запустите приложение в симуляторе, вы получите следующий экран:
Добавление кнопок
Следующим шагом является добавление кнопок в наше приложение. Мы делаем это с помощью следующего кода:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
-(UIButton*)createButtonWithFrame:(CGRect)frame andLabel:(NSString*)label
{
UIButton *button = [[UIButton alloc] initWithFrame:frame];
UIColor* buttonColor = [UIColor colorWithRed:95.0/255 green:113.0/255 blue:126.0/255 alpha:1.0];
[button setTitle:label forState:UIControlStateNormal];
[button setTitleColor:buttonColor forState:UIControlStateNormal];
[button setBackgroundImage:[UIImage imageNamed:@»button-splash.png»] forState:UIControlStateNormal];
[button.titleLabel setFont:[UIFont boldSystemFontOfSize:18]];
return button;
}
|
Эта функция создает кнопку в указанном месте с указанным текстом. В методе происходят некоторые настройки. Цвет текста меняется на сероватый. Фоновое изображение также установлено на один из образцов графики в папке ресурсов.
После добавления этого метода и определения в файл заголовка следующим шагом является вызов метода и назначение полученных кнопок кнопкам «Позвоните нам» и «Направления».
|
1
2
3
4
5
6
7
|
self.callUsButton = [self createButtonWithFrame:CGRectMake(22, 259, 276, 52) andLabel:@»Call us»];
self.directionsButton = [self createButtonWithFrame:CGRectMake(22, 319, 276, 52) andLabel:@»Directions»];
[self.view addSubview:callUsButton];
[self.view addSubview:directionsButton];
|
Часть кода выше добавляется в метод viewDidLoad в файле FistViewController.m. Он использует новый метод createButton и передает ему определенные параметры, а именно расположение кнопки и текст.
Затем кнопки добавляются в вид.
Если вы запустите приложение, вы должны увидеть следующий экран, который составляет наш законченный дизайн.
Пара твиков
Если вы заметили, приведенный выше экран не похож на начальный экран, который я показал вам в начале этого урока. Метка описания обрезана, а текст «Attorney Biz» не имеет градиента.
Чтобы описание занимало две строки, добавьте следующий код в метод viewDidLoad сразу после создания descriptionLabel.
|
1
|
[descriptionLabel setNumberOfLines:2];
|
Делая это функциональным
Прямо сейчас наш экран выглядит хорошо, но он ничего не делает. Кнопки никуда не ведут. Давайте это исправим. Следующие строки кода определяют два метода. Первый метод вызовет указанный номер, а второй метод откроет карту для указанного местоположения (в данном случае Лондон).
|
01
02
03
04
05
06
07
08
09
10
11
|
-(void)callNumber
{
UIApplication *app = [UIApplication sharedApplication];
[app openURL:[NSURL URLWithString:[NSString stringWithFormat:@»tel:004-102-3929″]]];
}
-(void)openMap
{
UIApplication *app = [UIApplication sharedApplication];
[app openURL:[NSURL URLWithString:@»http://maps.google.com/maps?q=Paris»]];
}
|
Следующий шаг — подключить наши кнопки с помощью этого нового метода.
|
1
2
3
|
[self.callUsButton addTarget:self action:@selector(callNumber) forControlEvents:UIControlEventTouchUpInside];
[self.directionsButton addTarget:self action:@selector(openMap) forControlEvents:UIControlEventTouchUpInside];
|
Теперь, когда вы нажимаете на кнопки, приложение пытается позвонить или открыть приложение «Карты».
Примечание: звонки не могут быть сделаны в симуляторе. Запустите это на iPhone, чтобы проверить работоспособность.
Вывод
Мы подошли к концу первой части серии App Design. Обратите внимание на части 2 и 3, в которых мы будем разрабатывать больше приложений и придавать им потрясающий вид, чтобы вы могли продолжать и делать то же самое со своими собственными приложениями.
Если у вас есть какие-либо вопросы, пожалуйста, дайте мне знать в комментариях, и я буду там, чтобы ответить на них!