iOS開発のAutolayout詳細

13575 ワード

⑪ iOS修練の道

iOS開発のAutolayout詳細
1.概要

Autolayoutは、AppleがiOS 6から導入した、異なる画面間のレイアウトを適切に解決するための技術

です.

アップル公式推薦開発者AutolayoutによるUIインタフェースのレイアウト

Autolayoutには、2つのコアコンセプトがあります.1.参照.2.制約

Autolayoutを使用する注意点:

制約を追加する前に、コントロールが親コントロールに追加されたことを保証する必要があります.

ビューにframe

を設定する必要はありません.

autoresizing機能を禁止します.

2.コード実装Autolayout
2.1手順:

親コントロールにViewを追加します.

は、対応するViewに制約を追加します.

- (void)addConstraint:(NSLayoutConstraint *)constraint;
- (void)addConstraints:(NSArray<__kindof NSLayoutConstraint *> *)constraints;

自動レイアウトコア式:obj1.property1 =（obj2.property2 * multiplier）+ constant value

NSLayoutConstraint

/**
view1 ：      
attr1 ：     （      ）
relation ：          
view2 ：     
attr2 ：     （      ）
multiplier ：  
c ：  
*/
+ (instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

2.2例
左ピッチ100の上ピッチ200、幅150、高さ64の赤いビューを追加します.

- (void)testAutolayout1 {
    UIView *redV = [[UIView alloc] init];
    redV.backgroundColor = [UIColor redColor];
    redV.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redV];
    /**
     view1 ：      
     attr1 ：     （      ）
     relation ：          
     view2 ：     
     attr2 ：     （      ）
     multiplier ：  
     c ：  
     */
    ///    100:
    NSLayoutConstraint *consLeft = [NSLayoutConstraint constraintWithItem:redV attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:100];
    [self.view addConstraint:consLeft];

    ///    200:
    NSLayoutConstraint *consTop = [NSLayoutConstraint constraintWithItem:redV attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:200];
    [self.view addConstraint:consTop];

    ///  150:
    NSLayoutConstraint *consWidth = [NSLayoutConstraint constraintWithItem:redV attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeWidth multiplier:1.0 constant:150];
    [redV addConstraint:consWidth];

    ///  64:
    NSLayoutConstraint *consHeight = [NSLayoutConstraint constraintWithItem:redV attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeHeight multiplier:1.0 constant:64];
    [redV addConstraint:consHeight];
}

上ビューに、赤ビューの右と同じ間隔、同じ高さ、上から赤ビューの間隔20、幅が赤ビューの半分の青Viewを追加します.

 UIView *blueV = [[UIView alloc] init];
    blueV.backgroundColor = [UIColor blueColor];
    blueV.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueV];

    ///   redV     0
    NSLayoutConstraint *b_consRight = [NSLayoutConstraint constraintWithItem:blueV attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:redV attribute:NSLayoutAttributeRight multiplier:1.0 constant:0.0];
    [self.view addConstraint:b_consRight];

    ///   redV   
    NSLayoutConstraint *b_consHeight = [NSLayoutConstraint constraintWithItem:blueV attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:redV attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0];
    [self.view addConstraint:b_consHeight];

    ///     redV    
    NSLayoutConstraint *b_consWidth = [NSLayoutConstraint constraintWithItem:blueV attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:redV attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0];
    [self.view addConstraint:b_consWidth];

    ///      redV 20
    NSLayoutConstraint *b_consTop = [NSLayoutConstraint constraintWithItem:blueV attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:redV attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20.0];
    [self.view addConstraint:b_consTop];

最終的な効果:
2.3制約を追加する規則
コンストレイントを作成した後、作用するviewに追加する必要があります.ターゲットviewを追加するには、次のルールに従う必要があります.
(1)2つの同レベルview間の制約関係を親viewに追加する
(2)2つの異なる階層view間の制約関係について、最近の共通の親viewに追加する
(3)階層関係のある2つのview間の制約関係を階層の高い親viewに追加する
3. VFL
VFLのフルネームはVisual Format Languageで、翻訳すると「可視化フォーマット言語」であり、アップル社がAutolayoutの符号化を簡略化するために発売した抽象言語である.

    /*
     format ：VFL  
     opts ：    
     metrics ：VFL          
     views ：VFL        
     */
+ (NSArray<__kindof nslayoutconstraint=""> *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary<NSString *,id> *)metrics views:(NSDictionary<NSString *,id> *)views;

@{@"redV" : redV}はNSDictionaryOfVariableBindings(redV)に等しい

NSDictionary *views =

NSDictionaryOfVariableBindings(blueView, redView);

NSArray *conts2 =

[NSLayoutConstraint constraintsWithVisualFormat:

@"V:[blueView(==blueHeight)]-margin-|" options:0 metrics:

@{@"blueHeight" : @40, @"margin" : @20} views:views];

制約フォーマットの説明:
水平方向H:垂直方向V:Views[view]SuperView|リレーションシップ>=,=,<=空間,ギャップ-優先度@value
3.1 VFL部分構文:
H:|-100-[redV(200)]-|
水平方向距離左100、幅200
V:|-200-[redV(64)]-|
垂直方向上部200、高さ64
H:[redV(72)]-12-[blueV(50)]
水平方向redV幅72、blueV幅50、それらの間の間隔12
H:[redV(>=60@700)]
水平方向redV幅が60以上、優先度が700(最大1000)
V:[redBox]-[yellowBox(==redBox)]
垂直方向には、まずredBoxがあり、その下にはredBoxの高さに等しいyellowBoxがあります.
H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|
水平方向では、Findは親viewの左端からデフォルト間隔幅、その後はFindNext距離Find間隔のデフォルト幅である.その後は幅が20以上のFindFieldで、FindNextおよび親viewの右端との間隔はデフォルトの幅です.(縦線"|"はsuperviewのエッジを表す)
3.2 VFLの構文

標準間隔:[button]-[textField]

幅拘束:[button(>=50)]

親ビューとの関係:|-50-[purpleBox]-50-|

垂直レイアウト:V:[topField]-10-[bottomField]

Flush Views:[maroonView][buleView]

ウェイト:[button(100@20)]

等幅:[button(=button 2)]

Multiple Predicates:[flexibleButton(>=70,<=100)]

注意事項
この文字列を作成するときは、*H:とV:は毎回1つ使用されます.*ビュー変数名は、[view]などの角カッコに表示されます.*文字列の順序は、上から下へ、左から右へ*ビュー間隔で-10-などの数値定数で表示されます.*|親ビューを表示
3.3 Auto Layoutを使用する際の注意点

Autoresizing Masksを無効にしてください.AutoLayoutを使用する必要があるビューごとにs t e t r a n s l a t e s t o u r esizingMaskIntoConstraints:NO

を呼び出す必要があります.

VFL文にスペースと>を含めることはできません.

レイアウト原理は、外向的にレイアウトされ、最初に画面サイズが表示され、さらに1層1層内側に各要素のサイズが決定されます.

ビューを削除するときにremoveConstraintとremoveConstraintsを直接使用する場合は、ビューがサポートしていない制約を削除できないため、viewにその制約が含まれていることに注意してください(サードパーティライブラリを使用する場合は特に注意してください).これを解決する方法は、コンストレイントを追加するときにローカル変数で保存し、削除するときに削除と以前のものを比較し、タグを設定する方法もあります.constraint.identifier=@「What you want to call」です.

3.4レイアウト制約規則
レイアウト制約を表すルールは、次の表のように簡単な数学用語を使用できます.
を選択します.
説明
値
ツールバーの
ビュー位置
NSLayoutAttributeLeft, NSLayoutAttributeRight, NSLayoutAttributeTop, NSLayoutAttributeBottom
ツールバーの
ビューの前面と背面
NSLayoutAttributeLeading, NSLayoutAttributeTrailing
ツールバーの
ビューの幅と高さ
NSLayoutAttributeWidth, NSLayoutAttributeHeight
ツールバーの
ビューの中心
NSLayoutAttributeCenterX, NSLayoutAttributeCenterY
ツールバーの
ビューのベースライン、ビューの下部の上に文字を置く場所
NSLayoutAttributeBaseline
ツールバーの
別の制約との関係で属性が使用されていない場合に使用できるプレースホルダ
NSLayoutAttributeNotAnAttribute
関係
属性を等式と不等式で相互に関連付けることを許可
NSLayoutRelationLessThanOrEqual, NSLayoutRelationEqual, NSLayoutRelationGreaterThanOrEqual
数学演算
各コンストレイントの乗数と加算定数
CGFloat値
3.5 Viewの変更によって呼び出されるメソッド

frame.originはlayoutSubviews

を使わない

frame.sizeを変更するとsuperVIewのlayoutSubviews呼び出しと自分のviewのlayoutSubviewsメソッド

bounds.originとbounds.sizeはsuperViewと自分のviewのlayoutSubviewsメソッド

を呼び出す
3.6 VFLの例:

- (void)testVFL {
    UIView *redV = [[UIView alloc] init];
    redV.backgroundColor = [UIColor redColor];
    redV.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redV];

    UIView *blueV = [[UIView alloc] init];
    blueV.backgroundColor = [UIColor blueColor];
    blueV.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueV];
    /*
     format ：VFL  
     opts ：    
     metrics ：VFL          
     views ：VFL        
     */
    //     redV      20
    NSArray *cons1 = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[redV]-20-|" options:0 metrics:nil views:@{@"redV":redV}];
    [self.view addConstraints:cons1];

    //    redV     100, redV    64, blueV    redV 100   , blueV     redV
    NSArray *cons2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-margin-[redV(64)]-margin-[blueV(==redV)]" options:NSLayoutFormatAlignAllRight metrics:@{@"margin" : @100} views:NSDictionaryOfVariableBindings(redV,blueV)];
    [self.view addConstraints:cons2];

    NSLayoutConstraint *cons = [NSLayoutConstraint constraintWithItem:blueV attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:redV attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0];
    [self.view addConstraint:cons];
}

実行結果:
ここでは、XWAutolayoutDemo In GithubにDemoがオープンソースであることを示します.

extコードジェネレータ

ValueStackとContentMap