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

如果不知道怎么设计首页，可以看一下这篇文章：http://www.jianshu.com/p/63692361502d

1、TableHeader先把头文件创建完毕

func creatsTableHeader(){

    tableHeader = UIView(frame: CGRectMake(0,0,view.bounds.width,360))
    tableHeader.backgroundColor = UIColor.lightGrayColor()
    let scrollImage = UIView()
    scrollImage.backgroundColor = UIColor.redColor()
    tableHeader.addSubview(scrollImage)
    scrollImage.snp_makeConstraints { (make) -> Void in
        make.top.equalTo(64)
        make.left.equalTo(0)
        make.right.equalTo(0)
        make.height.equalTo(150)
    }
    
    categoryView = UIView()
    categoryView.backgroundColor = UIColor.greenColor()
    tableHeader.addSubview(categoryView)
    categoryView.snp_makeConstraints { (make) -> Void in
        make.top.equalTo(scrollImage.snp_bottom).offset(10)
        make.left.equalTo(0)
        make.right.equalTo(0)
        make.height.equalTo(160)
    }
    
    let scrollTitle = UIView()
    scrollTitle.backgroundColor = UIColor.redColor()
    tableHeader.addSubview(scrollTitle)
    scrollTitle.snp_makeConstraints { (make) -> Void in
        make.top.equalTo(categoryView.snp_bottom).offset(10)
        make.left.equalTo(0)
        make.right.equalTo(0)
        make.height.equalTo(30)
    }

}

2、创建需要的类

table.png

3、根据效果图画出分区

extensionHomeViewController:UITableViewDataSource,UITableViewDelegate{
//分区
func numberOfSectionsInTableView(tableView: UITableView) -> Int {

    return 3
}

//类别数量
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    
    switch section{
    
    case 0,1:
        return 1
    default:
        return 10
    }
}

//自定义
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    switch indexPath.section{
    
    case 0:
        let cell = tableView.dequeueReusableCellWithIdentifier("productTableViewCell") as! ProductTableViewCell
        return cell
    
    
    case 1:
    
    let cell = tableView.dequeueReusableCellWithIdentifier("businessTableViewCell") as! BusinessTableViewCell
    return cell
        
    default:
       
    let cell = tableView.dequeueReusableCellWithIdentifier("commodityTableViewCell") as! CommodityTableViewCell
        return cell
    }
}

//cell高度
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    switch indexPath.section{
    
    case 0:
        return 420
    case 1:
        return 420
    default:
        return 100
    }
}

4、效果图
这就是完成分区后的效果，分别对需要自定义类进行定制就可以的。这样很方便的

完成界面.png

本来想发一个GIF动态照片的，结果忘了怎么搞了。我稍后试试。下面咱们要对每一个分区进行自定义。加油！