プログラムでUIStackViewにビューを追加する


158

プログラムでUIStackViewにビューを追加しようとしています。今のところ私のコードは:

UIView *view1 = [[UIView alloc]init];
view1.backgroundColor = [UIColor blackColor];
[view1 setFrame:CGRectMake(0, 0, 100, 100)];

UIView *view2 =  [[UIView alloc]init];
view2.backgroundColor = [UIColor greenColor];
[view2 setFrame:CGRectMake(0, 100, 100, 100)];

[self.stack1 addArrangedSubview:view1];
[self.stack1 addArrangedSubview:view2];

アプリをデプロイすると、ビューが1つしかなく、黒い色で表示されます(view1はview2のパラメーターも取得します)


あなたは正気をあなたのコンセントをチェックしましたか?実行時にサブビューを記録しましたか?
Wain

10
使用するaddArrangedSubview:、しないaddSubview:
pkamb 2017年

回答:


245

スタックビューは固有のコンテンツサイズを使用するため、レイアウト制約を使用してビューのサイズを定義します。

制約をすばやく追加する簡単な方法があります(例):

[view1.heightAnchor constraintEqualToConstant:100].active = true;

完全なコード:

- (void) setup {

    //View 1
    UIView *view1 = [[UIView alloc] init];
    view1.backgroundColor = [UIColor blueColor];
    [view1.heightAnchor constraintEqualToConstant:100].active = true;
    [view1.widthAnchor constraintEqualToConstant:120].active = true;


    //View 2
    UIView *view2 = [[UIView alloc] init];
    view2.backgroundColor = [UIColor greenColor];
    [view2.heightAnchor constraintEqualToConstant:100].active = true;
    [view2.widthAnchor constraintEqualToConstant:70].active = true;

    //View 3
    UIView *view3 = [[UIView alloc] init];
    view3.backgroundColor = [UIColor magentaColor];
    [view3.heightAnchor constraintEqualToConstant:100].active = true;
    [view3.widthAnchor constraintEqualToConstant:180].active = true;

    //Stack View
    UIStackView *stackView = [[UIStackView alloc] init];

    stackView.axis = UILayoutConstraintAxisVertical;
    stackView.distribution = UIStackViewDistributionEqualSpacing;
    stackView.alignment = UIStackViewAlignmentCenter;
    stackView.spacing = 30;


    [stackView addArrangedSubview:view1];
    [stackView addArrangedSubview:view2];
    [stackView addArrangedSubview:view3];

    stackView.translatesAutoresizingMaskIntoConstraints = false;
    [self.view addSubview:stackView];


    //Layout for Stack View
    [stackView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor].active = true;
    [stackView.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor].active = true;
}

注:これはiOS 9でテストされています

UIStackView等間隔(中央)


26
スタックビューを使用するポイントは、制約管理の詳細を開発者から隠すことです。あなたが指摘したように、これはデフォルトでUIViewsはそうではない固有のコンテンツサイズを持つサブビューに依存しています。元の投稿者がのUILabel代わりにインスタンスを使用していた場合UIView、彼のコードは期待どおりに機能していました。これを示す例を以下に追加しました。
グレッグブラウン

これを行うと、「[view1.heightAnchor constraintEqualToConstant:100] .active = true;」になります。イムIOS 8.Itのは、IOS uistackviewがiOS用です9+が、どのように私は、IOSの8のためにheightAncor制約を設定することができ9.Iノウハウにのみ取り組んでエラーを取得
selimko nuridin

StackViewはストーリーボードを使用して追加されます。実行時に、stackViewにいくつかのUIViews(他のサブビューを含む)を追加しています。データを読み込んだ後、stackView内のすべてのビューが同じ高さになりますが、コンテンツに応じてサイズが変更されません。@ user1046037
Mansuu ....

コンテンツに基づいてサイズが変化するように、これらの個々のビューに制約が設定されていますか?
user1046037 2017

これは、同じ幅または高さのビューを管理するための最良かつ最適な方法です
Kampai

156

Swift 5.0

//Image View
let imageView = UIImageView()
imageView.backgroundColor = UIColor.blue
imageView.heightAnchor.constraint(equalToConstant: 120.0).isActive = true
imageView.widthAnchor.constraint(equalToConstant: 120.0).isActive = true
imageView.image = UIImage(named: "buttonFollowCheckGreen")

//Text Label
let textLabel = UILabel()
textLabel.backgroundColor = UIColor.yellow
textLabel.widthAnchor.constraint(equalToConstant: self.view.frame.width).isActive = true
textLabel.heightAnchor.constraint(equalToConstant: 20.0).isActive = true
textLabel.text  = "Hi World"
textLabel.textAlignment = .center

//Stack View
let stackView   = UIStackView()
stackView.axis  = NSLayoutConstraint.Axis.vertical
stackView.distribution  = UIStackView.Distribution.equalSpacing
stackView.alignment = UIStackView.Alignment.center
stackView.spacing   = 16.0

stackView.addArrangedSubview(imageView)
stackView.addArrangedSubview(textLabel)
stackView.translatesAutoresizingMaskIntoConstraints = false

self.view.addSubview(stackView)

//Constraints
stackView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
stackView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true

@ user1046037の回答に基づく。


2
開始iOSの8を、それが使用してバッチ内の制約を有効にすることが可能ですactivate(_:)、そしてそれは、このようにそれを行うには、通常、より効率的だdeveloper.apple.com/documentation/uikit/nslayoutconstraint/...
ジョナサン・カブレラ


17

UIStackView内部で制約を使用して、配置されたサブビューを配置します。作成される制約は、スタックビュー自体の構成方法によって異なります。デフォルトでは、スタックビューは、配置されたサブビューを水平線に配置する制約を作成し、リーディングビューとトレーリングビューをそれぞれのリーディングエッジとトレーリングエッジに固定します。したがって、コードは次のようなレイアウトを生成します。

|[view1][view2]|

各サブビューに割り当てられるスペースは、サブビューの固有のコンテンツサイズ、圧縮耐性、コンテンツハグの優先順位など、いくつかの要因によって決定されます。デフォルトでは、UIViewインスタンスは固有のコンテンツサイズを定義しません。これは、UILabelまたはなどのサブクラスによって一般的に提供されるものですUIButton

コンテンツ圧縮耐性とコンテンツハグの優先順位が2つあるため、 UIViewインスタンス同じであり、どちらのビューも固有のコンテンツサイズを提供しないため、レイアウトエンジンは、各ビューに割り当てられるサイズを最適に推測する必要があります。あなたの場合、それは最初のビューを利用可能なスペースの100%に割り当て、2番目のビューには何も割り当てていません。

UILabel代わりにインスタンスを使用するようにコードを変更すると、より良い結果が得られます。

UILabel *label1 = [UILabel new];
label1.text = @"Label 1";
label1.backgroundColor = [UIColor blueColor];

UILabel *label2 = [UILabel new];
label2.text = @"Label 2";
label2.backgroundColor = [UIColor greenColor];

[self.stack1 addArrangedSubview:label1];
[self.stack1 addArrangedSubview:label2];

自分で明示的に制約を作成する必要はないことに注意してください。これが使用の主な利点ですUIStackView。制約管理の(多くの場合は醜い)詳細が開発者から見えなくなります。


同じ問題がLabelsでは機能しますが、TextFields(またはビュー)では機能しません。また、私が見つけたすべてのチュートリアルは、ラベル、画像、またはボタンを使用しています。これは、これらのUI要素とは異なるものに対して、このメソッドを使用できないことを意味しますか?
フィジカル

@physicalattractionスタックビューに追加するビューには、固有のコンテンツサイズが必要です。私が覚えているように、テキストフィールドの固有のサイズは、フィールドの内容に基づいています(これは奇妙です)。UIView自身のインスタンスには固有のサイズはありません。これらのビューに追加の制約を適用して、スタックビューがそれらの大きさを認識できるようにする必要がある場合があります。
グレッグブラウン

理にかなっているので、私はそれを試しています。これで、テキストフィールドを使用してxibにビューを作成しました。これにより、30ピクセルの明示的な高さ制限が与えられます。私は、さらに以下の2つの制約を行いますMyTextField.top = top+20bottom = MyTextField.bottom+20。これは私の見解に70の本質的な高さを与えると期待しますが、代わりに競合する制約について不平を言います。ここで何が起こっているか知っていますか?UIStackView内に配置したいのはこのビューです。
フィジカル

私は問題が何であるかを知っていると思います。スタックビューは、最終的に配置されたサブビューを自動的に下端に固定します。したがって、スタックビューはコンテナービューをそれ自体と同じサイズにしようとしています。ただし、このビューは高さが70ピクセルでなければならないため、競合が発生すると説明しています。コンテナービューの直後に追加の空のビューを作成して、垂直コンテンツハグの優先度を0にしてみてください。コンテナービューに垂直コンテンツハグの優先度を1000にしてください。これにより、空のビューが引き伸ばされ、スタックの空のスペースがいっぱいになります。見る。
グレッグブラウン

ちなみに、あなたは垂直スタックビューを使用していると思います。私がスタックビューについて書いたこの記事もご覧ください。dzone.com
Greg Brown

13

Swift 4.2の場合

let redView = UIView()
    redView.backgroundColor = .red

    let blueView = UIView()
    blueView.backgroundColor = .blue

    let stackView = UIStackView(arrangedSubviews: [redView, blueView])
    stackView.axis = .vertical
    stackView.distribution = .fillEqually

    view.addSubview(stackView)

    //        stackView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)

    // autolayout constraint
    stackView.translatesAutoresizingMaskIntoConstraints = false

NSLayoutConstraint.activate([stackView.topAnchor.constraint(equalTo: view.topAnchor), stackView.leftAnchor.constraint(equalTo: view.leftAnchor), stackView.rightAnchor.constraint(equalTo: view.rightAnchor), stackView.heightAnchor.constraint(equalToConstant: 200)])

8

配信タイプを設定する必要があります。あなたのコードに、追加してください:

self.stack1.distribution = UIStackViewDistributionFillEqually;

または、インターフェイスビルダーでディストリビューションを直接設定することもできます。例えば:

ここに画像の説明を入力してください

それが役に立てば幸い;)Lapinou。


8

次の2行で問題が解決しました

    view.heightAnchor.constraintEqualToConstant(50).active = true;
    view.widthAnchor.constraintEqualToConstant(350).active = true;

Swiftバージョン-

    var DynamicView=UIView(frame: CGRectMake(100, 200, 100, 100))
    DynamicView.backgroundColor=UIColor.greenColor()
    DynamicView.layer.cornerRadius=25
    DynamicView.layer.borderWidth=2
    self.view.addSubview(DynamicView)
    DynamicView.heightAnchor.constraintEqualToConstant(50).active = true;
    DynamicView.widthAnchor.constraintEqualToConstant(350).active = true;

    var DynamicView2=UIView(frame: CGRectMake(100, 310, 100, 100))
    DynamicView2.backgroundColor=UIColor.greenColor()
    DynamicView2.layer.cornerRadius=25
    DynamicView2.layer.borderWidth=2
    self.view.addSubview(DynamicView2)
    DynamicView2.heightAnchor.constraintEqualToConstant(50).active = true;
    DynamicView2.widthAnchor.constraintEqualToConstant(350).active = true;

    var DynamicView3:UIView=UIView(frame: CGRectMake(10, 420, 355, 100))
    DynamicView3.backgroundColor=UIColor.greenColor()
    DynamicView3.layer.cornerRadius=25
    DynamicView3.layer.borderWidth=2
    self.view.addSubview(DynamicView3)

    let yourLabel:UILabel = UILabel(frame: CGRectMake(110, 10, 200, 20))
    yourLabel.textColor = UIColor.whiteColor()
    //yourLabel.backgroundColor = UIColor.blackColor()
    yourLabel.text = "mylabel text"
    DynamicView3.addSubview(yourLabel)
    DynamicView3.heightAnchor.constraintEqualToConstant(50).active = true;
    DynamicView3.widthAnchor.constraintEqualToConstant(350).active = true;

    let stackView   = UIStackView()
    stackView.axis  = UILayoutConstraintAxis.Vertical
    stackView.distribution  = UIStackViewDistribution.EqualSpacing
    stackView.alignment = UIStackViewAlignment.Center
    stackView.spacing   = 30

    stackView.addArrangedSubview(DynamicView)
    stackView.addArrangedSubview(DynamicView2)
    stackView.addArrangedSubview(DynamicView3)

    stackView.translatesAutoresizingMaskIntoConstraints = false;

    self.view.addSubview(stackView)

    //Constraints
    stackView.centerXAnchor.constraintEqualToAnchor(self.view.centerXAnchor).active = true
    stackView.centerYAnchor.constraintEqualToAnchor(self.view.centerYAnchor).active = true

8

スタックビュー内のビューを非表示にしようとしたときに受け入れられた回答の場合、制約は正しく機能しません。

Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
(
    "<NSLayoutConstraint:0x618000086e50 UIView:0x7fc11c4051c0.height == 120   (active)>",
    "<NSLayoutConstraint:0x610000084fb0 'UISV-hiding' UIView:0x7fc11c4051c0.height == 0   (active)>"
)

理由は、非表示viewstackViewすると、アニメーション化するために高さが0に設定されます。

ソリューションpriorityは以下のように制約を変更します。

import UIKit

class ViewController: UIViewController {

    let stackView = UIStackView()
    let a = UIView()
    let b = UIView()

    override func viewDidLoad() {
        super.viewDidLoad()

        a.backgroundColor = UIColor.red
        a.widthAnchor.constraint(equalToConstant: 200).isActive = true
        let aHeight = a.heightAnchor.constraint(equalToConstant: 120)
        aHeight.isActive = true
        aHeight.priority = 999

        let bHeight = b.heightAnchor.constraint(equalToConstant: 120)
        bHeight.isActive = true
        bHeight.priority = 999
        b.backgroundColor = UIColor.green
        b.widthAnchor.constraint(equalToConstant: 200).isActive = true

        view.addSubview(stackView)
        stackView.backgroundColor = UIColor.blue
        stackView.addArrangedSubview(a)
        stackView.addArrangedSubview(b)
        stackView.axis = .vertical
        stackView.distribution = .equalSpacing
        stackView.translatesAutoresizingMaskIntoConstraints = false
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    // Just add a button in xib file or storyboard and add connect this action.
    @IBAction func test(_ sender: Any) {
        a.isHidden = !a.isHidden
    }

}

5
    //Image View
    let imageView               = UIImageView()
    imageView.backgroundColor   = UIColor.blueColor()
    imageView.heightAnchor.constraintEqualToConstant(120.0).active = true
    imageView.widthAnchor.constraintEqualToConstant(120.0).active = true
    imageView.image = UIImage(named: "buttonFollowCheckGreen")

    //Text Label
    let textLabel               = UILabel()
    textLabel.backgroundColor   = UIColor.greenColor()
    textLabel.widthAnchor.constraintEqualToConstant(self.view.frame.width).active = true
    textLabel.heightAnchor.constraintEqualToConstant(20.0).active = true
    textLabel.text  = "Hi World"
    textLabel.textAlignment = .Center


    //Third View
    let thirdView               = UIImageView()
    thirdView.backgroundColor   = UIColor.magentaColor()
    thirdView.heightAnchor.constraintEqualToConstant(120.0).active = true
    thirdView.widthAnchor.constraintEqualToConstant(120.0).active = true
    thirdView.image = UIImage(named: "buttonFollowMagenta")


    //Stack View
    let stackView   = UIStackView()
    stackView.axis  = UILayoutConstraintAxis.Vertical
    stackView.distribution  = UIStackViewDistribution.EqualSpacing
    stackView.alignment = UIStackViewAlignment.Center
    stackView.spacing   = 16.0

    stackView.addArrangedSubview(imageView)
    stackView.addArrangedSubview(textLabel)
    stackView.addArrangedSubview(thirdView)
    stackView.translatesAutoresizingMaskIntoConstraints = false;

    self.view.addSubview(stackView)

    //Constraints
    stackView.centerXAnchor.constraintEqualToAnchor(self.view.centerXAnchor).active = true
    stackView.centerYAnchor.constraintEqualToAnchor(self.view.centerYAnchor).active = true

@Oleg Popovによる回答の改善


4

私の場合、混乱していたのは次の行が欠落していたことです。

stackView.translatesAutoresizingMaskIntoConstraints = false;

その後、私の配置したサブビューに制約を設定する必要はまったくありません。スタックビューがそれを処理します。


4

user1046037の回答に基づいたOleg Popovの回答のSwift 5バージョン

//Image View
let imageView = UIImageView()
imageView.backgroundColor = UIColor.blue
imageView.heightAnchor.constraint(equalToConstant: 120.0).isActive = true
imageView.widthAnchor.constraint(equalToConstant: 120.0).isActive = true
imageView.image = UIImage(named: "buttonFollowCheckGreen")

//Text Label
let textLabel = UILabel()
textLabel.backgroundColor = UIColor.yellow
textLabel.widthAnchor.constraint(equalToConstant: self.view.frame.width).isActive = true
textLabel.heightAnchor.constraint(equalToConstant: 20.0).isActive = true
textLabel.text  = "Hi World"
textLabel.textAlignment = .center

//Stack View
let stackView   = UIStackView()
stackView.axis  = NSLayoutConstraint.Axis.vertical
stackView.distribution  = UIStackView.Distribution.equalSpacing
stackView.alignment = UIStackView.Alignment.center
stackView.spacing   = 16.0

stackView.addArrangedSubview(imageView)
stackView.addArrangedSubview(textLabel)
stackView.translatesAutoresizingMaskIntoConstraints = false

self.view.addSubview(stackView)

//Constraints
stackView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
stackView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true

1

私は非常によく似た問題に遭遇しました。前述のように、スタックビューのサイズは、配置されたサブビューの固有のコンテンツサイズに依存します。これがSwift 2.xでの私の解決策であり、次のビュー構造です:

ビュー-UIView

customView-CustomView:UIView

stackView-UISTackView

配置されたサブビュー-カスタムUIViewサブクラス

    //: [Previous](@previous)

import Foundation
import UIKit
import XCPlayground

/**Container for stack view*/
class CustomView:UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }


    init(){
        super.init(frame: CGRectZero)

    }

}

/**Custom Subclass*/
class CustomDrawing:UIView{
    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()

    }

    func setup(){
       // self.backgroundColor = UIColor.clearColor()
        print("setup \(frame)")
    }

    override func drawRect(rect: CGRect) {
        let ctx = UIGraphicsGetCurrentContext()
        CGContextMoveToPoint(ctx, 0, 0)
        CGContextAddLineToPoint(ctx, CGRectGetWidth(bounds), CGRectGetHeight(bounds))
        CGContextStrokePath(ctx)

        print("DrawRect")

    }
}



//: [Next](@next)
let stackView = UIStackView()
stackView.distribution = .FillProportionally
stackView.alignment = .Center
stackView.axis = .Horizontal
stackView.spacing = 10


//container view
let view = UIView(frame: CGRectMake(0,0,320,640))
view.backgroundColor = UIColor.darkGrayColor()
//now custom view

let customView = CustomView()

view.addSubview(customView)

customView.translatesAutoresizingMaskIntoConstraints = false
customView.widthAnchor.constraintEqualToConstant(220).active = true
customView.heightAnchor.constraintEqualToConstant(60).active = true
customView.centerXAnchor.constraintEqualToAnchor(view.centerXAnchor).active = true
customView.centerYAnchor.constraintEqualToAnchor(view.centerYAnchor).active = true
customView.backgroundColor = UIColor.lightGrayColor()

//add a stack view
customView.addSubview(stackView)
stackView.centerXAnchor.constraintEqualToAnchor(customView.centerXAnchor).active = true
stackView.centerYAnchor.constraintEqualToAnchor(customView.centerYAnchor).active = true
stackView.translatesAutoresizingMaskIntoConstraints = false


let c1 = CustomDrawing()
c1.translatesAutoresizingMaskIntoConstraints = false
c1.backgroundColor = UIColor.redColor()
c1.widthAnchor.constraintEqualToConstant(30).active = true
c1.heightAnchor.constraintEqualToConstant(30).active = true

let c2 = CustomDrawing()
c2.translatesAutoresizingMaskIntoConstraints = false
c2.backgroundColor = UIColor.blueColor()
c2.widthAnchor.constraintEqualToConstant(30).active = true
c2.heightAnchor.constraintEqualToConstant(30).active = true


stackView.addArrangedSubview(c1)
stackView.addArrangedSubview(c2)


XCPlaygroundPage.currentPage.liveView = view

-2

以下のコードを試してください、

UIView *view1 = [[UIView alloc]init];
view1.backgroundColor = [UIColor blackColor];
[view1 setFrame:CGRectMake(0, 0, 50, 50)];

UIView *view2 =  [[UIView alloc]init];
view2.backgroundColor = [UIColor greenColor];
[view2 setFrame:CGRectMake(0, 100, 100, 100)];

NSArray *subView = [NSArray arrayWithObjects:view1,view2, nil];

[self.stack1 initWithArrangedSubviews:subView];

うまくいくことを願っています。不明な点がある場合はお知らせください。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.