使用Swift完成一个App--首页填充（代码版）

上次把框架分区都搭建出来了，今天把分区的模拟布局画出来，其实今天想把首页所有的布局都画出来的，时间上不太允许了。因为一会要上班。

1，把热销产品、热销农庄这两个分区的UI布局看一下。

布局.png

这种布局使用UICollectionVIew最合适了，那么就在整体大的TableVieW的分区中创建UIcollectionView

//创建collectionView的Flowlayout
let flowlayout = UICollectionViewFlowLayout()
flowlayout.minimumInteritemSpacing = 0
flowlayout.minimumLineSpacing = 0
flowlayout.itemSize = CGSizeMake(Device_Width/3, 140)

    collectionView = UICollectionView(frame: CGRectZero, collectionViewLayout: flowlayout)
    collectionView.registerClass(ProductCollectionViewCell.classForCoder(), forCellWithReuseIdentifier: "item")
    collectionView.backgroundColor = UIColor.whiteColor()
    collectionView.delegate = self
    collectionView.dataSource = self
    self.addSubview(collectionView)
    collectionView.snp_makeConstraints { (make) -> Void in
        make.top.left.bottom.right.equalTo(0)
    }

独立写代理，这样简洁方便：

extensionProductTableViewCell:UICollectionViewDelegate,UICollectionViewDataSource{

func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    
    return 9
}

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("item", forIndexPath: indexPath)as!
    ProductCollectionViewCell
    return cell
}
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
    
    collectionView.deselectItemAtIndexPath(indexPath, animated: true)
}

}

2、自定义UICollectionViewCell
imageView = UIImageView()
imageView.backgroundColor = UIColor.purpleColor()
imageView.layer.masksToBounds = true
imageView.layer.cornerRadius = 3
contentView.addSubview(imageView)
imageView.snp_makeConstraints { (make) -> Void in
make.top.left.equalTo(10)
make.right.equalTo(-10)
make.height.equalTo(85)

    }
    
    nameLable = UILabel()
    nameLable.backgroundColor = UIColor.whiteColor()
    nameLable.font = UIFont.systemFontOfSize(13)
    nameLable.textColor = UIColor.orangeColor()
    nameLable.textAlignment = .Center
    nameLable.text = "风情荷兰岛"
    contentView.addSubview(nameLable)
    nameLable.snp_makeConstraints { (make) -> Void in
        make.top.equalTo(imageView.snp_bottom).offset(5)
        make.centerX.equalTo(self.snp_centerX)
        make.height.equalTo(20)
    }
    
    oPriceLable = UILabel()
    oPriceLable.backgroundColor = UIColor.whiteColor()
    oPriceLable.font = UIFont.systemFontOfSize(13)
    oPriceLable.textColor = UIColor.orangeColor()
    oPriceLable.textAlignment = .Center
    oPriceLable.text = "15"
    contentView.addSubview(oPriceLable)
    oPriceLable.snp_makeConstraints { (make) -> Void in
        make.top.equalTo(nameLable.snp_bottom)
        make.height.equalTo(20)
        make.width.equalTo(Device_Width/6)
        make.left.equalTo(0)
    }
    
    cPriceLable = UILabel()
    cPriceLable.backgroundColor = UIColor.whiteColor()
    cPriceLable.font = UIFont.systemFontOfSize(12)
    cPriceLable.textColor = UIColor.lightGrayColor()
    cPriceLable.textAlignment = .Center
    cPriceLable.text = "10"
    contentView.addSubview(cPriceLable)
    cPriceLable.snp_makeConstraints { (make) -> Void in
        make.top.equalTo(nameLable.snp_bottom)
        make.height.equalTo(20)
        make.width.equalTo(Device_Width/6)
        make.right.equalTo(0)
    }

其实也没有什么东西，那么咱们看一下最后的效果：

效果图.png

效果还可以，其他模块方法类似。剩下的要做Model模型了。