|
Май
30
|
В этом уроке мы создадим простые часы с поддержкой ориентации экрана: при повороте iPhone они тоже будут менять положение. Предполагается, что читатели уже знакомы с основами iPhone SDK.
Для начала нам потребуется метка для часов, фоновое изображение, ну и таймер, конечно. Чтобы редактор Interface Builder смог работать с переменными типа outlet, предварительно их нужно объявить через код. Я покажу, как это делается.
Немного кода.
Отредактируйте контроллер “SimpleClockViewController.h“, как показано ниже:
1 2 3 4 5 6 7 8 | #import <UIKit/UIKit.h> @interface SimpleClockViewController : UIViewController { IBOutlet UILabel* clockLabel; NSTimer *myTicker; } @end |
Объект “myTicker” будет отвечать за обновление “clockLabel” (этот код мы внедрим позднее).
Теперь перетащите в проект файл “background_image.png” (см. рис. ниже). Рисунок для фона можно скачать [здесь].
Чтобы объект копировался в папку проекта, не забудьте установить флажок “Copy items into destination group’s folder (if needed)“. Итоговые настройки должны выглядеть так, как показано ниже. Щелкните на кнопке “Add“.
Откройте файл “SimpleClockViewController.xib“. Перетащите “UIImageView” из библиотеки в окно представления “View” — получите заполнитель для фона.
Откройте окно инспектора атрибутов “Attributes Inspector“. В поле “Image” укажите “background_image.png“. В поле “Mode” выберите “Scale To Fill“, чтобы фоновый рисунок “background_image.png” растягивался при повороте iPhone.
Откройте окно инспектора размеров “Size Inspector” и измените настройки “Autosizing“, как показано ниже. Стрелки в поле “Autosizing” действуют, как пружины — представление пропорционально меняет размеры в зависимости от высоты и ширины объекта superview. Значки “I” выступают ограничителями, поддерживающими фиксированное расстояние при повороте представления вместе с iPhone. При проблемах с визуализацией настроек поможет анимация в редакторе IB, справа от окна “Autosizing“.
Перетащите метку в окно представления, отредактируйте ее размеры по ширине окна и выровняйте по центру. Это даст больше места для отображения времени, а при повороте в альбомный режим часы будут поворачиваться относительно своей центральной точки.
Для смены шрифта надписи выделите объект “Label” и воспользуйтесь комбинацией клавиш <Command-T>. Поменяйте настройки на Helvetica, Bold, size 48.
Откройте окно инспектора атрибутов. Для опции “Layout” установите выравнивание по центру (и вновь это нужно для того, чтобы часы вращались вокруг центральной точки). Цвет шрифта поменяйте на белый — он лучше будет смотреться на темном фоне. Итоговый вариант показан ниже:
Откройте окно инспектора размеров Size Inspector и поменяйте настройки “Autosizing” так, как показано ниже. Теперь часы будут поворачиваться и выравниваться точно относительно своего центра.
Последним шагом, удерживая нажатой клавишу <Control>, перетащите объект “File’s Owner” на метку. В появившемся окне выберите “clockLabel“. Тем самым мы сообщаем метке, какой переменной в коде она является.
Сохранитесь и закройте IB. Вернувшись в Xcode, откройте файл “SimpleClockViewController.h” и добавьте к нему методы “runTimer” и “showActivity“. Они декларируют функции, которые мы собирается написать.
1 2 3 4 5 6 7 8 9 10 | #import <UIKit/UIKit.h> @interface SimpleClockViewController : UIViewController { IBOutlet UILabel* clockLabel; NSTimer *myTicker; } /* New Methods */ - (void) runTimer; - (void)showActivity; |
Откройте “SimpleClockViewController.m” и добавьте только что задекларированные методы:
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 | - (void)runTimer { // Запускаем таймер, инициирующий showActivity // method every 0.5 seconds myTicker = [NSTimer scheduledTimerWithTimeInterval: 0.5 target: self selector: @selector(showActivity) userInfo: nil repeats: YES]; } // Метод запускается каждые 0.5 с помощью таймера // созданного в функции "runTimer" - (void)showActivity { NSDateFormatter *formatter = [[[NSDateFormatter alloc] init] autorelease]; NSDate *date = [NSDate date]; // Время будет выглядеть следующим образом "12:15:00 PM". [formatter setTimeStyle:NSDateFormatterMediumStyle]; // Настройка метки с обновленными показаниями времени. [clockLabel setText:[formatter stringFromDate:date]]; } |
В методе “runTimer” только одна строка кода, разделенная на несколько строк. Единственная его задача — каждые 0,5 сек вызывать метод “showActivity“.
В свою очередь, метод “showActivity” каждые 0,5 сек форматирует “clockLabel“, приводя метку к виду “12:15:00 PM” и устанавливая на ней текущее время.
После загрузки представления нам нужно вызвать “runTimer“. Это распространенный метод, который при генерировании Xcode файла “SimpleClockViewController.m” включает туда “viewDidLoad“. Данный метод вызывается сразу после загрузки элементов “View“. Найдите “viewDidLoad” и откомментируйте. В конце добавьте “[self runTimer];“, чтобы метод выглядел так:
1 2 3 4 5 6 7 8 9 | // Внедряем viewDidLoad для дополнительной // настройки после загрузки представления, обычно из nib-файла. - (void)viewDidLoad { [super viewDidLoad]; // Вызываем метод runTimer после загрузки // SimpleClockViewController.xib [self runTimer]; } |
Когда Xcode генерирует “SimpleClockViewController.m“, там также присутствует “shouldAutorotateToInterfaceOrientation“. По умолчанию представления выводятся исключительно в книжной ориентации. Для поддержки других режимов необходимо внедрить метод “shouldAutorotateToInterfaceOrientation“.
Найдите метод “shouldAutorotateToInterfaceOrientation” и откомментируйте. Можно реализовать поддержку лишь некоторых режимов ориентации, например, книжной и альбомной, предусмотрев слева кнопку “Home“, но мы не будет ограничивать себя стандартными сценариями. Нам интересна поддержка любой ориентации, чтобы представление отображалось корректно независимо от того, как вращается iPhone. Для этого замените”return (interfaceOrientation == UIInterfaceOrientationPortrait);” на “return YES;“.
1 2 3 4 5 6 | // Отменить, разрешив иные ориентации // помимо заданной по умолчанию книжной. - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation { // Возвращаем "YES" для поддерживаемых ориентаций return YES; } |
Можно запускать! С помощью комбинации клавиш <Command + Left> убедитесь, что интерфейс вращается вместе с симулятором. Теперь жмите “Build and Run” — и проверяйте приложение в работе. Удачи! 
(12 голосов, средний: 4.92 из 5)
Загрузка ...
Июль 3rd, 2009 at 12:02
Подскажите, почему при placeholder ориентация окна ((BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation { return YES;}) не работает? первая страница все как надо переворачивается, а следующая уже на пол экрана?