CODEWITHSUNDEEP
swiftuistring-concatenation
Dan
Dan

Reputation: 311

Is it possible to add an in-line button within a Text()?

trying to achieve something like tinder's Terms and Conditions, however i cannot figure it out how to make the Terms and Privacy Policy Clickable in swift UI

Terms and conditions Text view screenshot

By creating an account or logging in, you agree to our Terms and Privacy Policy

var body: some View {
        Text(Constants.privacyText)
        .applyCustomLabelTextProperties(size: size, kerning: 2)
        .foregroundColor(color)
//        .lineLimit(2)
        +
        Text(" ")
        +
        Text(Constants.terms).underline()
            .foregroundColor(color)
//            .onTapGesture {
//                print("test")
//            }
        +
        Text(" and ")
            .foregroundColor(color)
        +
        Text(Constants.privacyPolicy).underline()
            .foregroundColor(color)
    }
}

Tried to make a clickable .onTapGesture applied on a Text() and also tried to add a button and concatenate it in the text, no success either.

Upvotes: 10

Views: 8278

Answers (4)

Lukasz C.
Lukasz C.

Reputation: 128

In your case, you can simply use markdown in Text:

Text(try! AttributedString(markdown: "Please, agree to our [Terms and Conditions](https://apple.com)."))

This is the result:

iOS screen with markdown text

Upvotes: 2

Anwar Saiah
Anwar Saiah

Reputation: 175

Problem is when you have a dynamic text, a whole paragraph that should have a tappable image or text in the middle, not always in the same place. let us suppose you have a text that is imported dynamically and put in a location on a view. And you want to hi light a single word of interest and make tappable to give meaning or something. I have not yet found away to do this in SwiftUI.

let firstHalfOfParagraph = Text($importedStringBeforeWord)
let secondHalfOfParagraph = Text($importedStringAfterWord) 
let word = Text($importedWord)
return firstHalfOfParagraph + word.onTapGesture{print("action")} + secondHalfOfParagraph

This never works because word is now AnyView not Text, and it cannot be concatenated with Text! Hence the dilemma.

Upvotes: -2

Zeona
Zeona

Reputation: 454

It's already too late, but if this helps someone then I am glad :)

Try this,

var body: some View {
        VStack {
            Text("By creating an account you agree to our ")
            HStack {
                Button(action: { }){ Text("Terms").underline() }
                Text(" and ")
                Button(action: { }){ Text("Privacy Policy").underline()}
            }
        }
    }

Result:

enter image description here

Upvotes: 11

dot3
dot3

Reputation: 1216

A simple approach:

 Text("By creating an account you agree to our ")
 Button(action: { self.openPrivacyPage()}){ Text("Privacy Policy")}
  .buttonStyle(BorderlessButtonStyle())

You can further style the text and button with font sizes/types etc. Use HStack to keep on same line.

Which results in:

text with inline

Upvotes: 0

Related Questions