自動レイアウト-スーパービューの半分の高さを基準にしてビューの高さを調整します


136

最近autolayoutsに入り始めて、私は本当に些細な問題の例のように見えるのに行き詰まっています。画面の最上部に座って、画面の高さの半分を占めるようにするビューがあります。自動レイアウトの前に簡単-所定の位置に貼り付け、スーパービューのサイズが変更されたときに垂直方向に拡大するように伝えます。

今、私は私の人生のためにそれを行う方法を見ることができません。これを設定しようとすると、次のような結果になります。

自動レイアウトブルース

下部のスペース制約は「284に等しい」に設定されています。これは、iPhone4レイアウトに変更した場合、絶対に意味がなく、画面の下部に284ポイントのスペースを維持し、ビューを縮小して半分にしないためです。画面のサイズ。また、その制約を他のビューの高さの一部に等しく設定する方法はありません。

しばらく苦労した後、これを行うために私が考えられる唯一の方法は、このビューの下に別のビューを導入し、それらの高さを均等に固定し、それらを上下に配置してから、2番目(下)のビューを非表示に設定することです..少し見苦しいようです!

私は明白な何かを逃していますか?


1
醜いとは思いませんが、IBを使用して必要なものを取得するための賢いトリックです。私はこれを行いました。適切な要素名を使用すると、何が起こっているのかを明確にすることができます。これらの2つのサブビューに基づいて、異なる位置または中心に3番目の要素のサイズを変更することもできます。
Jelle

回答:


167

これは、[少なくとも] Xcode 5.1.1以降、IBで可能になりました。理解するのに少し時間がかかりましたが、実際には非常に簡単です。

最初に、基本的な上揃えの制約を作成します(通常のように、下、左、右の制約も設定する必要があります)。次に、制約を選択し、属性インスペクターに移動します。

上記の手順のデモ

次に、乗数を調整できます。スーパービューの50%が必要な場合1は、スーパーの中心ごとに配置されるため、スーパービューの50%のままにしておきます。これは、他のパーセンテージのビュー(スーパービューの25%など)を作成するための優れた方法でもあります。

上記の2番目のステップのデモンストレーション


nice :)この投稿は承認済みの回答としてマークする必要があると思います:) iOS開発者は、コードのようなソリューションよりもInterface Builderソリューションを好むことがよくあります
hqt

@hqt、ありがとう。受け入れられた回答が書かれたとき、この方法は利用できなかったと思います。時々、質問者は古い質問を再訪したり、受け入れられた回答を変更したりしません。しかし、最終的に私は手伝うためにここにいます、それがうれしかったです!
フィロ2014

3
私は少し混乱しています。私はこれを試しましたが、ビューをスーパービューの中央に配置するだけで、ビューの高さを調整しません。
2014年

@Dean、そうでないことを確認する必要First ItemView.TopありView.Center Yます。そうでなければ、はいそれはちょうどそれを中心にします。また、ビューの他のエッジを処理するために、他の制約が適切に設定されていることを確認する必要もあります。
フィロ2014年

1
View.TopはSuperviewと同じです。CenterY乗数1は高さを与えません。この答えは不完全です。あなたがしなければならないのはあなたが言っていることを考えることだけです、そしてそれがあなたがそれをあなたが中心を横切る線を与えるのを見ることができるのを見ることができます!この回答を編集して、あなたが話している他の制約を明確にします。
smileBot 2015年

184

ビュー間の正確な比率を設定できるストーリーボードソリューション:

高さの等しい制約を設定する

今:

制約の乗数を編集する

利益!!!

結果

PSまた、このメソッドは異なるネストレベルのビューで機能し、(明らかに)幅に適用できることにも注意してください。

PPSは、制約の「最初と2番目の項目を逆にする」か、逆乗数を設定すると役立つ場合があります(たとえば、0.5ではなく2)(ただし、ビューが相互にどのように関係するかを理解していない場合、これらの方法は役に立ちません)。


1
ステップ2はうまくいかないようです。パネルで「制約をマージンに」を切り替える以外は何も選択できません。UITableViewCellのUIImageViewの幅をコンテンツビューの50%に設定しようとしています。
DrMickeyLauer 2014

2
更新:明らかに、インターフェイスビルダーでは、コンテンツビューを自動レイアウト制約の明示的なターゲットにすることはできません。これを機能させるには、コンテンツビューの子としてダミーのサブビューを挿入する必要があります。
DrMickeyLauer 2014

1
わたしにはできる。リストでは、ビルダー画面ではなく2つのビューを選択する必要があります。パーセンテージの場合、小さいビューを大きいビューで割って、乗数値の例を取得します。小さいビュー25、大きいビュー135-25/135 = 0.185。これを乗数の値として設定すると、x1およびx2 = 25でビューが大きくなりますが、6および6プラスなどで拡大されます
latenitecoder

1
これは私にとってはうまくいきましたが、サブビューのマージン制約を0に設定する3つの制約も追加する必要があることに注意してください。ありがとう
raddevus

これは受け入れられる答えになるはずです。まず、受け入れられた答えを試してみます。それが機能しなかったので、下にスクロールすると、この回答が表示され、機能しました。ありがとう!
Mihir Oza

31

もう少ししてから、次のことがわかりました。

私はそれを答えとして指摘していますが、実際にはこれをインターフェイスビルダーで実行できないと想定しているため、満足いくものではありませんが、正しい制約を後でコードに追加できます。

- (void) viewWillAppear:(BOOL)animated
{

    NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:upperview
                                                                 attribute:NSLayoutAttributeHeight 
                                                                 relatedBy:0 
                                                                    toItem:self.view
                                                                 attribute:NSLayoutAttributeHeight
                                                                multiplier:.5 
                                                                  constant:0];
    [self.view addConstraint:constraint];

}

基本的に、upperviewに作用して、self.viewの高さに対して0.5の乗数を設定します。制約違反に関するランタイムメッセージの束も回避するために、IBの下部垂直スペース制約の優先度を1000未満に設定する必要がありました。

したがって、Interface Builderでこれを行う方法を誰かが示すことができれば、それは私の質問に答える方が良いでしょう。


3
これは今と同じくらい良いと思います。AppleがIBの乗数値にアクセスできるようにして、定数と同様に設定できると便利です。
rdelmar 2013

3
この答えを見ている人のために、Xcode 5.1では、Interface Builderを介して乗数を設定できるようになりました。スーパービューの半分の高さのビューをすべてIBで構成できるようになりました。
Mark Krenek、2014

9

Fyodor Volchyokの回答よりも方法よりも少し簡単で簡単です。-コントロールボタンを押したまま、サブビューをクリックします。-コマンドボタンを押したまま、カーソルをスーパービューにドラッグし、スーパービューをクリックします。-「アスペクト比」を選択します。

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

-次に、サイズインスペクタをクリックします。-次に、制約をダブルクリックします。 ここに画像の説明を入力してください

-両方のアイテムで「高さ」が選択されていることを確認してください。 ここに画像の説明を入力してください

-次に、「倍率」を0.5に変更して、画面の半分、またはスーパービューのごく一部を変更します。 ここに画像の説明を入力してください


簡単かつ迅速なアプローチ!メイトに感謝
アブドラサイード2017年

7

同じ高さを持つ2つのビューがある場合のコードには別の可能性もあります。view2の高さをview1の高さに設定するだけです(ここでのトリックは、view1の高さを明示的に設定することではありません)。

    [self.view addConstraints:[NSLayoutConstraint
        constraintsWithVisualFormat:@"V:[topLayoutGuide]-0-[_view1]-0-[_view2(==_view1)]-0-[bottomLayoutGuide]"
                            options:0
                            metrics:nil
                              views:viewsDict]];

あなたがそのような幅/高さのために他のビューを参照できることに気づかなかった。すでにビジュアルフォーマット言語を使用している場合、これは最もクリーンな回答IMOです。
loeschg 2014

@brainrayの例は、developer.apple.com
alecs.popa 2015年

0

メテの答えの迅速なバージョン:

    override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.



    upperView.translatesAutoresizingMaskIntoConstraints = false


    var constraint = NSLayoutConstraint(item: upperView,
                                        attribute: NSLayoutAttribute.top,
                                        relatedBy: NSLayoutRelation.equal,
                                        toItem: self.view,
                                        attribute: NSLayoutAttribute.top,
                                        multiplier: 1,
                                        constant: 0)

    self.view.addConstraint(constraint)


    constraint = NSLayoutConstraint(item: upperView,
                                    attribute: NSLayoutAttribute.height,
                                    relatedBy: NSLayoutRelation.equal,
                                    toItem: self.view,
                                    attribute: NSLayoutAttribute.height,
                                    multiplier: 0.5,
                                    constant: 0)

    self.view.addConstraint(constraint)


    constraint = NSLayoutConstraint(item: upperView,
                                    attribute: NSLayoutAttribute.leading,
                                    relatedBy: NSLayoutRelation.equal,
                                    toItem: self.view,
                                    attribute: NSLayoutAttribute.leading,
                                    multiplier: 1,
                                    constant: 0)

    self.view.addConstraint(constraint)


    constraint = NSLayoutConstraint(item: upperView,
                                    attribute: NSLayoutAttribute.trailing,
                                    relatedBy: NSLayoutRelation.equal,
                                    toItem: self.view,
                                    attribute: NSLayoutAttribute.trailing,
                                    multiplier: 1,
                                    constant: 0)

    self.view.addConstraint(constraint)


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