Swift 3：不能以编程方式在 Collectionview 标题上正确创建标签？

Posted 2023-03-14

【中文标题】Swift 3：不能以编程方式在 Collectionview 标题上正确创建标签？

【英文标题】：Swift 3: Cant programmatically create label on Collectionview header properly?

【发布时间】：2016-10-12 01:50:37

【问题描述】：

好的，所以我在这里使用 Swift 3 并且我是 uicollectionviews 的新手。我正在尝试在我的集合视图中以编程方式将标签添加为标题 UICollectionReusableView 的子视图。我已经像任何其他视图一样添加了标签，但我无法终生将标题上的标签居中。

这是我在自定义标题类中的标签代码，它添加到情节提要的标题中：

let pointsLabel = UILabel()

    override init(frame: CGRect) 
        super.init(frame: frame)
        self.customInit()
    


    required init(coder aDecoder: NSCoder) 
        super.init(coder: aDecoder)!
        self.customInit()
    

    func customInit() 

        //center inside content
        pointsLabel.frame = CGRect(x: 0, y: 0, width: self.bounds.width, height: 100)
    pointsLabel.center = CGPoint(x: self.bounds.width * 0.5, y: self.bounds.height * 0.5)
    pointsLabel.textColor = UIColor.darkGray
    pointsLabel.textAlignment = .center

        pointsLabel.text = "Testing 123"
        pointsLabel.font = UIFont(name: "Montserrat", size: 30)
        self.addSubview(pointsLabel)

    

我的 Collectionview 在两边都有边距：

self.collectionView.contentInset = UIEdgeInsets(top: 0, left: 32.5, bottom: 0, right: 32.5)

不过，这只会影响标题视图的大小，这意味着标签仍应以 header.bounds.width * 0.5 为中心。我将文本对齐居中，但文本向左倾斜：

如果有帮助，我的收藏视图位于消息应用程序扩展中，但我不知道这会如何改变事情。这里有什么问题？

即使：

pointsLabel.frame = CGRect(x: 0, y: 0, width: self.bounds.width, height: 100)
    //pointsLabel.center = CGPoint(x: self.bounds.width * 0.8, y: self.bounds.height * 0.5)
        pointsLabel.center = self.center
        pointsLabel.textColor = UIColor.darkGray
        pointsLabel.backgroundColor = UIColor.blue

或者将我的宽度更改为更小，我得到：

为什么？

【问题讨论】：

你试过pointsLabel.center = self.center吗？您可能还想通过根本不设置 center 属性来解决这个问题。由于您将文本对齐设置为 .center ，因此您基本上已经将文本居中。唯一缺少的是标签的宽度不正确。您可以通过在 pointsLabel 上设置背景颜色或使用 Xcode UI 调试器来检查这一点。

检查我的编辑 - 仍然向左偏移

看起来偏移量与contentInset（32.5）中的左右填充相同。如果您将pointsLabel 框架的 x 坐标设置为 32.5 并删除设置 center 属性的行，那么您应该有一个居中的标签。

如果您使用自动布局约束将标签添加到情节提要，则更改框架将不起作用。

@werm098 设置 x 坐标是什么意思？你不能单独设置 center.x

【参考方案1】：

如果你有页眉和页脚，那么你可以用下面的代码替换 viewForSupplementaryElementOfKind 函数

 func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView 

       switch kind 
        case UICollectionElementKindSectionHeader:

            let header = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier:
            headerId, for: indexPath) as! CustomHeader
            return header

        default:
            return UIHeaderView()
        

【参考方案2】：

您可以使用 Swift 锚定系统让标签填充标题。您可以像这样创建自己的自定义标头类。锚定的工作方式将在标签上设置约束以扩展到视图的顶部、左侧、右侧和底部，无论大小。通过将常量 [32.5 和 -32.5] 添加到左右锚点，它将添加您正在寻找的插入间距。希望这会有所帮助。

自定义标题类

class CustomHeader: UICollectionViewCell 

    let pointsLabel: UILabel = 
     let n = UILabel()
         n.textColor = UIColor.darkGray
         n.textAlignment = .center
         n.text = "Testing 123"
         n.font = UIFont(name: "Montserrat", size: 30)
     return n
   ()

   override init(frame: CGRect) 
    super.init(frame: frame)
     addSubview(pointsLabel)

     pointsLabel.translatesAutoresizingMaskIntoConstraints = false
     pointsLabel.leftAnchor.constraint(equalTo: leftAnchor, constant: 32.5).isActive = true
     pointsLabel.rightAnchor.constraint(equalTo: rightAnchor, constant: -32.5).isActive = true
     pointsLabel.topAnchor.constraint(equalTo: topAnchor).isActive = true
     pointsLabel.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
   

使用此标题的 ViewController 您可以注册并声明您希望标题如下所示的宽度和高度。因此，您使用自定义标头的每个类都将以下函数添加到您的文件中，它应该为您提供所需的内容。 =]

class ControllerUsesHeader: UICollectionViewController 
  let headerId = "headerId"

  override func viewDidLoad() 
   super.viewDidLoad()

   collectionView?.register(CustomHeader.self, forSupplementaryViewOfKind:
        UICollectionElementKindSectionHeader, withReuseIdentifier: headerId)
  


  override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind:
    String, at indexPath: IndexPath) -> UICollectionReusableView 
        let header = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier:
            headerId, for: indexPath) as! CustomHeader
        return header
      

 

extension ControllerUsesHeader: UICollectionViewDelegateFlowLayout 
  func collectionView(_ collectionView: UICollectionView, layout 
    collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection 
    section: Int) -> CGSize 
    return CGSize(width: view.frame.width, height: 100)