Styling Views on iOS

What if I say you can use styles in iOS?

Yes, we can steal some features from Android for iOS.

Font family, size, text color, background color, background image .. Selecting all style attributes from Interface Builder over and over again can be a pain in the ass.

So, how can we do this? What are the benefits of using styles in iOS?

One day, your boss, your client or even you “MAY” want to change design of a part of your iOS app or even whole application. Your red buttons now should be green and non-bordered.

One day, Apple “MAY” show up with different font family on new iOS version and you can’t use this system font as default, but you realise some and big part of your labels, buttons are set from Interface Builder as system.

One day, you “MAY” realise that you don’t know how many different button styles, font sizes you’ve used on screen but you have to report or make a presentation about your style guideline.

One day, you “MAY” want to decrease your design effort. You have to use reusability more in design.

One days can be differentiated like above. So, how can we do this styling work?

Ingredients

• iOS8 SDK or greater
• @IBDesignable
• @IBInspectable
• NSDictionary ([String : Any])
• Subclassing UI elements (UIView, UIButton, UILabel, UIImageView and so on..)

IBDesignable and IBInspectable

IBDesignable and IBInspectable come with Xcode 6 and iOS8. You can set variables of your custom views in Interface Builder, by defining them as IBInspectable on your IBDesignable class. Following types support IBInspectable.

• Int
• Bool
• String
• CGFloat
• Double
• CGPoint
• CGSize
• CGRect
• UIColor
• UIImage

Styling UI Elements

For styling UI elements such as UIView, UIButton, UILabel etc, first thing you should do is to make subclasses which have power of IBDesignable  and IBInspectable. Thus, we can add custom style attribute to our custom UI Element and set custom style name in Interface Builder.

Lets talk with code. Following code, we have SGLabel which is a sub class of UILabel and we define this class as IBDesignable class. And we give a IBInspectable variable to store style name. By implementing didSet of customStyle variable, we say Xcode to refresh SGLabel style each and every time of changes on customStyle (style name of our label). Our SGCustomStyleUtils util class reaches the information about our style by its name and applies attributes which this style has, to our label.

import UIKit

@IBDesignable class SGLabel: UILabel {
    @IBInspectable var customStyle : String?{
        didSet{
            SGCustomStyleUtils.applyCustomStyle(self, style: self.customStyle)
        }
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()
        SGCustomStyleUtils.applyCustomStyle(self, style: self.customStyle)
    }
}

Next thing is to implement a style sheet to store your custom styles. An NSDictionary is functional to store this static information about styles. UIFont, UIColor, NSTextAlignment, UIImage… All attributes about our styles are statics anyway. So, it’s a good way to have a Singleton style class which will store our style list in a dictionary.

Here it is, our CustomStyleDefinitions singleton class which have the list of all our styles. You can expand your style list as your demand.

Next thing is to write an util which implies your styles attributes to your sub class instance.

For our label, it will be following function which implies three attributes of UILabel and of course you can expand these attributes as you wish.

Now, your are ready to test your SGLabel class. In Interface Builder, drag and drop a UILabel, set Custom Class name as SGLabel and Attributes Inspector tab, you will see “Custom Style” attribute. Set your style name and Sit back to watch the magic happens!

Interface Builder, you can see your styles are applied to your ui elements.

You can find SGCustomStyleViews project on Github. All questions and contributions are supported 🙂 Enjoy the code, enjoy your custom styles !