UILabel with skewed text on iOS

Question

I want to make my text skewed as is in the picture. I have the required font file. How do I achieve this in Swift 3? Thanks in advance!

score 4 · Accepted Answer · edited May 23 '17 at 12:00

4

You can apply a 2D transformation to any UIView subclasss instance. If label is your UILabel, then:

label.transform = CGAffineTransform(a: 1.0, b: tan(-0.5), c: 0.0, d: 1.0, tx: 0.0, ty: 0.0)

The parameters are the values of the matrix that represents the transform. The matrix is

|  a  b  0 |
|  c  d  0 |
| tx tx  1 |

skew matrix algorithm has details on how the parameters can be set. For your skew, b is the important value.

edited May 23 '17 at 12:00

Community

1
1

answered Feb 24 '17 at 07:35

Gary Makin

3,109
1
19
27

1

maybe you wanted to say : `label.tranform = CGAffineTransform(...)` – Mr. Xcoder Feb 24 '17 at 07:46
Double clicking in Xcode and Safari give different results :) – Gary Makin Feb 24 '17 at 07:48
1

Worked like a charm! Thanks a lot! :) – Oscar Orcas Feb 24 '17 at 08:14

score 0 · Answer 2 · answered Feb 24 '17 at 07:58

Apply a transform to the UILabel. A small negative b will skew as in your image. Playground example:

let container = UIView(frame: CGRect(x: 0, y: 0, width: 400, height: 200))
let label = UILabel()

label.text = "ADDRESS"
label.sizeToFit()
label.transform = CGAffineTransform(a: 1.0, b: -0.5, c: 0, d: 1.0, tx: 0, ty: 20)

container.addSubview(label)
PlaygroundPage.current.liveView = container

container

score -2 · Answer 3 · answered Feb 24 '17 at 07:36

-2

You can try using CGAffineTransform affineTransformMakeShear() to give the required skew effect to your UIView.

answered Feb 24 '17 at 07:36

Gurdev Singh

1,996
13
11

`affineTransformMakeShear()` does not exist in the iOS SDK. – Gary Makin Feb 24 '17 at 07:40

UILabel with skewed text on iOS

3 Answers3