| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
GenieSingle
7年前发布

应对复杂布局的瀑布流Layout

   <h2>引</h2>    <p>公司的项目中涉及到多列瀑布流、UITableView与sectionHeader的混合布局,之前的实现方式是以UITableView作为骨架,将带有瀑布流的UICollectionView封装到自定义的UITableViewCell中,但是出现的问题就是当cell中瀑布流的元素过多时,会出现明显的卡顿,而且布局复杂,层次较多,难以维护。故而重新自定义了collectionView的Layout,在仅有一个collectionView的情况下完成了上述的布局。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/43e5b0876bd7610dd9937894c109527e.gif"></p>    <p style="text-align:center">这是我们项目.gif</p>    <h3>更新:</h3>    <p>2016-12-23</p>    <p>1、加入了collectionHeaderView,类似UITableView 中的 tableHeaderView</p>    <p>2、将 sideMargin 改为 sectionInsets,提高布局灵活度</p>    <p>项目基于Swift3.0~~</p>    <h2>使用</h2>    <p>闲话不多说,上代码:</p>    <p>1、首先定义一个collectionview,并设置layout的代理:</p>    <pre>  <code class="language-objectivec">let layout = ZJFlexibleLayout(delegate: self)  //如果需要有 headerView 的话,直接传入即可,需提前设置frame  layout.collectionHeaderView = headerView  collectionView = UICollectionView(frame: kScreenBounds, collectionViewLayout: layout)</code></pre>    <p>2、遵守对应的协议:</p>    <pre>  <code class="language-objectivec">protocol ZJFlexibleLayoutDataSource: class{    //控制对应section的瀑布流列数      func numberOfCols(at section: Int) -> Int      //控制每个cell的尺寸,实际上就是获取宽高比      func sizeOfItemAtIndexPath(at indexPath : IndexPath) -> CGSize      //控制瀑布流cell的间距      func spaceOfCells(at section: Int) -> CGFloat      //section 内边距      func sectionInsets(at section: Int) -> UIEdgeInsets      //每个section的header尺寸      func sizeOfHeader(at section: Int) -> CGSize      //每个cell的额外高度      func heightOfAdditionalContent(at indexPath : IndexPath) -> CGFloat  }</code></pre>    <h3>协议详解:</h3>    <p>1.瀑布流列数</p>    <p>可以随意设置瀑布流列数,如果是单列的话就相当于tableView了</p>    <pre>  <code class="language-objectivec">func numberOfCols(at section: Int) -> Int</code></pre>    <p>2.cell尺寸</p>    <p>这个应该不用多讲吧,因为cell的宽度在列数确定时就已经算出来了,所以这个方法实质上是获取cell的宽高比</p>    <pre>  <code class="language-objectivec">func sizeOfItemAtIndexPath(at indexPath : IndexPath) -> CGSize</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/2aeb2f8c3273b8670687eca097d13488.png"></p>    <p style="text-align:center">Paste_Image.png</p>    <p>3.cell间距</p>    <p>cell 的上下左右间距,注意不要跟sectionInsets搞混了</p>    <pre>  <code class="language-objectivec">func spaceOfCells(at section: Int) -> CGFloat</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/057d90198f9582fbc63242e5fe8c28ee.png"></p>    <p style="text-align:center">Paste_Image.png</p>    <p>4.section 内边距</p>    <p>这个是最近才加上的,可以让每个section都有一个内边距</p>    <pre>  <code class="language-objectivec">func sectionInsets(at section: Int) -> UIEdgeInsets</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/ed1a4c2f520b9fb56acb12a3997033b7.png"></p>    <p style="text-align:center">Paste_Image.png</p>    <p>5.每个section的header尺寸</p>    <p>sectionHeader如果宽度小于屏宽,会自动居中</p>    <pre>  <code class="language-objectivec">func sizeOfHeader(at section: Int) -> CGSize</code></pre>    <p>6.cell的额外高度</p>    <p>此方法是专门公司项目的需求提出的,图中标明的部分高度是不固定的,需要根据数据进行判断</p>    <pre>  <code class="language-objectivec">func heightOfAdditionalContent(at indexPath : IndexPath) -> CGFloat</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/17166ae94709db18216f013fd0343cf3.png"></p>    <p style="text-align:center">Paste_Image.png</p>    <h2>结束语</h2>    <p>代码写的没什么条理,所有东西都写到一个文件里了(⊙﹏⊙)b,后续应该会用pod来管理</p>    <p> </p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/3964d5ea48d740f2a1ac2589051e357c.gif"></p>    <p> </p>    <p> </p>    <p>来自:http://www.jianshu.com/p/28eae0d82fdc</p>    <p> </p>    
 本文由用户 GenieSingle 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1484720704013.html
iOS开发 移动开发 UITableView