我正在尝试在收藏夹视图中创建鸡尾酒菜单。 API的数据将鸡尾酒分为几类(甜,果味等),并且在鸡尾酒数组之外显示该类别的图像。我要实现的布局在下图中。
使用我编写的代码,我成功地将鸡尾酒进行了分组,但是我不确定如何在每个部分的第一个单元格中显示类别图像。
实现此目标的最佳方法是什么?
API中的数据:
[
{
"signatureCocktailSets":[
{
"cocktails":[
{
"id":1,
"cocktail":1,
"category":1,
"image":"*****/fruity.png",
"cocktailid":1,
"name":"Fruit & Fibre",
"description":"Throwing fresh Raspberry Gin and Black Raspberry Liquer together, mixed with Passionfruit Puree to give a crisp and fruity taste.",
"ingredients":"\nEdinburgh Raspberry\nChambord\nApple juice\nPassionfruit puree\nSugar syrup",
"cocktailImage":"*****/Fruit+%26+Fibre.jpg",
"property":"Fruity"
},
{
"id":1,
"cocktail":2,
"category":1,
"image":"*****/fruity.png",
"cocktailid":2,
"name":"Beach Blend",
"description":"A perfect balance of Coconut Rum Pineapple Juice and Banana Liquer takes you back to the Sunny Beaches.",
"ingredients":"Malibu\nPineapple juice\nBanana liqueur\nCaramel syrup",
"cocktailImage":"*****/Beach+Blend.jpg",
"property":"Fruity"
},
{
"id":1,
"cocktail":3,
"category":1,
"image":"*****/fruity.png",
"cocktailid":3,
"name":"Passion Berry",
"description":"Passionfruit based flavour with the warmth of Gin we all Love. Shaken with fresh Raspberries to add then extra rich fruity taste.",
"ingredients":"Tanqueray\nPassoa\nPassionfruit puree\nLemon Juice\nFresh raspberries\nSugar syrup",
"cocktailImage":"*****/Passion+Berry.jpg",
"property":"Fruity"
}
],
"SignatureCocktailSetImageURL":"*****/fruity.png"
},
{
"cocktails":[
{
"id":2,
"cocktail":4,
"category":2,
"image":"*****/indulgent.png",
"cocktailid":4,
"name":"Forest Gataux",
"description":"A rich taste of berries, with an almond flavour at the end. The perfect dessert, go ahead treat yourself. ",
"ingredients":"Chambord\nSmirnoff\nDisaronno\nStrawberry syrup",
"cocktailImage":"*****/Forest+Gateaux.jpg",
"property":"Indulgent"
},
{
"id":2,
"cocktail":5,
"category":2,
"image":"*****/indulgent.png",
"cocktailid":5,
"name":"Mint Moment",
"description":"A Minty taste with a rich coffee and cream base brings Indulgent Nights to life ",
"ingredients":"Baileys\nCr\u00e8me de menthe\nKahlua",
"cocktailImage":"*****/Mint+Moment.jpg",
"property":"Indulgent"
},
{
"id":2,
"cocktail":6,
"category":2,
"image":"*****/indulgent.png",
"cocktailid":6,
"name":"Nutty Monk",
"description":"A smooth Hazlenut and Cream blend will leave your palette feeling enlivened ",
"ingredients":"Baileys\nFrangelico\nKahlua",
"cocktailImage":"*****/Nutty+Monk.jpg",
"property":"Indulgent"
}
],
"SignatureCocktailSetImageURL":"*****/indulgent.png"
},
{
"cocktails":[
{
"id":3,
"cocktail":7,
"category":3,
"image":"*****/sour.png",
"cocktailid":7,
"name":"Tropic Tequila",
"description":"Tequila Fan? This sour blend of Patron Silver Tequila, Pineapple Juice will leave a fruity kick to remember",
"ingredients":"Patron Silver\nPineapple juice\nLemon Juice\nSugar syrup",
"cocktailImage":"*****/Tropic+Sour.jpg",
"property":"Sour"
},
{
"id":3,
"cocktail":8,
"category":3,
"image":"*****/sour.png",
"cocktailid":8,
"name":"Sloe & Sour",
"description":"Blended with Gordon's Sloe Gin, these bitter berries are ephasised by the Lemon Juice, a zesty tingle to your tastebuds",
"ingredients":"Gordon's Sloe\nPassoa\nPassionfruit puree\nLemon juice\nSugar syrup",
"cocktailImage":"*****/Sloe+%26+Sour.jpg",
"property":"Sour"
},
{
"id":3,
"cocktail":9,
"category":3,
"image":"*****/sour.png",
"cocktailid":9,
"name":"Kentucky Twist",
"description":"Like the Buffalo, this is a strong bodied cocktail. Blending up a fruity yet sour edge, giving just a slight nudge but nothing you can't handle",
"ingredients":"Buffalo Trace\nChambord\nGordon's Pink\nLemon juice\nSugar syrup\nApple juice",
"cocktailImage":"*****/Kentucky+Twist+600x600.jpg",
"property":"Sour"
}
],
"SignatureCocktailSetImageURL":"*****/sour.png"
},
{
"cocktails":[
{
"id":4,
"cocktail":10,
"category":4,
"image":"*****/sweet.png",
"cocktailid":10,
"name":"Rhubard Passion",
"description":"Built around a poupular flavour, this bitter Rhubarb has been sweetened up with Passionfruit to give you a refreshing and satisyfing flavour",
"ingredients":"Slingsby Rhubarb\nPassoa\nLemon Juice\nSugar syrup\nSoda top",
"cocktailImage":"*****/Rhubarb+Passion.jpg",
"property":"Sweet"
},
{
"id":4,
"cocktail":11,
"category":4,
"image":"*****/sweet.png",
"cocktailid":11,
"name":"Tai Spice",
"description":"Spiced Dark Rum, sweetened with and almond and orange Liqueur Based upon a Tiki Classic this sweet selection with leave you feeling savoured",
"ingredients":"Kracken\nDisaronno\nCointreau\nLime juice\nSugar syrup",
"cocktailImage":"*****/Tai+Spice.jpg",
"property":"Sweet"
},
{
"id":4,
"cocktail":12,
"category":4,
"image":"*****/sweet.png",
"cocktailid":12,
"name":"Fibre-Day",
"description":"If you like fresh fruit this is the one for you, Kurrants, Watermelon, Peach and crisp Apple. This is bound to take you back to that cocktail bar abroad. ",
"ingredients":"Absolut Kurrant\nMidori\nArchers\nApple juice\nLemon juice",
"cocktailImage":"*****/Fibre+Day.jpg",
"property":"Sweet"
}
],
"SignatureCocktailSetImageURL":"*****/sweet.png"
}
]
}
]
我要实现的目标:
我目前拥有的东西:
代码:
import UIKit
import SDWebImage
struct cocktailsStruct: Decodable {
var cocktailid: Int
var name: String
var description: String
var ingredients: String
var cocktailImage: URL
}
struct signatureCocktailSetsStruct: Decodable {
var cocktails:[cocktailsStruct]
var SignatureCocktailSetImageURL: String
}
struct signatureCocktailStruct : Decodable {
var signatureCocktailSets: [signatureCocktailSetsStruct]
}
var signatureCocktailArray: [signatureCocktailStruct]!
class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
var numberOfSections: Int = 4
@IBOutlet var collectionViewHeight: NSLayoutConstraint!
@IBOutlet var collectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
collectionView.register(UINib(nibName: "cocktail", bundle: nil), forCellWithReuseIdentifier: "cell")
let url = URL(string: "https://www.******")
URLSession.shared.dataTask(with: url!) { (data, reponse, error) in
do {
signatureCocktailArray = try JSONDecoder().decode([signatureCocktailStruct].self, from: data!)
print(signatureCocktailArray[0].signatureCocktailSets[0].SignatureCocktailSetImageURL)
print(signatureCocktailArray[0].signatureCocktailSets.count)
self.numberOfSections = signatureCocktailArray[0].signatureCocktailSets.count
DispatchQueue.main.async {
self.collectionView.reloadData()
}
} catch {
print("Error \(error)")
}
}.resume()
self.view.layoutIfNeeded()
collectionViewHeight.constant = collectionView.contentSize.height
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return numberOfSections
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: self.collectionView.frame.width / 2, height: self.collectionView.frame.width / 2)
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 3
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! cocktail
if(signatureCocktailArray != nil){
cell.image.sd_setImage(with: URL(string: "\(signatureCocktailArray[0].signatureCocktailSets[indexPath.section].cocktails[indexPath.row].cocktailImage)"), completed: nil)
}
return cell
}
}
答案 0 :(得分:0)
一步一步走
1)根据服务器的响应更新项目数
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return signatureCocktailArray[0].signatureCocktailSets[indexPath.section].cocktails.count + 1
}
2)检查indexPath.row是否为零,然后设置默认值
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! cocktail
if(signatureCocktailArray != nil) {
if indexPath.row == 0 {
cell.image.sd_setImage(with: URL(string: "\(signatureCocktailArray[0].signatureCocktailSets[indexPath.section]. SignatureCocktailSetImageURL)"), completed: nil)
} else {
cell.image.sd_setImage(with: URL(string: "\(signatureCocktailArray[0].signatureCocktailSets[indexPath.section].cocktails[indexPath.row-1].cocktailImage)"), completed: nil)
}}
return cell
}
注意::如果然后实现了didSelect方法,请考虑将条件也放置在其中,以避免崩溃
希望有帮助