在运行时具有自动布局的UIButton大小

Question

I have found several questions on this but I haven't found a solid answer on how to really do this, so I hope this isn't a duplicate just for not finding a concrete answer.

Here's my issue: I'm rewriting an old iOS app that has a tableview with custom cells, and inside each cell there's a button with a single color. The width of the button is calculated at runtime to display each button's width being different for each cell, creating what looks like a side chart.

I want/need to do the same thing but I have my project already done with Autolayouts, and I need this to work on both iPhone and iPad so removing autolayout at this point will be kind of a pain.

Because of the autolayout, I have the layout of my cell with constrains and it looks fine when all cells are the same width, but I haven't figured out a way to make it change it's width at runtime.

Here's also another issue, from the questions I have found on SO.

This is what my cell looks like at runtime:

I need this button in the middle (the blue-ish thing) to stay in the middle of the team name and the value, and the values on the right have to remain in their same position (so not moving to the left if the bar is very small).

Any suggestion on this issue would be appreciated. Thank you!

Answer 1

Give the button both centerX and centerY constraints; that will keep it in the middle. Give it a fixed width, and make an IBOutlet to that constraint so you can update its constant value in code to modify the width of the bar. The team name label should have a constraint to the left edge, and the value label should have one to the right edge; that will keep them in place on all screen sizes.

As an example, this code in the table view controller,

- (void)viewDidLoad {
    [super viewDidLoad];
    self.theData = @[@{@"name":@"One", @"value": @6094, @"width": @200}, @{@"name":@"Two", @"value": @210, @"width": @20}, @{@"name":@"Three", @"value": @7075, @"width": @250}, @{@"name":@"Four", @"value": @6648, @"width": @225}, @{@"name":@"Five", @"value": @2300, @"width": @100}, @{@"name":@"Six", @"value": @900, @"width": @50}];
    [self.tableView reloadData];
}


- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return self.theData.count;
}


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    RDTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell" forIndexPath:indexPath];
    cell.leftLabel.text = self.theData[indexPath.row][@"name"];
    cell.rightLabel.text = [NSString stringWithFormat:@"%@",  self.theData[indexPath.row][@"value"]];
    cell.widthCon.constant = [self.theData[indexPath.row][@"width"] floatValue];
    return cell;
}

Gave this result,