2016-06-13 6 views
3

私は、あるスタックビューが別のスタックビューの内側にある入れ子のスタックビューを実装しようとしています。コードhereに基づいています。私の現在のコードは以下の通りです。入れ子になったスタックビュー:子スタックビューは、プログラムで貼り付けるとき、その親スタックビューの内側にはありません

@IBOutlet weak var verticalStackView: UIStackView! 
let blueImageView = UIImageView() 
blueImageView.backgroundColor = UIColor.blueColor() 
blueImageView.image = UIImage(named: "just some image") 
blueImageView.snp_makeConstraints { (make) in 
    make.height.width.equalTo(34) 
} 

let greenImageView = UIImageView() 
greenImageView.backgroundColor = UIColor.greenColor() 
greenImageView.image = UIImage(named: "just some image") 
// This is just from SnapKit 
greenImageView.snp_makeConstraints { (make) in 
    make.height.width.equalTo(34) 
} 

let stackView = UIStackView() 
stackView.axis = UILayoutConstraintAxis.Horizontal 
stackView.distribution = UIStackViewDistribution.EqualSpacing 
stackView.alignment = UIStackViewAlignment.Center 
stackView.spacing = 16.0 
stackView.addArrangedSubview(blueImageView) 
stackView.addArrangedSubview(greenImageView) 
stackView.translatesAutoresizingMaskIntoConstraints = false; 
// This is just from SnapKit 
verticalStackView.snp_makeConstraints { (make) in 
    make.height.equalTo(70) 
} 
verticalStackView.addSubview(stackView) 

私はこのように見えました。

Just the image

あなたが見ることができるように、サブスタックビューstackViewは、階層内の親スタックビュー(verticalStackView)を下回っています。しかし、ポジショニングはオフです。

私はSwift、AutoLayout、StackViewsでかなり新しいです。私がここで紛失していることを指摘できる人は誰ですか?

ありがとうございます!

答えて

1

だから、私はちょうどaddArrangedSubviewの代わりaddSubviewを使用して、自動レイアウトが残りをやらせる必要があった。..いくつか読んだ後

@IBOutlet weak var verticalStackView: UIStackView! 
let blueImageView = UIImageView() 
blueImageView.backgroundColor = UIColor.blueColor() 
blueImageView.image = UIImage(named: "buttonFollowCheckGreen") 
blueImageView.snp_makeConstraints { (make) in 
    make.height.width.equalTo(34) 
} 

let greenImageView = UIImageView() 
greenImageView.backgroundColor = UIColor.greenColor() 
greenImageView.image = UIImage(named: "buttonFollowCheckGreen") 
greenImageView.snp_makeConstraints { (make) in 
    make.height.width.equalTo(34) 
} 

let firstLineStackView = UIStackView() 
firstLineStackView.axis = UILayoutConstraintAxis.Horizontal 
firstLineStackView.distribution = UIStackViewDistribution.Fill 
firstLineStackView.alignment = UIStackViewAlignment.Center 
firstLineStackView.spacing = 8.0 

firstLineStackView.addArrangedSubview(blueImageView) 
firstLineStackView.addArrangedSubview(greenImageView) 
firstLineStackView.translatesAutoresizingMaskIntoConstraints = false; 

let redImageView = UIImageView() 
redImageView.backgroundColor = UIColor.redColor() 
redImageView.image = UIImage(named: "buttonFollowCheckGreen") 
redImageView.snp_makeConstraints { (make) in 
    make.height.width.equalTo(34) 
} 

verticalStackView.addArrangedSubview(firstLineStackView) 

を解決策を考え出しました。画像ビューの位置とサイズを修正するだけで、verticalStackViewのalignmentfillからleadingに変更しました。

0

greenImageView.heightAnchor.constraint(equalToConstant:34).isActive =真 greenImageView.widthAnchor.constraint(equalToConstant:34).isActive =真

、それが解決される

関連する問題