创建标签流

UICollectionView可以创建高度不一的瀑布流,但是没有办法处理宽度不一的标签流.现在我们就用代码来自己创建一个标签流,会分别使用frame硬编码布局和autolayout自动布局两种方式来实现

一. frame硬编码布局

最终完成效果如下

QQ20160308-1.png

1. 新建一个Single View Application的iOS Project,我们就在初始创建的ViewController上面编写代码
2. 我们创建数据源(TagLabel是一个自定义的UILabel,加入了文本和边框的padding,也可以直接使用UILabel,一样可以实现效果)

    var dataSource = [String]()
    var labels = [TagLabel]()
    //mock 数据数量
    let count = 20

3. 在viewDidLoad中初始化数据

override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        for _ in 0..

4. 布局标签流

func layoutLabels() {
        
        let width = UIScreen.mainScreen().bounds.width
        //标签间水平间距
        let horizontalSpace : CGFloat = 12
        //标签行间距
        let verticalSpace : CGFloat = 12
        //左边已经填充长度
        var left : CGFloat = 0
        //顶部已经填充高度
        var top : CGFloat = 0
        
        var lineLabels = [[TagLabel]]()
        var lineLabel = [TagLabel]()
        var lineStartSpace = [CGFloat]()
        for label in labels {
            let labelWidth = label.systemLayoutSizeFittingSize(UILayoutFittingCompressedSize).width
            if left + labelWidth + horizontalSpace > width {
                lineLabels.append(lineLabel)
                lineLabel = [TagLabel]()
                lineStartSpace.append((width - left + horizontalSpace) / 2)
                left = 0
            }
            
            left += labelWidth + horizontalSpace
            lineLabel.append(label)
        }
        
        lineLabels.append(lineLabel)
        lineStartSpace.append((width - left + horizontalSpace) / 2)

        top = verticalSpace + 20
        var size : CGSize = CGSize.zero
        for (index, oneLine) in lineLabels.enumerate() {
            left = lineStartSpace[index]
            for label in oneLine {
                size = label.systemLayoutSizeFittingSize(UILayoutFittingCompressedSize)
                label.frame = CGRect(x: left, y: top, width: size.width, height: size.height)
                left += size.width + horizontalSpace
                
            }
            top += size.height + verticalSpace
        }
        
    }

5. RandomString是我自己写的一个生成随机长度的字符串方法,代码如下:

///随机字符串生成
class RandomString {
    let characters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
    
    /**
     生成随机字符串,
     
     - parameter length: 生成的字符串的长度
     
     - returns: 随机生成的字符串
     */
    func getRandomStringOfLength(length: Int) -> String {
        var ranStr = ""
        for _ in 0..

6. 以上就是硬编码布局标签流的所有代码了,运行看看效果吧~

二. AutoLayout自动布局

待续...

完整代码见Github: https://github.com/growold/SwiftLearn 的Learn02TagFlow项目.