美文网首页Swift专题
Swift基础~UICollectionView

Swift基础~UICollectionView

作者: 记忆的北极 | 来源:发表于2018-04-10 14:07 被阅读171次

    这里是Swift简单的UICollectionView的创建和使用,
    其中的CollectionViewCell是自定义的cell,
    ZLLCollectionReusableView是自定义的标题头,
    ZLLFootCollectionReusableView是自定义的脚部.

    import UIKit
    
    class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {
        
        //全局变量
        var screen_width:CGFloat!
        var screen_height:CGFloat!
        
        
        var collectionView:UICollectionView!
        
        //MARK: -
        //MARK: init
        override func viewDidLoad() {
            super.viewDidLoad()
            screen_height = UIScreen.main.bounds.size.height
            screen_width = UIScreen.main.bounds.size.width
            
            self.setCollectionView()
        }
    
        //MARK: -
        //MARK: UI
        func setCollectionView() {
            //1, 流布局
            let layout = UICollectionViewFlowLayout.init()
            
            //2, 设置每个item的大小
            layout.itemSize = CGSize(width: screen_width/2, height: screen_height/3)
            
            //3, 垂直和水平滑动
            //        UICollectionViewScrollDirection.vertical  省略写法  .vertial
            //        UICollectionViewScrollDirection.horizontal  省略写法  .horizontal
            layout.scrollDirection = .vertical
            
            //4, 每个item之间的最小距离 inter 之间
            layout.minimumInteritemSpacing = 10
            
            //5, 每行之间的最小距离
            layout.minimumLineSpacing = 10
            
            //6, 定义collectionView
            collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: screen_width, height: screen_height), collectionViewLayout: layout)
            
            //7, 注册collectionViewCell
            collectionView.register(UINib (nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "CollectionViewCell")
            
            //8, 注册header
            collectionView.register(UINib (nibName: "ZLLCollectionReusableView", bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "ZLLCollectionReusableView")
            //设置页头尺寸
            layout.headerReferenceSize = CGSize.init(width: screen_width, height: 50)
    
            //9, 注册底部
            collectionView.register(UINib (nibName: "ZLLFootCollectionReusableView", bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionFooter, withReuseIdentifier: "ZLLFootCollectionReusableView")
            //设置底部尺寸
            layout.footerReferenceSize = CGSize(width: screen_width, height: 50)
            
            //10, 设置delegate
            collectionView!.delegate = self
            collectionView!.dataSource = self
            
            //11, 分页显示效果
            collectionView.isPagingEnabled = true
            
             collectionView.backgroundColor = UIColor.white
            
            self.view.addSubview(collectionView)
        }
        
        
        //MARK: -
        //MARK: collection datasource
        
        func numberOfSections(in collectionView: UICollectionView) -> Int
        {
            return 1
        }
        
        //必选方法
        func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
        {
            return 8
        }
        
        func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView
        {
           
            
            if (kind as String) == UICollectionElementKindSectionHeader  {
                //返回头部
                let header = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "ZLLCollectionReusableView", for: indexPath)
                
                return header
            }else
            {
                //返回底部
                let footer = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionFooter, withReuseIdentifier: "ZLLFootCollectionReusableView", for: indexPath)
                return footer
            }
        }
        
        //必选方法
        func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
        {
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as!CollectionViewCell
            
            cell.iconImageView.image = UIImage(named:"textImage")
            cell.backgroundColor = UIColor.red
            return cell
        }
        
        //MARK: -
        //MARK: delegateFlowlayout
        
        //返回header的大小
    //    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize
    //    {
    //        return CGSize(width: screen_width, height: 50)
    //    }
    
        
        //可以定制不同的item  return: item的大小
        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
        {
            if (indexPath as IndexPath).row % 2 == 1 {
                return CGSize(width: (screen_width - 20)/2, height: screen_height/2)
            }else{
                return CGSize(width: (screen_width - 20)/2, height: screen_height/3)
            }
        }
    
        
        override func didReceiveMemoryWarning() {
            super.didReceiveMemoryWarning()
            // Dispose of any resources that can be recreated.
        }
    
    }
    
    

    自定义的cell是继承UICollectionViewCell

    import UIKit
    
    class CollectionViewCell: UICollectionViewCell {
        
        //图片属性
        @IBOutlet weak var iconImageView: UIImageView!
        
        override func awakeFromNib() {
            super.awakeFromNib()
            // Initialization code
        }
    
    }
    

    cell的头部和脚部都的自定义都是继承 UICollectionReusableView, 这和oc里是一样的
    这里使用的是.xib文件, 脚和头一样,所以就只展示一下头的代码就行,其实也没什么内容,所有展示都在.xib上,我这里没有添加属性.

    import UIKit
    
    class ZLLCollectionReusableView: UICollectionReusableView {
    
        override func awakeFromNib() {
            super.awakeFromNib()
            // Initialization code
        }
        
    }
    

    相关文章

      网友评论

        本文标题:Swift基础~UICollectionView

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