iOS 實現點選微信頭像效果

小良發表於2017-03-09

公司產品需要實現點選個人主頁頭像可以放大頭像、縮放頭像、儲存頭像效果(和點選微信個人頭像類似),故找個時間實現一下,記錄下來,供自己檢視,也給大家做個參考。

實現效果(GIF):

iOS 實現點選微信頭像效果

實現思路:

直接自定義 UIView(CYPhotoPreviewer),為了實現雙擊縮放,可以實現 UIScrollViewDelegate 對應的方法。如果需要模糊背景,可以在自定義的 UIView 中先新增模糊背景,再新增 UIScrollView,繼而在 UIScrollView 中新增圖片容器,這個容器就是要顯示的圖片的 superView,程式碼一目瞭然:

可以看到,我們給設定了模糊背景,給這個 CYPhotoPreviewer 新增了單擊手勢(關閉 PhotoPreviewer)、雙擊手勢(縮放圖片)、長按手勢(使用 UIAlertController 選單,比如儲存圖片等)。

好,確定了這個 CYPhotoPreviewer 中的顯示內容,那麼我們該如何顯示這個 CYPhotoPreviewer 呢?

  • 直接將這個 CYPhotoPreviewer 新增到 keyWindow 上
  • 將這個 CYPhotoPreviewer 新增到控制器的 self.view 上

這兩種方式的實現都差不多,不過如果使用第一種方式的話,會導致將 CYPhotoPreviewer 新增到 keyWindow 上之後,再長按繼續將 UIAlertController 顯示就比較麻煩了,因此,這裡打算採用將 CYPhotoPreviewer 新增到控制器的 self.view 上,繼而就可以很方便的顯示 UIAlertController 了:

可以看到,我們將外面的圖片 fromImageView 傳遞進來,是為了顯示更好的動畫效果;將控制器的 container(self.view)傳遞進來,是為了將 CYPhotoPreviewer 新增到 container 的細節不需要在呼叫處處理,即初始化 CYPhotoPreviewer 之後,CYPhotoPreviewer 就直接被 container 新增為 subview 了。動畫很簡單不再細說。

顯示的效果已經做好,單擊關閉 CYPhotoPreviewer 也比較好實現,只需要從父類移除 CYPhotoPreviewer 即可:

好了,顯示和關閉 CYPhotoPreviewer 都實現了,如果需要雙擊縮放圖片效果,就得實現 UIScrollViewDelegate 的兩個方法以及 CYPhotoPreviewer 的雙擊手勢:

最後一個就是長按彈出選單(UIAlertController)了:

注意一點,longPress: 這個方法會呼叫很頻繁,因此,為了避免 Attempt to present xxx on xxx which is already presenting xxx 這個警告,我們需要判斷手勢的狀態。

後話:

這個只是顯示單張圖片的大圖,如果需要顯示多張圖片類似微信微博的九宮格圖片的大圖顯示,則需要將這個 CYPhotoPreviewer 搞成 UICollectionView 的 item 即可,大家可以嘗試嘗試。最後,如果需要或者 CYPhotoPreviewer 原始碼,可以前往 GitHub 下載檢視:https://github.com/angelen10/PhotoPreviewer

打賞支援我寫出更多好文章,謝謝!

打賞作者

打賞支援我寫出更多好文章,謝謝!

iOS 實現點選微信頭像效果

相關文章