如何使用UIScrollView＆UIPageControl實現圖像查看圖庫，預覽下一張和前一張圖像？

Question

所以我想製作一個滑動圖像查看圖庫，預覽下一張和上一張圖像。我希望它能夠顯示下一張圖像（如果有的話）和之前的圖像（如果有的話）。我的意思是什麼？假設有3張圖像。

1. 第一個圖像。所以我希望第一張圖像顯示在中央（水平）和下一張圖像的一部分，因此用戶可以看到至少剩餘1張圖像。 圖示：[&&&] [

2. 第二張圖片。我想要顯示第一張圖像（左側）和第二張圖像（中間）的一部分以及第三張圖像的一部分（右側）。因此，任何用戶都可以輕鬆確定背後至少有1張圖片，並且至少保留1張圖片。 示意圖：] [###] [

3. 第三張也是最後一張圖片。有一部分第二張圖像（左圖）和第三張圖像位於中央。所以毫無疑問，沒有圖像殘留，並且至少有1張圖像在後面。 示意圖：] [@@@].

那麼如何以正確的方式實現這個想法呢？

我做到了這樣：

// ItemGalleryVC.h 


#import <UIKit/UIKit.h> 


@interface ItemGalleryVC : UIViewController <UIScrollViewDelegate>{ 

    IBOutlet UIScrollView *scrollView; 
    IBOutlet UIPageControl *pageControl; 

    BOOL pageControlIsChangingPage; 
} 

@property (nonatomic, retain) IBOutlet UIScrollView *scrollView; 
@property (nonatomic, retain) IBOutlet UIPageControl *pageControl; 

- (IBAction)changePage:(id)sender; 
- (void)setupPage; 

@end 

和

// ItemGalleryVC.m 

    #import "ItemGalleryVC.h" 

    @implementation ItemGalleryVC 
    @synthesize scrollView; 
    @synthesize pageControl; 

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


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

    - (void)viewDidUnload 
    { 
     [scrollView release]; 
     [pageControl release]; 
    } 


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

    - (void)setupPage 
    { 
     NSLog(@"setupPage"); 
     scrollView.delegate = self; 

     [scrollView setCanCancelContentTouches:NO]; 

     scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite; 
     scrollView.clipsToBounds = YES; 
     scrollView.scrollEnabled = YES; 
     scrollView.pagingEnabled = YES; 

     NSUInteger nimages = 0; 
     CGFloat cx = 0; //the total scroll width 
     CGRect rect = scrollView.frame; //image frame 
     rect.size.height = scrollView.frame.size.height; 
     rect.size.width = scrollView.frame.size.width - 100; //50px at left and right sides 
     rect.origin.y = scrollView.frame.origin.y+5; //down by 5 px 
     for (; ; nimages++) { 
      NSString *imageName = [NSString stringWithFormat:@"item_image0%d.jpg", (nimages + 1)]; 
      UIImage *image = [UIImage imageNamed:imageName]; 
      if (image == nil) { 
       NSLog(@"no more imagez"); 
       break; 
      } 
      NSLog(@"setting up img: %@",imageName); 
      UIImageView *imageView = [[UIImageView alloc] initWithImage:image]; 

      rect.origin.x = cx+50; //move right by 50px 

      imageView.frame = rect; 
      imageView.contentMode = UIViewContentModeScaleAspectFit; 
      imageView.backgroundColor = [UIColor blackColor]; 

      [scrollView addSubview:imageView]; 
      [imageView release]; 

      cx += rect.size.width+30; 
     } 

     self.pageControl.numberOfPages = nimages; 
      // for the last image to be centered frame need to be wider by 100px 
     [scrollView setContentSize:CGSizeMake(cx+100, [scrollView bounds].size.height)]; 
    } 


    - (void)scrollViewDidScroll:(UIScrollView *)_scrollView 
    { 
     if (pageControlIsChangingPage) { 
      return; 
     } 

     // calc page number according to its frame size 
     CGFloat pageWidth = _scrollView.frame.size.width; 
     int page = floor((_scrollView.contentOffset.x - pageWidth/2)/pageWidth) + 1; 
     pageControl.currentPage = page; 

    } 

    - (void)scrollViewDidEndDecelerating:(UIScrollView *)_scrollView 
    { 
     pageControlIsChangingPage = NO; 

// this code added to correct image position (frame width) when using touch sliding 
     CGRect frame = scrollView.frame; 
     frame.origin.x = (frame.size.width-70) * pageControl.currentPage; 
     frame.origin.y = 0; 

     [scrollView scrollRectToVisible:frame animated:YES]; 
    } 

    - (IBAction)changePage:(id)sender 
    { 
     /* 
     * Change the scroll view 
     */ 
     CGRect frame = scrollView.frame; 
     frame.origin.x = (frame.size.width-70) * pageControl.currentPage; 
     frame.origin.y = 0; 

     [scrollView scrollRectToVisible:frame animated:YES]; 

     pageControlIsChangingPage = NO; 
    } 

    @end 

的問題是幀的大小（它的寬度）。它的ScrollView.frame的大小，但我需要它更小（不太寬）。 使用此代碼如果我只使用頁面控件來切換圖片，一切正常，動畫看起來不錯。但是，如果我使用滑動它完全不好。 上面的代碼包含一個修復（在scrollViewDidEndDecelerating中），但它在滑動時仍然不是原生的，它適用於3張圖像。它滑向不正確的位置，並且向後移動一點。如果有3個以上的圖像滑塊不會滑動到最後一個圖像。
我很好奇，如果有一些其他和正確的方法來做到這一點。

Answer 1

其實我發現了另一個soultion - http://www.cocoacontrols.com/platforms/ios/controls/hgpagescrollview 這種控制是我想要的。

Answer 2

試試看，scrollView會畫出它的邊界。

[scrollView setClipsToBounds:NO];