うるおいらんど

アプリ開発やサイト制作のメモとか。

【Swift 3】UICollectionViewのセル上に乗せた画像をピンチで拡大する【UICollectionView】

魚ライン
魚ライン

どもも。

UICollectionViewを用いてiPhoneのデフォルト写真アプリのようなものを作成しています。イメージビューアーっていうのかなそんな感じのやつです。

やりたいこととしては、UICollectionView上のUIImageViewの拡大となります。

こんな感じ。



ちなみにこの拡大だけで2日くらい行き詰まってました(´・ω・`)

UICollectionViewはUIScrollViewのサブクラス!

UICollectionViewはUIScrollViewのサブクラスになります。

UIScrollViewならviewForZooming(in:)を使えば簡単に拡大することができます。

 

どうにかこれを使いたいのですが、viewForZooming(in:)がそもそも呼ばれない。原因がわからず色々プロジェクト外で試行錯誤してたんですが、ようやく解決方法がわかったので紹介していきます。

 

UICollectionViewを設置しよう

適当にコレクションビューを設置します。

この辺は普通に設置するだけでおkです。

 

まずはデリゲートを書いておきます。

設置します。

 

適当に同じ画像を10枚横スクロールで表示しています。

 

カスタムセルを作ろう

UICollectionViewCellのサブクラスを作成します。

File > New > File



 

 

Source > Cocoa Touch Class > Next



 

Sublclass of:をUICollectionViewCellにして作成



 

この中にScrollViewを設置して、さらにその上にImageViewを置きます。

 

これで無事拡大ができます。

ダブルタップでの拡大を記事の最後に付け足しました。

 

失敗ポイント

躓いた原因はいくつかあります(´・ω・`)

・UICollectionViewがUIScrollViewのサブクラスだということで、自動的にviewForZooming(in:)が呼ばれると思っていた。

・UIScrollViewを設置してデリゲートをつけると、自動的にviewForZooming(in:)が呼ばれると思っていた。

・そもそもUICollectionView上のスクロールビューを拡大しても意味がないことに気がついていなかった。

などなど。

 

まずviewForZooming(in:)が呼ばれなかった原因はこちら。

このzoomに関する設定をしていなかったから呼ばれなかったわけです。

setZoomScale(scale:animated:)だとかzoom(to:animated:)だとかを書いてもviewForZooming(in:)は呼ばれていました。

この辺がないと呼ばれない。ここに気づくまでが時間かかりました・・・疲れてたのかな・・・・
気づいてからはすぐでした。

 

そしてUICollectionView上のスクロールビューを拡大しようとしていたので、枠だけが大きくなって画像が大きくならないという。すぐに気づいたけどね・・・?

ちなみに、UICollectionViewを使っている場合はUIScrollViewDelegateではなくUICollectionViewDelegateを使ってください。ちゃんとscrollviewのも含まれているよ(`・ω・´)

 

あとは色々UIGestureRecognizerを用いてピンチしようとしたのですが、色々競合しちゃったのかうまくいきませんでした。そしてごちゃごちゃしてるし煩雑です。

 

ダブルタップで拡大機能もつけようと思っているので、またすぐ記事書くかもです〜。

ほぼ写しただけで済んでしまったので、ダブルタップで拡大を追加したコード載せておきます。

参考はこちら「画像をダブルタップとピンチイン・ピンチアウトで拡大・縮小する

変なところにひっかかってなかったらこの記事だけで実装できてたな・・・(´・ω・`)

 

 

ではでは。

 

参考

Adding pinch zoom to a UICollectionView

簡易スライドビューア [2] 拡大

 

どうでもいいけど一番最初のUICollectionViewはUIScrollViewのサブクラスっていうとこ、いらなくない・・・?

 

魚ライン 魚ライン

Swiftの記事一覧を見る

コメント

コメントは認証制です。詳しくは下記の注意をお読みください。

コメントを残す

コメント時の注意

「Twitter」「Facebook」「Google+」「WordPress」のいずれかのアカウントをお持ちの方は各アカウントと連携することでコメントできます。 コメントしたことはSNSに流れませんので、アカウントをお持ちの方はこちらの方法でコメントを投稿して下さると嬉しいです。 アカウントをお持ちでない方はメールアドレスで投稿することができます。 初回コメント時は承認後に表示されます。

魚ライン 魚ライン