iOS9新特性之UIStackView

2017-04-04  本文已影响0人  Ariest

iOS9在布局方面的引入新控件UIStackView,即一个容器里可以包含多个控件,分为水平和竖直排列.我们只需约束这个容器即可,而不用一个个地去约束容器内的控件.而且这个容器是可以嵌套的.
如果你接触过Watch开发,UIStackView有点像其中的Group控件
一个简单的例子:

- (void)viewDidLoad {
    [super viewDidLoad];
   
    UIStackView *stackView01=[[UIStackView alloc] initWithFrame:CGRectMake(20, 260, 330, 80)];
    
    stackView01.axis=UILayoutConstraintAxisHorizontal;
    stackView01.distribution=UIStackViewDistributionFillProportionally;
    stackView01.spacing=10;
    [self.view addSubview:stackView01];
    
    UIImageView *imageView=[[UIImageView alloc] initWithFrame:CGRectMake(0,0, 80, 50)];
    imageView.image=[UIImage imageNamed:@"hotpot"];
    [stackView01 addArrangedSubview:imageView];
    
    UIStackView *stackView02=[[UIStackView alloc] initWithFrame:CGRectMake(0, 0, 260, 80)];
    stackView02.axis=UILayoutConstraintAxisVertical;
    stackView02.spacing=10;
    [stackView01 addArrangedSubview:stackView02];
    
    UILabel *titleLabel=[[UILabel alloc] init];
    titleLabel.text=@"两千斤重庆江湖菜";
    titleLabel.font=[UIFont boldSystemFontOfSize:20];
    [stackView02 addArrangedSubview:titleLabel];
    
    UIStackView *stackView03=[[UIStackView alloc] init];
    stackView03.axis=UILayoutConstraintAxisHorizontal;
    stackView03.spacing=10;
    stackView03.distribution=UIStackViewDistributionFillEqually;
    [stackView02 addArrangedSubview:stackView03];
    
    UILabel *nameLabel=[[UILabel alloc] init];
    nameLabel.textColor=[UIColor grayColor];
    nameLabel.font=[UIFont systemFontOfSize:14];
    nameLabel.text=@"五道口  川菜";
    [stackView02 addArrangedSubview:nameLabel];
    
    UIImageView *startView=[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 60, 20)];
    startView.image=[UIImage imageNamed:@"star"];
    [stackView03 addArrangedSubview:startView];
    
    UILabel *priceLabel=[[UILabel alloc] init];
    priceLabel.text=@"2271条 ¥83/人";
    priceLabel.font=[UIFont systemFontOfSize:12];
    priceLabel.textColor=[UIColor grayColor];
    [stackView03 addArrangedSubview:priceLabel];
}
上一篇 下一篇

猜你喜欢

热点阅读