What's the best way to insert another view into text in SwiftUI?
I know inserting images is simple (https://www.hackingwithswift.com/quick-start/swiftui/how-to-insert-images-into-text), but I would like to insert a custom view (in my case: circles with letters in them).
It's a bit incorrect to say you can simply insert an
Luckily, SFSymbols contains a series of symbols that are circles with letters in them. You can do something like this:
If that doesn't suit your need, you will have to approach it differently.
Or if you don't care about the image scaling with the text, then something like this will work just fine:
Be aware, though, that my
Hey, great answer from @roosterboy, just to add on: the reason that downscaling an image using the
There's a way around this, and that's
Unfortunately that will only work for single-line text. If you try it with multiline text you'll find that it creates three different columns, and it won't look the way you want anymore.
Thank you for your answers. Unfortunately, these solutions won't fully fix my problem.
What I would like to achieve is text with any View so that the View (in my case a circle with a letter in it) can be animated (the colour can change).
What I'm really looking for is the equivalent of Flutter's WidgetSpan: https://api.flutter.dev/flutter/widgets/WidgetSpan-class.html.
I know a similar solution exists for native Android where Spans can be used.
I think I'll experiment with this over the weekend and try to post my solution.
I suppoe to solve my particular case I could use UIGraphicsImageRenderer, but this might not be ideal for everyone as drawing text manually requires sizing and it would be impossible to make the drawn text wrap with other text. My requirement is to only draw a single letter, so it seems OK.
Something like this wouldn't work for you?
Even if you don't want to use SFSymbols for the letter in a circle image, you could probably accomplish the same thing by applying
But you know your code so maybe this won't work. But I wanted to throw it out there just in case.
Hmm, on second thought this doesn't seem to be animating, despite the
So do you need it to simply change color like in the first example, or actually to animate like in this example?
This one was done by setting the
But it won't work when concatenating
SPONSORED Superwall lets you build & test paywalls without shipping updates. Run experiments, offer sales, segment users, update locked features and more at the click of button. Best part? It's FREE for up to 250 conversions / mo and the Superwall team builds out 100% custom paywalls – free of charge.
This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.
All interactions here are governed by our code of conduct.
Link copied to your pasteboard.