1

我用下面的代碼iPhoto的風格,左右滑動即可用UISwipeGestureRecognizer展現在我的應用程序的照片以類似的方式到iPhoto。「適應」我目前UISwipeGestureRecognizer代碼通過圖像彈到利用UIPanGestureRecognizer

CATransition *animation = [CATransition animation]; 
    [animation setDuration:0.5]; 
    [animation setType:kCATransitionPush]; 
    [animation setSubtype:kCATransitionFromRight]; 
    [animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]]; 
    [[self.imageHolder layer] addAnimation:animation forKey:@"SwitchToView"]; 

此滑動在下一圖像和舊圖像出像示於下面的照片:

圖像中的一個:

Image One

過渡:

Transitional View

圖片二:

Image Two

我想知道如何使這個像iPhoto中時,我明白了,我應該使用一個UIPanGestureRecognizer代替。

我需要「控制」與我在iPhoto中做,順便手指動畫即通過讓我開始拖動到下一個圖像,然後反向拖動方向。此外,與iPhoto類似,如果在下一張圖像顯示的第一張圖像比下一張圖像更多時釋放手指,則希望下一張圖像能夠滑入(在上面的過渡圖片中未發生此情況,如果我已發佈。我的手指在iPhoto中這一點上,將滑回第一圖像

我以前從來沒有這樣,如果有人可以幫助我走出那簡直太好了使用UIPanGestureRecognizer

編輯:

使用由列維提供的代碼,我已經創建了與3樣本圖像很好地工作的解決方案。對於任何人埃爾斯Ë誰是有興趣在使用UIPanGestureRecognizer,代碼:

接口:

#import <UIKit/UIKit.h> 

@interface ViewController : UIViewController <UIGestureRecognizerDelegate> 
{ 
int imageIndex; 
} 

@property (nonatomic, strong) UIImageView* imageView; 
@property (nonatomic, strong) UIImageView* leftImageView; 
@property (nonatomic, strong) UIImageView* rightImageView; 

@end 

實現:

#import "ViewController.h" 

@interface ViewController() 

@end 

@implementation ViewController 

- (void)viewDidLoad 
{ 
[super viewDidLoad]; 

self->imageIndex = 0; 

float xFactor; 

UIInterfaceOrientation currentOrientation = self.interfaceOrientation; 
if(UIInterfaceOrientationIsLandscape(currentOrientation)){ 

    xFactor = 256; 

} 
else{ 

    xFactor = 0; 

} 

self.imageView = [[UIImageView alloc] initWithFrame:self.view.frame]; 
self.imageView.contentMode = UIViewContentModeScaleAspectFit; 
self.imageView.image = [UIImage imageNamed:@"69B4356B-1CB2-4A2F-867E-9C086251DF11-12668-0000036A534E9B6D"]; 
self.imageView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; 

CGRect leftFrame = self.view.frame; 
leftFrame.origin.x -= leftFrame.size.width+xFactor; 
self.leftImageView = [[UIImageView alloc] initWithFrame:leftFrame]; 
self.leftImageView.contentMode = UIViewContentModeScaleAspectFit; 
self.leftImageView.image = [UIImage imageNamed:@"42517D93-F8BF-42E7-BB44-53B099A482AA-12668-0000036A49BCECAA"]; 
self.leftImageView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; 

CGRect rightFrame = self.view.frame; 
rightFrame.origin.x += rightFrame.size.width+xFactor; 
self.rightImageView = [[UIImageView alloc] initWithFrame:rightFrame]; 
self.rightImageView.contentMode = UIViewContentModeScaleAspectFit; 
self.rightImageView.image = [UIImage imageNamed:@"C6AC2508-243B-464B-A71F-96DD7F18673D-12668-00000369F3AFD3FC"]; 
self.rightImageView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; 

[self.view addSubview:self.imageView]; 
[self.view addSubview:self.leftImageView]; 
[self.view addSubview:self.rightImageView]; 

UIPanGestureRecognizer *recognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)]; 
[self.view addGestureRecognizer:recognizer]; 
} 

- (void)didReceiveMemoryWarning 
{ 
[super didReceiveMemoryWarning]; 

} 

- (void)handlePan:(UIPanGestureRecognizer *)recognizer { 
if (recognizer.state == UIGestureRecognizerStateEnded) { 
    CGRect leftFrame = self.leftImageView.frame; 
    CGRect currentFrame = self.imageView.frame; 
    CGRect rightFrame = self.rightImageView.frame; 

    float duration = 0.0; 

    float factor; 

    UIInterfaceOrientation currentOrientation = self.interfaceOrientation; 
    if(UIInterfaceOrientationIsPortrait(currentOrientation)){ 

     factor = 768; 
    } 
    else{ 
     factor = 1024; 
    } 

    if (self.imageView.center.x < 0) { // Present the right image 
     duration = 0.3 * ABS(self.rightImageView.frame.origin.x/factor); 
     leftFrame.origin.x = -2 * factor; 
     currentFrame.origin.x = -1 * factor; 
     rightFrame.origin.x = 0; 
     self->imageIndex = 1; 

    } else if (self.imageView.center.x > factor) { // Present the left image 
     duration = 0.3 * ABS(self.leftImageView.frame.origin.x/factor); 
     leftFrame.origin.x = 0; 
     currentFrame.origin.x = factor; 
     rightFrame.origin.x = 2 * factor; 
     self->imageIndex = -1; 

    } else { // leave the middle image 
     duration = 0.3 * ABS(self.imageView.frame.origin.x/factor); 
     leftFrame.origin.x = -1 * factor; 
     currentFrame.origin.x = 0; 
     rightFrame.origin.x = factor; 
     self->imageIndex = 0; 

    } 

    [UIView animateWithDuration:duration 
          delay:0 
         options:UIViewAnimationOptionCurveEaseInOut 
        animations:^{ 
         self.leftImageView.frame = leftFrame; 
         self.imageView.frame = currentFrame; 
         self.rightImageView.frame = rightFrame; 
        } completion:^(BOOL finished) { 
        }]; 

} else { 
    CGPoint translation = [recognizer translationInView:recognizer.view]; 
    CGPoint leftCenter = self.leftImageView.center; 
    CGPoint currentCenter = self.imageView.center;   
    CGPoint rightCenter = self.rightImageView.center; 

    leftCenter.x += translation.x; 
    currentCenter.x += translation.x; 
    rightCenter.x += translation.x; 
    self.leftImageView.center = leftCenter; 
    self.imageView.center = currentCenter; 
    self.rightImageView.center = rightCenter; 

    [recognizer setTranslation:CGPointMake(0, 0) inView:self.imageView]; 
} 

} 

- (void)willAnimateRotationToInterfaceOrientation: 
(UIInterfaceOrientation)toInterfaceOrientation 
            duration:(NSTimeInterval)duration 
{ 
CGPoint leftCenter = self.leftImageView.center; 
CGPoint currentCenter = self.imageView.center; 
CGPoint rightCenter = self.rightImageView.center; 

if(UIInterfaceOrientationIsPortrait(toInterfaceOrientation)){ 

    leftCenter.x = 384+(((-self->imageIndex)-1)*768); 
    currentCenter.x = 384+((-self->imageIndex)*768); 
    rightCenter.x = 384+(((-self->imageIndex)+1)*768); 

} 
else{ 

    leftCenter.x = 512+(((-self->imageIndex)-1)*1024); 
    currentCenter.x = 512+((-self->imageIndex)*1024); 
    rightCenter.x = 512+(((-self->imageIndex)+1)*1024); 

} 

self.leftImageView.center = leftCenter; 
self.imageView.center = currentCenter; 
self.rightImageView.center = rightCenter; 

} 

@end 

回答

1

您可以將UIPanGestureRecognizer添加到您的圖像視圖。你必須分配給它的方法,你做這樣的事情:

- (void)handlePan:(UIPanGestureRecognizer *)recognizer { 
    if (recognizer.state == UIGestureRecognizerStateEnded) { 

    } else { 
     CGPoint translation = [recognizer translationInView:recognizer.view]; 
     CGPoint center = recognizer.view.center; 
     UIImageView *imageViewToPresent = nil; 
     if (translation.x > 0) { 
      imageViewToPresent = [self leftImageView]; 
     } else { 
      imageViewToPresent = [self leftImageView]; 
     } 
     CGPoint actualCenter = recognizer.view.center; 
     CGPoint nextCenter = imageViewToPresent.center; 
     actualCenter.x += translation.x; 
     nextCenter.x += translation.x; 
     recognizer.view.center = actualCenter; 
     imageViewToPresent.view.center = nextCenter; 
     [recognizer setTranslation:CGPointMake(0, 0) inView:self.imageView]; 
    } 
} 

UIGestureRecognizerStateEnded部分,你可以決定要顯示的圖片。

或者只是使用ScrollView啓用分頁功能。它應該有同樣的效果。但是,它需要同時加載所有圖像。使用平移識別器,您需要3個圖像視圖頂部(左,右,當前)。

希望這會有所幫助!

編輯:

在頭文件中應添加2個圖片瀏覽次數:

#import <UIKit/UIKit.h> 

@interface ViewController : UIViewController <UIGestureRecognizerDelegate> 

@property (nonatomic, strong) UIImageView* imageView; 
@property (nonatomic, strong) UIImageView* leftImageView; 
@property (nonatomic, strong) UIImageView* rightImageView; 

@end 

的實施將是:

#import "ViewController.h" 

@interface ViewController() 

@end 

@implementation ViewController 

- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 

    self.imageView = [[UIImageView alloc] initWithFrame:self.view.frame]; 
    self.imageView.contentMode = UIViewContentModeScaleAspectFit; 
    self.imageView.image = [UIImage imageNamed:@"69B4356B-1CB2-4A2F-867E-9C086251DF11-12668-0000036A534E9B6D"]; 
    self.imageView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; 

    CGRect leftFrame = self.view.frame; 
    leftFrame.origin.x -= leftFrame.size.width; 
    self.leftImageView = [[UIImageView alloc] initWithFrame:leftFrame]; 
    self.leftImageView.contentMode = UIViewContentModeScaleAspectFit; 
    self.leftImageView.image = [UIImage imageNamed:@"42517D93-F8BF-42E7-BB44-53B099A482AA-12668-0000036A49BCECAA"]; 
    self.leftImageView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; 

    CGRect rightFrame = self.view.frame; 
    rightFrame.origin.x += rightFrame.size.width; 
    self.rightImageView = [[UIImageView alloc] initWithFrame:rightFrame]; 
    self.rightImageView.contentMode = UIViewContentModeScaleAspectFit; 
    self.rightImageView.image = [UIImage imageNamed:@"C6AC2508-243B-464B-A71F-96DD7F18673D-12668-00000369F3AFD3FC"]; 
    self.rightImageView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; 

    [self.view addSubview:self.imageView]; 
    [self.view addSubview:self.leftImageView]; 
    [self.view addSubview:self.rightImageView]; 

    UIPanGestureRecognizer *recognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)]; 
    [self.view addGestureRecognizer:recognizer]; 
} 

- (void)didReceiveMemoryWarning 
{ 
    [super didReceiveMemoryWarning]; 

} 

- (void)handlePan:(UIPanGestureRecognizer *)recognizer { 
    if (recognizer.state == UIGestureRecognizerStateEnded) { 
     CGRect leftFrame = self.leftImageView.frame; 
     CGRect currentFrame = self.imageView.frame; 
     CGRect rightFrame = self.rightImageView.frame; 
     float duration = 0.0; 
     if (self.imageView.center.x < 0) { // Present the right image 
      duration = 0.3 * ABS(self.rightImageView.frame.origin.x/self.view.frame.size.width); 
      leftFrame.origin.x = -2 * self.view.frame.size.width; 
      currentFrame.origin.x = -1 * self.view.frame.size.width; 
      rightFrame.origin.x = 0; 
     } else if (self.imageView.center.x > self.view.frame.size.width) { // Present the left image 
      duration = 0.3 * ABS(self.leftImageView.frame.origin.x/self.view.frame.size.width); 
      leftFrame.origin.x = 0; 
      currentFrame.origin.x = self.view.frame.size.width; 
      rightFrame.origin.x = 2 * self.view.frame.size.width; 
     } else { // leave the middle image 
      duration = 0.3 * ABS(self.imageView.frame.origin.x/self.view.frame.size.width); 
      leftFrame.origin.x = -1 * self.view.frame.size.width; 
      currentFrame.origin.x = 0; 
      rightFrame.origin.x = self.view.frame.size.width; 
     } 

     [UIView animateWithDuration:duration 
           delay:0 
          options:UIViewAnimationOptionCurveEaseInOut 
         animations:^{ 
      self.leftImageView.frame = leftFrame; 
      self.imageView.frame = currentFrame; 
      self.rightImageView.frame = rightFrame; 
     } completion:^(BOOL finished) { 
     }]; 
    } else { 
     CGPoint translation = [recognizer translationInView:recognizer.view]; 
     CGPoint currnetCenter = self.imageView.center; 
     CGPoint leftCenter = self.leftImageView.center; 
     CGPoint rightCenter = self.rightImageView.center; 

     currnetCenter.x += translation.x; 
     leftCenter.x += translation.x; 
     rightCenter.x += translation.x; 
     self.imageView.center = currnetCenter; 
     self.leftImageView.center = leftCenter; 
     self.rightImageView.center = rightCenter; 


     [recognizer setTranslation:CGPointMake(0, 0) inView:self.imageView]; 
    } 

} 

@end 

當然,它仍然需要工作(例如,爲了支持超過3個硬編碼圖像)。如果您使用IBOutlet,它可能會幫助您解決旋轉問題,並從Interface Builder中設置自動調整大小的遮罩。

玩得開心!

+0

嗨。我希望能夠接受你的答案,因爲這聽起來像是我需要的,但是我做了一個新的項目,簡化了你的想法,但卻無法實現。請看看你是否有時間。 [下載鏈接](http://rapidshare.com/files/1837376668/scrollTest.zip)'imageViewToPresent.view.center = nextCenter;'提供了一個錯誤,所以我想你的意思是'imageViewToPresent.center = nextCenter;'?然而,在這一行上給出了一個未使用的警告:'CGPoint center = recognizer.view.center;'如果你有機會,請看看我不想實現帶分頁的scrollView。謝謝 –

+0

哇!非常感謝。明天我會檢查一下。歡呼聲 –

+0

不客氣。目前它只能用於肖像模式。在風景中,圖像重疊。 – Levi

1

如果你想要像照片應用程序中的滾動行爲,你不該」根本不使用UIGestureRecognizer。使用UIPageViewControllerUIPageViewControllerTransitionStyleScroll,或者如果你需要支持的版本比iOS6的低,使用UIScrollView

檢查出使用UIScrollView爲例蘋果的樣本項目PhotoScroller

+0

謝謝。你說的是真的。正如Levi在本頁的其他地方所建議的,啓用分頁的scrollView是一種解決方案。但是,我接受了Levi的答案,因爲它提供了一個額外的解決方案,我已經能夠適應3幅圖像的情況,並根據需要使用** UIPanGestureRecognizer **。感謝你的回答。 –

相關問題