CODEWITHSUNDEEP
swiftuiswift5
AtharvSalokhe
AtharvSalokhe

Reputation: 553

How to have text in shapes in SwiftUI?

I want to add text (eg. Hi) in a shape (eg. Square) in SwiftUI and make them act as a single object.

It looks like there's no direct way to add text in shape in SwiftUI.

Upvotes: 43

Views: 53288

Answers (6)

Saladel
Saladel

Reputation: 63

Using ZStack you can, but the text might spill from the rectangle so you use

.offset()

E.g:

            ZStack {
                RoundedRectangle(cornerRadius: 11)
                    .stroke(Color("color5"), lineWidth: 1)
                    .frame(width: .infinity, height: 60)
               
                VStack(alignment: .leading) {
                    Text("Adewale")
                        .multilineTextAlignment(.leading)
                        .foregroundColor(Color("color5"))
                        .offset(x: -95 )
                }
            }

use the .offset() to tweak the location of the Text view on the RoundedRectangle view.

Upvotes: 0

Wes Chua
Wes Chua

Reputation: 1096

Using Swift built-in shapes such as Capsule(), RoundedRectangle() and etc. Then, you can apply .overlay to the shape. The overlay take in any view such as text.

Example:

var body: some View {
    Capsule()
        .fill(Color.blue)
        .overlay(
            Text("Hello World")
        )
}

Outcome:

enter image description here

Upvotes: 25

Gene Loparco
Gene Loparco

Reputation: 2337

Here is what I consider to be a more comprehensive answer. This will work as of Xcode 11.5:

Text(question)
    .fixedSize(horizontal: false, vertical: true)
    .multilineTextAlignment(.center)
    .padding()
    .frame(width: 300, height: 200)
    .background(Rectangle().fill(Color.white).shadow(radius: 3))

Notes:

  • fixedSize() will let the text wrap (since .lineLimit(nil) no longer is working). You can omit it if you simply want one line of text with ellipsis
  • multilineTextAlignment() allows you to center or align the text in any way
  • padding() gives the text more space to breathe within the Rectangle()
  • frame() sets the width and height of the Text() and hence, the Rectangle(), since it is the background of the Text()
  • background() sets the shape of the Text()'s background. I have added a fill color and a drop shadow here as well

The end result of this example is the text looks to appear within a cue card like shape!

Upvotes: 43

Christina
Christina

Reputation: 41

Text("Hi")
 .frame(width: 40, height: 40, alignment: .center)
 .background(Color.black)
 .clipShape(Rectangle())

Upvotes: 4

Asperi
Asperi

Reputation: 258117

Here is, IMO, most simple approach:

Generic schema

Text(_any_of_text_)
    .background(_any_of_Shape)

eg:

Text("Hello, World!")
    .background(Rectangle().stroke())

Text("Hello, World!")
    .background(RoundedRectangle(cornerRadius: 4).stroke())

Upvotes: 30

Tobias Hesselink
Tobias Hesselink

Reputation: 1647

Create a new SwiftUI View and make use of a Z-Stack to create your goal.

struct YourCustomObject: View {

    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color.secondary)
                .frame(width: 200, height: 200)

            Text("Your desired text")
                .foregroundColor(.white)
        }
    }
}

Upvotes: 2

Related Questions