UIView设置约束

时间:2019-05-27 04:57:02

标签: ios swift

我无法以编程方式创建UIView实例。我有一个返回视图的函数,以便可以在NSAttachment内的UITextView中使用它。

这是我要实现的目标: enter image description here 这是我在模拟器中得到的: enter image description here

以下代码:

let fullView = UIView()
    let firstButton = UIButton()
    let secondButton = UIButton()
    let thirdTextView = UITextView()

    fullView.frame = CGRect(x: 0, y: 0, width: textView.frame.width, height: 90)
    fullView.backgroundColor = UIColor(red:0.82, green:0.83, blue:0.85, alpha:1.0)

    firstButton.setTitle(text1, for: .normal)
    firstButton.setTitleColor(.black, for: .normal)
    firstButton.titleLabel?.font = UIFont.systemFont(ofSize: 15, weight: UIFont.Weight.medium)
    firstButton.contentHorizontalAlignment = .left

    secondButton.setTitle("Button2", for: .normal)
    secondButton.setTitleColor(.black, for: .normal)
    secondButton.titleLabel?.font = UIFont.systemFont(ofSize: 15, weight: UIFont.Weight.medium)
    secondButton.contentHorizontalAlignment = .right

    thirdTextView.text = text2

    let descriptionBarStackView = UIStackView()
    descriptionBarStackView.axis = .horizontal
    descriptionBarStackView.alignment = .fill 
    descriptionBarStackView.distribution = .fillProportionally 

    descriptionBarStackView.addArrangedSubview(firstButton)
    descriptionBarStackView.addArrangedSubview(secondButton)

    let viewWithStackViews = UIStackView()
    viewWithStackViews.axis = .vertical
    viewWithStackViews.alignment = .fill // .leading .firstBaseline .center .trailing .lastBaseline
    viewWithStackViews.distribution = .fillEqually
    viewWithStackViews.addArrangedSubview(descriptionBarStackView)
    viewWithStackViews.addArrangedSubview(thirdTextView)


    fullView.addSubview(viewWithStackViews)

    descriptionBarStackView.translatesAutoresizingMaskIntoConstraints = false
    thirdTextView.translatesAutoresizingMaskIntoConstraints = false
    viewWithStackViews.translatesAutoresizingMaskIntoConstraints = false

    NSLayoutConstraint.activate([
    viewWithStackViews.topAnchor.constraint(equalTo: fullView.topAnchor, constant: 5),
    viewWithStackViews.leadingAnchor.constraint(equalTo: fullView.leadingAnchor, constant: 5),
    viewWithStackViews.trailingAnchor.constraint(equalTo: fullView.trailingAnchor, constant: 5),
    viewWithStackViews.bottomAnchor.constraint(equalTo: fullView.bottomAnchor, constant: 5),
    ])

编辑:enter image description here

3 个答案:

答案 0 :(得分:1)

  

检查此更新的方法

func customView(){

let fullView = UIView()
let firstButton = UIButton()
let secondButton = UIButton()
let thirdTextView = UITextView()

fullView.frame = CGRect(x: 0, y: 0, width: mainView.frame.width, height: mainView.frame.height)
fullView.backgroundColor = UIColor(red:0.82, green:0.83, blue:0.85, alpha:1.0)

firstButton.setTitle("Button1", for: .normal)
firstButton.setTitleColor(.black, for: .normal)
firstButton.titleLabel?.font = UIFont.systemFont(ofSize: 15, weight: UIFont.Weight.medium)
firstButton.contentHorizontalAlignment = .left
firstButton.backgroundColor = .clear

secondButton.setTitle("Button2", for: .normal)
secondButton.setTitleColor(.black, for: .normal)
secondButton.titleLabel?.font = UIFont.systemFont(ofSize: 15, weight: UIFont.Weight.medium)
secondButton.contentHorizontalAlignment = .right
secondButton.backgroundColor = .clear

thirdTextView.text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
thirdTextView.backgroundColor = .clear

let descriptionBarStackView = UIStackView()
descriptionBarStackView.axis = .horizontal
descriptionBarStackView.alignment = .fill
descriptionBarStackView.distribution = .fillProportionally
descriptionBarStackView.isLayoutMarginsRelativeArrangement = true
descriptionBarStackView.directionalLayoutMargins = NSDirectionalEdgeInsets(top: 0, leading: 5, bottom: 0, trailing: 5)

descriptionBarStackView.addArrangedSubview(firstButton)
descriptionBarStackView.addArrangedSubview(secondButton)

let viewWithStackViews = UIStackView()
viewWithStackViews.axis = .vertical
viewWithStackViews.alignment = .fill // .leading .firstBaseline .center .trailing .lastBaseline
viewWithStackViews.distribution = .fill
viewWithStackViews.addArrangedSubview(descriptionBarStackView)
viewWithStackViews.addArrangedSubview(thirdTextView)

fullView.addSubview(viewWithStackViews)

descriptionBarStackView.translatesAutoresizingMaskIntoConstraints = false
thirdTextView.translatesAutoresizingMaskIntoConstraints = false
viewWithStackViews.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint(item: descriptionBarStackView, attribute: NSLayoutConstraint.Attribute.height, relatedBy: NSLayoutConstraint.Relation.equal, toItem: nil, attribute: NSLayoutConstraint.Attribute.notAnAttribute, multiplier: 1, constant: 30).isActive = true
NSLayoutConstraint.activate([
    viewWithStackViews.topAnchor.constraint(equalTo: fullView.topAnchor, constant: 0),
    viewWithStackViews.leadingAnchor.constraint(equalTo: fullView.leadingAnchor, constant: 0),
    viewWithStackViews.trailingAnchor.constraint(equalTo: fullView.trailingAnchor, constant: 0),
    viewWithStackViews.bottomAnchor.constraint(equalTo: fullView.bottomAnchor, constant: 0),
    ])

fullView.layer.cornerRadius = 5
mainView.addSubview(fullView)

}

  

我在这里列出了更改

  • mainView.frame.height基于主文本视图的完整高度
  • firstButton.backgroundColor = .clear
  • secondButton.backgroundColor = .clear
  • thirdTextView.backgroundColor = .clear
  • 按钮的边距 descriptionBarStackView.isLayoutMarginsRelativeArrangement = true descriptionBarStackView.directionalLayoutMargins = NSDirectionalEdgeInsets(顶部:0,前导:5,底部:0,尾部:5)
  • NSLayoutConstraint约束在全视图下对所有人的约束为零
  • fullView.layer.cornerRadius = 5
  

这就是结果。   enter image description here

答案 1 :(得分:1)

试图保留您的布局结构 enter image description here

class VisualTestViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        let fullView = UIView()
        fullView.backgroundColor = UIColor(red:0.82, green:0.83, blue:0.85, alpha:1.0)
        fullView.translatesAutoresizingMaskIntoConstraints = false

        let firstButton = UIButton()
        firstButton.translatesAutoresizingMaskIntoConstraints = false
        let secondButton = UIButton()
        secondButton.translatesAutoresizingMaskIntoConstraints = false
        let thirdTextView = UITextView()
        thirdTextView.translatesAutoresizingMaskIntoConstraints = false



        thirdTextView.text = "lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum"

        let text1 = "Button1"
        firstButton.setTitle(text1, for: .normal)
        firstButton.setTitleColor(.black, for: .normal)
        firstButton.titleLabel?.font = UIFont.systemFont(ofSize: 15, weight: UIFont.Weight.medium)
        firstButton.contentHorizontalAlignment = .left


        secondButton.setTitle("Button2", for: .normal)
        secondButton.setTitleColor(.black, for: .normal)
        secondButton.titleLabel?.font = UIFont.systemFont(ofSize: 15, weight: UIFont.Weight.medium)
        secondButton.contentHorizontalAlignment = .right


        let descriptionBarStackView = UIStackView(arrangedSubviews: [firstButton, UIView() ,secondButton])
        descriptionBarStackView.translatesAutoresizingMaskIntoConstraints = false
        descriptionBarStackView.axis = .horizontal
        descriptionBarStackView.alignment = .center

        let viewWithStackViews = UIStackView(arrangedSubviews: [descriptionBarStackView, thirdTextView])
        viewWithStackViews.translatesAutoresizingMaskIntoConstraints = false
        viewWithStackViews.axis = .vertical
        viewWithStackViews.layoutMargins = UIEdgeInsets(top: 5, left: 5, bottom: 5, right: 5)
        viewWithStackViews.isLayoutMarginsRelativeArrangement = true

        fullView.addSubview(viewWithStackViews)


        fullView.leadingAnchor.constraint(equalTo: viewWithStackViews.leadingAnchor).isActive = true
        fullView.trailingAnchor.constraint(equalTo: viewWithStackViews.trailingAnchor).isActive = true
        fullView.topAnchor.constraint(equalTo: viewWithStackViews.topAnchor).isActive = true
        fullView.bottomAnchor.constraint(equalTo: viewWithStackViews.bottomAnchor).isActive = true

        view.addSubview(fullView)
        fullView.widthAnchor.constraint(equalTo: view.widthAnchor, constant: -10).isActive = true
        fullView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        fullView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true

        thirdTextView.isScrollEnabled = false

        thirdTextView.backgroundColor = .clear
    }


}

答案 2 :(得分:0)

您正在设置 viewWithStackViews.distribution = .fillEqually 由于.fillEquallyStackView将为子视图分配相等的高度。这就是为什么您在viewWithStackViews的一半和thirdTextView的剩余一半中看到按钮的原因。 因此将其更改为: viewWithStackViews.distribution = .fillProportionally

还有一件事:thirdTextView的高度没有根据其内容而变。 尝试执行此操作以使您thirdTextView自动获得身高。如果文本可能太长,请将scrolledEnabled设置为true并为textView设置高度约束。

thirdTextView.translatesAutoresizingMaskIntoConstraints = true thirdTextView.sizeToFit() thirdTextView.scrollEnabled = false