2

Masonryを使用して、コードで自動レイアウトの制約を作成します。

これは私がこれまでに持っているものです:

上

次のコードを使用します。

- (void)viewDidLoad {
    [super viewDidLoad];

    [self.view setBackgroundColor:[UIColor whiteColor]];

    UIView *container = [[UIView alloc] init];
    [self.view addSubview:container];

    UIView *itemContainer = [[UIView alloc] init];
    [itemContainer setBackgroundColor:[UIColor colorWithWhite:0.9 alpha:1.0]];
    [container addSubview:itemContainer];

    UIImageView *itemImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Test"]];
    [itemContainer addSubview:itemImage];

    UILabel *itemTitle = [[UILabel alloc] init];
    [itemTitle setNumberOfLines:1];
    [itemTitle setText:@"Lorem ipsum dolor sit amet."];
    [itemTitle setFont:[UIFont boldSystemFontOfSize:12]];
    [itemTitle setTextColor:[UIColor blackColor]];
    [itemContainer addSubview:itemTitle];

    UILabel *itemText = [[UILabel alloc] init];
    [itemText setNumberOfLines:2];
    [itemText setText:@"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt"];
    [itemText setTextColor:[UIColor blackColor]];
    [itemText setFont:[UIFont systemFontOfSize:10]];
    [itemContainer addSubview:itemText];

    [container makeConstraints:^(MASConstraintMaker *make) {
        UIView *topLayoutGuide = (id)self.topLayoutGuide;
        make.top.equalTo(topLayoutGuide.bottom);
        make.left.right.bottom.equalTo(self.view).insets(UIEdgeInsetsMake(10, 10, 10, 10));
    }];

    [itemContainer makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.right.equalTo(container);
        make.height.equalTo(@80);
    }];

    [itemImage makeConstraints:^(MASConstraintMaker *make) {
        make.top.bottom.left.equalTo(itemContainer);
        make.width.equalTo(itemImage.height);
    }];

    [itemTitle makeConstraints:^(MASConstraintMaker *make) {
        make.top.right.equalTo(itemContainer);
        make.left.equalTo(itemImage.right).offset(5);
    }];

    [itemText makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.equalTo(itemTitle);
        make.top.equalTo(itemTitle.bottom).offset(5);
    }];
}

次のように、ラベルを垂直方向に中央揃えにします。

中央揃え

これまでの私のアプローチは失敗しました。autolayout / Masonryでこれを達成する方法はありますか?

- 編集

chris838が提案したようなスペーサービューを使用するとうまくいきます。これは更新されたコードです:

- (void)viewDidLoad {
    [super viewDidLoad];

    [self.view setBackgroundColor:[UIColor whiteColor]];

    UIView *container = [[UIView alloc] init];
    [self.view addSubview:container];

    UIView *itemContainer = [[UIView alloc] init];
    [itemContainer setBackgroundColor:[UIColor colorWithWhite:0.9 alpha:1.0]];
    [container addSubview:itemContainer];

    UIImageView *itemImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Test"]];
    [itemContainer addSubview:itemImage];

    UIView *spacer1 = [[UIView alloc] init];
    [itemContainer addSubview:spacer1];

    UIView *spacer2 = [[UIView alloc] init];
    [itemContainer addSubview:spacer2];

    UILabel *itemTitle = [[UILabel alloc] init];
    [itemTitle setNumberOfLines:1];
    [itemTitle setText:@"Lorem ipsum dolor sit amet."];
    [itemTitle setFont:[UIFont boldSystemFontOfSize:12]];
    [itemTitle setTextColor:[UIColor blackColor]];
    [itemContainer addSubview:itemTitle];

    UILabel *itemText = [[UILabel alloc] init];
    [itemText setNumberOfLines:2];
    [itemText setText:@"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt"];
    [itemText setTextColor:[UIColor blackColor]];
    [itemText setFont:[UIFont systemFontOfSize:10]];
    [itemContainer addSubview:itemText];

    [container makeConstraints:^(MASConstraintMaker *make) {
        UIView *topLayoutGuide = (id)self.topLayoutGuide;
        make.top.equalTo(topLayoutGuide.bottom);
        make.left.right.bottom.equalTo(self.view).insets(UIEdgeInsetsMake(10, 10, 10, 10));
    }];

    [itemContainer makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.right.equalTo(container);
        make.height.equalTo(@80);
    }];

    [itemImage makeConstraints:^(MASConstraintMaker *make) {
        make.top.bottom.left.equalTo(itemContainer);
        make.width.equalTo(itemImage.height);
    }];

    [spacer1 makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(itemContainer.top);
        make.height.equalTo(spacer2);
    }];

    [itemTitle makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(spacer1.bottom);
        make.right.equalTo(itemContainer);
        make.left.equalTo(itemImage.right).offset(5);
    }];

    [itemText makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.equalTo(itemTitle);
        make.top.equalTo(itemTitle.bottom).offset(5);
        make.bottom.equalTo(spacer2.top);
    }];

    [spacer2 makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.equalTo(itemContainer.bottom);
        make.height.equalTo(spacer1);
    }];
}
4

1 に答える 1

9

自動レイアウトを使用する場合、必要なレイアウトを実現するために「スペーサー」ビューを追加する必要があることがよくあります。以下の例の赤い色のビューを参照してください。

中央のコンテンツにスペーサー ビューを追加する例

必要なレイアウトができたら、ビューを非表示に設定できます。通常、スペーサー ビュー (この場合) に必要な制約は次のとおりです。

  • 隣接するビュー (またはスーパービュー) までの上下のスペースをゼロに設定します。
  • 等高。
  • 固定幅。
  • コンテナーの水平方向の中央に配置されます。

等高ビットは明らかに、コンテンツを中央に配置するための鍵です!

于 2014-11-05T11:16:17.360 に答える