最近在開發中需要實現瀑布流效果,便動手實現了下,將使用方法記錄下,有不足之處也希望可以和大家溝通交流.
WaterLayout
實現瀑布流的使用的關鍵類是 UICollectionViewFlowLayout,如果我們不繼承直接使用的話,系統已經幫我們實現了壹些效果,比如橫向或者豎向滑動,然後配置壹些屬性或者遵循UICollectionViewDelegateFlowLayout,來顯示個性化的效果.但是有些布局需要我們去實現,比如瀑布流的效果.UICollectionViewFlowLayout非常強大,我們基本上可以任何我們想要的效果,在這裏只說壹下瀑布流的實現,其他效果可以根據這個來進行不同的變形和修改.
UICollectionViewFlowLayout描述
實現自定義布局的關鍵方法
其實上面三個返回布局的方法原理壹樣,就是根據在UICollectionViewFlowLayout屬性配置或者代理方法中返回的屬性系統所做的最原始計算,我們需要根據系統所計算的結果來修改成我們想要的結果,如果不適用系統的結果,直接使用自己計算的也是可以的.
下面說壹下布局方面具體的使用:
我們的計算布局支持多分去,這裏用字典sectionInfos儲存多分區的計算信息.
計算原理如下,我們需要獲取到存在幾個分區,然後布局該分區內的每個item的信息
如果我們從上自下依次布局顯示的話,那麽應該是:
頭視圖->分區內每個item的信息->腳視圖->然後裝飾視圖
裝飾視圖可以根據具體需求來計算,不壹定在最後.在該效果中,我用綠色的背景來實現裝飾視圖,由於覆蓋當前的分區,所以需要知道footer的計算結果,因此裝飾視圖的計算放在了最後,用來知道當前分區的Y軸最大值.
如果只需要實現這種布局,那麽每個條目對應的系統可以就不可以不用重寫.
在返回contentsize的方法中返回具體的大小
讓我們的collectionview實現上面的代理方法,用來實現不同的布局配置,這樣我們就可以像系統的布局代理壹樣,方便調用.下面看壹下控制器中的實現,實現不同的代理方法,用來配置不同分區的內容顯示
實現上面的方法,那麽瀑布流的效果已經可以實現了.
下面說壹下如何滑動到具體的分區,或者item位置.
實現上面的方法,我們可以靈活的滑動到任何元素的位置.
在控制器中調用,這裏我們寫死的第二個分區的第4個條目,方便測試
可以看到這裏很精確的滑動到輸入的位置.
下面說壹下我們優化增加,刪除和刷新效果
添加三個數組,用來實現不同的操作,系統有四種不同的操作事件.
下面看壹下具體的實現:
這裏我們實現了增加,刪除和刷新條目的動畫
這裏要說下面,在增加條目的時候會調用的layoutAttributesForItem,返回的不是我們計算好的attribute,會導致顯示動畫異常,所以在這我們做額外的操作,如果已經有計算好的布局,那麽執行使用,然後在增加的代理方法中實現具體的變化操作.現在我們的增加,刪除實現可CGAffineTransform和alpha變化的效果,刷新實現了alpha變化的效果.如果需要實現其他的動畫效果,可以根據這個來進行變化.
如有問題可以留言和大家溝通交流~~