Swift - 使用网格（UICollectionView）进行流布局

发布时间：2020-12-14 07:20:53 所属栏目：百科来源：网络整理

导读：一、网格UICollectionView最典型的例子是iBooks。其主要属性如下： 1，layout 该属性表示布局方式，有Flow、Custom两种布局方式。默认是Flow流式布局。 2，Accessories 是否显示页眉和页脚 3,各种尺寸属性 Cell Size：单元格尺寸 Header Size：页眉尺寸 Foot

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

1，layout

该属性表示布局方式，有Flow、Custom两种布局方式。默认是Flow流式布局。

2，Accessories

是否显示页眉和页脚

3,各种尺寸属性

Cell Size：单元格尺寸

Header Size：页眉尺寸

Footer Size：页脚尺寸

Min Spacing：单元格之间间距

Section Insets：格分区上下左右空白区域大小。

二、流布局的简单样例

1，先创建一个应用Simple View Application，删除默认的 View Controller，拖入一个 Collection View Controller到界面上，这时我们可以看到已经同时添加了 Collection View和 Collection View Cell控件。

2，勾选 Collection View Controller属性面板里的 Is Initial View Controller复选框，设置为启动视图控制器。

3，在 Collection View Cell里拖入一个 Image View和 Label并摆放好位置和大小，用于显示图标和名称。

4，设置 Image View的 tag为 1， Label的 2， Colletion View Cell的 Identifier为 DesignViewCell。

效果图如下：

--- ViewController.swift ---

 
        import 
        UIKit 
       
        class 
        ViewController: UICollectionViewController { 
       
        //课程名称和图片，每一门课程用字典来表示 
       
        let courses = [ 
       
[ 
        "name" 
        : 
        "Swift" 
        , 
        "pic" 
        "swift.png" 
        ], 
       
"OC" 
        "oc.jpg" 
        "java" 
        "java.png" 
        "php" 
        "php.jpeg" 
        ] 
       
] 
       
        override 
        func viewDidLoad() { 
       
super 
        .viewDidLoad() 
       
// 已经在界面上设计了Cell并定义了identity，不需要注册CollectionViewCell 
       
//self.collectionView.registerClass(UICollectionViewCell.self, 
       
// forCellWithReuseIdentifier: "DesignViewCell") 
       
self.collectionView?.backgroundColor = UIColor.whiteColor() 
       
} 
       
// CollectionView行数 
       
func collectionView(collectionView: UICollectionView, 
       
numberOfItemsInSection section: Int) -> Int { 
       
return 
        courses.count; 
       
} 
       
// 获取单元格 
       
cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { 
       
// storyboard里设计的单元格 
       
let identify: 
        String 
        = 
        "DesignViewCell" 
       
// 获取设计的单元格，不需要再动态添加界面元素 
       
let cell = (self.collectionView?.dequeueReusableCellWithReuseIdentifier( 
       
identify,forIndexPath: indexPath))! 
        as 
        UICollectionViewCell 
       
// 从界面查找到控件元素并设置属性 
       
(cell.contentView.viewWithTag( 
        1 
        ) 
        ! UIImageView).image = 
       
UIImage(named: courses[indexPath.item][ 
        ]!) 
       
2 
        ! UILabel).text = 
       
courses[indexPath.item][ 
        ] 
       
cell 
       
} 
       
func didReceiveMemoryWarning() { 
       
.didReceiveMemoryWarning() 
       
} 
       
        设置可重用标识 
       
设置cell的宽高和间距

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!