Beautify Your Data-Driven iOS App

Bring Views to Life using Sketch 3 and Swift


Introduction

Any non-trivial app involves presenting data. Sometimes, how we present data is just as important as what we present.

Now it is easier than ever to add visual appeal to your Views by using a simple layering technique.

Find a background image that you own. For best results, choose a high-resolution image. Remember, garbage in, garbage out.

Phase 1: The Design

Open Sketch 3 — http://bohemiancoding.com/sketch/ (no affiliation)

Drag your image into the Sketch canvas.

Zoom out until you can see the entire image.

Glance to the right and take down the Size (width and height) of the image.

Click R on the keyboard to add Rectangle Shape to the canvas.

Resize the Rectangle to the size of the image.

Make sure the Rectangle layer is selected and uncheck Border on the far right (Attributes) panel.

Change the Fill Color to Black and reduce the Opacity to your desired level.

Your image should look like this:

Switching to the left panel, hold down Shift and click Group to combine both layers.

You should now only see one item: A blue folder with a Slice/Knife Icon

Click the folder and on the far bottom right, click the Make Exportable (+).

Click the Export FileName Button to save the file as PNG format with a name: backgroundImage.png. (Edit by Andy Dent.)

To the Code!

Open your project in XCode — (https://itunes.apple.com/us/app/xcode/id497799835?mt=12).

Drag the image backgroundImage.png into your project. Choose Copy as an option. You can also create a folder for organization.

In the target View Controller, add a class property of type UIImageView to initialize and instantiate an ImageView.

If you have a UITableView …

Setting the imageView to the backgroundView of the tableView is nice because as the cells dequeue and scroll, your image view stays fixed.

Protip: Make sure the background color of your cells is set to UIColor.clearColor().

If you have a UIView …

For any other View, create a SubView and send it to the back:

For best results, use UIColor.whiteColor() for font color.

.ScaleAspectFill is a setting that scales the image to fill the size of the view. Some portion of the content may be clipped to fill the view’s bounds.

Protip: If you have a navigation bar, it is possible to also make the navigation bar transparent as well. I will leave that as a challenge for you should you accept it.

Done.

Connect with me on Twitter @ericguuu