スクロールビューの各要素の上にラベルを配置しますか？

Question

forループでスクロールビューを作成し、挿入された各要素の上にUILabelを配置しようとしています。ただし、centerXAnchorを各要素のcenterXAnchorと同じに設定していても、ラベルは何らかの理由で水平に配置されません。ここで示すラベルと要素のボーダーとの画像です：見られるように

は、私が挿入していたラベルは、何らかの理由でscrollview内の各要素を水平にセンタリングされていません。

for i in 0..<petsDict.count { 
    let imageView = UIImageView() 
    imageView.image = petsDict[i] 
    imageView.contentMode = .scaleAspectFit 
    let xPos = self.view.frame.width * CGFloat(i) 
    imageView.frame = CGRect(x: xPos - CGFloat(20*i), y: 0, width: self.mainScrollView.frame.width, height: self.mainScrollView.frame.height) 


    let label = UILabel(frame: CGRect(x: 0, y: -20, width: 200, height: 40)) 
    label.text = "Joy" 
    label.textAlignment = .center 
    imageView.addSubview(label) 
    label.font = UIFont(name: "SFUIText-Regular", size: 20)! 
    label.sizeToFit() 

    mainScrollView.contentSize.width = mainScrollView.frame.width * CGFloat(i + 1) 
    mainScrollView.addSubview(imageView) 

    label.centerXAnchor.constraint(equalTo: imageView.centerXAnchor).isActive = true 
    label.bottomAnchor.constraint(equalTo: imageView.topAnchor).isActive = true 
} 

なぜ私のxセンタリングが正しく機能していないのか理解できますか？

Answer 1

label.sizeToFit（）を削除しようとすると、この関数はラベルのサイズを変更します。

Answer 2

for i in 0..<petsDict.count { 
let imageView = UIImageView() 
imageView.image = petsDict[i] 
imageView.contentMode = .scaleAspectFit 
let xPos = self.view.frame.width * CGFloat(i) 
imageView.frame = CGRect(x: xPos - CGFloat(20*i), y: 0, width: self.mainScrollView.frame.width, height: self.mainScrollView.frame.height) 


let label = UILabel(frame: CGRect(x: 0, y: -20, width: self.mainScrollView.frame.width, height: 20)) 
label.text = "Joy" 
label.textAlignment = .center 
imageView.addSubview(label) 
label.font = UIFont(name: "SFUIText-Regular", size: 20)! 

mainScrollView.contentSize.width = mainScrollView.frame.width * CGFloat(i + 1) 
mainScrollView.addSubview(imageView) 

label.centerXAnchor.constraint(equalTo: imageView.centerXAnchor).isActive = true 
label.bottomAnchor.constraint(equalTo: imageView.topAnchor).isActive = true 

}

このコードを試してみてください

Answer 3

は、あなたのImageViewの幅と同じラベルとsizeToFitとアンカーを削除するために幅を与えます。既に追加したtextAlignmentを追加するだけです。