3

Let's say I want to use a different font, different font sizes, and a different color scheme for my app, and let's say I want to use Interface Builder.

I want to be able to style all these in one place, instead of say going to each label on Interface Builder and changing its font, color, etc.

What is the most common way to achieve this?

I know you can set these things up in code, but then I can't see the changes in Interface Builder?

I'm pretty new to all this, coming from a web development background, and I might be trying to force my previous knowledge onto this, but having to change these all one by one is a maintenance nightmare, and I can't seem to find any easy way to create custom styles directly in Interface Builder.

The only way I can think of is subclassing each of these views, such as label, button, etc., creating XIBs for each, and making them @IBDesignable. Is this the way to go? It feels like it's just an unnecessary amount of work, for something simple.

hattenn
  • 4,371
  • 9
  • 41
  • 80
  • Have a look at UIAppearance, as this may help you. Here is a good tutorial to get you started: https://www.raywenderlich.com/108766/uiappearance-tutorial. I provided an answer to this question as an alternative, where you set the styling in code - however you would need to use IBDesignable: http://stackoverflow.com/questions/35501816/effective-ui-styling-for-ios-app – totiDev Apr 10 '17 at 09:01
  • 1
    @totiG, thanks! I saw that tutorial, but when I make those changes in UIAppearance, will IB automatically update? – hattenn Apr 10 '17 at 09:05
  • Create custom styled components, make them designable and use them in IB. Declare your theme using color and font constants with logical names, e.g borderColor, not darkGreenColor. Use color assets if possible. – Sulthan Mar 23 '18 at 07:01

1 Answers1

1

The Apple-provided way of globally styling an app is through the UIAppearance API: https://developer.apple.com/documentation/uikit/uiappearance

This does have the advantage of not requiring you to set the same properties over and over on multiple instances of, for example, a UILabel. However, it does not allow you to preview styling in Interface Builder (as you would like to do) and can be tricky or impractical to use when you have multiple ways you might want to style labels or buttons depending on the context of their use in the app.

The only way to preview styling or property changes for UIViews on a Storyboard is through the use of @IBDesignable as you mentioned. It can definitely take some work to set up, and even more work to tie it in with the concept of named styles and an app stylesheet.

I've been through this myself, and I created a framework that can be used inside any app to define styles and stylesheets either in Swift or via a JSON stylesheet, and then see those styles applied live on the storyboard at design time. It provides already-created @IBDesignable subclasses of UIView, UIButton, UILabel, UIImageView, UITextField and UITextView and the hooks to style all their properties via stylesheet; you can always extend it to style other types of components as well. You may find it helpful either to use directly, or as an example implementation for how @IBDesignable can be used to style via Interface Builder the way you describe: https://github.com/daniel-hall/Stylish

Daniel Hall
  • 13,457
  • 4
  • 41
  • 37