Tiling a background image – sans code!

I recently wrote an article on a simple custom UIView class you can use to tile an image. Unfortunately – this doesn’t help us in a LaunchScreen, where custom classes are not allowed. Fortunately – there’s another way to tile an image, it’s pretty straightforward, and it doesn’t require a single line of code!

Step 1 – Bring in your image to tile into the Assets Catalog, then select Editor > Show Slicing.Screenshot 2019-11-12 14.51.47.png

Step 2 – The 1x, 2x and 3x options will disappear, and you will need to select Start Slicing.

Screenshot 2019-11-12 14.52.19.png

Step 3 – You will have the option to slice horizontally, vertically or both:

Screenshot 2019-11-12 14.52.27.png

Xcode will assume you want to slice the image in the center.

Screenshot 2019-11-12 14.52.32.png

This will stretch the center part of your image, something like this:

Screenshot 2019-11-12 15.03.47.png

This isn’t what you want!

Here are the defaults Xcode chose when I opted to slice my image: (you can find these in the Attributes Inspector for the image – and don’t forget, we’re still in the Assets Catalog)

Screenshot 2019-11-12 14.52.44.png

Step 4 – We need to set the Left, Right, Top and Bottom to 0, and the Width and Height of the Tiles to the width and height of the image. Something like this:

Screenshot 2019-11-12 14.53.05.png

Step 5 – Now, back in the Storyboard, we can add a UIImageView, and in the Attributes Inspector, make sure Content Mode is set to Scale To Fill:

Screenshot 2019-11-12 14.54.03.png

And there, like magic, the image in our image view will tile, and it works in the LaunchScreen storyboard too, hooray!

Screenshot 2019-11-12 14.54.08.png

iOS development with Swift - book: https://manning.com/books/ios-development-with-swift video course: https://www.manning.com/livevideo/ios-development-with-swift-lv

Tagged with: ,
Posted in Swift

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: