代码之家 › 专栏 › 技术社区 › gmdev

有没有更有效的方法将相同的视图添加到UICollectionViewCell,而无需手动指定每个视图?

uicollectionviewcell uicollectionview swift ios

0

gmdev · 技术社区 · 6 年前

class ListCell: UICollectionViewCell {

let snapshotTitle: UILabel = {
    let label = UILabel()
    label.attributes(text: "Title", textColor: .white, alignment: .left, font: Fonts.rubikMedium, size: 15, characterSpacing: -0.05, backgroundColor: nil)
    return label
}()

let snapshotOne: UILabel = {
    let label = UILabel()
    label.attributes(text: "Item 1", textColor: Colors.appDarkGrey, alignment: .left, font: Fonts.rubikRegular, size: 12, characterSpacing: -0.04, backgroundColor: nil)
    return label
}()

let snapshotTwo: UILabel = {
    let label = UILabel()
    label.attributes(text: "Item 2", textColor: Colors.appDarkGrey, alignment: .left, font: Fonts.rubikRegular, size: 12, characterSpacing: -0.04, backgroundColor: nil)
    return label
}()

let snapshotThree: UILabel = {
    let label = UILabel()
    label.attributes(text: "Item 3", textColor: Colors.appDarkGrey, alignment: .left, font: Fonts.rubikRegular, size: 12, characterSpacing: -0.04, backgroundColor: nil)
    return label
}()

let snapshotFour: UILabel = {
    let label = UILabel()
    label.attributes(text: "Item 4", textColor: Colors.appDarkGrey, alignment: .left, font: Fonts.rubikRegular, size: 12, characterSpacing: -0.04, backgroundColor: nil)
    return label
}()

let snapshotContainer: UIView = {
    let view = UIView()
    view.backgroundColor = .white
    view.layer.cornerRadius = 12
    return view
}()

let snapshotGradientBackground: UIImageView = {
    let imageView = UIImageView()
    imageView.image = #imageLiteral(resourceName: "itemCellBackgroundPink")
    imageView.contentMode = .scaleAspectFill
    imageView.layer.cornerRadius = 12
    imageView.clipsToBounds = true
    return imageView
}()

override init(frame: CGRect) {
    super.init(frame: frame)

    contentView.addSubview(snapshotGradientBackground)
    snapshotGradientBackground.setAnchors(top: contentView.topAnchor, paddingTop: 0, bottom: contentView.bottomAnchor, paddingBottom: 0, left: contentView.leftAnchor, paddingLeft: 0, right: contentView.rightAnchor, paddingRight: 0, width: 0, height: 0)

    contentView.addSubview(snapshotContainer)
    snapshotContainer.setAnchors(top: contentView.topAnchor, paddingTop: 45, bottom: contentView.bottomAnchor, paddingBottom: 0, left: contentView.leftAnchor, paddingLeft: 0, right: contentView.rightAnchor, paddingRight: 0, width: 0, height: 0)

    contentView.addSubview(snapshotTitle)
    snapshotTitle.setAnchors(top: contentView.topAnchor, paddingTop: 0, bottom: snapshotContainer.topAnchor, paddingBottom: 0, left: contentView.leftAnchor, paddingLeft: 12, right: contentView.rightAnchor, paddingRight: 12, width: 0, height: 0)

    contentView.addSubview(snapshotOne)
    snapshotOne.setAnchors(top: snapshotContainer.topAnchor, paddingTop: 18, bottom: nil, paddingBottom: 0, left: snapshotContainer.leftAnchor, paddingLeft: 12, right: snapshotContainer.rightAnchor, paddingRight: 12, width: 0, height: 14)

    contentView.addSubview(snapshotTwo)
    snapshotTwo.setAnchors(top: snapshotOne.bottomAnchor, paddingTop: 14, bottom: nil, paddingBottom: 0, left: snapshotContainer.leftAnchor, paddingLeft: 12, right: snapshotContainer.rightAnchor, paddingRight: 12, width: 0, height: 14)

    contentView.addSubview(snapshotThree)
    snapshotThree.setAnchors(top: snapshotTwo.bottomAnchor, paddingTop: 14, bottom: nil, paddingBottom: 0, left: snapshotContainer.leftAnchor, paddingLeft: 12, right: snapshotContainer.rightAnchor, paddingRight: 12, width: 0, height: 14)

    contentView.addSubview(snapshotFour)
    snapshotFour.setAnchors(top: snapshotThree.bottomAnchor, paddingTop: 14, bottom: nil, paddingBottom: 0, left: snapshotContainer.leftAnchor, paddingLeft: 12, right: snapshotContainer.rightAnchor, paddingRight: 12, width: 0, height: 14)

}

required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
    }
}

我使用的是一种完全程序化的方法
为了更好地理解这段代码,我使用了UILabel和UIView的扩展:
“.attributes”指定文本、文本颜色、文本对齐方式、字体、文本大小和背景色
“.setAnchors”指定自动布局约束

与手动添加这些标签(snapshotOne、snapshotTwo、snapshotThree、snapshotFour)不同,我如何迭代项目列表并将标签设置为该项目?目前,我只是为每个项目创建单独的闭包,然后逐个添加它们。如果有帮助的话,我想显示的项目最多是四个(项目列表中的前四个项目)。

以下是显示当前代码的图像:

这是我面临的一个重大问题,非常感谢您的帮助。我对Swift编程相当陌生,所以如果您看到任何其他问题,请随时指出我代码中的任何其他问题。非常感谢。

0 回复 | 直到 6 年前

1

Sweeper 6 年前

对于4个快照标签,可以将它们放在一个数组中:

let snapshotLabels = (1...4).map { number in
    let label = UILabel()
    label.attributes(text: "Item \(number)", // note the use of "number" here 
                    textColor: Colors.appDarkGrey, 
                    alignment: .left, 
                    font: Fonts.rubikRegular, 
                    size: 12, 
                    characterSpacing: -0.04, 
                    backgroundColor: nil)
    return label
}

对于布局,可以使用 UIStackView 或者 UITableView ,具体取决于项目数少于4时的外观。

具有 UIStackView ,你可以

let stackView = UIStackView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
stackView.setAnchors(...)
stackView.axis = .vertical
stackView.alignment = .leading
stackView.distribution = .fillEqually
for label in snapshotLabels {
    stackView.addArrangedSubview(label)
}