2014-11-05 2 views
2

Я использую Masonry для создания ограничений автоопределения в коде.Autolayout/masonry center несколько видов

Это то, что я до сих пор:

top

Используя следующий код:

- (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); 
    }]; 
} 

Теперь я хочу, чтобы центрировать метки вертикально, например, так:

centered

My подходы до сих пор не удались. Любая идея, как достичь этого с автозапуском/масонством?

- EDIT

Использование представлений распорных как 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); 
    }]; 
} 

ответ

9

Часто при использовании автоматической раскладки, я считаю, что я должен добавить дополнительные представления «распорка» для достижения макета я хочу. См красные цветные представления в примере ниже:

Example of adding spacer views to centre content

После того, как у вас есть макет, который вы хотите, вы можете установить точку на скрытый. Обычно ограничения, которые вам понадобятся для вашего спейсерного представления (в данном случае), будут следующими:

  • Верхнее и нижнее пространство для смежного вида (или супервизора), установленного на ноль.
  • Равные высоты.
  • Фиксированная ширина.
  • Центрированный горизонтально в контейнере.

Значок с равными высотами, очевидно, является ключом к получению содержимого по центру!

+0

У меня есть работающий сейчас с распорками. Я не был уверен, что это был рекомендованный подход, но затем я увидел, что документация Apple делает то же самое. –

Смежные вопросы