两种非对称Cell的实现方法(Pinterest)

IMG_0004.PNG

第一次用Pinterest的时候觉得这个设计还是很惊艳的,这个东西本质上是随着iOS6发布的UICollectionView 给开发者带来的强大功能。这个将是我们今天介绍的第二种实现这类UI的方法,其实我们可以用tableview做出类似的效果,而且还更加简单,因为tableView有UITableViewAutoDimension。我知道iOS10给UICollectionView也带来的自动模式,但是首先,是iOS10,其次,谁用谁知道...

当然下面要介绍的方法并不是一个可以真正被使用的方法,因为错的就是错的,但是这种方法体现了一种最直接的工程师思维,如果飞机超音速怎么办?加大动力!飞机太重了怎么办,加大动力!别管白猫黑猫,能找到耗子的就是好猫。Talk is cheap,let's code:

import UIKit

class PinTableViewController: UIViewController {

    @IBOutlet weak var rightTable: UITableView!
    @IBOutlet weak var leftTable: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        automaticallyAdjustsScrollViewInsets = false
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    
    fileprivate func generateRandomColor()->UIColor {
        let r = Float(arc4random_uniform(200)) + 5
        let g = Float(arc4random_uniform(200)) + 5
        let b = Float(arc4random_uniform(200)) + 5
        return UIColor(colorLiteralRed: r/255.0, green: g/255.0, blue: b/255.0, alpha: 1)
    }
}

extension PinTableViewController:UITableViewDataSource {
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 20
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        var cell:UITableViewCell!
        if tableView == leftTable {
            cell = tableView.dequeueReusableCell(withIdentifier: "LeftCell", for: indexPath)
            cell.backgroundColor = generateRandomColor()
            return cell
        }else {
            cell = tableView.dequeueReusableCell(withIdentifier: "RightCell", for: indexPath)
            cell.backgroundColor = generateRandomColor()
            return cell
        }
    }
}

extension PinTableViewController:UITableViewDelegate{
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        let height = arc4random_uniform((170)) + 30
        return CGFloat(height)
    }
    
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if scrollView == rightTable {
            leftTable.contentOffset = rightTable.contentOffset
        }else {
            rightTable.contentOffset = leftTable.contentOffset
        }
    }
}
两种非对称Cell的实现方法(Pinterest)_第1张图片
Paste_Image.png

So far so good, 我们用成本最低,最直觉的方法实现了这样一种形态的UI,当然,实际上的代码还要更加复杂一点,如果你需要通过size class来决定到底是两列还是四列等等,但是,这些都是不重要的细节。

好了,以上都是玩笑,我们来看看,这个UI设计到底是如何“正确地”实现的:
首先需要明确的是,控制CollectionView布局的东西叫做UICollectionViewLayout,默认值是FlowLayout,说到底就是字面意思,flow模式,大小都一样的蠢哭了模式,基本不可用... 既然如此,那我们就来建立自己的Layout:

class PinterestLayout: UICollectionViewLayout {
    
    var delegate:PinterestLayoutDelegate!
    //水平滑动的话就是几列,垂直滑动就是几行
    var numberOfColumns = 3
    //Cell之间的间隔,上下,左或者右
    var cellPadding:CGFloat = 6.0
    //储存每一个Cell的属性
    private var cache = [UICollectionViewLayoutAttributes]()
    
    private var contentHeight:CGFloat = 0
    
    private var contentWidth:CGFloat {
        let insets = collectionView?.contentInset
        //collectionView的宽度减去左右边框宽度就是内容的宽度
        return collectionView!.bounds.width - insets!.left - insets!.right
    }
    
    override func prepare() {
        let columnWidth = contentWidth/CGFloat(numberOfColumns)
        var xOffset = [CGFloat]()
        for column in 0..= numberOfColumns - 1 ? 0 : column+1
        }
    }
    
    override var collectionViewContentSize:CGSize {
        return CGSize(width: contentWidth, height: contentHeight)
    }
    
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        var layoutArrtibutes = [UICollectionViewLayoutAttributes]()
        
        for attribute in cache {
            if attribute.frame.intersects(rect) {
                layoutArrtibutes.append(attribute)
            }
        }
        
        return layoutArrtibutes
    }
    
}

Layout设计好了以后呢就到cell里面去使用一下,就大功告成了:

import UIKit

class MyCollectionViewCell: UICollectionViewCell {

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }
    
    override func apply(_ layoutAttributes: UICollectionViewLayoutAttributes) {
        super.apply(layoutAttributes)
    }

}

你可能感兴趣的:(两种非对称Cell的实现方法(Pinterest))