Question

我有一个包含不同单元格的集合视图。一个单元格是带有元素的水平scrollView。 scrollview非常类似于＆＃34; App Store＆＃34; -App或其他人的功能。

在第一个init中，它按预期工作，但当我在collectionView向下滚动到最后，然后向后滚动到我的水平scrollView时，contentSize似乎是错误的。因此，当scrollView单元格重新启动时，scrollView就像已禁用。

奇怪的是，当我设置一个固定的contentSize宽度时，它会一直像预期的那样工作。

//calucalte width
var scrollViewWidth:CGFloat = 0
scrollViewWidth = CGFloat(allSkills.count)*scrollViewHeight

cell.skillsScrollView.alwaysBounceVertical = false
cell.skillsScrollView.alwaysBounceHorizontal = false
cell.skillsScrollView.frame = CGRect(x: 0, y: 0, width: scrollViewWidth, height: scrollViewHeight)

for (i,imagelink) in imagelinks.enumerated() {
let imageView:UIImageView = UIImageView(frame: CGRect(x: 0, y: 0, width: scrollViewHeight, height: scrollViewHeight)) //image is square height and width of scrollView

//set images in 
if i == 0 {
    imageView.frame = CGRect(x: 0, y: 0, width: scrollViewHeight, height: scrollViewHeight)
} else {
    imageView.frame = CGRect(x: CGFloat(i)*scrollViewHeight, y: 0, width: scrollViewHeight, height: scrollViewHeight)
}

//set image in ImageValue
//[...]

cell.skillsScrollView.addSubview(imageView)
}

cell.skillsScrollView.contentSize = CGSize(width: scrollViewWidth, height: scrollViewHeight) // fixed width = 1000  works like expected but it's too width
return cell

我的细胞真的很兴奋。

class MySkills: UICollectionViewCell {

@IBOutlet weak var titleLabel: UILabel!

@IBOutlet weak var contentSkillsUIView: UIView!
@IBOutlet weak var skillsScrollView: UIScrollView!
}

所以我真的很担心这种行为。我试图在awakeFromNib中设置宽度。我在单元格外面设置了宽度。我在viewWillAppear中初始化我的collectionView并在viewDidLoad中设置我的宽度。在prepareForReuse我也将contentSize设置为0。一切都没有变化。

当我打印scrollViewWidth时，它始终具有预期值。

所以我感谢你的想法。

Answer 1

要正确地创建集合视图，需要一长串的步骤

我会尽量让这个尽可能清楚，所以请耐心等待

<强> -guide -

所以假设你想要根据一些变量让所有单元格不同，并且数组中的一些存储数据可以让我们工作，因为我们有很多它

第1步。

打开你的故事板，在ViewController中你想要添加这个collectionView创建一个新的 .swift文件并将这些东西添加到它

import Foundation
import UIKit

class YourViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource { 

}

（假设您熟悉创建类并将这些类绑定到ViewControllers）

第2步。

故事板中的

导航到右侧属性检查器选项卡上的身份检查选项卡，并将viewController设置为我们刚刚创建的类</ p>

第3步。

现在在底部你想找到并将collectionView拖到你选择的viewController上（确认它是一个收集视图而不是收集视图控制器）

第4步。

您可以在此处设置单元格的大小以及每个单元格之间的间距等。（在属性检查器中）

第5步。

一旦你拥有了你想要的一切，你想要为这个新创建的collectionView添加一些约束

- 在容器中水平加入中心

- 将尾随/超前约束添加到viewController的边缘

- 在容器中垂直添加中心

第6步。

既然已经设置了collectionView，你需要做一些编码工作

从collectionView（而不是collectionViewCell）保持控制和拖动到viewController（在左侧或三个符号所在的viewController的顶部）添加弹出的委托和数据源选项（如果你不喜欢这些是重要的做这个工作）

第7步。

打开助手编辑器并按住控件，然后单击并从collectionView拖动到你的viewController类文件，使它成为一个@IBOutlet，并将它命名为你想要的东西，你应该有这样的东西

class YourViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource { 

    @IBOutlet weak var YourCollectionView: UICollectionView!


}

第8步。

现在是你想要创建新文件并选择 cocoa touch class

的非常棘手的东西的时候了

确保将其作为UICollectionViewCell类型的子类并单击同时创建XIB文件复选框，您可以根据需要为此命名

第9步。

现在已经超出了设置所需的其他一些时间，转移到yourViewController类文件并将此位添加到其中的方式

override func viewDidLoad() {
    super.viewDidLoad()

    //or whatever you named the @IBOutlet earlier
    YourCollectionView.register(UINib(nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "CollectionViewCell")
    // Do any additional setup after loading the view.
}

现在，如果你现在构建并运行应用程序会崩溃，因为我们之前创建的CollectionViewCell没有被赋予重用标识符

将此头部修改为您刚刚创建的CollectionViewCell XIB并在右侧（请确保在执行此操作之前选择CollectionViewCell，否则您将看不到任何内容）

在顶部添加一个重用标识符名称，无论你想要什么，但确保它的相关头部返回到此行的viewController文件中的didmove（toview：_）方法

YourCollectionView.register(UINib(nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "CollectionViewCell")

确保 forCellWithReuseIdentifier 字符串与刚刚输入XIB单元格的重用标识符相同

第10步。

现在您可以在XIB文件中自定义您的单元格（您可以更改大小和所有内容添加图像和标签等），然后打开CollectionViewCell XIB的助理编辑器和@IBOutlet您添加到的每个标签/图像单元格给它们相关的名称，以后可以轻松参考

第11步。

返回到你的viewController文件并在顶部创建一个像

一样的结构

struct cellData {
    //here you need to create a *let instance* for every image/label you have in your CollectionViewCell XIB 

    //this is neccesary for determining how to seperate the cells
    let cell : Int!
    //labels will not be declared as a UILabel but as a String like this
    let label : String!
    //images will be declared like this
    let Image : UIImage!

}

class YourViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {

第12步。

现在我们已经完成了设置，我们现在必须转到代码的自定义部分

在类中创建一个空数组

class YourViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource { 


    @IBOutlet weak var YourCollectionView: UICollectionView!

    /* array here */
    var array = [] 

    override func viewDidLoad() {
    super.viewDidLoad()

    YourCollectionView.register(UINib(nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "CollectionViewCell")
    // Do any additional setup after loading the view.
    }

}

使用结构中的数据填充数组，如下所示

var array = [cellData(cell : 1,label : "",image : UIImage(named: ""))]

好的，让我们来看看这里，我们在结构中声明所有不同的标签和图像（你应该在CollectionViewCell XIB中放置每个标签或图像的标签或图像）

现在是集合视图功能的时间

第13步。

这整个时间你可能已经收到错误但我们即将解决它

将这3个函数添加到viewController函数

func numberOfSections(in collectionView: UICollectionView) -> Int {
    return 1
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return array.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

}

-numberOfSections表示您想要多少个不同的单元格部分

-numberOfItemsInSection表示您在部分中需要多少个单元格

第14步。

collectionView是确定要在其中添加此代码的每个单元格中显示内容的功能

 if array[indexPath.row].cell == 1 {
        //make sure this is the reuse identifier that you have set in your CollectionViewCell XIB
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as! CollectionViewCell

        cell.image.image = array[indexPath.row].image
        cell.label.text = array[indexPath.row].label

        return cell
    } else {
         let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as! CollectionViewCell

        return cell
    }

第15步。

那就是如果你想添加更多具有不同数据的单元格，只需在数组中加入更多

var array = [cellData(cell : 1,label : "",image : UIImage(named: "")),
             cellData(cell : 2,label : "",image : UIImage(named: "")),
             cellData(cell : 3,label : "",image : UIImage(named: ""))]

然后确保使用collectionView函数

加载它

if array[indexPath.row].cell == 1 {
        //make sure this is the reuse identifier that you have set in your CollectionViewCell XIB
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as! CollectionViewCell

        cell.image.image = array[indexPath.row].image
        cell.label.text = array[indexPath.row].label

        return cell
    } 
    if array[indexPath.row].cell == 2 {
        //make sure this is the reuse identifier that you have set in your CollectionViewCell XIB
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as! CollectionViewCell

        cell.image.image = array[indexPath.row].image
        cell.label.text = array[indexPath.row].label

        return cell
    }
    if array[indexPath.row].cell == 3 {
        //make sure this is the reuse identifier that you have set in your CollectionViewCell XIB
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as! CollectionViewCell

        cell.image.image = array[indexPath.row].image
        cell.label.text = array[indexPath.row].label

        return cell
    } else {
         let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as! CollectionViewCell

        return cell
    }

确保在数组中将单元格 Int设置为增加的Integer值，或者单元格也不会加载以自定义每个单元格中的数据只需填充数组中的空白

var array = [cellData(cell : 1,label : "Blank here",image : UIImage(named: "Blank here"))]

如果您有任何问题发表评论

collection中的水平ScrollView松散功能

1 个答案: