Search code examples
iosuibuttoncgaffinetransformcatransform3d

AutoLayout and Rotate Button

I am looking for following;

Rough Sketch

I have done this;

Initial UIButton setup;

self.changeButton = [UIButton buttonWithType:UIButtonTypeSystem];
[self.changeButton setTitle:@"MyText" forState:UIControlStateNormal];
[self.view addSubview:self.changeButton];

[self.changeButton mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.top.equalTo(self.view);
    make.width.equalTo(@150);
    make.height.equalTo(@50);
}];

I have tried followings;

Following both gives the same results as shown in the figure above;

self.changeButton.transform = CGAffineTransformMakeRotation(-M_PI_2);
self.changeButton.layer.transform = CATransform3DMakeRotation(-M_PI_2, 0, 0, 1);

I have also setup button initially like below and tried to rotate only TitleLabel but it just displays text as "..." - may be doesn't have enough space for TitleLabel after rotation;

[self.changeButton mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.top.equalTo(self.view);
    make.width.equalTo(@50);
    make.height.equalTo(@150);
}];

self.changeButton.titleLabel.transform = CGAffineTransformMakeRotation(-M_PI_2);

Can someone please help me to get the actual result? What am I missing?

Solution

  • I think I got it - as button gets rotated from the Center, I will need to change my initial button frame accordingly.

    Following worked;

    [self.changeButton mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(self.view).offset(-50);
    make.top.equalTo(self.view).offset(50);
    make.width.equalTo(@150);
    make.height.equalTo(@50);
}];