суббота, 16 июня 2012 г.

iPad / iPhone. Анимированные переходы между окнами.

Думаю пора немного рассказать о второй ОС под которую я пишу. Сегодня речь пойдет об iOS.
В сравнение к статье про Android. Анимированный переходы между окнами. хочу рассказать о том как это все делается на iPad / iPhone.

Пожалуй начнем.

Для начала создадим проект, теперь уже в Xcode. Назовем его iPhoneTransition.
Заходим в Xcode ( Create new xcode project -> Empty Application ( жмем next ) -> называем наше приложение ( next ) -> выбираем куда сохранить проект -> Create ). Все, наше приложение создано.
Теперь о написанном в картинках :

Создаем новое приложение:


Называем приложение:


Созданное приложение выглядит вот так:


Теперь пожалуй начнем создавать наше приложение.
Для начала создадим папки Controllers и Resources. ( можно и не создавать. я делаю для удобства ).
Теперь структура приложения будет выглядеть вот так:


Теперь добавляем контроллер с xib файлом. Для этого нам нужно на папке controllers нажать правой кнопкой мыши и выбрать New File -> Objective-c class. Далее жмем next  называем наш класс ( в моём случае MainViewController ). Жмем next, выбираем куда сохранить наш файл и create.
Покажу пару картинок для наглядности.

Выбираем наш Objective-c class.


Называем наш класс.



Проделаем операцию по созданию контроллера ещё раз для SecondViewController ( надо же куда-то переходить с  MainViewController ).
Xib-файлы я положил в ранее созданную папку Resources.
После того как сохранили и переместили все файлы как нам нравится ( структура такая как нравится мне ) структура приложения будет выглядеть вот так:


Теперь приступим непосредственно к созданию наших переходов.
Для начала набросаем пару кнопок в MainViewController.xib файл. Для этого нажимаем на наш MainViewController.xib файл он откроется в Interface Builder-e. Перетаскиваем кнопки на панель.
Должно получиться приблизительно вот так:


Теперь повесим на копку обрабоку нажатия. Для этого в верхнем право углу нажимаем кнопку show the assistant editor. Вот как она выглядит на экране:


Получаем экран разделенный на две части справа  .h файл слева .xib. для того чтобы подключить  нажатие на кнопку к определенному методу нам нужно нажать на кнопке право кнопкой мыши и перетащить в наш .h файл. Вот так как на картинке:



В появившемся окне выбираем Connection : Action, даем название нашему методу ( в моем случае btnTransitionPressed ). Потом нажимаем Connect. Вот как выглядит окошко:


Ну все, в этом примере нам больше ничего подключать не надо будет.
Только ещё установим tag для каждой кнопки которую мы создали, это нам понадобиться позже. Для этого нам необходимо выделить кнопку и нажать Show the attributes inspector. В атрибутах найти поле tag и выставить для каждой кнопки по возрастанию от 0 значения. Вот где это находится:


Вот теперь мы сделали все для того чтобы приступить к написанию наших переходов.
Для начала сделаем так чтобы наш MainViewController запускался при старте приложения и нам отображались наши кнопки для переходов. Для этого нам нужно изменить наш TransitionAppDelegate.h и TransitionAppDelegate.m файлы. Начнем с TransitionAppDelegate.h

Вот так будет выглядеть наш файл после изменений:

TransitionAppDelegate.h
 #import <UIKit/UIKit.h> 
 
 @interface TransitionAppDelegate : UIResponder <UIApplicationDelegate> 
 
 @property (strong, nonatomic) UIWindow *window;  
 @property (strong, nonatomic) UINavigationController *navigationViewController; // Добавляем вот эту строку
 
 @end  

Теперь изменим TransitionAppDelegate.m. Вот так будет выглядеть файл после изменений:

TransitionAppDelegate.m
 #import "TransitionAppDelegate.h"  
 #import "MainViewController.h" 
 
 @implementation TransitionAppDelegate  

 @synthesize window = _window;  
 @synthesize navigationViewController = _navigationViewController;
  
 - (void)dealloc {  
   [_window release];  
   [_navigationViewController release];  
   [super dealloc];  
 }  

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {  
   self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease]; 

   // Устанавливаем MainViewController как основное окно которое будет запускаться при старте приложения  
   UIViewController *rootController = [[MainViewController alloc] init];  
   _navigationViewController = [[UINavigationController alloc] initWithRootViewController:rootController];  
   self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];  
   [self.window addSubview:_navigationViewController.view];  
   [rootController release]; 

   [self.window makeKeyAndVisible];  
    
   return YES;  
 }  

 - (void)applicationWillResignActive:(UIApplication *)application {}  
 - (void)applicationDidEnterBackground:(UIApplication *)application {}  
 - (void)applicationWillEnterForeground:(UIApplication *)application {}  
 - (void)applicationDidBecomeActive:(UIApplication *)application {}  
 - (void)applicationWillTerminate:(UIApplication *)application {}  

 @end  

Теперь запускаем наше приложение и должно появиться наше  окно с кнопками.
Далее изменим наши MainViewController.h и MainViewController.m файлы.
MainViewController.h будет выглядеть вот так:

MainViewController.h
 #import <UIKit/UIKit.h>  

 @interface MainViewController : UIViewController 
 
 - (IBAction)btnTransitionPressed:(id)sender;  

 @end  


Изменим MainViewController.m. Вот так будет выглядеть после изменений наш файл.


MainViewController.m
 #import "MainViewController.h"  
 #import "SecondViewController.h"  

 @interface MainViewController () 

// Создаем несколько private методов для разного типа переходов
 - (void)slideTransition;  
 - (void)flipTransition;  
 - (void)curlDownTransition;  

 @end  

 @implementation MainViewController  

 - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {  
   self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];  
   if (self) {  
     // Custom initialization  
   }  
   return self;  
 }  

 - (void)viewDidLoad {  
   [super viewDidLoad];  
 }  

 - (void)viewDidUnload {  
   [super viewDidUnload];  
 }  

 - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {  
   return (interfaceOrientation == UIInterfaceOrientationPortrait);  
 }  

 - (void)dealloc {  
   [super dealloc];  
 }  

 - (IBAction)btnTransitionPressed:(id)sender {  

// [sender tag] - даст нам tag нажатой кнопки
// Смотрим какая кнопка нажата и выбираем тот тип перехода что нам нужно
   switch ([sender tag]) {  
     case 0:  
       [self slideTransition];  
       break;  
     case 1:  
       [self flipTransition];  
       break;  
     case 2:  
       [self curlDownTransition];  
       break;  
   }  
 }  

 // Написаны непосредственно сами переходы  
 - (void) flipTransition {  
   [UIView beginAnimations:nil context:nil];  
   [UIView setAnimationDuration:1.0];  
   [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];  
   [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight   
                          forView:self.navigationController.view   
                            cache:NO];  
   SecondViewController *temp = [[SecondViewController alloc] initWithTransitionType: @"Flip"];  
   [self.navigationController pushViewController:temp animated:YES];  
   [UIView commitAnimations];  
   [temp release];  
 }  

 - (void) slideTransition {  
    SecondViewController *temp = [[SecondViewController alloc] initWithTransitionType: @"Slide"];  
   [self.navigationController pushViewController: temp animated:YES];  
   [temp release];  
 }  

 - (void) curlDownTransition {  
   [UIView beginAnimations:nil context:nil];  
   [UIView setAnimationTransition:UIViewAnimationTransitionCurlDown   
                          forView:self.view.window   
                            cache:NO];  
   [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];  
   [UIView setAnimationDuration:1.0];  
   [UIView commitAnimations];  
   SecondViewController *temp = [[SecondViewController alloc] initWithTransitionType: @"Curl"];  
   [self.navigationController pushViewController:temp animated:YES];  
   [temp release];  
 }  

 @end  


Теперь приступим к изменениям наших файлов SecondViewController.h и SecondViewController.m которые отвечают за окно в которое мы будем переходить из нашего главного окна.
Изменяем SecondViewController.h вот так:

SecondViewController.h
 #import <UIKit/UIKit.h>  

 @interface SecondViewController : UIViewController  

 @property (strong, nonatomic) NSString *transitionType;  

// Объявляем новый init метод. Он нам необходим чтобы передавать тип перехода по которому мы пришли в SecondViewController
 -(id)initWithTransitionType:(NSString *)transitionType;  

 @end  


Теперь изменяем SecondViewController.m. Вот как он будет выглядеть после изменений.

SecondViewController.m
 #import "SecondViewController.h" 
 
 @interface SecondViewController () 

// Метод нужен для возврата по анимации в MainViewController
 - (void)backTransitionType;

 @end  

 @implementation SecondViewController  

 @synthesize transitionType = _transitionType;  

 - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {  
   self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];  
   if (self) {  
     // Custom initialization  
   }  
   return self;  
 }  

// Наш новый init метод
 - (id) initWithTransitionType:(NSString *)transitionType {  
   if((self = [super init])) {  
     // Инициализируем transitionType. Устанавливаем тип перехода по которому пришли 
     self.transitionType = transitionType;  
   }    
   return self;  
 }  

 - (void)viewDidLoad {  
   [super viewDidLoad];  
 }  

 - (void)viewDidUnload {  
   [self setTransitionType:nil];  
   [super viewDidUnload];  
 }  

 - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {  
   return (interfaceOrientation == UIInterfaceOrientationPortrait);  
 }  

 - (void)dealloc {  
   [_transitionType release];  
   [super dealloc];  
 }  

// В данном примере метод будет отвечать за нажатие по кнопке back в UINavigationController
 -(void) viewWillDisappear:(BOOL)animated {  
   if ([self.navigationController.viewControllers indexOfObject:self] == NSNotFound) {  
     [self backTransitionType];  
   }  
   [super viewWillDisappear:animated];  
 }  

// Здесь создаем наши обратные переходы в MainViewController в зависимости от того каким переходом мы пришли.
 - (void)backTransitionType {  
   if (_transitionType == @"Flip") {  
     [UIView beginAnimations:nil context:nil];  
     [UIView setAnimationDuration:1.0];  
     [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];  
     [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft  
                            forView:self.navigationController.view   
                              cache:NO];  
     [UIView commitAnimations];  
   } else if (_transitionType == @"Curl") {  
     [UIView beginAnimations:nil context:nil];  
     [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp  
                            forView:self.view.window   
                              cache:NO];  
     [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];  
     [UIView setAnimationDuration:1.0];  
     [UIView commitAnimations];  
   }  
 }  

 @end  


Ну вот и весь код, который нам надо написать для того чтобы посмотреть на 3 типа анимации переходов между окнами для iPhone-приложения.
Надеюсь статья полезна и помогла кому-нибудь сделать в своем приложении анимацию переходов между окнами. :)
Спасибо за внимание и не забывайте кликать like, +1 мне это очень важно.
Принимаются советы и пожелания по поводу будущих и написанных статей.
Результаты в картинках:

Slide Transition
Flip Transition
Curl Transition


Комментариев нет:

Отправить комментарий