CODEWITHSUNDEEP
iosresponsive-designstoryboardsize
Yoohogyun
Yoohogyun

Reputation: 226

How To Add Dynamic Font Size about Multi Device in Xcode Storyboard

I added autoLayout in storyboard (w: Any, h: Any)

But because of fixed font size, The font size is same in all of devices (4, 4.7, 5.5 inch)

It looks nice in 4 inch. But in 5.5 inch, That's too small

I want to dynamically inclease and decrease UIlabel font size in any devices.

Any Ideas?

enter image description here

Upvotes: 4

Views: 7687

Answers (5)

abdallah eslah
abdallah eslah

Reputation: 209

(Dynamic Label Text Size & Dynamic Button Text Size - Extensions For Both Label & Buttons)

I've Modified Yoohogyun Answer to Fit All iPhones,iPads & Also Expected New Screen Sizes :

@IBDesignable
class UILabelDeviceClass : UILabel {

@IBInspectable var iPhoneFontSize:CGFloat = 0 {
    didSet {
        overrideFontSize(fontSize: iPhoneFontSize)
    }
}

func overrideFontSize(fontSize:CGFloat){
    let currentFontName = self.font.fontName
    var calculatedFont: UIFont?
    let bounds = UIScreen.main.bounds
    let height = bounds.size.height
    switch height {
    case 480.0: //Iphone 3,4,SE => 3.5 inch
        calculatedFont = UIFont(name: currentFontName, size: fontSize      )
        self.font = calculatedFont
        break
    case 568.0: //iphone 5, 5s => 4 inch
        calculatedFont = UIFont(name: currentFontName, size: fontSize / 0.99)
        self.font = calculatedFont
        break
    case 667.0: //iphone 6,7,8,(se 2'nd,third) 6s => 4.7 inch
        calculatedFont = UIFont(name: currentFontName, size: fontSize / 0.95)
        self.font = calculatedFont
        break
    case 736.0: //iphone 6s+ 6+ ,7+ & 8+=> 5.5 inch
        calculatedFont = UIFont(name: currentFontName, size: fontSize / 0.9)
        self.font = calculatedFont
        break
        
    case 812.0: //  iPhone x,xs,11pro,12mini & 13mini
        calculatedFont = UIFont(name: currentFontName, size: fontSize / 0.89)
        self.font = calculatedFont
        break
        
    case 844.0: //  iPhone 12 pro,12,13pro,13 & 14
        calculatedFont = UIFont(name: currentFontName, size: fontSize / 0.85)
        self.font = calculatedFont
        break
        
    case 852:   //  iPhone 14Pro,15 & 15Pro
        calculatedFont = UIFont(name: currentFontName, size: fontSize / 0.8)
        self.font = calculatedFont
        break
        
    case 896:   //  Iphone XS Max,XR,11 & 11 Pro Max
        calculatedFont = UIFont(name: currentFontName, size: fontSize / 0.79)
        self.font = calculatedFont
        break
        
    case 926:   //  Iphone 12 Pro Max,iPhone 13 Pro Max,iPhone 14 Plus
        calculatedFont = UIFont(name: currentFontName, size: fontSize / 0.75)
        self.font = calculatedFont
        break
        
    case 932:   //  iPhone 14 Pro Max,iPhone 15 Plus & iPhone 15 Pro Max
        calculatedFont = UIFont(name: currentFontName, size: fontSize / 0.7)
        self.font = calculatedFont
        break
        
    case 933...1000:    //  may be new iPhones
        calculatedFont = UIFont(name: currentFontName, size: fontSize / 0.69)
        self.font = calculatedFont
        break
        
    case 1024:  //  most of IPads
        calculatedFont = UIFont(name: currentFontName, size: fontSize / 0.65)
        self.font = calculatedFont
        break
        
    case 1080:  //  another Ipads
        calculatedFont = UIFont(name: currentFontName, size: fontSize / 0.6)
        self.font = calculatedFont
        break
        
    //  latest iPads
    case 1112,1113:
        calculatedFont = UIFont(name: currentFontName, size: fontSize / 0.59)
        self.font = calculatedFont
        break
        
    case 1180:
        calculatedFont = UIFont(name: currentFontName, size: fontSize / 0.55)
        self.font = calculatedFont
        break
        
    case 1194:
        calculatedFont = UIFont(name: currentFontName, size: fontSize / 0.5)
        self.font = calculatedFont
        break
        
    case 1366:
        calculatedFont = UIFont(name: currentFontName, size: fontSize / 0.49)
        self.font = calculatedFont
        break
        
    case 1367...1400:   //  may be new iPads
        calculatedFont = UIFont(name: currentFontName, size: fontSize / 0.45    )
        self.font = calculatedFont
        break
        
    default:
        print("not an iPhone")
        break
    }
    
   }
 }

//  for dynamic text size for all screens until IPad
@IBDesignable
class UIButtonDeviceClass : UIButton {

@IBInspectable var iPhoneFontSize:CGFloat = 0 {
    didSet {
        overrideFontSize(fontSize: iPhoneFontSize)
    }
}

func overrideFontSize(fontSize:CGFloat){
    let currentFontName = self.titleLabel?.font.fontName//  UIFont(name: "Nexa-Black", size: UIFont.labelFontSize)
    var calculatedFont: UIFont?
    let bounds = UIScreen.main.bounds
    let height = bounds.size.height
    switch height {
    case 480.0: //Iphone 3,4,SE => 3.5 inch
        calculatedFont = UIFont(name: currentFontName ?? "Nexa-Black", size: fontSize)
        self.titleLabel?.font = calculatedFont ?? UIFont.systemFont(ofSize: fontSize)
        break
    case 568.0: //iphone 5, 5s => 4 inch
        calculatedFont = UIFont(name: currentFontName ?? "Nexa-Black", size:fontSize / 0.99)
        self.titleLabel?.font = calculatedFont
        break
    case 667.0: //iphone 6,7,8,(se 2'nd,third) 6s => 4.7 inch
        calculatedFont = UIFont(name: currentFontName ?? "Nexa-Black", size:fontSize / 0.95)
        self.titleLabel?.font = calculatedFont
        break
    case 736.0: //iphone 6s+ 6+ ,7+ & 8+=> 5.5 inch
        calculatedFont = UIFont(name: currentFontName ?? "Nexa-Black", size:fontSize / 0.9)
        self.titleLabel?.font = calculatedFont
        break
        
    case 812.0: //  iPhone x,xs,11pro,12mini & 13mini
        calculatedFont = UIFont(name: currentFontName ?? "Nexa-Black", size:fontSize / 0.89)
        self.titleLabel?.font = calculatedFont
        break
        
    case 844.0: //  iPhone 12 pro,12,13pro,13 & 14
        calculatedFont = UIFont(name: currentFontName ?? "Nexa-Black", size:fontSize / 0.85)
        self.titleLabel?.font = calculatedFont
        break
        
    case 852:   //  iPhone 14Pro,15 & 15Pro
        calculatedFont = UIFont(name: currentFontName ?? "Nexa-Black", size:fontSize / 0.8)
        self.titleLabel?.font = calculatedFont
        break
        
    case 896:   //  Iphone XS Max,XR,11 & 11 Pro Max
        calculatedFont = UIFont(name: currentFontName ?? "Nexa-Black", size:fontSize / 0.79)
        self.titleLabel?.font = calculatedFont
        break
        
    case 926:   //  Iphone 12 Pro Max,iPhone 13 Pro Max,iPhone 14 Plus
        calculatedFont = UIFont(name: currentFontName ?? "Nexa-Black", size:fontSize / 0.75)
        self.titleLabel?.font = calculatedFont
        break
        
    case 932:   //  iPhone 14 Pro Max,iPhone 15 Plus & iPhone 15 Pro Max
        calculatedFont = UIFont(name: currentFontName ?? "Nexa-Black", size:fontSize / 0.7)
        self.titleLabel?.font = calculatedFont
        break
        
    case 933...1000:    //  may be new iPhones
        calculatedFont = UIFont(name: currentFontName ?? "Nexa-Black", size:fontSize / 0.69)
        self.titleLabel?.font = calculatedFont
        break
        
    case 1024:  //  most of IPads
        calculatedFont = UIFont(name: currentFontName ?? "Nexa-Black", size:fontSize / 0.65)
        self.titleLabel?.font = calculatedFont
        break
        
    case 1080:  //  another Ipads
        calculatedFont = UIFont(name: currentFontName ?? "Nexa-Black", size:fontSize / 0.6)
        self.titleLabel?.font = calculatedFont
        break
        
    //  latest iPads
    case 1112,1113:
        calculatedFont = UIFont(name: currentFontName ?? "Nexa-Black", size:fontSize / 0.59)
        self.titleLabel?.font = calculatedFont
        break
        
    case 1180:
        calculatedFont = UIFont(name: currentFontName ?? "Nexa-Black", size:fontSize / 0.55)
        self.titleLabel?.font = calculatedFont
        break
        
    case 1194:
        calculatedFont = UIFont(name: currentFontName ?? "Nexa-Black", size:fontSize / 0.5)
        self.titleLabel?.font = calculatedFont
        break
        
    case 1366:
        calculatedFont = UIFont(name: currentFontName ?? "Nexa-Black", size:fontSize / 0.49)
        self.titleLabel?.font = calculatedFont
        break
        
    case 1367...1400:   //  may be new iPads
        calculatedFont = UIFont(name: currentFontName ?? "Nexa-Black", size:fontSize / 0.45)
        self.titleLabel?.font = calculatedFont
        break
        
    default:
        print("not an iPad")
        break
    }
    
   }
}

BTW, it's going to be loaded in the storyboard

Upvotes: -1

Yoohogyun
Yoohogyun

Reputation: 226

I Found Solution

I Made one Class

class UILabelDeviceClass : UILabel {

@IBInspectable var iPhoneFontSize:CGFloat = 0 {
    didSet {
        overrideFontSize(iPhoneFontSize)
    }
}

func overrideFontSize(fontSize:CGFloat){
    let currentFontName = self.font.fontName
    var calculatedFont: UIFont?
    let bounds = UIScreen.mainScreen().bounds
    let height = bounds.size.height
    switch height {
    case 480.0: //Iphone 3,4,SE => 3.5 inch
        calculatedFont = UIFont(name: currentFontName, size: fontSize * 0.7)
        self.font = calculatedFont
        break
    case 568.0: //iphone 5, 5s => 4 inch
        calculatedFont = UIFont(name: currentFontName, size: fontSize * 0.8)
        self.font = calculatedFont
        break
    case 667.0: //iphone 6, 6s => 4.7 inch
        calculatedFont = UIFont(name: currentFontName, size: fontSize * 0.9)
        self.font = calculatedFont
        break
    case 736.0: //iphone 6s+ 6+ => 5.5 inch
        calculatedFont = UIFont(name: currentFontName, size: fontSize)
        self.font = calculatedFont
        break
    default:
        print("not an iPhone")
        break
    }

}

}

Then, Set Class

Img1

Img2

And Then, Set Value

Happy Coding!

Upvotes: 11

Sam
Sam

Reputation: 956

Check the screen size and manipulate the font size based on it:

let screenSize = UIScreen.mainScreen().bounds.size

if screenSize.height < 568 {
    //Set font size for 4
} else if screenSize.height < 568 {
    //Set font size for 5
} else if screenSize.height < 568 {
    //Set font size for 6
} else {
    //Set font size for 6+
}

UPDATE:

Extend the UILabel class to setup your label:

extension UILabel { 
    func setupLabelDynamicSize(size size:CGFloat) {
        let screenSize = UIScreen.mainScreen().bounds.size

        if screenSize.height < 568 {
            //Set self.font equal size
        } else if screenSize.height < 568 {
            //Set self.font equal size + 1
        } else if screenSize.height < 568 {
            //Set self.font equal size + 2
        } else {
            //Set self.font equal size + 3
        }
    }
}

then wherever you have a label that you want with dynamic size just call:

labelObject.setupLabelForDynamicSize(size: 14)

Upvotes: 2

Proton
Proton

Reputation: 1365

No, you can't config size class for iPhone 5.5 only. Size class can not distinguish iPhone 5, 6 vs 6Plus.

Only 1 edge case supports for iPhone 5.5 landscape only: regular width, compact height: 5.5" iPhone in Landscape

The only way you can do it is check device size in you code !

Upvotes: 0

LViet
LViet

Reputation: 113

WIth xcode 7.3, you can click add '+' in Attributes inspector to select font size each device enter image description here

Upvotes: -1

Related Questions