CODEWITHSUNDEEP
iosobjective-ctextuibuttonvertical-alignment
ArQangel
ArQangel

Reputation: 65

Vertical text in a Horizontal UIButton

I'm using a vertical UIButton in a portrait app (Just a normal button that is of width 60 and Height 160)

I want to put the label Vetically down the button instead of across it.

When I use the following code to rotate the label

    [workPackageButton.titleLabel setTransform:CGAffineTransformMakeRotation(M_PI / 2)];

It rotates the label but the length seems to be constrained by the original width, so I get the ... abreviation in the middle. Is there an easy way round this?

Upvotes: 2

Views: 2281

Answers (5)

adeline_t
adeline_t

Reputation: 13

I add the same problem, for buttons in stack view So I needed something dynamic

for Swift 4.2

class VerticalButton: UIButton {

    override func titleRect(forContentRect bounds: CGRect) -> CGRect {
        var frame: CGRect = super.titleRect(forContentRect: bounds)

        frame.origin.y = 0
        frame.size.height = bounds.size.height

        return frame
    }
}

extension UILabel {
    @IBInspectable
    var rotation: Int {
        get {
            return 0
        } set {
            let radians = CGFloat(CGFloat(Double.pi) * CGFloat(newValue) / CGFloat(180.0))
            self.transform = CGAffineTransform(rotationAngle: radians)
        }
    }
}

and

    let button = VerticalButton.init(type: UIButton.ButtonType.custom)
    button.titleLabel?.textAlignment = .center
    button.titleLabel?.rotation = -90

Upvotes: 1

Andi
Andi

Reputation: 1

For an easy way round do the following settings for the button in the Attributes inspector:

  • Type: Custom
  • Title: Attributed

Next, select left/middle/right or justified alignment. Do not use 'Align Natural'.

Now

[workPackageButton.titleLabel setTransform:CGAffineTransformMakeRotation(M_PI / 2)];

works as expected with the label not being abreviated (but always being center aligned ...).

Tested with XCode 6.3.

Upvotes: 0

Matt
Matt

Reputation: 4550

I know this is an old thread, but another way to do this is to subclass the button and specify a square size for the button label.

@interface RotatingButton : UIButton

@end


@implementation RotatingButton

- (CGRect) titleRectForContentRect:(CGRect)bounds {
    CGRect frame = [super titleRectForContentRect:bounds];

    frame.origin.y -= (frame.size.width - frame.size.height) / 2;
    frame.size.height = frame.size.width;

    return frame;
}

@end

The label of any RotatingButton created in code or on Storyboard can be rotated without being truncated.

[button.titleLabel setTransform:CGAffineTransformMakeRotation(M_PI / 2)];

Upvotes: 1

Nookaraju
Nookaraju

Reputation: 1668

You can add a Label on button and rotate the label as below:

UILabel *lbl= [[UILabel alloc] initWithFrame:CGRectMake(button.frame.size.width*.3, button.frame.size.height*.5, button.frame.size.width,button.frame.size.height)];
lbl.transform = CGAffineTransformMakeRotation(M_PI / 2);
lbl.textColor =[UIColor whiteColor];
lbl.backgroundColor =[UIColor clearColor];
[button addSubview:lbl];

Upvotes: 4

Ian L
Ian L

Reputation: 5591

I've never done this, but have you tried creating the button as a horizontal button (160w x 60h) then rotating the whole button?

Upvotes: 0

Related Questions