ios - collectionView中的水平ScrollView松散功能

Question

我有一个包含不同单元格的集合视图。一个单元格是带有元素的水平scrollView。 scrollview与“ App Store” -App或其他应用程序中的功能非常相似。

在第一个初始化中，它的工作原理与预期的一样，但是当我向下滚动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

要使收集视图正确，需要一长串步骤

我会尽力使这一点尽可能清楚，所以请耐心等待

-指南-

因此，假设您希望基于一些变量和数组中存储的某些数据使所有单元格不同，那么我们开始工作吧，因为我们有很多

步骤1。

打开故事板，然后在ViewController中添加此collectionView创建一个新的.swift文件并将这些内容添加到其中

import Foundation
import UIKit

class YourViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource { 

}

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

第2步。

在情节提要中，导航到右侧“属性检查器”选项卡上的“身份检查”选项卡，然后将viewController设置为我们刚刚创建的类

第三步

现在向下到底部，您要查找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。

现在是时候创建真正的棘手东西了，您要创建一个新文件并选择可可触摸类

确保将其作为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中的每个标签或图像都应该有一个标签或图像）

现在是该collectionView功能的时候了

第13步。

在整个这段时间里，您可能会遇到一个错误，但是我们将要修复它

将这三个函数添加到您的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"))]

如果您有任何问题请评论