有没有一种更有效的方法可以在不手动指定每个视图的情况下向 UICollectionViewCell 添加相同的视图?
Is there a more effective way of adding identical views to a UICollectionViewCell without manually specifying each one?
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 编程的新手,所以如果您看到任何其他问题,请随时指出我的代码中的任何其他问题。谢谢!
对于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)
}
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 编程的新手,所以如果您看到任何其他问题,请随时指出我的代码中的任何其他问题。谢谢!
对于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)
}