如何在Swift中制作垂直标签栏?

ljsrvy3e  于 2022-12-22  发布在  Swift
关注(0)|答案(1)|浏览(164)

我想通过swift做这样的布局:

我试着用这样的方式来做:

var buttonArray = [UILabel]()
for (myKey,myValue) in colorDictionary{
   buttonArray += [colorButton(withColor: myValue, title: myKey)]
}
let horizontalStack = UIStackView(arrangedSubviews: buttonArray)
horizontalStack.axis = .horizontal
horizontalStack.distribution = .fillEqually
horizontalStack.alignment = .fill
horizontalStack.translatesAutoresizingMaskIntoConstraints = false
horizontalStack.transform = CGAffineTransform(rotationAngle: -CGFloat.pi / 2)

let label2       = UILabel()
label2.text      = "Label"
label2.backgroundColor = .red
label2.textColor = .white
label2.textAlignment = .center
label2.lineBreakMode = .byCharWrapping
label2.numberOfLines = 0
label2.translatesAutoresizingMaskIntoConstraints = false
label2.transform = CGAffineTransform(rotationAngle: -CGFloat.pi / 2)
        
let mainStackView = UIStackView()
mainStackView.axis = .horizontal
mainStackView.translatesAutoresizingMaskIntoConstraints = false
mainStackView.addArrangedSubview(label2)
mainStackView.addArrangedSubview(horizontalStack)

    mainContainer.addSubview(mainStackView)

    
    
    NSLayoutConstraint.activate([
        mainStackView.topAnchor.constraint(equalTo: mainContainer.topAnchor, constant: 5),
        mainStackView.leftAnchor.constraint(equalTo: mainContainer.leftAnchor,
                                        constant: 20),
        mainStackView.rightAnchor.constraint(equalTo: mainContainer.rightAnchor,
                                         constant: -20),
        mainStackView.heightAnchor.constraint(equalToConstant: 270),
    ])

其中colorButton为:

func colorButton(withColor color:UIColor, title:String) -> UILabel{
        let newButton = UILabel()
        newButton.backgroundColor = color
        newButton.text = title
        newButton.textAlignment = .center
        newButton.textColor = UIColor.white
        return newButton
    }

这是我得到的结果

我怎样才能使所有这些标签看起来像所需的图像?而且我也不知道是否标签旋转可以用我的方法。

e0bqpujr

e0bqpujr1#

我要做的是首先让它不做任何变换就能工作,这样它看起来就像一个正常的,而不是旋转的设置。一旦它工作了,你只需要对主堆栈视图应用一个变换就能让整个东西旋转。最后你可以调整约束来让它正确定位。
下面是有效的代码:

let horizontalStack = UIStackView(arrangedSubviews: buttonArray)
horizontalStack.axis = .horizontal
horizontalStack.distribution = .fillEqually
horizontalStack.alignment = .fill
horizontalStack.translatesAutoresizingMaskIntoConstraints = false

let label2 = UILabel()
label2.text = "Label"
label2.backgroundColor = .red
label2.textColor = .white
label2.textAlignment = .center
label2.lineBreakMode = .byCharWrapping
label2.numberOfLines = 0
label2.translatesAutoresizingMaskIntoConstraints = false

let mainStackView = UIStackView()
mainStackView.axis = .vertical
mainStackView.distribution = .equalSpacing
mainStackView.translatesAutoresizingMaskIntoConstraints = false
mainStackView.addArrangedSubview(label2)
mainStackView.addArrangedSubview(horizontalStack)
mainStackView.transform = CGAffineTransform(rotationAngle: -CGFloat.pi / 2)
mainContainer.addSubview(mainStackView)

NSLayoutConstraint.activate([
    mainStackView.centerYAnchor.constraint(equalTo: mainContainer.centerYAnchor),
    mainStackView.centerXAnchor.constraint(equalTo: mainContainer.leftAnchor, constant: 40),
    // Set the "width", not the "height"
    mainStackView.widthAnchor.constraint(equalToConstant: 270),
])

变更:

  • 我删除了水平堆栈视图和大标签的转换。
  • 我在主堆栈视图中添加了一个转换。
  • 我对主堆栈使用了垂直而不是水平的堆栈视图。
  • 已更新主堆栈视图的属性,以便主标签填充其他标签上方的区域。
  • 更新了约束条件。调整这些约束条件以满足您的需要。

请注意,您需要设置主堆栈视图的宽度,因为约束是相对于未转换的主堆栈视图的。

相关问题