Вандад Нахавандипур - iOS. Приемы программирования
В SDK iOS разработчик также может изменять внешний вид слайдера. Например, ползунок может иметь нестандартный вид. Чтобы изменить внешний вид ползунка, просто пользуйтесь методом setThumbImage: forState: и передавайте нужное изображение, а также второй параметр, который может принимать одно из двух значений:
• UIControlStateNormal — обычное состояние ползунка, когда его не трогает пользователь;
• UIControlStateHighlighted — изображение, которое должно быть на месте ползунка, когда пользователь начинает его двигать.
Я подготовил два изображения: одно для стандартного состояния ползунка, а другое — для активного (затронутого) состояния. Добавим их к слайдеру:
[self.slider setThumbImage: [UIImage imageNamed:@"ThumbNormal.png"]
forState: UIControlStateNormal];
[self.slider setThumbImage: [UIImage imageNamed:@"ThumbHighlighted.png"]
forState: UIControlStateHighlighted];
Теперь взглянем, как выглядит в эмуляторе неактивный слайдер (рис. 1.19).
Рис. 1.19. Слайдер со специально оформленным ползунком
1.7. Оформление UISlider
Постановка задачи
Вы используете компонент графического интерфейса UISlider, оформленный по умолчанию, и хотите на свой вкус изменить его внешний вид.
Решение
Либо измените оттенки различных частей слайдера, либо подготовьте для его элементов собственные рисунки.
Обсуждение
Apple проделала огромную работу, предоставив нам в iOS SDK методы для оформления компонентов пользовательского интерфейса. В частности, оформление может быть связано с изменением оттенков различных частей компонента в интерфейсе. Схема, демонстрирующая компонентный состав пользовательского интерфейса, приведена на рис. 1.20.
Рис. 1.20. Различные компоненты UISlider
Для каждого из этих компонентов UISlider существуют метод и свойство, позволяющие изменять внешний вид слайдера. Простейшими из этих свойств являются те, которые позволяют изменять оттенок соответствующего компонента:
• minimumTrackTintColor — это свойство задает оттенок для области минимальных значений;
• thumbTintColor — это свойство, как понятно из его названия, задает цвет ползунка;
• maximumTrackTintColor — это свойство задает оттенок для области максимальных значений.
Все эти свойства относятся к типу UIColor.
В следующем образце кода мы инстанцируем UISlider и помещаем его в центре вида, расположенного в нашем контроллере. Кроме того, здесь мы задаем цвет для области минимальных значений (красный), цвет ползунка (черный) и цвет области максимальных значений (зеленый):
— (void)viewDidLoad{
[super viewDidLoad];
/* Создаем слайдер */
self.slider = [[UISlider alloc] initWithFrame: CGRectMake(0.0f,
0.0f,
118.0f,
23.0f)];
self.slider.value = 0.5;
self.slider.minimumValue = 0.0f;
self.slider.maximumValue = 1.0f;
self.slider.center = self.view.center;
[self.view addSubview: self.slider];
/* Задаем оттенок для области минимальных значений */
self.slider.minimumTrackTintColor = [UIColor redColor];
/* Задаем оттенок для ползунка */
self.slider.maximumTrackTintColor = [UIColor greenColor];
/* Задаем цвет для области максимальных значений */
self.slider.thumbTintColor = [UIColor blackColor];
}
Если вы теперь запустите получившееся приложение, то увидите примерно такую картину, как на рис. 1.21.
Рис. 1.21. Оттенки всех составных частей слайдера изменены
Иногда вам может потребоваться более полный контроль над тем, как слайдер будет выглядеть на экране. При этом одних только оттенков может быть недостаточно. Именно поэтому Apple предлагает и другие способы изменения внешнего вида слайдера, позволяя вам задавать изображения для различных его компонентов. Речь идет о следующих изображениях.
• Изображение для минимального значения. Это изображение, которое будет находиться за пределами слайдера у его левого края. По умолчанию такое изображение не предоставляется, поэтому вы его и не увидите, если просто создадите в виде новый слайдер. Вы можете задать такое изображение, чтобы подсказывать пользователю, как трактуется минимальное значение в контексте данного слайдера. Например, в приложении, с помощью которого пользователь может увеличивать или уменьшать яркость экрана, минимальному значению может соответствовать картинка в виде потухшей лампочки. Она показывает, что чем дальше пользователь будет перемещать ползунок в сторону минимального значения (влево), тем более тусклым будет становиться экран. Чтобы изменить это изображение, воспользуйтесь относящимся к слайдеру методом экземпляра setMinimumValueImage:. Это изображение должно иметь по 23 точки в высоту и в ширину. При работе с сетчатым дисплеем используйте такое же изображение, только вдвое крупнее.
Изображение для области минимальных значений. Это изображение, которое будет соответствовать колее слайдера левее от ползунка. Чтобы изменить это изображение, воспользуйтесь относящимся к слайдеру методом экземпляра setMinimumTrackImage: forState:. Это изображение должно иметь 11 точек в ширину и 9 точек в высоту и допускать изменение размера (подробнее о таких изображениях см. в разделе 17.5).
Изображение для ползунка. Изображение ползунка — это единственный движущийся элемент слайдера. Чтобы изменить это изображение, воспользуйтесь относящимся к слайдеру методом экземпляра setThumbImage: forState:. Это изображение должно иметь 23 точки в высоту и 23 точки в ширину.
Изображение для области максимальных значений. Это изображение будет соответствовать той части колеи слайдера, которая находится справа от ползунка. Чтобы изменить это изображение, воспользуйтесь относящимся к слайдеру методом экземпляра setMaximumTrackImage: forState:. Это изображение должно иметь 11 точек в ширину и 9 точек в высоту и допускать изменение размера (подробнее о таких изображениях см. в разделе 17.5).
Изображение для максимального значения. Это изображение, которое будет находиться у правого края слайдера. Оно должно напоминать изображение, соответствующее минимальному значению, но, разумеется, трактуется противоположным образом. Вернувшись к примеру с яркостью лампочки, допустим, что справа от колеи с ползунком у нас изображена яркая лампочка, испускающая лучи. Так пользователю будет понятно, что чем дальше вправо он передвигает ползунок, тем ярче становится экран. Чтобы изменить это изображение, воспользуйтесь относящимся к слайдеру методом экземпляра setMaximumValueImage:. Это изображение должно иметь 23 точки в высоту и столько же в ширину.
Изображения, предоставляемые вами для областей максимальных и минимальных значений, должны при необходимости изменять размер. Подробнее о таких изображениях рассказано в разделе 17.5.
Для этого упражнения я создал пять уникальных изображений — по одному для каждого компонента слайдера. Убедился, что изображения для областей с максимальными и минимальными значениями поддерживают изменение размера. Оформляя этот слайдер по своему усмотрению, я стремлюсь создать у пользователя впечатление, что он меняет температуру в комнате: при перемещении ползунка влево становится прохладнее, вправо — теплее. Далее приведен код, создающий слайдер и оформляющий различные его компоненты:
#import «ViewController.h»
@interface ViewController ()
@property (nonatomic, strong) UISlider *slider;
@end
@implementation ViewController
/*
Этот метод возвращает изображение переменного размера для области слайдера, содержащей минимальные значения
*/
— (UIImage *) minimumTrackImage{
UIImage *result = [UIImage imageNamed:@"MinimumTrack"];
UIEdgeInsets edgeInsets;
edgeInsets.left = 4.0f;
edgeInsets.top = 0.0f;
edgeInsets.right = 0.0f;
edgeInsets.bottom = 0.0f;
result = [result resizableImageWithCapInsets: edgeInsets];
return result;
}
/*
Аналогично предыдущему методу этот возвращает изображение переменного размера для области слайдера, содержащей максимальные значения
*/
— (UIImage *) maximumTrackImage{
UIImage *result = [UIImage imageNamed:@"MaximumTrack"];
UIEdgeInsets edgeInsets;
edgeInsets.left = 0.0f;
edgeInsets.top = 0.0f;
edgeInsets.right = 3.0f;
edgeInsets.bottom = 0.0f;
result = [result resizableImageWithCapInsets: edgeInsets];
return result;
}
— (void)viewDidLoad{
[super viewDidLoad];
/* Создаем слайдер */
