UIStackViewに配置されたプログラムで作成されたUIButtonに制約を追加するには

Question

私は単純な垂直UIStackViewを持ち、3番目のサブビューでプログラムで作成したいUIButtonを配置します。私はこれを行うことができますが、ボタンは、私のコードで設定しているサイズではなく、サブビューの全幅と高さに拡大しています。ストーリーボードを使用してUIStackViewを作成しましたが、このボタンをプログラムで追加するので、ボタンの外観をよりよく制御できます。 Appleのドキュメントで

let doThisButton = UIButton(frame: CGRect(x: 0, y: 0, width: 50, height: 40)) 
    doThisButton.setTitle("Let's do this.", forState: .Normal) 
    doThisButton.setTitleShadowColor(UIColor.blackColor(), forState: .Highlighted) 
    doThisButton.translatesAutoresizingMaskIntoConstraints = false 
    doThisButton.layer.cornerRadius = 3 
    doThisButton.layer.backgroundColor = UIColor(hexString: "b7b7b7").CGColor 
    doThisButton.layer.borderWidth = 0 

    liftLogStackView.addArrangedSubview(doThisButton) 

、私はそれがうまくいくかもしれないが、今、私はそうは思わないように思えたUILayoutGuideを見つけました。私はこれを試しました：

let container = UILayoutGuide() 
    doThisButton.addLayoutGuide(container) 

    doThisButton.leadingAnchor.constraintEqualToAnchor(container.leadingAnchor, constant: 8.0).active = true 
    doThisButton.trailingAnchor.constraintEqualToAnchor(container.trailingAnchor, constant: 8.0).active = true 

    liftLogStackView.addArrangedSubview(doThisButton) 
    container.leadingAnchor.constraintEqualToAnchor(margins.leadingAnchor).active = true 

そしてそれは違いました。

SOの検索の多くは、私の問題に固有の答えを出さなかったので、誰かが助けてくれることを望んでいます。前もって感謝します。

Answer 1

UIButtonを別の解決策としてUIViewにパックすることです。その後、UIViewは伸ばして必要な場所に移動します。 UIButtonは、定義したサイズのままです。コンテナの表示に応じて制約を定義できるようになりました。

私は短い遊び場例を作った：助け、@Prineため

import UIKit 
import PlaygroundSupport 

class TestViewController : UIViewController { 
    override func viewDidLoad() { 
     super.viewDidLoad() 

     title = "Test" 

     self.view.frame = CGRect(x: 0, y: 0, width: 320, height: 480) 
     self.view.backgroundColor = UIColor.brown 

     let stackview = UIStackView(frame: CGRect(x: 0, y: 0, width: 320, height: 480)) 
     stackview.axis = .vertical 
     stackview.distribution = UIStackViewDistribution.fillEqually 

     let text = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 20)) 
     text.text = "Hello, i am a label" 
     text.backgroundColor = UIColor.green 

     let containerView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 100)) 
     containerView.backgroundColor = UIColor.red 
     containerView.addSubview(text) 

     stackview.addArrangedSubview(containerView) 

     let text2 = UILabel(frame: CGRect(x: 0, y: 0, width: 100, height: 20)) 
     text2.text = "Hello, i am another label" 
     text2.backgroundColor = UIColor.orange 

     stackview.addArrangedSubview(text2) 

     self.view.addSubview(stackview) 
    } 
} 

let testController = TestViewController() 
PlaygroundPage.current.liveView = testController.view 
testController 

Answer 2

UIStackViewのアライメントを変更する必要があります。デフォルトでは、サブビューが軸に垂直な次元を埋めるように設定されています。あなたの場合は、幅。あなたが望むものではないかもしれないUIStackView内のすべてのサブビューに適用されます

liftLogStackView.alignment = .center 

。その場合、ボタンを別のサブビューとして別のUIViewに追加し、そのビューをUIStackViewに追加してください。新しいビューは全幅になりますが、ボタンを任意のサイズに制限することができます。

また、私はUIStackView Documentationを読むことをお勧めします。そこには、レイアウトを設定する方法に関する多くの有益な情報があります。