如何使用.xib文件创建Uiviews的水平滚动堆栈视图

Question

我想使用.xib文件创建一个uiviews的水平滚动堆栈，到目前为止，我已经创建了.xib故事板以及随之而来的Cocoatouch类，并且由于这是我第一次工作，因此与之相关的Cocoatouch类也很难设置。使用.xib文件。

我希望输出看起来像这样：

但是，当我运行该应用程序时，它会引发此错误：由于未知的例外'nsunknownekyexception'终止应用程序，原因是：'[＆lt; nsObject 0x6000029f13d0＆gt; setValue：forundefinedkey：]：此类不适合键入键入的键值编码。

我将文件所有者的类设置为Whatshottile类以及视图本身。

这是Whatshottile类：

class WhatsHotTile: UIView {
    @IBOutlet weak var itemName: UILabel!
    @IBOutlet weak var itemImage: UIImageView!
}

这是我尝试创建水平滚动stackView的代码：

for shoe in Shoes {
        if shoe.trending == true {
            if let whatsHotTile = Bundle.main.loadNibNamed("WhatsHotTile", owner: nil, options: nil)!.first as? WhatsHotTile {
                whatsHotTile.itemName.text = shoe.name
                whatsHotTile.itemImage.image = shoe.image
                whatsHotStackView.addArrangedSubview(whatsHotTile)
            }
        }
    }

我尚未完成的一件事可能会或不需要完成的一件事是添加一个空白的uiview在卷轴内部的水平堆栈视图中。这是需要做的事情还是在编程上完全工作？

由于这是我第一次使用.xib文件，有人可以解释为什么发生此错误 /如何修复它以及创建.xib文件并在代码中使用它们的正确方法，如果这样，那将是非常多的话感谢。

Answer 1

问题（我相信）是只有一些可可触摸类支持.xib文件，而uiview不是其中之一。当我打开Xcode并尝试新文件时 - ＆gt;可可触摸类 - ＆gt;子类的子类：uiview，它禁用了的复选框，还可以创建.xib文件。 do 允许.xib文件的一些示例类是uitaiteView和uicollectionView。

由于您试图水平滚动项目，而不是垂直滚动，所以我想您不需要uitaiteView。这留下了uicollectionView。这非常类似于uitaiteView，因此使用我已经知道的表观视图，以及此堆栈溢出帖子链接在此处：

Q： UICOLLECTIONVIEW：一行或列

.com/a/32584637/18248018

和a： a>

我以你描述的方式工作。这是一个简单的工作示例：

首先，创建一个新的可可触摸类文件，作为uicollectionView的子类，然后选中“也创建.xib文件”框。我将此子类命名为“ Whatshottile”，以保持与您的原始代码的亲密关系。

在Whatshottile .xib故事板的属性检查器面板中，将其设置为重复使用标识符。在我的示例中，我使用了字符串tilereuseidentifier。

但是，您需要设计.xib文件：要重新创建代码，我将uiimageView放在uilabel上方。

WhatShottile.swift文件将在代码中替换uiview的子类，并使用相同的两个iboutlets：

import UIKit

class WhatsHotTile: UICollectionViewCell {
    @IBOutlet weak var itemName: UILabel!
    @IBOutlet weak var itemImage: UIImageView!
    
    override func awakeFromNib() {
        super.awakeFromNib()
    }
}

in main。故事板，将uicollectionView放入视图控制器中。它将已经使用一个原型单元格初始化：将该单元格的标识符（在属性检查器中）设置为您为.xib文件选择的同一标识符（在示例中，它是tilereUseIdentIdentifier。

在ViewController 文件，创建iboutlet uicollectionView和内部viewDidload，设置Collection View's dataSource代码> self（参考视图控制器），这是使.xib文件与您的代码一起使用的关键步骤， 用于收集视图的笔尖，使用下面的示例代码中的语法：

override func viewDidLoad() {
   super.viewDidLoad()
        
   collectionOfShoes.dataSource = self
   collectionOfShoes.register(UINib(nibName: "WhatsHotTile", bundle: nil), forCellWithReuseIdentifier: "TileReuseIdentifier")
}

然后，您必须在集合视图中实现数据源方法。在此答案的底部，代码除了两个必需的方法，还定义numberSections，然后将其设置为“鞋子”阵列的长度。代码>返回1的方法。与以下代码内部viewdidlayoutsubviews发生在viewdidload之后发生的，这将导致集合视图水平滚动而不是垂直滚动，而不是否则将：

override func viewDidLayoutSubviews() {
    // REFERENCE 1:  https://stackoverflow.com/a/32584637/18248018
    // REFERENCE 2:  https://stackoverflow.com/a/59206057/18248018
    let collectionViewFlowControl = UICollectionViewFlowLayout()
    collectionViewFlowControl.itemSize = CGSize(width: 150.0, height: 150.0)
    collectionViewFlowControl.scrollDirection = UICollectionView.ScrollDirection.horizontal
    collectionOfShoes.collectionViewLayout = collectionViewFlowControl
}

在这些步骤之后，您应该使用与原始代码没有太大不同的内容，该代码看起来与您作为目标行为提供的图像参考相似。这是view controller中的完整代码：

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var collectionOfShoes: UICollectionView!
    
    struct Shoe {
        let name: String
        let image: UIImage
    }
    
    var shoes: [Shoe] = [Shoe(name: "Shoe 1", image: UIImage(named: "shoe_1")!), Shoe(name: "Shoe 2", image: UIImage(named: "shoe_2")!), Shoe(name: "Shoe 3", image: UIImage(named: "shoe_3")!), Shoe(name: "Shoe 4", image: UIImage(named: "shoe_1")!), Shoe(name: "Shoe 5", image: UIImage(named: "shoe_2")!), Shoe(name: "Shoe 6", image: UIImage(named: "shoe_3")!), Shoe(name: "Shoe 7", image: UIImage(named: "shoe_1")!), Shoe(name: "Shoe 8", image: UIImage(named: "shoe_2")!), Shoe(name: "Shoe 9", image: UIImage(named: "shoe_3")!)]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        collectionOfShoes.dataSource = self
        collectionOfShoes.register(UINib(nibName: "WhatsHotTile", bundle: nil), forCellWithReuseIdentifier: "TileReuseIdentifier")
    }
    
    override func viewDidLayoutSubviews() {
        // REFERENCE 1:  https://stackoverflow.com/a/32584637/18248018
        // REFERENCE 2:  https://stackoverflow.com/a/59206057/18248018
        let collectionViewFlowControl = UICollectionViewFlowLayout()
        collectionViewFlowControl.itemSize = CGSize(width: 150.0, height: 150.0)
        collectionViewFlowControl.scrollDirection = UICollectionView.ScrollDirection.horizontal
        collectionOfShoes.collectionViewLayout = collectionViewFlowControl
    }
}

extension ViewController: UICollectionViewDataSource {
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return shoes.count
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 1
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let whatsHotTile = collectionView.dequeueReusableCell(withReuseIdentifier: "TileReuseIdentifier", for: indexPath) as! WhatsHotTile
        whatsHotTile.itemName.text = shoes[indexPath.section].name
        whatsHotTile.itemImage.image = shoes[indexPath.section].image
        return whatsHotTile
    }
}

功能应用的图片：

信用属于William T.，Matt和Ilker Baltaci我提到的问题和答案是实现水平滚动功能。

Answer 2

我建议在此处使用UicollectionView，而不是UistackView，因为它支持动态数据并默认滚动。