美文网首页
Swift - 使用网格(UICollectionView)进行

Swift - 使用网格(UICollectionView)进行

作者: 小驴拉磨 | 来源:发表于2020-06-24 14:00 被阅读0次

    (本文代码已升级至Swift5)

    一、网格UICollectionView最典型的例子是iBooks。其主要属性如下:

    1、layout
    该属性表示布局方式,有Flow、Custom两种布局方式。默认是Flow流式布局。
    2、Accessories
    是否显示页眉和页脚
    3、各种尺寸属性
    Cell Size:单元格尺寸
    Header Size:页眉尺寸
    Footer Size:页脚尺寸
    Min Spacing:单元格之间间距
    Section Insets:格分区上下左右空白区域大小。

    二、简单的流布局样例

    效果图:


    Simulator Screen Shot - iPhone SE (2nd generation) - 2020-06-24 at 13.59.44.png

    主要代码:

    import UIKit
    
    class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource
    {
    
        var collectionView: UICollectionView!
        
        var dataSource = [
            ["name":"地址管理","pic":"IQH_mine_address"],
            ["name":"我的收藏","pic":"IQH_mine_myCollection"],
            ["name":"账号信息","pic":"IQH_mine_accountInformation"],
            ["name":"系统设置","pic":"IQH_mine_systemSetting"]
        ]
        
        override func viewDidLoad() {
            super.viewDidLoad()
            /// 设置UI
            setupUI()
        }
    
        /// 设置UI
        func setupUI()
        {
            let layout = UICollectionViewFlowLayout()
            layout.itemSize = CGSize(width: (self.view.bounds.size.width - 40) / 3, height: (self.view.bounds.size.width - 40) / 3 + 30)
            
            collectionView = UICollectionView(frame: self.view.bounds, collectionViewLayout: layout)
            collectionView.register(collectionViewCell.self, forCellWithReuseIdentifier: "collectionViewCell")
            collectionView.delegate = self
            collectionView.dataSource = self
            collectionView.backgroundColor = UIColor.white
            view.addSubview(collectionView)
        }
        
        func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
            return dataSource.count
        }
    
        func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectionViewCell", for: indexPath) as! collectionViewCell
            let data = dataSource[indexPath.row]
            cell.imageView.image = UIImage(named: data["pic"] ?? "");
            cell.titleLabel.text = data["name"] ?? ""
            return cell
        }
    }
    
    class collectionViewCell: UICollectionViewCell
    {
        var titleLabel: UILabel!
        var imageView: UIImageView!
        
        
        override init(frame: CGRect) {
            super.init(frame: frame)
            
            imageView = UIImageView()
            imageView.frame = CGRect(x: 0, y: 0, width: self.bounds.size.width, height: self.bounds.size.width)
            imageView.contentMode = .scaleAspectFit
            
            titleLabel = UILabel(frame: CGRect(x: 0, y: imageView.frame.origin.y + imageView.frame.size.width + 10, width: self.bounds.size.width, height: 20))
            titleLabel.textAlignment = .center
            
            addSubview(imageView)
            addSubview(titleLabel)
        }
        
        required init?(coder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }
    }
    

    原文出自:www.hangge.com 转载请保留原文链接:https://www.hangge.com/blog/cache/detail_590.html

    相关文章

      网友评论

          本文标题:Swift - 使用网格(UICollectionView)进行

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