Xcode Live Rendering

Xcode 6 brought several interesting improvements that have been hidden under the long shadow of Swift, the new Apple’s programming language.
One of them is Live Rendering, which allows us to customize our objects at design time, looking the same in Interface Builder than at runtime. Thus, when we modify the code of our views, Interface Builder (from now on we’ll call it IB) applies the changes automatically, allowing us to see the end result without having to compile and run the application.
We may also use IB inspector to modify our properties without doing it programmatically.
Let’s see an example:
In this example we’ll use Swift, but this new tool is also available for Objective-C.
Let’s create a new project which we call ‘SolidGearLiveRendering’. We’ll use the ‘Single View Application’ template.

Then, we’ll add a UIView subclass called ‘LiveRenderingView’.

Now, we have to open our storyboard and add a UIView in the view of the default UIViewController. Open the ‘Utilities’ menu and assign the type of the class you just created in the ‘Identity Inspector’ tab.

Now comes the magic ;). At the declaration of our class we must add the prefix @IBDesignable. This attribute tells IB that our view will support design-time preview.

Create a CGFloat property called ‘borderWidth’ with the @IBInspectable prefix. This will tell IB that this property will be modifiable in the ‘Attributes Inspector’ tab.

Now we’ll check that it worked. So we open our storyboard and select the ‘Attributes Inspector’ tab in the ‘Utilities’ menu.
If we followed these steps correctly, we’ll can modify our new property from IB.

Now we’ll are going to modify the borderWidth of the view’s layer when the value of this property changes. So, when we change the value of our property from the ‘Attributes Inspector’ tab, we’ll see the result in real time.
To do this, we must add this code snippet to the declaration of our property:

And that’s it. Now we can modify the view’s border from IB, without compile and run the application again and again to choose the correct width.

Live Rendering allows you to modify from IB these property types: bool, int, float, string, localized string, rect, point, size, color, range and nil.
We’re going to see other example to check the power of Live Rendering:
Let’s create a subclass of UIImageView called ‘LiveRenderingImageView’. Open the storyboard and add a UIImageView in the UIViewController’s view. Then assign the ‘LiveRenderingImageView’ type in the ‘Identity Inspector’ and set it an image.
This is the look of our UIViewController:

We are going to use Live Rendering to apply a sepia filter to our image and see the result at design time. This way, we don’t need to compile and run our app to see if we like the result.
Create a Bool type property called ‘sepiaFilter’, add the prefix @IBInspectable to it and modify its didSet method in this way:

And that’s it all. Now, if we open the storyboard and change the value of our property we’ll see our image with a sepia filter.

If you want to see more Live Rendering examples, you can download the Liferay-Screens code, an open source project that uses Live Rendering to apply ‘themes’ to its views.

Leave a Comment

Responsable » Solidgear.
Finalidad » Gestionar los comentarios.
Legitimación » Tu consentimiento.
Destinatarios » Los datos que me facilitas estarán ubicados en los servidores SolidgearGroup dentro de la UE.
Derechos » Podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.

By completing the form you agree to the Privacy Policy

¿Necesitas una estimación?

Calcula ahora