Norway


Topics

Topics

is a huge part of apps. Today we’ll look at one way we can polish up the text in our apps, by allowing it to naturally “flow” around objects. Let’s begin.

We’ll start with a “before” picture. Here we’ve got a basic setup with some text and an image in the top right corner. Nothing too fancy here, just a regular UITextView and UIImageView:

let imageView = UIImageView(image: UIImage(named: "steve"))

let textView = UITextView(frame: .zero)  
textView.text = "Here's to the crazy ones..."

- 280 1 - #280: Flowing Text Around Images With Exclusion Paths 🖊 – Little Bites of Cocoa – Tips and techniques for iOS and Mac development

This looks fine. But our text is needlessly narrow. It’d be great if we could make the text expand to the full width of the device. We’ll change our Text View’s layout so it does:

- 280 2 - #280: Flowing Text Around Images With Exclusion Paths 🖊 – Little Bites of Cocoa – Tips and techniques for iOS and Mac development

Well, we’re getting closer. Now we just need a way to make the text “flow” or “wrap” around our image. We’ll start by getting the frame of the image view, then we’ll create a path from it:

let imagePath = UIBezierPath(rect: imageView.frame)

Finally, we’ll set our new path as one of the exclusionPaths of our Text View’s textContainer:

textView.textContainer.exclusionPaths = [imagePath]

- 280 3 - #280: Flowing Text Around Images With Exclusion Paths 🖊 – Little Bites of Cocoa – Tips and techniques for iOS and Mac development

Success! Since exclusionPaths is an Array, we can flow text around as many shapes as we want!

- 280 4 - #280: Flowing Text Around Images With Exclusion Paths 🖊 – Little Bites of Cocoa – Tips and techniques for iOS and Mac development



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here