これを VFL で表すと、次のようになります。
スーパービューの垂直スパンにまたがって、垂直方向の赤いボックスを垂直方向に均一なサイズにします。
@"V:|-[subview1]-[subview2(==subview1)]-[subview3(==subview1)]-|"
@"V:|-[subview4]-[subview5(==subview4)]-[subview6(==subview4)]-|"
同様に、スーパービューの水平スパンにまたがって、ボックスを水平方向に均一なサイズにします。
@"H:|-[subview1]-[subview4(==subview1)]-|"
@"H:|-[subview2]-[subview5(==subview2)]-|"
@"H:|-[subview3]-[subview6(==subview3)]-|"
これにより、6 つのサブビューが同じサイズになり、スーパービュー内で等間隔に配置されます。これは、自動レイアウトの利点の 1 つを示していy
ますheight
。ビュー、その兄弟、およびそれらのスーパービューの間の関係を定義するだけでよく、残りは自動レイアウトが処理します。
このパターンは、上記のように VFL を使用してプログラムで実行するか、Interface Builder で実行するかに関係なく適用されますが、うまくいけば概念を示しています。
または、UICollectionView
これらのコントロールの間隔を空けるように設計された を使用して、縦向きと横向きのレイアウトを正しく調整するように設定することもできます。
たとえば、ビューに 6 つの画像ビューを追加するには、QuartzCore.framework をプロジェクトに追加し (これを使用して角の丸い赤い画像ビューの背景を作成できます)、ヘッダーをインポートします。
#import <QuartzCore/QuartzCore.h> // and
そして、でviewDidLoad
:
NSMutableArray *subviews = [NSMutableArray array];
for (NSInteger i = 0; i < 6; i++)
{
UIImageView *subview = [[UIImageView alloc] init];
[subviews addObject:subview];
subview.layer.cornerRadius = 10.0;
subview.backgroundColor = [UIColor redColor];
subview.contentMode = UIViewContentModeCenter;
subview.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:subview];
}
NSDictionary *views = @{@"subview1": subviews[0],
@"subview2": subviews[1],
@"subview3": subviews[2],
@"subview4": subviews[3],
@"subview5": subviews[4],
@"subview6": subviews[5]};
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[subview1]-[subview2(==subview1)]-[subview3(==subview1)]-|" options:0 metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[subview4]-[subview5(==subview4)]-[subview6(==subview4)]-|" options:0 metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[subview1]-[subview4(==subview1)]-|" options:0 metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[subview2]-[subview5(==subview2)]-|" options:0 metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[subview3]-[subview6(==subview3)]-|" options:0 metrics:nil views:views]];
次に、背景が透明な PNG 画像を使用する場合、image
これらの 6 つの画像ビューのプロパティを設定し、自動レイアウトframe
で .