Современная электронная библиотека ModernLib.Net

Бестселлеры O`Reilly - iOS. Приемы программирования

ModernLib.Net / Программирование / Вандад Нахавандипур / iOS. Приемы программирования - Чтение (Ознакомительный отрывок) (стр. 4)
Автор: Вандад Нахавандипур
Жанр: Программирование
Серия: Бестселлеры O`Reilly

 

 


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

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

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

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

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


– (NSString *) yesButtonTitle{

return @"Yes";

}


– (NSString *) noButtonTitle{

return @"No";

}

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

#import 


#import "ViewController.h"


@interface ViewController () 


@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. Стиль, позволяющий вводить в вид-предупреждение имя пользователя и пароль

<p>См. также</p>

Раздел 1.19.

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

<p>Постановка задачи</p>

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

<p>Решение</p>

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

<p>Обсуждение</p>

Класс 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 = 

frame = (100 100; 79 27);

layer = >

The switch is turned off.

Sender is = 

frame = (100 100; 79 27);

layer = >

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

1.3. Оформление UISwitch

<p>Постановка задачи</p>

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

<p>Решение</p>

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

<p>Обсуждение</p>

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 под названиями On@2x.png и Off@2x.png (для сетчатого дисплея), а также поместил здесь разновидности изображений для обычного дисплея. Теперь нам предстоит создать переключатель, но присвоить ему заказные изображения «включено» и «выключено». Для этого воспользуемся следующими свойствами 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"];

}

<p>См. также</p>

Раздел 1.2.

1.4. Выбор значений с помощью UIPickerView

<p>Постановка задачи</p>

Необходимо предоставить пользователю приложения возможность выбирать значения из списка.

<p>Решение</p>

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

<p>Обсуждение</p>

Вид выбора (Picker View) – это элемент графического интерфейса, позволяющий отображать для пользователей списки значений, из которых пользователь затем может выбрать одно. В разделе Timer (Таймер) приложения Clock (Часы) в iPhone мы видим именно такой пример (рис. 1.10).


Рис. 1.10. Вид выбора, расположенный в верхней части экрана


Как видите, в отдельно взятом виде выбора содержится два независимых визуальных элемента, один слева, другой справа. В левой части вида отображаются часы (0, 1, 2 и т. д.), а в правой – минуты (18, 19, 20, 21, 22 и т. д.). Два этих элемента называются компонентами. В каждом компоненте есть строки (Rows). На самом деле любой элемент в любом компоненте представлен строкой, как мы вскоре увидим. Например, в левом компоненте 0 hours – это строка, 1 – это строка и т. д.

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

Сначала перейдем к файлу реализации. m контроллера нашего вида и определим в нем вид выбора:


@interface ViewController ()

@property (nonatomic, strong) UIPickerView *myPicker;

@end


@implementation ViewController


А теперь создадим вид выбора в методе viewDidLoad контроллера нашего вида:

– (void)viewDidLoad{

[super viewDidLoad];


self.view.backgroundColor = [UIColor whiteColor];


self.myPicker = [[UIPickerView alloc] init];

self.myPicker.center = self.view.center;

[self.view addSubview: self.myPicker];


}


В данном примере необходимо отметить, что вид выбора выравнивается по центру того вида, в котором находится. Если мы запустим это приложение в эмуляторе iOS 7, то увидим пустой экран. Дело в том, что в iOS 7 сам элемент для выбора белый и мы видим фон контроллера вида.

Вид выбора отображается в виде сплошного белого поля потому, что мы еще не наполнили его какими-либо значениями. Сделаем это. Итак, нам потребуется указать источник данных для вида выбора, а потом убедиться в том, что контроллер вида соответствует протоколу, требуемому источником данных. Источник данных экземпляра UIPickerView должен подчиняться протоколу UIPickerViewDataSource, так что обеспечим соответствие данного вида условиям этого протокола в файле. m:


@interface ViewController () 

@property (nonatomic, strong) UIPickerView *myPicker;

@end


@implementation ViewController



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


– (void)viewDidLoad{

[super viewDidLoad];


self.myPicker = [[UIPickerView alloc] init];

self.myPicker.dataSource = self;

self.myPicker.center = self.view.center;

[self.view addSubview: self.myPicker];


}


После этого, попытавшись скомпилировать приложение, вы увидите, что компилятор начинает выдавать предупреждения. Эти предупреждения сообщают, что вы еще не реализовали некоторые методы, внедрения которых требует протокол UIPickerViewDataSource. Чтобы исправить эту ситуацию, нужно нажать Command+Shift+O, ввести UIPickerViewDataSource и нажать Enter. Так вы попадете к тому месту в вашем коде, где определяется данный протокол, и увидите нечто подобное:


@protocol UIPickerViewDataSource

@required


// Возвращает количество столбцов для отображения

– (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView;


// Возвращает количество строк в каждом компоненте

– (NSInteger)pickerView:(UIPickerView *)pickerView

numberOfRowsInComponent:(NSInteger)component;

@end


Вы заметили здесь ключевое слово @required? Оно означает, что любой класс, желающий стать источником данных для вида выбора, обязан реализовывать эти методы. Напишем их в файле реализации контроллера нашего вида:


– (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{


if ([pickerView isEqual: self.myPicker]){

return 1;

}


return 0;


}

– (NSInteger) pickerView:(UIPickerView *)pickerView

numberOfRowsInComponent:(NSInteger)component{


if ([pickerView isEqual: self.myPicker]){

return 10;

}


return 0;

}


Итак, что здесь происходит? Рассмотрим, какие данные предполагает каждый из методов источника:

numberOfComponentsInPickerView: – этот метод передает объект вида выбора в качестве параметра, а в качестве возвращаемого значения ожидает целое число, указывающее, сколько компонентов вы хотели бы отобразить в этом виде выбора;


  • Страницы:
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15