Swift3で画像を拡大縮小、スクロールさせる #Swift3 #iOS

シェアする

Swift3で、ピンチイン、アウトで画像の拡大縮小、スクロールをさせる必要があり、いくつか試行錯誤したのでその覚書です。

ソースコード

サンプルの画像を一枚表示して、拡大、縮小、スクロールするだけのデモアプリです。ソースコードは以下の通りです。

デモアプリの全コードはgithubに置いています。

Storyboard

このアプリはUIScrollViewの上にUIImageViewを置いて、そこに画像を表示させています。ですので、storyboardでViewControllerの前面にUIScrollViewを置きます。
次に、UIScrollViewを選択してAttributes inspectorを表示させます。アトリビュートの中の”Zoom”のMinとMaxの値を変更します。デフォルトでは両方とも1ですので、そのままでは拡大も縮小もできません。デモアプリではコード内で以下のように設定していますが、そうしない場合はこのアトリビュートを適切に設定しなければなりません。

さらにその上にUIImageViewを配置しても良いですが、デモアプリでは次のようにコード内でUIImageViewを配置しています。

拡大縮小

addSubView() を使ったので、 viewDidLayoutSubview の中で拡大縮小の設定等をしています。デフォルトのscaleは1なので、そのままでは画像がdot by dotで表示されてしまいます。画像の大きさとScrollViewの大きさから縮小率を計算して、 scrollView.zoomScale に設定します。

w_scaleとh_scaleの小さい方を使えば画像全体が表示されます。逆に、大きい方を使えば画像が画面いっぱいに表示されます。

なお、拡大縮小したくないときは、ズームの上限と下限を同じに設定します。

最後に、拡大縮小した画像を表示するためには次のコードが必要です。

画像を画面の中央に表示する

画像を縮小して画面より小さくすると、画像は画面の左上に表示されてしまいます。常に画像を画面の中央に表示するためには次のようにします。

画面より大きな画像の中央を表示する

画面より大きな画像の場合、最初に表示された時、画像の左側が表示されてしまいます。画像の中央を表示したい場合は、 viewDidLayoutSubviewで以下のようにします。

最後に

UIScrollViewを使うだけで簡単に拡大縮小とスクロールを実現できました。もっと細かい制御をしたい場合はジェスチャーを使うのが良さそうですが、通常の用途はUIScrollViewだけで十分でしょう。

スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

フォローする

スポンサーリンク
スポンサーリンク