UIButton dynamic width using autolayout

Question

I am having a button which has two different text in selected state and normal state, When I change state of button programatically button is not getting resized so text is not appearing properly, which is the best way to do this with autolayout?

I know one way setting outlet to UIButton's width constraint and change it manually but I am looking for better way

http://stackoverflow.com/questions/4135032/ios-uibutton-resize-according-to-text-length — Alfa, Oct 30 '14 at 11:36
While changing the state of button- make button size large enough that string can come easily inside it but before that kindly store the centre of button in variable then use fit to size method and then again provide the same centre to button. — Alfa, Oct 30 '14 at 11:50
did you find a proper solution ? I did what I am able to make UILabel adjust width dynamically with autolayout but the same approach didn't work with UIButton — Kong Hantrakool, Aug 05 '15 at 14:05

score 4 · Answer 1 · answered Jun 27 '15 at 11:21

4

Just by telling [button invalidateIntrinsicContentSize];, it should do what you are expecting it to do.

answered Jun 27 '15 at 11:21

Srikanth

1,861
17
29

score 2 · Answer 2 · answered May 29 '20 at 12:51

An alternate way for shrinking/expanding width of UIButton using autolayout is to add a width constraint and then change the priority of width constraint to less than Content Hugging Priority and Content Compression Resistance Priority.

In case we only want to expand the button based on their title, we can set the width constraint to the minimum value and the priority of width constraint to less than Content Compression Resistance Priority but more than Content Hugging Priority.

In the above cases we only need to

btn.setTitle("SomeTitle", for: .normal)

in the code and auto layout will take care of the rest.

Attached is a screenshot

score 0 · Answer 3 · answered Oct 30 '14 at 13:09

You can use default button like this:

UIButton* button = [UIButton buttonWithType:UIButtonTypeSystem];
[button setTranslatesAutoresizingMaskIntoConstraints:NO];
[button setTitle:@"Normal" forState:UIControlStateNormal];
[button addTarget:self action:@selector(buttonTouched:) forControlEvents:UIControlEventTouchUpInside];
[button setTitle:@"Selected" forState:UIControlStateSelected];
[self.view addSubview:button];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[button]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(button)]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[button]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(button)]];

If you use custom button, then the easiest way I can think of is subclass UIButton and add your custom UILabel inside. Here is my short code of what I mean:

@interface CustomButton : UIButton
{
    NSString* _normalTitle;
    NSString* _selectedTitle;
}
@property UILabel* customLabel;

@end

@implementation CustomButton

@synthesize customLabel=_customLabel;

- (instancetype)init;
{
    self = [super init];
    if ( self ) {
    [self setBackgroundColor:[UIColor greenColor]];

    _customLabel = [UILabel new];
    [_customLabel setTextColor:[UIColor whiteColor]];
    [_customLabel setTranslatesAutoresizingMaskIntoConstraints:NO];
    [self addSubview:_customLabel];

    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[_customLabel]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_customLabel)]];
    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[_customLabel]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_customLabel)]];
}
return self;
}
- (void)setTitle:(NSString *)title forState:(UIControlState)state;
{
    if ( state == UIControlStateNormal ) {
        _normalTitle = title;
    } else if ( state == UIControlStateSelected ) {
        _selectedTitle = title;
    }
    [self setSelected:[self isSelected]];
}
- (void)setSelected:(BOOL)selected;
{
    [super setSelected:selected];
    if ( selected ) {
        [_customLabel setText:_selectedTitle];
    } else {
        [_customLabel setText:_normalTitle];
    }
}

@end

score 0 · Answer 4 · answered Oct 31 '14 at 05:19

When you create constraints assign it to variables

@property (nonatomic, strong)NSLayoutConstraint *viewConstraintTop;
 self.viewConstraintTop = [Your Constraint];//Initial state

On button tap check whether it is selected or not.Remove the constraints and reapply appropriate constraints.

[self.viewConstraintTop autoRemove];
self.viewConstraintTop = [Your Constraint];

score -2 · Answer 5 · answered Oct 30 '14 at 12:31

-2

Try this

CGSize maxSize = CGSizeMake(btn.bounds.size.width, CGFLOAT_MAX);
    CGSize textSize1 = [btn.titleLabel.text sizeWithFont:btn.titleLabel.font constrainedToSize:maxSize];

btn.frame=CGSizeMake(10,10,textSize1.width,30);

answered Oct 30 '14 at 12:31

bhavik

1,673
2
14
20

2

Generally we dont set frame in autolayout – Abhishek Oct 31 '14 at 05:37

UIButton dynamic width using autolayout

5 Answers5