iOS. Приемы программирования - Вандад Нахавандипур
Шрифт:
Интервал:
Закладка:
[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.
1.4. Выбор значений с помощью UIPickerView
Постановка задачи
Необходимо предоставить пользователю приложения возможность выбирать значения из списка.
Решение
Воспользуйтесь классом UIPickerView.
Обсуждение
Вид выбора (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 сам элемент для выбора белый и мы видим фон контроллера вида.
