Электронная библиотека » Вандад Нахавандипур » » онлайн чтение - страница 4


  • Текст добавлен: 14 июля 2014, 12:45


Автор книги: Вандад Нахавандипур


Жанр: Зарубежная компьютерная литература, Зарубежная литература


сообщить о неприемлемом содержимом

Текущая страница: 4 (всего у книги 59 страниц)

Шрифт:
- 100% +
1.1. Отображение предупреждений с помощью UIAlertView
Постановка задачи

Вы хотите, чтобы у ваших пользователей отобразилось сообщение, которое будет оформлено как предупреждение (Alert). Такие сообщения можно применять, чтобы попросить пользователя подтвердить выбранное действие, запросить у него имя и пароль или просто предложить ввести какой-нибудь простой текст, который вы сможете использовать в своем приложении.

Решение

Воспользуйтесь UIAlertView.

Обсуждение

Если вы сами пользуетесь iOS, то вам определенно попадались виды-предупреждения. Пример такого вида показан на рис. 1.1.


Рис. 1.1. Вид-предупреждение, сообщающий пользователю, что для работы требуется активное соединение с Интернетом


Наилучший способ инициализации вида-предупреждения заключается, разумеется, в использовании его базового конструктора-инициализатора:


– (void) viewDidAppear:(BOOL)paramAnimated{


[super viewDidAppear: paramAnimated];


UIAlertView *alertView = [[UIAlertView alloc]

initWithTitle:@"Alert"

message:@"You've been delivered an alert"

delegate: nil

cancelButtonTitle:@"Cancel"

otherButtonTitles:@"OK", nil];

[alertView show];

}


Когда этот вид-предупреждение отобразится у пользователя, он увидит экран, подобный показанному на рис. 1.2.


Рис. 1.2. Простой вид-предупреждение, отображаемый у пользователя


Чтобы показать пользователю вид-предупреждение, мы используем метод предупреждения show. Рассмотрим описания всех параметров, которые могут быть переданы базовому конструктору-инициализатору вида-предупреждения:

• title – строка, которую пользователь увидит в верхней части вида-предупрежения. На рис. 1.2 эта строка – Title;

• message – сообщение, которое отображается у пользователя. На рис. 1.2 для этого сообщения задано значение Message;

• delegate – опциональный объект-делегат, который мы передаем виду-предупреждению. Затем этот объект будет получать уведомление при каждом изменении состояния предупреждения, например, когда пользователь нажмет на экранную кнопку, изображенную в этом виде. Объект, передаваемый данному параметру, должен соответствовать протоколу UIAlertViewDelegate;

• cancelButtonTitle – строка, которая будет присваиваться кнопке отмены (Cancel Button) в виде-предупреждении. Если в виде-предупреждении есть кнопка отмены, то такой вид обычно побуждает пользователя к действию. Если пользователь не хочет совершать предложенное действие, то он нажимает кнопку отмены. Причем на этой кнопке не обязательно должна быть строка-надпись Cancel (Отменить). Надпись для этой кнопки определяете вы сами, и этот параметр опциональный – можно сделать диалоговое окно и без кнопки Отмена;

• otherButtonTitles – надписи на других кнопках, тех, которые вы хотите отобразить в виде-предупреждении. Разделяйте такие надписи запятыми. Нужно убедиться, что в конце списка названий стоит значение nil, называемое сигнальной меткой. Этот параметр не является обязательным.

Можно создать предупреждение вообще без кнопок. Но такое окно пользователь никак не сможет убрать с экрана. Создавая такой вид, вы как программист должны позаботиться о том, чтобы он убирался автоматически, например, через 3 секунды после того, как появится. Вид-предупреждение без кнопок, который не убирается автоматически, – это настоящее бедствие, с точки зрения пользователя. Ваше приложение не только получит низкие оценки на App Store за то, что вид-предупреждение блокирует пользовательский интерфейс. Велика вероятность, что вашу программу вообще удалят с рынка.

Виды-предупреждения можно оформлять с применением различных стилей. В классе UIAlertView есть свойство alertViewStyle типа UIAlertViewStyle:


typedef NS_ENUM(NSInteger, UIAlertViewStyle) {

UIAlertViewStyleDefault = 0,

UIAlertViewStyleSecureTextInput,

UIAlertViewStylePlainTextInput,

UIAlertViewStyleLoginAndPasswordInput

};


Вот что делает каждый из этих стилей:

• UIAlertViewStyleDefault – стандартный стиль вида-предупреждения, подобное оформление мы видели на рис. 1.2;

• UIAlertViewStyleSecureTextInput – при таком стиле в виде-предупреждении будет содержаться защищенное текстовое поле, которое станет скрывать от зрителя символы, вводимые пользователем. Такой вариант предупреждения вам подойдет, например, если вы запрашиваете у пользователя его учетные данные для дистанционного банковского обслуживания;

• UIAlertViewStylePlainTextInput – при таком стиле у пользователя будет отображаться незащищенное текстовое поле. Этот стиль отлично подходит для случаев, когда вы просите пользователя ввести несекретную последовательность символов, например номер его телефона;

• UIAlertViewStyleLoginAndPasswordInput – при таком стиле в виде-предупреждении будет два текстовых поля: незащищенное – для имени пользователя и защищенное – для пароля.

Если вам необходимо получать уведомление, когда пользователь начинает работать с видом-предупреждением, укажите объект-делегат для вашего предупреждения. Этот делегат должен подчиняться протоколу UIAlertViewDelegate. Самый важный метод, определяемый в этом протоколе, – alertView: clickedButtonAtIndex:, который вызывается сразу же, как только пользователь нажимает на одну из кнопок в виде-предупреждении. Индекс нажатой кнопки передается вам через параметр clickedButtonAtIndex.

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

Сначала реализуем два очень простых метода, которые возвращают надпись на той или иной из двух кнопок:


– (NSString *) yesButtonTitle{

return @"Yes";

}


– (NSString *) noButtonTitle{

return @"No";

}

Теперь нужно убедиться, что контроллер нашего вида подчиняется протоколу UIAlertViewDelegate:

#import <UIKit/UIKit.h>


#import «ViewController.h»


@interface ViewController () <UIAlertViewDelegate>


@end


@implementation ViewController



Следующий шаг – создать и отобразить для пользователя окно с предупреждением:


– (void)viewDidAppear:(BOOL)animated{

[super viewDidAppear: animated];


self.view.backgroundColor = [UIColor whiteColor];


NSString *message = @"Are you sure you want to open this link in Safari?";

UIAlertView *alertView = [[UIAlertView alloc]

initWithTitle:@"Open Link"

message: message

delegate: self

cancelButtonTitle: [self noButtonTitle]

otherButtonTitles: [self yesButtonTitle], nil];

[alertView show];


}


Вид-предупреждение будет выглядеть примерно как на рис. 1.3.


Рис. 1.3. Вид-предупреждение с кнопками No (Нет) и Yes (Да)


Далее нужно узнать, какой вариант пользователь выбрал в нашем окне – No (Нет) или Yes (Да). Для этого потребуется реализовать метод alertView: clickedButtonAtIndex:, относящийся к делегату нашего вида-предупреждения:


– (void) alertView:(UIAlertView *)alertView

clickedButtonAtIndex:(NSInteger)buttonIndex{


NSString *buttonTitle = [alertView buttonTitleAtIndex: buttonIndex];


if ([buttonTitle isEqualToString: [self yesButtonTitle]]){

NSLog(@"User pressed the Yes button.");

}

else if ([buttonTitle isEqualToString: [self noButtonTitle]]){

NSLog(@"User pressed the No button.");

}


}

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

Как видите, мы пользуемся методом buttonTitleAtIndex: класса UIAlertView. Мы передаем этому методу индекс кнопки, отсчитываемый с нуля (кнопка находится в нашем виде), и получаем строку, которая представляет собой надпись на этой кнопке – если такая надпись вообще имеется. С помощью этого метода можно определить, какую кнопку нажал пользователь. Индекс этой кнопки будет передан нам как параметр buttonIndex метода alertView: clickedButtonAtIndex:. Если вас интересует надпись на этой кнопке, то нужно будет использовать метод buttonTitleAtIndex: класса UIAlertView. Все готово!

Кроме того, вид-предупреждение можно использовать и для текстового ввода, например, запрашивая у пользователя номер кредитной карточки или адрес. Для этого, как было указано ранее, нужно использовать стиль оформления предупреждения UIAlertViewStylePlainTextInput:


– (void) viewDidAppear:(BOOL)animated{

[super viewDidAppear: animated];


UIAlertView *alertView = [[UIAlertView alloc]

initWithTitle:@"Credit Card Number"

message:@"Please enter your credit card number: "

delegate: self

cancelButtonTitle:@"Cancel"

otherButtonTitles:@"OK", nil];

[alertView setAlertViewStyle: UIAlertViewStylePlainTextInput];

/* Отобразить для этого текстового поля числовую клавиатуру. */

UITextField *textField = [alertView textFieldAtIndex:0];

textField.keyboardType = UIKeyboardTypeNumberPad;

[alertView show];


}

Если сейчас запустить приложение в эмуляторе, то мы увидим такое изображение, как на рис. 1.4.


Рис. 1.4. Вид-предупреждение для ввода обычным текстом


В этом коде мы изменяем стиль оформления вида на UIAlertViewStylePlainTextInput, а также делаем еще кое-что. Мы получили ссылку на первое и единственное текстовое поле, которое, как мы знаем, будет присутствовать в виде-предупреждении. Ссылку на текстовое поле применили для того, чтобы изменить тип клавиатуры, связанной с текстовым полем. Подробнее о текстовых полях поговорим в разделе 1.19.

Кроме обычного текста мы можем попросить пользователя набрать и защищенный текст. Как правило, защищается такой текст, который является для пользователя конфиденциальным, например пароль (рис. 1.5). Рассмотрим пример:


– (void) viewDidAppear:(BOOL)animated{

[super viewDidAppear: animated];


UIAlertView *alertView = [[UIAlertView alloc]

initWithTitle:@"Password"

message:@"Please enter your password: "

delegate: self

cancelButtonTitle:@"Cancel"

otherButtonTitles:@"OK", nil];


[alertView setAlertViewStyle: UIAlertViewStyleSecureTextInput];

[alertView show];


}


Рис. 1.5. Ввод защищенного текста в окно с предупреждением


Стиль UIAlertViewStyleSecureTextInput очень напоминает UIAlertViewStylePlainTextInput, за исключением того, что вместо символов текста мы подставляем какие-то нейтральные символы.

Следующий стиль довольно полезный. Он позволяет отобразить два текстовых поля: одно для имени пользователя, а другое – для пароля. Текст в первом поле открыт, а во втором – скрыт:


– (void) viewDidAppear:(BOOL)animated{

[super viewDidAppear: animated];


UIAlertView *alertView = [[UIAlertView alloc]

initWithTitle:@"Password"

message:@"Please enter your credentials: "

delegate: self

cancelButtonTitle:@"Cancel"

otherButtonTitles:@"OK", nil];


[alertView setAlertViewStyle: UIAlertViewStyleLoginAndPasswordInput];

[alertView show];


}


В результате увидим такое изображение, как на рис. 1.6.


Рис. 1.6. Стиль, позволяющий вводить в вид-предупреждение имя пользователя и пароль

См. также

Раздел 1.19.

1.2. Создание и использование переключателей с помощью UISwitch
Постановка задачи

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

Решение

Воспользуйтесь классом UISwitch.

Обсуждение

Класс UISwitch предоставляет инструмент управления ON/OFF (Вкл./Выкл.), как на рис. 1.7. Этот инструмент используется для работы с автоматической капитализацией, автоматическим исправлением орфографических ошибок и т. д.


Рис. 1.7. Переключатель UISwitch, применяемый в приложении Settings (Настройки) в iPhone


Создать переключатель можно либо с помощью конструктора интерфейса, либо сделав экземпляр такого переключателя в коде. Решим эту задачу вторым способом. Итак, следующая проблема – определить, в каком классе разместить соответствующий код. Это должен быть класс View Controller (Контроллер вида), который мы еще не изучали, но, поскольку в этой главе мы создаем программу типа Single View Application (Приложение с единственным видом), файл реализации (.m) контроллера вида будет называться ViewController.m. Откроем этот файл.

Создадим свойство типа UISwitch и назовем его mainSwitch:


#import «ViewController.h»


@interface ViewController ()

@property (nonatomic, strong) UISwitch *mainSwitch;

@end


@implementation ViewController

Теперь перейдем к файлу реализации контроллера вида (файлу. m) и синтезируем свойство mySwitch:

#import «Creating_and_Using_Switches_with_UISwitchViewController.h»


@implementation Creating_and_Using_Switches_with_UISwitchViewController


@synthesize mySwitch;



Можно продолжить и перейти к созданию переключателя. Найдем метод viewDidLoad в файле реализации нашего контроллера вида:


– (void)viewDidLoad{

[super viewDidLoad];

}

Создадим переключатель и поместим его в виде, в котором находится контроллер нашего вида:

– (void)viewDidLoad{

[super viewDidLoad];


/* Создаем переключатель */

self.mainSwitch = [[UISwitch alloc] initWithFrame:

CGRectMake(100, 100, 0, 0)];


[self.view addSubview: self.mainSwitch];

}


Итак, мы выделили объект типа UISwitch и применили метод initWithFrame: для инициализации переключателя. Обратите внимание: параметр, который мы должны передать этому методу, относится к типу CGRect. CGRect определяет границы прямоугольника, отсчитывая их от точки с координатами (x; y), находящейся в левом верхнем углу прямоугольника, и также используя данные о его ширине и высоте. Можно создать CGRect, воспользовавшись встраиваемым методом CGRectMake, где первые два параметра, передаваемые методу, – это координаты (x; y), а следующие два – высота и ширина прямоугольника.

Создав переключатель, мы просто добавляем его к виду нашего контроллера.

Теперь запустим приложение на эмуляторе iPhone. На рис. 1.8 показано, что происходит.


Рис. 1.8. Переключатель, размещенный в виде


Как видите, по умолчанию переключатель находится в состоянии Off (Выкл.). Чтобы задать в качестве стандартного противоположное состояние, можно изменить значение свойства on экземпляра UISwitch. Или можно вызвать метод setOn:, относящийся к переключателю:

[self.mySwitch setOn: YES];

Мы можем немного облегчить работу пользователю, применив метод переключателя setOn: animated:. Параметр animated принимает логическое значение. Если логическое значение равно YES, то при переходе переключателя из состояния on в состояние off этот процесс будет анимироваться, а также будут анимироваться любые взаимодействия пользователя с переключателем.

Очевидно, вы можете считывать информацию свойства on переключателя, чтобы узнавать, включен переключатель в данный момент или выключен. В качестве альтернативы можно пользоваться методом переключателя isOn:


if ([self.mySwitch isOn]){

NSLog(@"The switch is on.");

} else {

NSLog(@"The switch is off.");

}


Если вы хотите получать уведомления о том, когда переключатель переходит в состояние «включено» или «выключено», необходимо указать ваш класс как цель (Target) переключателя, воспользовавшись методом addTarget: action: forControlEvents: класса UISwitch:


[self.mySwitch addTarget: self

action:@selector(switchIsChanged:)

forControlEvents: UIControlEventValueChanged];


Затем реализуем метод switchIsChanged:. Когда среда времени исполнения вызовет этот метод в ответ на событие переключателя UIControlEventValueChanged, она передаст переключатель как параметр данного метода и вы сможете узнать, какой именно переключатель инициировал данное событие:


– (void) switchIsChanged:(UISwitch *)paramSender{


NSLog(@"Sender is = %@", paramSender);


if ([paramSender isOn]){

NSLog(@"The switch is turned on.");

} else {

NSLog(@"The switch is turned off.");

}


}


Теперь попробуем запустить наше приложение в эмуляторе iOS. В окне консоли вы увидите примерно такие сообщения:


Sender is = <UISwitch: 0x6e13500;

frame = (100 100; 79 27);

layer = <CALayer: 0x6e13700>>

The switch is turned off.

Sender is = <UISwitch: 0x6e13500;

frame = (100 100; 79 27);

layer = <CALayer: 0x6e13700>>

Переключатель включен.

1.3. Оформление UISwitch
Постановка задачи

Вы вставили в ваш пользовательский интерфейс несколько экземпляров UISwitch и теперь хотите оформить их так, чтобы они вписывались в этот графический интерфейс.

Решение

Используйте одно из свойств настройки тонов/изображений класса UISwitch, например tintColor или onTintColor.

Обсуждение

Apple проделала огромную работу по обеспечению оформления компонентов пользовательского интерфейса, в частности UISwitch. В предыдущих версиях SDK разработчикам приходилось производить подкласс от UISwitch лишь для того, чтобы изменить внешний вид и цвет элемента. В современном iOS SDK такие задачи решаются гораздо проще.

Существует два основных способа оформления переключателя.

• Работа с оттенками. Оттенки – это цветовые тона, которые вы можете применять к компоненту пользовательского интерфейса, например к UISwitch. Новый оттенок накладывается поверх актуального цвета компонента. Например, при работе с обычным UISwitch вы наверняка сталкивались с разными цветами. Когда вы применяете оттенок поверх цвета, этот цвет смешивается с наложенным оттенком. Таким образом создается разновидность оттенка, действующая в данном элементе пользовательского интерфейса.

• Изображения. Переключателю соответствуют:

• изображение включенного состояния. Находится на переключателе, когда он включен. Ширина изображения составляет 77 точек, высота – 22 точки;

• изображение выключенного состояния. Находится на переключателе, когда он выключен. Ширина изображения составляет 77 точек, высота – 22 точки.

На рис. 1.9 показаны примеры изображений, используемых при включенном и выключенном переключателе.


Рис. 1.9. Переключатель UISwitch и изображения, соответствующие его включенному и выключенному состояниям


Итак, переключатель может находиться в одном из двух состояний – он либо включен, либо выключен. Теперь рассмотрим, как изменить оттенок переключателя, находящегося в пользовательском интерфейсе. Это можно сделать с помощью трех важных свойств класса UISwitch (все эти свойства относятся к типу UIColor):

tintColor – оттенок, применяемый к переключателю в выключенном состоянии. К сожалению, Apple подобрала для него не совсем точное название (правильнее было бы, конечно, назвать это свойство offTintColor);

• thumbTintColor – оттенок, который будет применяться к рычажку переключателя;

• onTintColor – оттенок, применяемый к переключателю во включенном состоянии.

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


– (void)viewDidLoad

{

[super viewDidLoad];


/* Создаем переключатель */

self.mainSwitch = [[UISwitch alloc] initWithFrame: CGRectZero];

self.mainSwitch.center = self.view.center;

[self.view addSubview: self.mainSwitch];


/* Оформляем переключатель */


/* Изменяем оттенок, который будет у переключателя в выключенном виде */

self.mainSwitch.tintColor = [UIColor redColor];

/* Изменяем оттенок, который будет у переключателя во включенном виде */

self.mainSwitch.onTintColor = [UIColor brownColor];

/* Изменяем также оттенок рычажка на переключателе */

self.mainSwitch.thumbTintColor = [UIColor greenColor];

}


Теперь, когда мы закончили работу с оттенками переключателя, перейдем к оформлению внешнего вида переключателя, связанному с использованием изображений «включено» и «выключено». При этом не забываем, что заказные изображения «включено» и «выключено» поддерживаются только в iOS 6 и старше. iOS 7 игнорирует такие изображения и при оформлении внешнего вида работает только с оттенками. Как было указано ранее, оба варианта изображения на переключателе – как для включенного, так и для выключенного состояния – должны иметь ширину 77 точек и высоту 22 точки. Поэтому я подготовил новый комплект таких изображений (для работы с обычным и сетчатым дисплеем). Я добавил их в мой проект в Xcode под названиями [email protected] и [email protected] (для сетчатого дисплея), а также поместил здесь разновидности изображений для обычного дисплея. Теперь нам предстоит создать переключатель, но присвоить ему заказные изображения «включено» и «выключено». Для этого воспользуемся следующими свойствами UISwitch:

onImage – как указано ранее, это изображение будет использоваться, когда переключатель включен;

• offImage – это изображение соответствует переключателю в состоянии «выключено».

А вот код, позволяющий добиться такого эффекта:


– (void)viewDidLoad

{

[super viewDidLoad];


/* Создаем переключатель */

self.mainSwitch = [[UISwitch alloc] initWithFrame: CGRectZero];

self.mainSwitch.center = self.view.center;

/* Убеждаемся, что переключатель не выглядит размытым в iOS-эмуляторе */

self.mainSwitch.frame = [self roundedValuesInRect: self.mainSwitch.frame];

[self.view addSubview: self.mainSwitch];


/* Оформляем переключатель */

self.mainSwitch.onImage = [UIImage imageNamed:@"On"];

self.mainSwitch.offImage = [UIImage imageNamed:@"Off"];

}


Страницы книги >> Предыдущая | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | Следующая
  • 0 Оценок: 0

Правообладателям!

Это произведение, предположительно, находится в статусе 'public domain'. Если это не так и размещение материала нарушает чьи-либо права, то сообщите нам об этом.


Популярные книги за неделю


Рекомендации