ということで、画像を拡大表示するためのViewer画面を作成していきます。
仕様は以下とします。
- 画像の上に透明なボタンを設置
- 画像をタップすると、ボタンが検知してViewer画面を表示する。
- Viewer画面には画像を表示する。
- 画像をピンチアウトすると拡大表示できる。
- Viewer画面に閉じるボタンを設置
画像上に透明なボタンを設置
画像が表示されていない場合はViewerを表示したくないので、ボタンを無効にしておきましょう。
画像を設定するメソッド内に実装すると、漏れがなく効率的です。
Viewer画面の作成
storyboardで画面を追加して、以下のような構成にします。
画像を拡大するのにScrollViewを使用します。
ZoomのMinを"1"にすると縮小不可、Maxを"3"にすると3倍までズームできます。
Delegateの設定も忘れずに。
Viewer画面の表示
画面遷移の処理はstoryboardから行います。
透明ボタンの上でcontrolキーを押しながらマウスを移動させて、Viwer画面上で離します。
そして "present modally" を選択すると、モーダル表示の準備ができました。
あとはViewer画面に画像データを渡す処理を実装すればOKです。
閉じるボタンから画面を閉じる
これで一通り完了!
0 件のコメント:
コメントを投稿