Swiftui: How Do Style Text View with Different Font and Colour on String Subranges

SwifUI: How to have different text (size + color) in a SwiftUI Text string and not cause line breaking oddities on maximum accessibility sizes

It can be used markdown, like

Text("I agree with [Terms & Use](link1) and [Privacy Policy](link2)")
  .foregroundColor(.gray) // << for main text
  .tint(.green)    // << your color for active text

For such action links handling see my other answer https://stackoverflow.com/a/72798487/12299030

Making parts of text bold in SwiftUI

iOS 15+ (Swift 5.5 +)

SwiftUI has built-in support for rendering Markdown.

It is GitHub flavored markdown. AttributedString converts both inline and block styles. SwiftUI renders inline styles (but not images at this time). We use the fantastic cmark-gfm library to parse the markdown string. - SwiftUI Frameworks Engineer - developer.apple.com

See more:

What is Markdown?

---

Use double asterisks (**) arroud the characters that you want to make bold.

Text("**CO**rona**V**irus **D**isease of 20**19**")

Use underscore (_) arround the charachters you want to make italic.

Text("Is this text _emphasized_?")

String variable

Use init(_ value: String)

Creates a localized string key from the given string value.

let bold = "This text is **bold**"
Text(.init(bold))

String interpolation

Use init(_ value: String)

Creates a localized string key from the given string value.

let bold = "Bold"
Text(.init("This text is **\(bold)**"))

Attributed text

Use init(_ attributedContent: AttributedString)

Creates a text view that displays styled attributed content.

let markdownText = try! AttributedString(markdown: "This text is **bold**")
Text(markdownText)

See also:

init(_ attributedContent: AttributedString) - https://developer.apple.com

Can you colour a range of text views in a grid 15x15 with a colour and another with a different one?

I got this to work. Take a look. I encountered lots of warnings about compiler couldn't finish in reasonable time, which lead to modifications like putting the row in a separate function.

struct CustomTextBorder: ViewModifier {
    let row: Int
    let col: Int
    
    // the modifier applied to each tile of the board
    func body(content: Content) -> some View {
        return
            RoundedRectangle(cornerRadius: 5)
            .stroke(lineWidth: 2)
            .foregroundColor(.blue)
            .background(Color(self.colorFor(row: row, col: col)))
            .frame(width: 22, height: 22)
            .overlay(
                content
                .font(Font.custom("Courier", size: 14))
                .foregroundColor(.black)
            )
    }
    
    func colorFor(row: Int, col: Int) -> UIColor {
        let greens = [3,11,36,38,45,52,59,92,96,98,102,108,116,122,126,128,132,165,172,179,186,188,213,221]
        let reds = [0,7,14,105,119,210,217,224]
        let blues = [16,28,32,42,48,56,64,70,154,160,168,176,182,192,196,208]
        let purples = [20,24,76,80,64,88,136,140,144,148,200,204]
        
        let box = row * 15 + col
        
        if greens.contains(box) {
            return .green
        } else if reds.contains(box) {
            return .red
        } else if blues.contains(box) {
            return .blue
        } else if purples.contains(box) {
            return .purple
        } else {
            return .white
        }
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            ForEach(0..<15) { row in
                self.boxRow(row: row)
            }
        }
    }
    
    func boxRow(row: Int) -> some View {
        HStack(spacing: 0) {
            ForEach(0..<15) { col in
                Text(String(row * 15 + col))
                    .modifier(CustomTextBorder(row: row, col: col))
                    .onTapGesture {
                        print("\(row * 15 + col) was tapped")}
            }
        }
    }
    
}

---

Related Topics