2015年8月5日水曜日

画像拡大Viewerの実装 [Swift]

写真ってたまに拡大したくなりますよね。
ということで、画像を拡大表示するためのViewer画面を作成していきます。

仕様は以下とします。
  1. 画像の上に透明なボタンを設置
  2. 画像をタップすると、ボタンが検知してViewer画面を表示する。
  3. Viewer画面には画像を表示する。
  4. 画像をピンチアウトすると拡大表示できる。
  5. Viewer画面に閉じるボタンを設置

画像上に透明なボタンを設置
画像が表示されていない場合はViewerを表示したくないので、ボタンを無効にしておきましょう。
画像を設定するメソッド内に実装すると、漏れがなく効率的です。

Viewer画面の作成
storyboardで画面を追加して、以下のような構成にします。

画像を拡大するのにScrollViewを使用します。
ZoomのMinを"1"にすると縮小不可、Maxを"3"にすると3倍までズームできます。
Delegateの設定も忘れずに。

Viewer画面の表示
画面遷移の処理はstoryboardから行います。
透明ボタンの上でcontrolキーを押しながらマウスを移動させて、Viwer画面上で離します。
そして "present modally" を選択すると、モーダル表示の準備ができました。
あとはViewer画面に画像データを渡す処理を実装すればOKです。

閉じるボタンから画面を閉じる
これで一通り完了!

0 件のコメント:

コメントを投稿