无法为类似 Pinterest 的 iOS 应用程序加载 [UIButton] 数组的所有项目

Question

我的 objective 是创建一个类似 Pinterest 的 iOS 应用程序。我使用集合视图，然后以编程方式添加堆栈视图。我在一个函数中创建按钮及其各自的图像，然后我 return [UIButtons] 数组中的所有 UIButtons。我将该函数的值存储在一个名为 buttonsArray 的变量中，然后在相应的 Collection View 数据源和委托方法中使用它。我还使用 RayWenderlich 创建的 PinterestLayout。一切都按预期工作，除了不是加载所有按钮，而是只加载前两个按钮。我添加项目的功能如下：

func createArrayButtons() -> [UIButton]{

    var items:[UIButton] = []

    let item1 = UIButton(frame: CGRect(x:0, y:0, width:346,height:275))
    item1.setImage(UIImage(named: "1"), for: .normal)
    item1.addTarget(self, action: #selector(editButtonTapped), for: UIControlEvents.touchUpInside)
    item1.tag = 1
    items.append(item1)

    let item2 = UIButton(frame: CGRect(x:0, y:0, width:346,height:275))
    item2.setImage(UIImage(named: "2"), for: .normal)
    item2.addTarget(self, action: #selector(editButtonTapped), for: UIControlEvents.touchUpInside)
    item2.tag = 2
    items.append(item2)

    let item3 = UIButton(frame: CGRect(x:0, y:0, width:346,height:275))
    item3.setImage(UIImage(named: "3"), for: .normal)
    item3.addTarget(self, action: #selector(editButtonTapped), for: UIControlEvents.touchUpInside)
    item3.tag = 3
    items.append(item3)

    let item4 = UIButton(frame: CGRect(x:0, y:0, width:346,height:275))
    item4.setImage(UIImage(named: "4"), for: .normal)
    item4.addTarget(self, action: #selector(editButtonTapped), for: UIControlEvents.touchUpInside)
    item4.tag = 4
    items.append(item4)

    let item5 = UIButton(frame: CGRect(x:0, y:0, width:346,height:275))
    item5.setImage(UIImage(named: "5"), for: .normal)
    item5.addTarget(self, action: #selector(editButtonTapped), for: UIControlEvents.touchUpInside)
    item5.tag = 5
    items.append(item5)

    let item6 = UIButton(frame: CGRect(x:0, y:0, width:346,height:275))
    item6.setImage(UIImage(named: "6"), for: .normal)
    item6.addTarget(self, action: #selector(editButtonTapped), for: UIControlEvents.touchUpInside)
    item6.tag = 6
    items.append(item6)

    let item7 = UIButton(frame: CGRect(x:0, y:0, width:346,height:275))
    item7.setImage(UIImage(named: "7"), for: .normal)
    item7.addTarget(self, action: #selector(editButtonTapped), for: UIControlEvents.touchUpInside)
    item7.tag = 7
    items.append(item7)

    return items

}

我从资产文件夹中给每个人一个单独的标签和一个相应的图像，然后 return 它作为一个数组。

我计算collectionViewDataSource如下

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

    let buttonsArray = createArrayButtons()
    return buttonsArray.count
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)

    let buttonsArray = createArrayButtons()

    let stackView = UIStackView(arrangedSubviews: buttonsArray)
    stackView.axis = .vertical
    stackView.distribution = .equalSpacing
    stackView.alignment = .fill
    stackView.spacing = 5
    stackView.translatesAutoresizingMaskIntoConstraints = false

    cell.addSubview(stackView)





    return cell
}

然后我计算每个项目的高度如下：

extension ViewController: PinterestLayoutDelegate {
func collectionView(_ collectionView: UICollectionView, heightForPhotoAtIndexPath indexPath: IndexPath) -> CGFloat {
    let buttonArray = createArrayButtons()

    let button = buttonArray[indexPath.item]

    let height = button.imageView?.image?.size.height

    return height!
}

}

如您所见，该应用仅显示存储在每个数据源方法中的 createButtonsArray() 变量的前两个图像

我存储为 createArrayButtons 的 returning 值的每个图像都是不同的，但它只加载两个。我该如何解决这个问题？

如果对你有帮助，我的项目可以在下面找到link：

https://github.com/francisc112/PinterestTutorial

Answer 1

更新 cellForItemAt indexPath 处的代码，因为您正在为每个单元格加载整个按钮数组。

    let stackView = UIStackView(arrangedSubviews: [buttonsArray[indexPath.row]])

Answer 2

请按照以下步骤获得所需的结果，

1 - 在storyboard中，在collectionCell中拖一个UIStackView，并从各个方向将约束设置为零。如图所示设置分布和间距

2 - 更新 ButtonCollectionViewCell 如下

class ButtonCollectionViewCell: UICollectionViewCell {

    @IBOutlet weak var button:UIButton!
    @IBOutlet weak var stackView: UIStackView!

}

3 - 再次打开故事板并像图像中那样与 stackView 建立连接

4 -把viewDidLoad改成这个

override func viewDidLoad() {
    super.viewDidLoad()
    collectionView.delegate = self

    let collectionViewLayout = UICollectionViewFlowLayout()
    self.collectionView.collectionViewLayout = collectionViewLayout

    collectionView.contentInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
    // Do any additional setup after loading the view, typically from a nib.
}

5 - 符合ViewController 这个

extension ViewController: UICollectionViewDelegateFlowLayout {

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: UIScreen.main.bounds.width/2 - 20, height: UIScreen.main.bounds.height)
    }
}

6 - 用这个

更新cellForItemAt

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! ButtonCollectionViewCell

        for (_, view) in cell.stackView.arrangedSubviews.enumerated() {
            cell.stackView.removeArrangedSubview(view)
        }
        let buttonsArray = createArrayButtons()
        buttonsArray.forEach { button in
            cell.stackView.addArrangedSubview(button)
        }
        cell.stackView.layoutIfNeeded()
        cell.contentView.layoutIfNeeded()
        return cell
    }

现在您应该可以看到正确的结果了。

无法为类似 Pinterest 的 iOS 应用程序加载 [UIButton] 数组的所有项目

Failing to load all items of an [UIButton] array for Pinterest-like iOS App

xcode

ios

pinterest

uicollectionview

swift