美文网首页
创建自定义的CollectionViewCell

创建自定义的CollectionViewCell

作者: 林夕copy | 来源:发表于2019-07-11 11:47 被阅读0次

    创建自定义的CollectionViewCell

    import UIKit
     class UserCustomCollectionViewController: UIViewController, UICollectionViewDelegate,     UICollectionViewDataSource {`
    
        var collectionView:UICollectionView!
    
        override funcviewDidLoad() {
    
            super.viewDidLoad()
    
            let layout =CustomLayout()
    
            collectionView=UICollectionView(frame:CGRect(x:0, y:100, width:375, height:500), collectionViewLayout: layout)
    
            collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "123")
    
            collectionView.delegate = self
    
            collectionView.dataSource = self
    
            self.view.addSubview(collectionView)
    
        }
    
    
        // - MARK: - UICollectionDelegate
    
        funccollectionView(_collectionView:UICollectionView, numberOfItemsInSection section:Int) ->Int{
    
            return 10
    
        }
    
        funccollectionView(_collectionView:UICollectionView, cellForItemAt indexPath:IndexPath) ->UICollectionViewCell{
    
            letcell = collectionView.dequeueReusableCell(withReuseIdentifier:"123", for: indexPath)
    
    
            if indexPath.row%2==0{
    
                cell.backgroundColor=  colorLiteral(red: 0.8784313725, green: 0.07058823529, blue: 0.07058823529, alpha: 1)
    
            }else{
    
                cell.backgroundColor=  colorLiteral(red: 0.01316650119, green: 0.1738643348, blue: 0.8993083835, alpha: 1)
    
            }
    
            return cell
        }
    
    }
    
    class CustomLayout: UICollectionViewLayout {`
    
        // 内容区域总大小,不是可见区域
    
        overridevarcollectionViewContentSize:CGSize{
    
            let width = collectionView!.bounds.size.width - collectionView!.contentInset.left
    
                -collectionView!.contentInset.right
    
            letheight =CGFloat((collectionView!.numberOfItems(inSection:0) +1) /3)
    
                * (width /3*2)
    
            returnCGSize(width: width, height: height)
    
        }
    
        // 所有单元格位置属性
    
        overridefunclayoutAttributesForElements(in rect:CGRect)
    
            -> [UICollectionViewLayoutAttributes]? {
    
                varattributesArray = [UICollectionViewLayoutAttributes]()
    
                letcellCount =self.collectionView!.numberOfItems(inSection:0)
    
                foriin0..
    
                    letindexPath =  IndexPath(item:i, section:0)
    
                    letattributes =  self.layoutAttributesForItem(at: indexPath)
    
                    attributesArray.append(attributes!)
    
                }
    
                returnattributesArray
    
        }
    
        // 这个方法返回每个单元格的位置和大小
    
        override funclayoutAttributesForItem(at indexPath:IndexPath)
    
            ->UICollectionViewLayoutAttributes? {
    
                //当前单元格布局属性
    
                let attribute =  UICollectionViewLayoutAttributes(forCellWith:indexPath)
    
    
    
                //单元格边长
    
                let largeCellSide =collectionViewContentSize.width/3*2
    
                let smallCellSide =collectionViewContentSize.width/3
    
                //当前行数,每行显示3个图片,1大2小
    
                let line:Int=  indexPath.item/3
    
                //当前行的Y坐标
    
                letlineOriginY =  largeCellSide *CGFloat(line)
    
                //右侧单元格X坐标,这里按左右对齐,所以中间空隙大
    
                letrightLargeX =collectionViewContentSize.width- largeCellSide
    
                letrightSmallX =collectionViewContentSize.width- smallCellSide
    
                // 每行2个图片,2行循环一次,一共6种位置
    
                if (indexPath.item%6==0) {
    
                    attribute.frame=CGRect(x:0, y:lineOriginY, width:largeCellSide,
    
                                             height:largeCellSide)
    
                }else if(indexPath.item%6==1) {
    
                    attribute.frame=CGRect(x:rightSmallX, y:lineOriginY, width:smallCellSide,
    
                                             height:smallCellSide)
    
                }else if(indexPath.item%6==2) {
    
                    attribute.frame=CGRect(x:rightSmallX,
    
                                             y:lineOriginY + smallCellSide,
    
                                             width:smallCellSide, height:smallCellSide)
    
                }elseif(indexPath.item%6==3) {
    
                    attribute.frame=CGRect(x:0, y:lineOriginY, width:smallCellSide,
    
                                             height:smallCellSide )
    
                }elseif(indexPath.item%6==4) {
    
                    attribute.frame=CGRect(x:0,
    
                                             y:lineOriginY + smallCellSide,
    
                                             width:smallCellSide, height:smallCellSide)
    
                }else if(indexPath.item%6==5) {
    
                    attribute.frame=CGRect(x:rightLargeX, y:lineOriginY,
    
                                             width:largeCellSide,
    
                                             height:largeCellSide)
    
                }
    
                return attribute
        }
    }
    

    相关文章

      网友评论

          本文标题:创建自定义的CollectionViewCell

          本文链接:https://www.haomeiwen.com/subject/rlprkctx.html