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..<count {
            dataSource.append(RandomString.sharedInstance.getRandomStringOfLength(3 + Int(arc4random_uniform(7))))
        }
        for i in 0..<count {
            labels.append(TagLabel())
            labels[i].text = dataSource[i]
            labels[i].padding = UIEdgeInsets(top: 5, left: 5, bottom: 5, right: 5)
            labels[i].layer.borderColor = UIColor.greenColor().CGColor
            labels[i].layer.borderWidth = 1
            labels[i].layer.cornerRadius = 8
            
            self.view.addSubview(labels[i])
        }
        
        layoutLabels()
    }

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..<length {
            let index = Int(arc4random_uniform(UInt32(characters.characters.count)))
            ranStr.append(characters[characters.startIndex.advancedBy(index)])
        }
        return ranStr
        
    }
    
    
    private init() {
        
    }
    static let sharedInstance = RandomString()
}

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

二. AutoLayout自动布局

待续...

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