Как правильно спроектировать UICollection View Cell в Swift

Question

Я создал UICollection View без использования Раскадровка. Я расскажу о своих кодах и скриншотах ниже. Я хочу помочь в том, как правильно упорядочить свою ячейку просмотра UICollection с ограничением и привязкой. Спасибо, что помогли мне решить мою проблему.

Вот мой код в collectionview.swift;

class ProductViewController : UICollectionViewController, UICollectionViewDelegateFlowLayout { 


var product : Product? 
var productdetail : [ProductDetail]? 
var categories : [NSDictionary] = [NSDictionary]() 
var mainurl = "http://www.example.com" 
var idforurl = "" 


override func viewDidLoad() { 
    idforurl = (product?.id)! 
    mainurl = ("\(mainurl)\(idforurl)") 
    print(mainurl) 
    //self.mainurl += (product?.id)! 

    fetchproductDetail() 

    collectionView?.backgroundColor = .white 
    navigationItem.title = self.product?.name 
    self.navigationItem.leftBarButtonItem = UIBarButtonItem(title: "Close", style: .plain, target: self, action: #selector (handleCloseBook)) 

    collectionView?.register(ProductDetailCell.self, forCellWithReuseIdentifier: "cellId") 
    let layout = collectionView?.collectionViewLayout as? UICollectionViewFlowLayout 
    //layout?.scrollDirection = .vertical 
    layout?.minimumLineSpacing = 40 
    collectionView?.isPagingEnabled = false 





} 

func handleCloseBook() { 

    dismiss(animated: true, completion: nil) 
} 

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { 

    return CGSize(width: view.frame.width/4, height: view.frame.height/5) 

} 

override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) { 


    let selectedproduct = self.productdetail?[indexPath.row] 
    let productVC = DetailViewController() 
    productVC.detailproduct = selectedproduct 
    let navController = UINavigationController(rootViewController: productVC) 
    present(navController, animated: true, completion: nil) 



} 


override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { 
    let pagecell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellId", for: indexPath) as! ProductDetailCell 

    let products1 = productdetail?[indexPath.item] 
    pagecell.product = products1 
    return pagecell 

} 

override func numberOfSections(in collectionView: UICollectionView) -> Int { 

    return 1 

} 

override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { 

    return productdetail?.count ?? 0 
} 

func fetchproductDetail() { 

    if let url = URL(string: mainurl) { 
     URLSession.shared.dataTask(with: url, completionHandler: { (data, response, error) in 

      if let err = error { 

       print("fetch error",err) 

      } 

      guard let data = data else{return} 

      do { 
       self.productdetail = [] 

       let json = try JSONSerialization.jsonObject(with: data, options: JSONSerialization.ReadingOptions.mutableContainers) as! [String:AnyObject] 

       if let tempData = json["data"] as? [NSDictionary] { 
        for category in tempData { 
         if let tempResult = category["Menu"] as? NSDictionary { 
          self.categories.append(tempResult) 
         } 
        } 
       } 

       for category in self.categories { 

        let product = ProductDetail(dictionary: category as! [String : Any]) 
        self.productdetail?.append(product) 
        print(product.productname) 
        print(product.productdesc) 

       } 

       DispatchQueue.main.async { 
        self.collectionView?.reloadData() 
       } 

      } 

      catch let JsonErr { 

       print("Failed to Parse json properly", JsonErr) 
      } 


     }).resume() 
    } 

} 





} 

и вот файл ячейки коллекции;

class ProductDetailCell : UICollectionViewCell { 
     var product : ProductDetail? { 
      didSet{ 
       textLbl.text = product?.productname 
       priceLbl.text = product?.productprice 

       guard let productImages = product?.productimage else {return} 
       let baseUrl = "http://www.example.com" 
       guard let url = URL(string: baseUrl) else {return} 
       productImage.image = nil 

       URLSession.shared.dataTask(with: url) { (data, response, error) in 

        if let err = error { 

         print("Error has been occurred", err) 

        } 

        guard let imagedata = data else{return} 
        let image = UIImage(data: imagedata) 

        DispatchQueue.main.async { 

         self.productImage.image = image 
        } 

        }.resume() 

      } 
      } 

    let textLbl: UILabel = { 

     let label = UILabel() 
     label.text = "Veri Yok!" 
     label.numberOfLines = 0 
     label.translatesAutoresizingMaskIntoConstraints = false 
     label.font = UIFont(name: "Avenir-Light", size: 12) 
     label.textAlignment = .center 
     label.lineBreakMode = .byWordWrapping 
     label.numberOfLines = 1 
     label.minimumScaleFactor = 0.1 
     label.adjustsFontSizeToFitWidth = true 

     return label 
    }() 

    let priceLbl: UILabel = { 

     let label = UILabel() 
     label.text = "Veri Yok!" 
     label.numberOfLines = 0 
     label.translatesAutoresizingMaskIntoConstraints = false 
     label.font = UIFont(name: "Avenir-Light", size: 12) 
     label.textAlignment = .center 
     label.lineBreakMode = .byWordWrapping 
     label.numberOfLines = 1 
     label.adjustsFontSizeToFitWidth = true 

     return label 
    }() 

    let productImage : UIImageView = { 

     let imageView = UIImageView() 
     imageView.translatesAutoresizingMaskIntoConstraints = false 
     imageView.contentMode = .scaleAspectFit 
     imageView.clipsToBounds = false 
     imageView.image = #imageLiteral(resourceName: "amazon_icon") 
     return imageView 

    }() 


    override init(frame: CGRect) { 
     super.init(frame: frame) 

     addSubview(productImage) 
     productImage.topAnchor.constraint(equalTo: topAnchor, constant: 5).isActive = true 
     productImage.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 5).isActive = true 
     productImage.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -10).isActive = true 
     productImage.rightAnchor.constraint(equalTo: self.rightAnchor, constant: -5).isActive = true 
     productImage.widthAnchor.constraint(equalToConstant: frame.size.width/5).isActive = true 



     addSubview(textLbl) 
     textLbl.topAnchor.constraint(equalTo: productImage.bottomAnchor, constant: 2).isActive = true 
     // textLbl.leftAnchor.constraint(equalTo: self.leftAnchor, constant: -5).isActive = true 
     //textLbl.rightAnchor.constraint(equalTo: self.rightAnchor, constant: 5).isActive = true 
     // textLbl.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true 
     textLbl.heightAnchor.constraint(equalToConstant: 30).isActive = true 
     textLbl.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true 


     addSubview(priceLbl) 
     priceLbl.topAnchor.constraint(equalTo: textLbl.bottomAnchor, constant: 2).isActive = true 
     // textLbl.leftAnchor.constraint(equalTo: self.leftAnchor, constant: -5).isActive = true 
     //textLbl.rightAnchor.constraint(equalTo: self.rightAnchor, constant: 5).isActive = true 
     //textLbl.heightAnchor.constraint(equalToConstant: 40).isActive = true 
     priceLbl.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true 

    } 

    required init(coder aDecoder: NSCoder) { 
     fatalError("init(coder) has not been implemented") 


    } 

} 

и, наконец, я получил результат на тренажере в ниже

Как вы можете видеть, моя коллекция вид клеток, не правильно установлен, я хочу их в безупречном площади и пространства для середины ячейка также должна быть уменьшена. Спасибо за помощь снова.

Answer 1

Поскольку вы использовали раскадровку, первое, что вы хотели бы сделать, это использовать ограничение отношения 1: 1 к ячейке. Это гарантирует, что ячейка всегда идеально квадратная.

Во-вторых, уменьшить отступы между клетками, вы можете сделать что-то подобное в виду сделал груз:

let columns:CGFloat = 3 
let sW = self.view.frame.width 
let padding = sW/32  // 32 points being the padding space between cells 
cellWidth = (sW - (padding*(columns+1)))/columns