PhotoVision iOS App(三)分析Celluloid App

celluloid2

找了很多地方都沒有看到類似的code example可以參考,最後是在github翻閱中看到一個可以參考的例子,Celluloid

Celluloid主要的功能就是「Beautify」以及「Collage」

Celluloid Beautify

celluloid1  celluloid3 celluloid4

beautify的部分支持基本的濾鏡和添加圖片,其中漫畫邊框的圖片中可以增加文字,這次打算先實現排版的部分,所以這裡先簡單帶過。

Colluloid Collage

celluloid

Celluloid的collage功能如上圖,用戶在選定圖片以後跳入這個介面,

下方layout可以選擇,選擇layout以後中間的效果圖會重新render

最上面是已選的圖片,如果刪除其中的已選照片,最下面的layout也會換成對應支持的layout類型
(比如三張照片變成兩張,下方layout的選擇也都會是2張照片的layout)


Celluloid Code分析

celluloid-1

Celluloid資料夾

查看Resources下的collage.json我們可以發現,排版的格式是以JSON的方式來存儲的。

celluloid-3

這個App最多四張照片的排版,於是JSON也分成了四類(one_pic, two_pic, three_pic, four_pic)

每一個類別下都會有多種排版,每一個排版是這樣的格式:

celluloid-collage1 celluloid-collage2

其中drawable_name是這個排版的圖片名稱,而Polygons存儲的是layout的points,如果是四張照片就應該有四個圖形的points。

比如說compose_2_1是一個兩張照片的排版,所以polygons裡面就有兩個圖形的四個points。

celluloid-1  colluloid-view-structure

回到工程目錄,因為缺少了文檔,只能自己來看看每個Class的作用了。

imageArrangePanelcelluloid-view-structure

直接讀Class中的code可以看出一些邏輯,不過一個View具體是屬於哪一個class的,可以通過Xcode debug view hierarchy來看看。

通過這個工具很快的可以看出View的結構,view和class就對的上了,目測可以看出來CollageView中會有多個CollageContentView,而圖片的縮放功能是由UIScrollView所提供的,通過操作App可以看出來CollageView會限制圖片至少要貼滿整個CollageContentView,不能夠留白。

Collage功能的實現

CollageModel

根據圖片的數量來讀取collage.json中的數據,並且實現了將點的floats轉換成CGPoints並且組成一個array稱作areas

CollageModel中將CGPoint根據協議CGPointWrapper進行了Extension,當調用其中返回類行為UIBezierPath的函數時,會返回private var path所定義的內容,而path會根據array中所有的CGPoint數量依次畫出一個UIBezierPath圖形

上面Path的定義方式以前沒看過,這裡的variable path定義了返回類型UIBezierPath,但在後面緊跟著是一個{},感覺像定義了一個property的get方法。

UIBezierPath畫圖步驟:

最後不用回到起始的point,執行closePath的時候,會根據最後一個point畫到起始point。

Collage.json中,point以(x, y, x, y…..x,y)的格式存在array中的,所以每兩個element可以構成一個point,上面的for循環中可以看到stride方法。

CollageView

其中setupWithCollageModel中看到zip的用法,感覺在這裡特別好用:
 

CollageViewController

Celluloid中用了一些library

  • Snapkit-用Code來實現autolayout。
  • AssistantKit-識別用戶設備種類、屏幕尺寸、系統版本等功能。
  • BSImagePicker – 可以一次選擇多個圖片。

Property的定義方式

常見的Property定義方式是上面這種的,而當一個property還包括一些設定的時候,viewDidLoad就會開始變得臃腫。

而Celluloid經常用下面的方式來定義,將delegate等property設定完以後再return。

setupConstraintForSize方法

當設備反轉的時候ViewController會調用上面幾種方法,其中size是反轉後的新尺寸。

Celluloid根據這個新尺寸來調整Constraint。

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *