春風得意馬蹄疾,一日看盡長安花。PHPickerViewControllerDelegate加ScrollView加Xib

--

用iOS 14 提供多選照片功能,實現在ScrollView中左右滑動,來瀏覽照片。來好好的欣賞一下知恩妹子吧,身為一個Uaena,手機裏有幾張IU的圖片也是合情合理。

不過在模擬器遇到一個未解的謎,選自己放進去模擬器的圖片卻沒有問題,但是選模擬器預設的圖片會nil,可能是bug吧…

設定PHPickerViewControllerDelegate

首先就是打開Peter的網誌,跪著看完,再開始實作。

接著拉個Button,control drag出IBAction當作手機圖片庫的進入點。

extension出PHPickerViewControllerDelegate,設定好picker及其delegate。

主要是處理:func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]),把選完照片後要做的事情寫在func裡面。

設定xib

因為會多選照片,選幾張照片一切都是隨用戶的喜好,沒有辦法造好固定數量的UIImageView,來當作被選取照片的容器,所以就需要用程式碼動態生成放照片的容器,這時候就是練習Xib的好時機了。

選擇User Interface中的View

也要造好相對應的Cocoa Touch Class 放在custom class中。

因為還想要做到在ScrollView中能通過手勢來縮放圖片,所以他們的階層關係是View→ScrollView→ImageView。

特別的是ScrollView中,有ContentLayoutGuide及FrameLayoutGuide,個人的認知:

FrameLayoutGuide是控制ScrollView在手機顯示的大小;故ImageView的長寬等於FrameLayoutGuide的長寬

ContentLayoutGuide是ScrollView內容的大小;故ImageView的四邊與ContentLayoutGuide四邊沒有間離,使其重合。

設定好要貼上Xib的ScrollView

為了要實現ScrollView滑動換頁,該頁的階層關係為:ViewController→ScrollView→StackView→(Xib)。

此處較為特別的是StackView的設定,平時我們可以用內部的UI元件來撐開StackView,現在StackView內的元件必須在知道選幾張圖片後,程式才產生幾個Xib貼上去,目前設定階段是虛以待之,所以若如往常般將StackView重合ContentLayoutGuide,StackView的長寬等於FrameLayoutGuide的長寬,左面版估計是會跳錯。Peter小王子特別傳授Intrinsic Size由default改為placeholder,先騙騙Xcode,讓他用一個虛的來代替,要記得設定好UIScrollViewDelegate。

貼上Xib

此處有微微踩到雷了,一開始直接把xib貼上去,卻把先前辛苦設定的ScrollView整個蓋掉,後來跟Peter小王子求救,原來是把Xib貼到StackView裡面,所有的Xib才會乖乖的併排在StackView裡面,而不是彼此蓋掉。

此處小王子做出了詳盡的解答,再一次跪著看完。

要注意的地方是,平時將Xib貼入UIView時是用addSubView( ),本次要貼進stackView中,必須要用addArrangedSubview( )。然後於第一次貼入時要設定Xib與ScrollView的frameLayoutGuide兩者同寬,因為在storyBoard中已有設定StackView的屬性Distribution為Fill Equally,所以後面的貼的上Xib也會蕭規曹隨。

最後同場再加映每個Xib中的ImageView使用手勢有圖片放大縮小的效果;首先要取得Xib內ScrollView的delegate,據個人理解,此時ViewConstroller有多重身份,一是自己ScrollView的delegate,二是Xib上ScrollView的delegate;接著設定好縮放的倍數,基本設定完成。

最後的最後再加上 func viewForZooming( ),完成設定即大功告成!

這是一個邊學邊做,邊踩雷邊向小王子求救的學習歷程記錄;很多地方用字淺辭不甚精確,只是單純把內心中的認知化成文字記錄下來,期許自己能在iOS的路下持續前進,最後仍附上github將程式碼提供給有興趣的人參考。

--

--