12

How can you rotate Text, Button and other design controlls of SwiftUI by 90 degrees using SwiftUI?

I am intentionally modeling my question as a SwiftUI version of this one: How can you rotate text for UIButton and UILabel in Swift?

Current output:

Current output

Expected output:

enter image description here

E_net4
  • 27,810
  • 13
  • 101
  • 139
Hitesh Surani
  • 12,733
  • 6
  • 54
  • 65

2 Answers2

19

Use any one of the .rotationEffect() methods to rotate any View clockwise, including Button and Text.

For example, this rotates Text about its origin (the center of its frame):

Text("Turtle Rock")
.rotationEffect(Angle(degrees: 90)))

Use the overloaded method with an anchor argument to rotate around a different point.

For example, this rotates Text about the bottom left point of its frame:

Text("Turtle Rock")
.rotationEffect(Angle(degrees: 90), anchor: .bottomLeading)

You can also use radians for rotation:

Text("Turtle Rock")
.rotationEffect(radians: Double.pi / 2)
RPatel99
  • 7,448
  • 2
  • 37
  • 45
  • Thanks a lot. Worked as expected. – Hitesh Surani Jun 07 '19 at 13:16
  • Quick note since I just stumbled upon this: your first example should be `Text("Turtle Rock").rotationEffect(Angle(degrees: 90))` – Evan Mar 24 '20 at 04:11
  • Is it possible to rotate each individual character in the string without rotating the whole string? – lochiwei Oct 14 '20 at 11:37
  • 1
    @lochiwei I don't think there's a built in way, but you could easily create your own view that does it. It could just have a string as a parameter, and then iterate over the letters of the string with a `ForEach` inside an `HStack`, and rotate the individual `Text`s for each letter. – RPatel99 Dec 16 '20 at 06:16
0

To do any kind of (complex) rotation, use 3D as .rotation3DEffect(.degrees(45), axis: (x: 0.5, y: 0, z: 0)) (that would be StarWars credits effect). These two should be equivalent: Text("Turtle Rock").rotationEffect(Angle(degrees: 90))) and Text("Turtle Rock").rotation3DEffect(.degrees(90), axis: (x: 0, y: 0, z: 1))

Pedro Gonzalez
  • 1,429
  • 2
  • 19
  • 30