iOS Tutorial - Easy and flexible custom fonts in the runtime without so much code !

Problem: 


You may find your app needs custom fonts but in many different ways and a lot of fonts 
fonts can change the whole user experience of an application even making the user prefer one application to another


in android for example : they have a powerful font system you can declare your custom fonts in the xml file and you can even inherit one font from another 


in This tutorial we gonna make the ios easier to customize even in the story board 


the final result you will be able to write the name of custom font in interface builder inspector to be applied in the runtime

You can type "TSRegularLight_small" in text_style field of a button or label applies to it 






#1st step: 

Create the enums to represent your font sizes, fonts and font type(bold, italic etc) 


enum UIFontSizes  : Int {
    case xSmall = 12
    case small = 14
    case large = 18
    case medium = 16
    case xLarge = 22
}

enum CustomFonts  : String {
    case latoRegular = "Lato-Regular"
    case latoHeavy = "Lato-Heavy"
}

enum UICustomColor  : String{
    case black_op87 = "DD000000"
    case black_op57 = "91000000"
    case white_op70 = "B3FFFFFF"
    case accent_purple = "D500F9"
    case white_op50 = "80FFFFFF"
    case accent_amber = "FFA000"
}

If you don't know how to import custom fonts(.tff) to your project
This link may help: 

https://developer.apple.com/documentation/uikit/text_display_and_fonts/adding_a_custom_font_to_your_app



#2nd step:

Create the textStyle class that will be the base for all your text styles
it will hold color , size , font type and give back the final font

class UICustomTextSyle
{
    var color : UIColor
    var fontSize : UIFontSizes
    var fontType : CustomFonts
    var finalFont : UIFont {
        get {
            let f =  UIFont(name: fontType.rawValue, size: CGFloat(fontSize.rawValue))
            return f!
        }
    }
    
    init( color : UIColor , fontSize : UIFontSizes, fontType : CustomFonts ) {
        self.color = color
        self.fontType = fontType
        self.fontSize = fontSize
    }
}


#3rd step: 



Create the custom class's in my case I need regular and bold 

class  TSRegular : UICustomTextSyle {
    init(size : UIFontSizes  = UIFontSizes.medium , color : UICustomColor?) {
        super.init(color: UIColor(hexString:  color?.rawValue ?? UICustomColor.black_op87.rawValue) , fontSize: size, fontType: CustomFonts.latoRegular)
    }
}



class  TSBold : UICustomTextSyle {
    init(size : UIFontSizes  = UIFontSizes.medium , color : UICustomColor?) {
        super.init(color: UIColor(hexString: color?.rawValue ??  UICustomColor.black_op87.rawValue) , fontSize: size, fontType: CustomFonts.latoHeavy)
    }
}




#4th step:

now we will create our global fonts holder , this will hold a map of all custom text styles 
across the app

class GlobalTextSyles
{
   static var textStyles : [String:UICustomTextSyle] = [

          "TSRegularDarkSec_small" : TSRegular(size: UIFontSizes.small, color: UICustomColor.black_op57),
          
          "TSBoldLightAmber_medium" : TSBold(size :UIFontSizes.medium, color: UICustomColor.accent_amber   ),

        ]
}
        




#5th step:

add extension to every UI class that you need to implement this custom font 
for example  you will need to apply this to UILabel and UIButton
using Inspectable property


extension UILabel
{
    @IBInspectable
    var customTextStyle : String
    {
        set {
            if let ts = GlobalTextSyles.textStyles[newValue] {
                textColor = ts.color
                font = ts.finalFont
            }
        }
        get {
            return "Will not Used In Code"
        }
    }
}


extension UIButton
{
    @IBInspectable
    var customTextStyle : String
    {
        set {
            if let ts = GlobalTextSyles.textStyles[newValue] {
                titleLabel?.textColor = ts.color
                titleLabel?.font = ts.finalFont
            }
        }
        get {
            return "Will not Used In Code"
        }
    }
}



Result: 




Click run and enjoy your custom fonts!


Comments

Post a Comment

Popular posts from this blog

iOS Tutorial - The standard login screen but in rx and mvvm !

Image
In this tutorial we gonna explain how mvvm can be used along with rx What is MVVM pattern? Model . (M) Model  refers either to a  domain model , which represents real state content (an object-oriented approach), or to the  data access layer , which represents content (a data-centric approach). [ citation needed ] View (V) As in the  model-view-controller  (MVC) and  model-view-presenter  (MVP) patterns, the  view  is the structure, layout, and appearance of what a user sees on the screen. [6]  It displays a representation of the model and receives the user's interaction with the view (clicks, keyboard, gestures, etc.), and it forwards the handling of these to the view model via the  data binding  (properties, event callbacks, etc.) that is defined to link the view and view model. View model (VM) The  view model  is an abstraction of the view exposing public properties and commands. Instead o...
Read more

iOS Tutorial - Twitter profile view controller

Image
Storyboard configurations: First we add the header which will contains the background image ( we will insert UIImageView by code later) with trailing, leading, top to super view with a constant of its height we should also maintain a reference to the header view in the view controller Second step:  we add the scroll view which will contain the data for example you can embed an empty view in it OR a UITableView with a fixed height to it  with the shown constraints  You will notice a red flash booms to your face from the Xcode , its normal the scroll view is a special class that have a view to scroll , interface builder don't know the actual height or width for the scroll  we will fix this now  interface builder issues:  We will add a dummy container view with constraints to scrollview we will called "Spacer"  , Wow the red flash gone ! Optional : we can add another container view tha...
Read more