簡易スライドビューア [1]基本動作

スライドビューア

簡易スライドビューアを作る。スライドビューアとは画像を指でフリックしてめくる iPhoneではよくあるUI。

以前も紹介したことがあるが、前回は画像の数だけビューを生成するという実用的なものではなかった。
Cocoaの日々: UIScrollView - フリックで画像（ページ）をめくる

今回は作成するビューを最低限として、画像の数が増えてもメモリを食わないような実装としてみた。

なお紹介およびサンプルで利用している画像は下記のものを使った。
夜景 - フリー写真素材 (無料壁紙画像) Futta.NET

アーキテクチャ

３つの UIScrollView をバケツリレーよろしく入れ替えていくのが特徴。

まずベースとなる UIScrollView を１枚用意する(scrollView)。

frame は画面いっぱいにしておき、contentSize は画像数の分だけ横幅を確保しておく。こうすると frameが可視領域となり、フリックによってこの領域がスクロールすることになる。

続いて UIScrollView を３枚用意して、先程の scrollView の上に並べて配置する (previousScrollView, currentScrollView, nextScrollView)。

それぞれの UIScrollViewの上に UIImageView を配置し、そこへ画像を表示する。UIScrollView を使っているのは今後拡大縮小をやるのに都合が良い為。

この状態でユーザがフリックした時の動作を考えてみる。例えばユーザが左方向へフリックした場合。

UIScrollView上でフリックを行うと上の様に可視領域(frame)が相対的に右へ動いていく。これによって左へスクロールしているように見える。

画像１枚分スクロールが終わった時点ではこのようになる。

ここで３つの UIScrollViewを入れ替える。

その結果、３つの UIScrollViewの位置関係は最初の状態に戻る。

後はこの繰り返し。右方向へスクロールも同じ考え方。

コード解説

XcodeでViewベースの新規プロジェクトを作成する。メインとなる UIViewController を次のように書き換えていく。

@interface EasyGalleryViewController : UIViewController {

 NSMutableArray* imageFiles_;

 UIScrollView* scrollView_;

 UIScrollView* previousScrollView_;
 UIScrollView* currentScrollView_;
 UIScrollView* nextScrollView_;
 
 NSInteger currentIndex_;
}

@property (nonatomic, retain) IBOutlet  NSMutableArray* imageFiles;

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

@property (nonatomic, retain) UIScrollView* previousScrollView;
@property (nonatomic, retain) UIScrollView* currentScrollView;
@property (nonatomic, retain) UIScrollView* nextScrollView;

@property (nonatomic, assign) NSInteger currentIndex;

@end

UIScrollView はアーキテクチャで解説した時の名称そのまま。imageFiles には表示したい画像ファイルのフルパスを入れおく。

実装。まずは viewDidLoad。

- (void)viewDidLoad {
    [super viewDidLoad];
 
 // setup scroll views
 CGRect imageScrollViewFrame = CGRectZero;
 imageScrollViewFrame.size = self.scrollView.frame.size;
 imageScrollViewFrame.origin.x = (self.currentIndex-1) * imageScrollViewFrame.size.width;
 
 CGRect imageViewFrame = CGRectZero;
 imageViewFrame.size = self.scrollView.frame.size;
 
 for (int i=0; i < 3; i++) {

  // image view
  UIImageView* imageView =
   [[UIImageView alloc] initWithFrame:imageViewFrame];

  // scroll view
  UIScrollView* imageScrollView =
  [[UIScrollView alloc] initWithFrame:imageScrollViewFrame];
  imageScrollView.minimumZoomScale = 1.0;
  imageScrollView.maximumZoomScale = 5.0;
  imageScrollView.showsHorizontalScrollIndicator = NO;
  imageScrollView.showsVerticalScrollIndicator = NO;
  imageScrollView.backgroundColor = [UIColor blackColor];
  
  // bind views
  [imageScrollView addSubview:imageView];
  [self.scrollView addSubview:imageScrollView];

  // assign to iVars
  switch (i) {
   case 0:
    self.previousScrollView = imageScrollView;
    break;
   case 1:
    self.currentScrollView = imageScrollView;
    break;
   case 2:
    self.nextScrollView = imageScrollView;
    break;    
  }
  
  // release all
  [imageView release];
  [imageScrollView release];
  
  // next image
  imageScrollViewFrame.origin.x += imageScrollViewFrame.size.width;
 }
 
 self.scrollView.pagingEnabled = YES;
 self.scrollView.showsHorizontalScrollIndicator = NO;
 self.scrollView.showsVerticalScrollIndicator = NO;
 self.scrollView.scrollsToTop = NO;
 
 [self adjustViews];
 [self scrollToIndex:self.currentIndex animated:NO]; 
}

３つの UIScrollView を作り、それぞれに UIImageViewを貼りつけている。最後にベースの UIScrollViewのプロパティを設定し（ページスクロール、スクロールバー表示制御など）、画像を表示する。 adjustViews はベース UIScrollView の contentSize を設定した後、３つの UIScrollViewに画像を表示する指示をだしている。

- (void)adjustViews
{
 CGSize contentSize = CGSizeMake(
         self.currentScrollView.frame.size.width * [self.imageFiles count], 
         self.currentScrollView.frame.size.height);
 self.scrollView.contentSize = contentSize;
 
 [self setImageAtIndex:self.currentIndex-1 toScrollView:self.previousScrollView];
 [self setImageAtIndex:self.currentIndex   toScrollView:self.currentScrollView];
 [self setImageAtIndex:self.currentIndex+1 toScrollView:self.nextScrollView];
}

画像表示はこんな感じ。

- (void)setImageAtIndex:(NSInteger)index toScrollView:(UIScrollView*)scrollView
{
 UIImageView* imageView = [scrollView.subviews objectAtIndex:0];
 if (index < 0 || [self.imageFiles count] <= index) {
  imageView.image = nil;
  scrollView.delegate = nil;
  return;
 }

 UIImage* image = [UIImage imageWithContentsOfFile:[self.imageFiles objectAtIndex:index]];
 imageView.image = image;
 imageView.contentMode = (image.size.width > image.size.height) ?
 UIViewContentModeScaleAspectFit : UIViewContentModeScaleAspectFill;
}

指定したインデックスが範囲外の場合は画像=nil としている（表示上は真っ黒になる）。 ここまでで表示ができた。 残りはフリックの制御。

#pragma mark -
#pragma mark UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
 CGFloat position = scrollView.contentOffset.x / scrollView.bounds.size.width;
 CGFloat delta = position - (CGFloat)self.currentIndex;
 
 if (fabs(delta) >= 1.0f) {
  self.currentScrollView.zoomScale = 1.0;
  self.currentScrollView.contentOffset = CGPointZero;
  
  if (delta > 0) {
   // the current page moved to right
   self.currentIndex = self.currentIndex+1; // no check (no over case)
   [self setupNextImage];
   
  } else {
   // the current page moved to left
   self.currentIndex = self.currentIndex-1; // no check (no over case)
   [self setupPreviousImage];
  }
  
 }
 
}

UIScrollViewDelegate のscrollViewDidScroll: を実装し、ここで１ページ分のスクロールが発生したかどうかを判定している。１ページ分のスクロールが発生している場合はアーキテクチャで説明した３つの UIScrollViewの入れ替えを実施する。

-(void)setupPreviousImage
{
 UIScrollView* tmpView = self.currentScrollView;
 
 self.currentScrollView = self.previousScrollView;
 self.previousScrollView = self.nextScrollView;
 self.nextScrollView = tmpView;
 
 CGRect frame = self.currentScrollView.frame;
 frame.origin.x -= frame.size.width;
 self.previousScrollView.frame = frame;
 [self setImageAtIndex:self.currentIndex-1 toScrollView:self.previousScrollView];
}

-(void)setupNextImage
{
 UIScrollView* tmpView = self.currentScrollView;
 
 self.currentScrollView = self.nextScrollView;
 self.nextScrollView = self.previousScrollView;
 self.previousScrollView = tmpView;
 
 CGRect frame = self.currentScrollView.frame;
 frame.origin.x += frame.size.width;
 self.nextScrollView.frame = frame;
 [self setImageAtIndex:self.currentIndex+1 toScrollView:self.nextScrollView];
}

これでおしまい。

ソースコード

GitHubからどうぞ。 EasyGallery at 2010-09-28 from xcatsan's iOS-Sample-Code - GitHub

参考情報

Cocoaの日々: 画像を横に並べたスクロールビューアの作成 [1] アイディア
- - - -
次回はこれに画像の拡大縮小を入れてみる。