美文网首页梦想者程序员的故事程序员
使用Swift完成一个App--首页填充二和Model搭建

使用Swift完成一个App--首页填充二和Model搭建

作者: bce67c19184f | 来源:发表于2015-12-27 08:29 被阅读2389次

    这两天把剩下的模块写了一下,今天一起更新了
    先看一下效果图完成布局:

    效果图.png

    这个分区比上个分区更为简单了就两个值:照片和名称

    //创建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)
        }
    

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

        nameLable = UILabel()
        nameLable.backgroundColor = UIColor.whiteColor()
        nameLable.font = UIFont.systemFontOfSize(15)
        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(10)
            make.height.equalTo(20)
            make.width.equalTo(Device_Width/3)
            make.centerX.equalTo(self.snp_centerX)
        }
    

    另一个是附近商品:

    附近商品.png

    它可以自己自定义cell的,不用什么CollectionView的
    productName = UILabel()
    productName.text = "岭南印象"
    productName.font = UIFont.systemFontOfSize(15)
    productName.textAlignment = .Center
    contentView.addSubview(productName)
    productName.snp_makeConstraints { (make) -> Void in
    make.top.equalTo(10)
    make.left.equalTo(imageView.snp_right).offset(10)
    make.width.equalTo(80)
    make.height.equalTo(20)
    }

        introduces = UILabel()
        introduces.textAlignment = .Center
        introduces.text = "10人通票套餐,含单个景点门票"
        introduces.font = UIFont.systemFontOfSize(10)
        contentView.addSubview(introduces)
        introduces.snp_makeConstraints { (make) -> Void in
            make.top.equalTo(productName.snp_bottom).offset(20)
            make.left.equalTo(imageView.snp_right).offset(15)
            make.width.equalTo(150)
            make.height.equalTo(15)
        }
        
        price = UILabel()
        price.text = "280"
        price.textAlignment = .Center
        price.font = UIFont.systemFontOfSize(15)
        price.textColor = UIColor.orangeColor()
        contentView.addSubview(price)
        price.snp_makeConstraints { (make) -> Void in
            make.top.equalTo(introduces.snp_bottom).offset(10)
            make.left.equalTo(imageView.snp_right).offset(18)
            make.width.equalTo(30)
            make.height.equalTo(20)
            make.bottom.equalTo(-5)
        }
        
        newPrice = UILabel()
        newPrice.text = "369"
        newPrice.textAlignment = .Center
        newPrice.font = UIFont.systemFontOfSize(10)
        contentView.addSubview(newPrice)
        newPrice.snp_makeConstraints { (make) -> Void in
            make.top.equalTo(introduces).offset(29)
            make.left.equalTo(price).offset(40)
            make.width.equalTo(30)
            make.height.equalTo(15)
        }
        
        distance = UILabel()
        distance.text = "1000KM"
        distance.textAlignment = .Center
        distance.font = UIFont.systemFontOfSize(10)
        contentView.addSubview(distance)
        distance.snp_makeConstraints { (make) -> Void in
            make.top.equalTo(15)
            make.right.equalTo(-20)
            make.width.equalTo(50)
            make.height.equalTo(20)
        }
        
        saleNumbel = UILabel()
        saleNumbel.text = "已售 1583"
        saleNumbel.textAlignment = .Center
        saleNumbel.font = UIFont.systemFontOfSize(10)
        contentView.addSubview(saleNumbel)
        saleNumbel.snp_makeConstraints { (make) -> Void in
            make.bottom.equalTo(0)
            make.right.equalTo(-10)
            make.width.equalTo(50)
            make.height.equalTo(20)
        }
        
        line = UIView()
        line.backgroundColor = UIColor.lightGrayColor()
        contentView.addSubview(line)
        line.snp_makeConstraints { (make) -> Void in
            make.bottom.equalTo(0)
            make.left.equalTo(0)
            make.width.equalTo(self.snp_width)
            make.height.equalTo(1)
        }
    

    还有一个就是分区:

    分类.png

    这个就不用贴代码的,跟之前的是一样的。

    下面做Model
    创建项目需要的Model类和字段:
    class ProductModel: NSObject {

    var productId: String = ""
    var productName: String = ""
    var productOriginalPrice: String = ""
    var productCurrentPrice: String = ""
    var productStore: StoreModel = StoreModel()
    var productImageUrls: [String] = []
    

    }
    这是商铺Model
    class StoreModel: NSObject {

    var storeId: String = ""
    var storeName: String = ""
    var storeImageUrls: [String] = []
    var storeIntroduces: String = ""
    var storePrice:String = ""                   //之前的价格
    var storeNewPrice:String = ""                //现在的价格
    var storeDistance:String = ""                //距离
    var storeSaleNumbel:String = ""              //销售的数量
    

    }

    然后创建数据源:
    func createDataSource() {
    let array = ["https://raw.githubusercontent.com/onevcat/Kingfisher/master/images/kingfisher-1.jpg", "https://raw.githubusercontent.com/onevcat/Kingfisher/master/images/kingfisher-1.jpg",
    "https://raw.githubusercontent.com/onevcat/Kingfisher/master/images/kingfisher-1.jpg",
    "https://raw.githubusercontent.com/onevcat/Kingfisher/master/images/kingfisher-1.jpg",
    "https://raw.githubusercontent.com/onevcat/Kingfisher/master/images/kingfisher-1.jpg"]
    for i in 0...8 {
    let product = ProductModel()
    product.productId = "(i+1)"
    product.productName = "产品(i+1)"
    product.productOriginalPrice = "3(i)"
    product.productCurrentPrice = "2(i)"
    product.productImageUrls = array
    dataSource.append(product)

            let store = StoreModel()
            store.storeId = "\(i+1)"
            store.storeName = "商铺\(i+1)"
            store.storeImageUrls = array
            dataSource1.append(store)
            
            let store2 = StoreModel()
            store2.storeId = "\(i+1)"
            store2.storeName = "商铺\(i+1)"
            store2.storeImageUrls = array
            store2.storeIntroduces = "10人通票套餐,含单个景点门票"
            store2.storePrice = "369"
            store2.storeNewPrice = "280"
            store2.storeDistance = "1000KM"
            store2.storeSaleNumbel = "已售1583"
            dataSource2.append(store2)
            
            let categoryData = StoreModel()
            categoryData.storeName = "农庄"
            categoryData.storeImageUrls = array
            categoryDataSource.append(categoryData)
            
        }
        tableView.reloadData()
    }
    

    剩下的在每个自定义cell进行传递和接受:
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    switch indexPath.section{

            case 0:
                let cell = tableView.dequeueReusableCellWithIdentifier("productTableViewCell") as! ProductTableViewCell
                cell.products = dataSource
        
                return cell
            case 1:
            
                let cell = tableView.dequeueReusableCellWithIdentifier("businessTableViewCell") as! BusinessTableViewCell
                cell.stores = dataSource1
                
                return cell
            default:
               
                let cell = tableView.dequeueReusableCellWithIdentifier("comTableViewCell") as! ComTableViewCell
                cell.store = dataSource2[indexPath.row]
                
                return cell
        }
    }
    

    其他分区的接受和传递都是一样的举一个例子吧,另一个可以直接传递。
    先贴都一样的的代码:
    这是热销商品和热销店家的分区,因为他们用了collectionView所以需要接受数组,然后传递给cell。
    var products: [ProductModel]? {
    didSet {
    collectionView.reloadData()
    }
    }
    cell传值:
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("item", forIndexPath: indexPath)as!
        ProductCollectionViewCell
        cell.product = products![indexPath.row]
        
        return cell
    }
    

    cell接受和更新:
    var product: ProductModel? {
    didSet {
    refreshUI()
    }
    }
    func refreshUI() {
    imageView.kf_setImageWithURL(NSURL(string: (product?.productImageUrls.first)!)!, placeholderImage: nil)
    nameLable.text = product?.productName
    oPriceLable.text = product?.productOriginalPrice
    cPriceLable.text = product?.productCurrentPrice
    }
    另一个是附近商品,他是首页TableView的cell。可以直接传单条数据的:
    let cell =tableView.dequeueReusableCellWithIdentifier("comTableViewCell") as! ComTableViewCell
    cell.store = dataSource2[indexPath.row]
    return cell
    然后接受和更新就可以的:
    var store: StoreModel? {
    didSet {
    refreshUI()
    }
    }
    func refreshUI (){
    imageView!.kf_setImageWithURL(NSURL(string: (store!.storeImageUrls.first)!)!, placeholderImage: nil)
    productName.text = store!.storeName
    introduces.text = store?.storeIntroduces
    price.text = store?.storePrice
    newPrice.text = store?.storeNewPrice
    distance.text = store?.storeDistance
    saleNumbel.text = store?.storeSaleNumbel
    }
    最后的效果:

    Untitled.gif

    最后谢谢大家的关注与支持,这是自己的学习笔记。由于本人脑子太笨,师傅也经常吐血而溃。。。以免老忘记所以写下来了。
    好脑子不如烂笔头嘛,也方便一些类似我的朋友一起学习。

    相关文章

      网友评论

      • 刘宇航iOS:急求 为什么我用cell.不出来cell里面的model呢
        bce67c19184f:@刘_ 刚看到抱歉。现在应该搞定了吧:stuck_out_tongue_winking_eye:
      • 曾樑:挺不错的,写下来不容易忘记
        bce67c19184f:@曾樑 嗯嗯,确实是

      本文标题:使用Swift完成一个App--首页填充二和Model搭建

      本文链接:https://www.haomeiwen.com/subject/xajbhttx.html