0
私は、Storyboardを使用せずにUICollection Viewを作成しました。下のコードとスクリーンショットを共有します。私は、UICollection View Cellを制約とアンカーで適切に配置する方法についてお手伝いしたいと思います。私の問題解決のために私を助けてくれてありがとう。正しいデザインにする方法UICollection Swiftでセルを表示
ここに私のコードは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")
}
}
最後に私はあなたが私は完璧な広場との中間のためのスペースでそれらをしたい私のコレクションビューセルが正しく設定されていない見ることができるように
の下で、シミュレータ上で結果ましたセルも縮小する必要があります。もう一度お世話になりました。
レイアウトのための間隔アイテムのサイズと項目を設定します。 – sdasdadas
私はすでに "layout？。minimimumLacing = 40"を追加していますが、私のセルの高さと幅を決めておけば、他のデバイスには適切に表示できませんでした。このアプリはすべての異なる画面サイズで動作するはずです。 –