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

1,layout
该属性表示布局方式,有Flow、Custom两种布局方式。默认是Flow流式布局。
2,Accessories
是否显示页眉和页脚
3,各种尺寸属性
Cell Size:单元格尺寸
Header Size:页眉尺寸
Footer Size:页脚尺寸
Min Spacing:单元格之间间距
Section Insets:格分区上下左右空白区域大小。
二、流布局的简单样例
1,先创建一个ASimple 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的tag为2,Colletion View Cell的Identifier为DesignViewCell。
效果图如下:
 

--- ViewController.swift ---

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import UIKit
 
class ViewController: UICollectionViewController {
     
    //课程名称和图片,每一门课程用字典来表示
    let courses = [
        ["name":"Swift","pic":"swift.png"],
        ["name":"OC","pic":"oc.jpg"],
        ["name":"java","pic":"java.png"],
        ["name":"php","pic":"php.jpeg"]
    ]
     
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
         
        // 已经在界面上设计了Cell并定义了identity,不需要注册CollectionViewCell
        //self.collectionView.registerClass(UICollectionViewCell.self,
        //  forCellWithReuseIdentifier: "ViewCell")
        //默认背景是黑色和label一致
        self.collectionView?.backgroundColor = UIColor.whiteColor()
         
    }
 
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
     
    // CollectionView行数
    override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int)
        -> Int {
        return courses.count;
    }
     
    // 获取单元格
    override func collectionView(collectionView: UICollectionView,
        cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        // storyboard里设计的单元格
        let identify:String = "DesignViewCell"
        // 获取设计的单元格,不需要再动态添加界面元素
        let cell = self.collectionView?.dequeueReusableCellWithReuseIdentifier(
            identify, forIndexPath: indexPath) as UICollectionViewCell
        // 从界面查找到控件元素并设置属性
        (cell.contentView.viewWithTag(1) as! UIImageView).image =
            UIImage(named: courses[indexPath.item]["pic"]!)
        (cell.contentView.viewWithTag(2) as! UILabel).text = courses[indexPath.item]["name"]
        return cell
    }
}

--- Main.storyboard ---

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="6254" systemVersion="14B25" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" initialViewController="fNw-sO-QDe">
    <dependencies>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="6247"/>
    </dependencies>
    <scenes>
        <!--View Controller-->
        <scene sceneID="wxT-ij-Le6">
            <objects>
                <collectionViewController id="fNw-sO-QDe" customClass="ViewController" customModule="SwiftInAction_008_015" customModuleProvider="target" sceneMemberID="viewController">
                    <collectionView key="view" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" dataMode="prototypes" id="pK1-nH-r5x">
                        <rect key="frame" x="0.0" y="0.0" width="600" height="600"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <color key="backgroundColor" white="0.66666666666666663" alpha="1" colorSpace="calibratedWhite"/>
                        <collectionViewFlowLayout key="collectionViewLayout" minimumLineSpacing="10" minimumInteritemSpacing="10" id="UDB-fy-TG6">
                            <size key="itemSize" width="92" height="97"/>
                            <size key="headerReferenceSize" width="0.0" height="20"/>
                            <size key="footerReferenceSize" width="0.0" height="0.0"/>
                            <inset key="sectionInset" minX="0.0" minY="0.0" maxX="0.0" maxY="0.0"/>
                        </collectionViewFlowLayout>
                        <cells>
                            <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" restorationIdentifier="ViewCell" reuseIdentifier="DesignViewCell" id="FKz-79-V4r">
                                <rect key="frame" x="0.0" y="0.0" width="50" height="50"/>
                                <autoresizingMask key="autoresizingMask"/>
                                <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
                                    <rect key="frame" x="0.0" y="0.0" width="92" height="97"/>
                                    <autoresizingMask key="autoresizingMask"/>
                                    <subviews>
                                        <imageView userInteractionEnabled="NO" tag="1" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="ZmJ-ad-pZs">
                                            <rect key="frame" x="4" y="4" width="75" height="65"/>
                                        </imageView>
                                        <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" tag="2" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" text="Label" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="U4J-Ys-QBF">
                                            <rect key="frame" x="4" y="71" width="75" height="21"/>
                                            <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                            <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
                                            <nil key="highlightedColor"/>
                                        </label>
                                    </subviews>
                                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
                                </view>
                            </collectionViewCell>
                        </cells>
                        <collectionReusableView key="sectionHeaderView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" id="rmh-sg-HAy">
                            <rect key="frame" x="0.0" y="0.0" width="600" height="20"/>
                            <autoresizingMask key="autoresizingMask"/>
                        </collectionReusableView>
                        <connections>
                            <outlet property="dataSource" destination="fNw-sO-QDe" id="LWA-AL-0di"/>
                            <outlet property="delegate" destination="fNw-sO-QDe" id="RRE-KH-WU2"/>
                        </connections>
                    </collectionView>
                </collectionViewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="tTf-V2-wvH" userLabel="First Responder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="174" y="137"/>
        </scene>
    </scenes>
</document>

Swift - 使用网格(UICollectionView)进行流布局的更多相关文章

  1. Swift - 设置网格UICollectionView的单元格间距

    要设置单元格cell的间距(水平间距,垂直间距)可进行如下设置: 方法1:在storyboard中设置 选择Collection View后在面板里设置Min Spacing相关属性(这里也可以设置单 ...

  2. Swift - 使用网格(UICollectionView)的自定义布局实现复杂页面

    网格UICollectionView除了使用流布局,还可以使用自定义布局.实现自定义布局需要继承UICollectionViewLayout,同时还要重载下面的三个方法: 1 2 3 4 5 6 7 ...

  3. Swift:用UICollectionView整一个瀑布流

    本文的例子和Swift版本是基于Xcode7.2的.以后也许不知道什么时候会更新. 我们要干点啥 用新浪微博的Open API做后端来实现我们要提到的功能.把新浪微博的内容,图片和文字展示在colle ...

  4. 【Swift】iOS UICollectionView 计算 Cell 大小的陷阱

    前言 API 不熟悉导致的问题,想当然的去理解果然会出问题,这里记录一下 UICollectionView 使用问题. 声明  欢迎转载,但请保留文章原始出处:)  博客园:http://www.cn ...

  5. 前不久一个swift项目用uicollectionview 用sdwebimage 加载图片,发生内存猛增,直接闪退的情况,简单说一下解决方案。

    1.首先在appdelegate方法 didFinishLaunchingWithOptions SDImageCache.sharedImageCache().maxCacheSize=1024*1 ...

  6. [Swift]LeetCode1001. 网格照明 | Grid Illumination

    On a N x N grid of cells, each cell (x, y) with 0 <= x < N and 0 <= y < N has a lamp. In ...

  7. Swift UITableView嵌套UICollectionView点击事件冲突(点击事件穿透)

    不管是啥都响应tableviewcell class JYShopCertificationCell: UITableViewCell { override func hitTest(_ point: ...

  8. ios项目里扒出来的json文件

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #000000 } p.p2 { margin: 0.0px 0. ...

  9. Github上关于iOS的各种开源项目集合(强烈建议大家收藏,查看,总有一款你需要)

    下拉刷新 EGOTableViewPullRefresh - 最早的下拉刷新控件. SVPullToRefresh - 下拉刷新控件. MJRefresh - 仅需一行代码就可以为UITableVie ...

随机推荐

  1. C++ 函数声明中指定,默认参数

    C++ 在声明函数的时候,如果指定了,参数的默认值,再调用函数的时候可以省略后面的参数. 如果调用函数写上的参数,但是不全.参数列表后面的使用默认值.如下例子,一看就清楚了. #include < ...

  2. Linux下tcpdump用法

    根据使用者的定义对网络上的数据包进行截获的包分析工具.tcpdump将网络中传送的数据包的“头”完全截获下来提供分析.它支持针对网络层.协议.主机.网络或端口的过滤,并提供了and. or.not等逻 ...

  3. RelativeLayout的属性详解

    1. android:layout_below="@+id/first" //在某元素的的下方: android:layout_alignBottom="@+id/fir ...

  4. 虚拟主机的配置、DNS重定向网站

    虚拟主机的配置:我用的是localhost本地测试站点+Apache环境 第一步:找到Apache安装目录下的httpd-vhosts.conf文件,然后启用这个文件,如何启用这个文件呢?当然是在ht ...

  5. C++ 檔案、資料夾、路徑處理函式庫:boost::filesystem

    原帖:https://tokyo.zxproxy.com/browse.php?u=uG7kXsFlW1ZmaxKEvCzu8HrCJ0bXIAddA1s5dtIUZ%2FYzM1u9JI7jjKLT ...

  6. C++中用rand()和srand()产生随机数方法介绍

    标准库<cstdlib>(被包含于<iostream>中)提供两个帮助生成伪随机数的函数:   函数一:int rand(void): 从srand (seed)中指定的see ...

  7. 【linux】U-BOOT与linux kernel通信: struct tag

      欢迎转载,转载时需保留作者信息. 邮箱:tangzhongp@163.com 博客园地址:http://www.cnblogs.com/embedded-tzp Csdn博客地址:http://b ...

  8. Java--Eclipse关联Java源码

    打开Eclipse,Window->Preferences->Java 点Edit按钮后弹出: 点Source Attachment后弹出: 选择Java安装路径下的src.zip文件即可 ...

  9. 《Java虚拟机原理图解》1.3、class文件里的訪问标志、类索引、父类索引、接口索引集合

    讲完了class文件里的常量池,我们就相当于克服了class文件里最麻烦的模块了.如今,我们来看一下class文件里紧接着常量池后面的几个东西:訪问标志.类索引.父类索引.接口索引集合. 1. 訪问标 ...

  10. [hadoop系列]Pig的安装和简单演示样例

    inkfish原创,请勿商业性质转载,转载请注明来源(http://blog.csdn.net/inkfish ).(来源:http://blog.csdn.net/inkfish) Pig是Yaho ...