ios - 如何以编程方式更好地布局 UI 元素？

Question

我正在像下面的代码一样以编程方式布置用户界面。有没有更好的方法以编程方式执行此操作？例如使用设计模式或我什至不知道它存在的东西。 我正在寻找更好的方法的原因是，当我不得不更改 UI 设计或布局时，感觉真的很丑陋和困惑。

- (void) loadView
{
    [super loadVIew];

    self.view.backgroundColor = [UIColor whiteColor];

    self.title = @"ペットショップ";

    float y = 44;
    float x = 0;
    float width = self.view.frame.size.width;
    float height = width * .6;

    if (!topPictureView_) {
        topPictureView_ = [[UIImageView alloc] initWithFrame:CGRectMake(x, y, width, height)];
        topPictureView_.backgroundColor = [UIColor lightGrayColor];
        topPictureView_.image = [UIImage imageNamed:@"info_bg"];
        topPictureView_.contentMode = UIViewContentModeScaleAspectFill;
        [self.view addSubview:topPictureView_];
        [self.view sendSubviewToBack:topPictureView_];
    }

    y+=height-35;
    height = 35;

    if (!lblBranchName_) {
        lblBranchName_ = [[UILabel alloc] initWithFrame:CGRectMake(x, y, width, height  )];
        lblBranchName_.textColor = [UIColor colorWithWhite:.3 alpha:1];
        lblBranchName_.backgroundColor = [UIColor colorWithWhite:0.8 alpha:.7];
        lblBranchName_.textAlignment = NSTextAlignmentCenter;
        lblBranchName_.text = @"ペットショップ KOMATSU";
        lblBranchName_.font = [UIFont fontWithName:@"Helvetica-Bold" size:17];
        [self.view addSubview:lblBranchName_];
    }

    y+=height;
    height = 45*4;

    y+=5;

    height = 50;

    float col = self.view.frame.size.width/2;
    float margin = 5;

    btn11_ = [self createButtonWithFrame:CGRectMake(margin, y, col-margin*1.5, height) title:@"11" image:[UIImage imageNamed:@"menu"]];
    btn12_ = [self createButtonWithFrame:CGRectMake(col+margin/2, y, col-margin*1.5, height) title:@"12" image:[UIImage imageNamed:@"order"]];
    y+= height+margin;

    btn21_ = [self createButtonWithFrame:CGRectMake(margin, y, col-margin*1.5, height) title:@"21" image:[UIImage imageNamed:@"order"]];
    btn22_ = [self createButtonWithFrame:CGRectMake(col+margin/2, y, col-margin*1.5, height) title:@"22" image:[UIImage imageNamed:@"map"]];

    y+= height+margin;

    btnChat = [self createButtonWithFrame:CGRectMake(margin, y, col*2-margin*2, height) title:@"Chat" image:nil];


    y+=height+margin;
    height = self.view.frame.size.height-y;

    if (!eventBanner_) {
        eventBanner_ = [[UIImageView alloc] initWithFrame:CGRectMake(x, y, width, height )];
        eventBanner_.image = [UIImage imageNamed:@"banner"];
        [self.view addSubview:eventBanner_];
    }
}
- (UIButton *) createButtonWithFrame:(CGRect) frame title:(NSString *)title image:(UIImage *) image {
    UIButton *btn = [[UIButton alloc] initWithFrame:frame];
    [btn setTitle:title forState:UIControlStateNormal];
    [btn setTitleColor:[UIColor darkGrayColor] forState:UIControlStateNormal];
    [btn setImage:image forState:UIControlStateNormal];
    [btn setBackgroundColor:[UIColor clearColor]];
    [btn setBackgroundImage:[UIImage imageWithColor:[UIColor lightGrayColor]] forState:UIControlStateSelected];
    [[btn layer]setBorderWidth:1.0f  ];
    [[btn layer] setBorderColor:[UIColor grayColor].CGColor];
    [[btn layer] setCornerRadius:10.0f];
    btn.clipsToBounds = YES;
    [self.view addSubview:btn];
    return btn;
}

Answer 1

你应该使用NSLayoutContraint .它为您的 UI 设计提供了更加简洁和可移植的代码。如果您是新手，Ray Wenderlish 提供了一个很好的两部分 tutorial .