iPhone之手勢切換圖片

今天我們介紹一下iPhone手勢切換圖片，算是對之前的小小總結。程序功能和常用的圖片瀏覽軟件類似，手指向左劃動就回卷到上一幅圖片，向右劃動就后卷到下一幅圖片。別看功能簡單，但真正實現起來還是挺麻煩的。下面開始吧：

1.

新建一個Window-based Application，名稱為Switch：

2.

分別新建三個UIViewController：FirstViewController，SecondViewController 和 RootViewController，其中?FirstViewController，SecondViewController 需要勾選第三項“With XIB for user interface”，而?RootViewController 則不用勾選（這樣做的原因是我想介紹一下手動創建一個XIB的過程）

3.

下面介紹一下手動創建 RootViewController.XIB 并與RootViewController 關聯的過程：

新建一個 Empty XIB，名稱是?RootViewController.XIB：

4.

打開?RootViewController.XIB，我們發現少了 View 一項：

從左側的Library庫 中拖一個 View 到其中：

選中 File's Owner，按 Command ＋ 4 打開屬性窗口，在 Class 一欄選擇 RootViewController，這樣新創建的?RootViewController.XIB 就和?RootViewController 聯系起來了：

然后，選中?File's Owner，按 Ctrl 鍵，鼠標拖動到 View 中，在彈出的 Outlets 中選擇 View，這樣新創建的?View 就和?RootViewController 的 View 聯系起來了：

5.

修改 SwitchAppDelegate.m 如下：

// // SwitchAppDelegate.m // Switch // // Created by HuTao on 8/18/12. // Copyright __MyCompanyName__ 2012. All rights reserved. //#import "SwitchAppDelegate.h" #import "RootViewController.h"@implementation SwitchAppDelegate@synthesize window;#pragma mark - #pragma mark Application lifecycle- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // Override point for customization after application launch.RootViewController * root = [[RootViewController alloc]init];window.rootViewController = root;[window makeKeyAndVisible];return YES; }- (void)dealloc {[window release];[super dealloc]; }@end

運行一下，發現已經成功了，可以在?RootViewController.XIB 放置些控件以示區別

6.

將要顯示的圖片加入工程中，并且在?FirstViewController.XIB 和 SecondViewController.XIB 中分別鋪滿 UIImageView 控件，如下圖：

7.

修改 FirstViewController.h 如下：

// // FirstViewController.h // Switch // // Created by HuTao on 8/18/12. // Copyright 2012 __MyCompanyName__. All rights reserved. //#import <UIKit/UIKit.h>@interface FirstViewController : UIViewController {IBOutlet UIImageView * imageView; }@property (retain, nonatomic) UIImageView * imageView;-(void)loadImage:(NSString *)imageName;@end
loadImage是提供給外部調用的一個方法，傳入要顯示的文件名，就會在UIImageView中顯示出來

并把 UIImageView 和對應的 IBOutlet 連接起來

然后修改?FirstViewController.m 如下：

// // FirstViewController.m // Switch // // Created by HuTao on 8/18/12. // Copyright 2012 __MyCompanyName__. All rights reserved. //#import "FirstViewController.h"@implementation FirstViewController@synthesize imageView;-(void)loadImage:(NSString *)imageName {[imageView setImage:[UIImage imageNamed:imageName]]; }// Implement viewDidLoad to do additional setup after loading the view, typically from a nib. - (void)viewDidLoad {[super viewDidLoad]; }- (void)viewDidUnload {[super viewDidUnload];imageView = nil; }- (void)dealloc {[super dealloc];[imageView release]; }@end
[UIImageView setImage:UIImage] 顯示圖像

[UIImage imageNamed:NSString *] 將文件名轉換成 UIImage

8.

SecondViewController 完全參照 FirstViewController 的修改

9.

修改?RootViewController.h 如下：

// // RootViewController.h // Switch // // Created by HuTao on 8/18/12. // Copyright 2012 __MyCompanyName__. All rights reserved. //#import <UIKit/UIKit.h>@class FirstViewController; @class SecondViewController;@interface RootViewController : UIViewController {FirstViewController * firstViewController;SecondViewController * secondViewController;//圖片名稱列表NSArray * imageNameList;//當前圖片編號int imageIndex;//當前顯示的是否是FirstViewControllerBOOL firstUpside; }@property (retain, nonatomic) FirstViewController * firstViewController; @property (retain, nonatomic) SecondViewController * secondViewController; @property (retain, nonatomic) NSArray * imageNameList;-(void)handleSwipeGesture:(UIGestureRecognizer*)sender; -(void)curlImage:(UISwipeGestureRecognizerDirection)direction;@end

修改?RootViewController.m 如下：

// // RootViewController.m // Switch // // Created by HuTao on 8/18/12. // Copyright 2012 __MyCompanyName__. All rights reserved. //#import "RootViewController.h" #import "FirstViewController.h" #import "SecondViewController.h"@implementation RootViewController@synthesize firstViewController; @synthesize secondViewController; @synthesize imageNameList;//劃動手勢后調用的回調函數 -(void)handleSwipeGesture:(UIGestureRecognizer *)sender { //劃動的方向UISwipeGestureRecognizerDirection direction = [(UISwipeGestureRecognizer *)sender direction]; //上卷或下卷圖片[self curlImage:direction]; } -(void)curlImage:(UISwipeGestureRecognizerDirection)direction {UIViewAnimationTransition transition; //判斷是上下左右 switch (direction){ case UISwipeGestureRecognizerDirectionUp: NSLog(@"up");return;case UISwipeGestureRecognizerDirectionDown: NSLog(@"down"); return;case UISwipeGestureRecognizerDirectionLeft://往左劃動，表示向前翻頁NSLog(@"left"); imageIndex = ( ([imageNameList count] - 1 + imageIndex) % [imageNameList count]);transition = UIViewAnimationTransitionCurlDown;break; case UISwipeGestureRecognizerDirectionRight://往右劃動，表示向后翻頁NSLog(@"right"); imageIndex = ( (++imageIndex) % [imageNameList count] );transition = UIViewAnimationTransitionCurlUp;break; default: return; }//loadImage必須放在insertSubview之后，否則無效？為什么？UIViewController * coming = nil; UIViewController * going = nil; if(firstUpside == YES) {//由 FirstViewController 切換到 SecondViewControllercoming = secondViewController; going = firstViewController; }else { //由 SecondViewController 切換到 FirstViewControllercoming = firstViewController; going = secondViewController;}[UIView beginAnimations:@"View Flip" context:nil]; [UIView setAnimationDuration:1.25]; [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut]; [UIView setAnimationTransition:transition forView:self.view cache:YES]; [coming viewWillAppear:YES]; [going viewWillDisappear:YES]; [going.view removeFromSuperview]; [self.view insertSubview:coming.view atIndex:0]; if(firstUpside == YES) {[secondViewController loadImage:[imageNameList objectAtIndex:imageIndex]];firstUpside = NO;}else { [firstViewController loadImage:[imageNameList objectAtIndex:imageIndex]];firstUpside = YES;}[coming viewDidAppear:YES]; [going viewDidDisappear:YES]; //提交Animation [UIView commitAnimations]; }// Implement viewDidLoad to do additional setup after loading the view, typically from a nib. - (void)viewDidLoad {[super viewDidLoad];imageNameList = [[NSArray alloc] initWithObjects:@"1.jpg", @"2.jpg", @"3.jpg", @"4.jpg",@"5.jpg", @"6.jpg", @"7.jpg", @"8.jpg", nil];imageIndex = 0;firstUpside = YES;FirstViewController * temp1 = [[FirstViewController alloc] initWithNibName:@"FirstViewController" bundle:nil]; self.firstViewController = temp1;//首先顯示 FirstViewController[self.view insertSubview:temp1.view atIndex:0];[temp1 release];[firstViewController loadImage:[imageNameList objectAtIndex:imageIndex]];SecondViewController * temp2 = [[SecondViewController alloc] initWithNibName:@"SecondViewController" bundle:nil]; self.secondViewController = temp2; [temp2 release]; //劃動手勢 //上劃 UISwipeGestureRecognizer * swipeGestureUp = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(handleSwipeGesture:)]; swipeGestureUp.direction = UISwipeGestureRecognizerDirectionUp;[self.view addGestureRecognizer:swipeGestureUp]; [swipeGestureUp release]; //下劃 UISwipeGestureRecognizer * swipeGestureDown = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(handleSwipeGesture:)]; swipeGestureDown.direction = UISwipeGestureRecognizerDirectionDown;[self.view addGestureRecognizer:swipeGestureDown]; [swipeGestureDown release]; //左劃 UISwipeGestureRecognizer * swipeGestureLeft = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(handleSwipeGesture:)]; swipeGestureLeft.direction = UISwipeGestureRecognizerDirectionLeft;[self.view addGestureRecognizer:swipeGestureLeft]; [swipeGestureLeft release]; //右劃 UISwipeGestureRecognizer * swipeGestureRight = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(handleSwipeGesture:)]; swipeGestureRight.direction = UISwipeGestureRecognizerDirectionRight;[self.view addGestureRecognizer:swipeGestureRight]; [swipeGestureRight release]; }- (void)viewDidUnload {[super viewDidUnload];firstViewController = nil;secondViewController = nil; }- (void)dealloc {[super dealloc];[firstViewController release];[secondViewController release]; }@end
雖然代碼較多，但很好理解。

首先初始化了 FirstViewController 和 SecondViewController，然后加入了GestureRecognizer，一旦識別到劃動手勢，則調用 handleSwipeGesture回調函數。

在 curlImage 中，我采用的切換圖片的原理是：定義兩個 UIViewController，交替顯示，以此達到翻頁切換圖片的目的。當然，還需要考慮只有0或1張圖的情況，不過，這里我省略了。

另外經過我的測試，發現 loadImage 必須放在 insertSubview 之后，否則無效？為什么？

運行結果如下：

原圖：

手指向右劃動，切換到下一幅圖片：

下一幅圖片：

最后我把完整代碼也上傳上來了：

http://download.csdn.net/detail/htttw/4510398

完成！

總結

以上是生活随笔為你收集整理的iPhone之手势切换图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。