[iPhone] UIScrollView ページ スクロール

アルバムアプリのように、1画面に写真1枚の表示させて、横フリップで画像が次々にスクロールさせるにはどうすればいいのでしょうか、UIScrollView はある程度簡単に作れるようになっています。

scrollview_1

scrollview_2


 

Swift 3.0
Xcode 8.0

 

sponsored link

UIScrollView

 

  1. Single View のプロジェクトを作成します。
  2. スクロールする画像をプロジェクトに追加
  3. Storyboard で ViewController に UIScrollView を設定
  4. Paging Enabled にチェック <— ここがポイント
  5. ViewController.swift に Scroll させるコードの記述

最終的にはこのようになります
 

1 2 3 4 5

 

1. Single View のプロジェクトを作成

 
XcodeでSingle View Application を作成
Language は Swift を設定  

2. スクロールする画像をプロジェクトに追加

 
画像ファイル、1@2x.jpg から 4@2x.jpg までをAssets.xcassetsにコピペします。
ここではそれぞれ192 × 144の画像を使っています
 
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-19-20-35-04
 

3. Storyboard で ViewController に UIScrollView を設定

 
Storyboard を開き Scroll View を選択、ViewController Scene一杯に設置する
 
スクリーンショット 2015-02-25 17.28.36
 

4. Paging Enabled にチェック

 
Scroll View の Paging Enabled にチェックを入れることにより、ページスクロールが可能となります。
コードで書くと、UIScrollView.pagingEnabled = YES のようになる
 

5. ViewController.swift に Scroll させるコードの記述

 

  1. UIScrollView のインスタンスを生成
  2. 画像ごとにそのframeサイズを設定し
  3. addSubview でUIScrollViewに加える
  4. 描画開始のカーソルポイントを決め
  5. UIScrollViewのコンテンツサイズを画像のtotalサイズに合わせる

 
ViewController.swift

 
scroll_a1
 
Storyboard の ScrollView の 「New Reference Outlet」 をコードと紐付けします。
これで、起動画面に1.jpの画像が現れ、横スクロールで次々と画像が表示されていきます。
 

尚、Objective-C でのやり方はこちら