Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set different font sizes for different devices using Xcode Storyboard?

I want to set different font sizes for iPhone 5, iPhone 6 Plus, iPhone 7 Plus and iPhone X using Xcode Storyboard.

Can anyone offer any advice?

Example is shown in the image where i was stuck.

like image 320
jeetendra_coder Avatar asked Mar 15 '18 09:03

jeetendra_coder


People also ask

How do you change the font size on a storyboard?

Change Font And Size Of UILabel In Storyboard To change the font or the size of a UILabel in a Storyboard or . XIB file, open it in the interface builder. Select the label and then open up the Attribute Inspector (CMD + Option + 5). Select the button on the font box and then you can change your text size or font.

How do I change the font of text in Xcode?

Press xcode->preferences. select fonts and colors. select ANY font in the list and press cmd+a (select all fonts) select font size for all editor fonts at the bottom of the window.

How do I change the label size in Xcode?

You can set the Minimum Font Scale or size in Storyboard/Xib when you set it up in IB under the Attributes inspector. I prefer scale, as it is better at fitting longer text on iPhone 4/5/iPod touches.


2 Answers

Use Size-Class and add size variation for fonts from Attribute Inspector of Label property.

Here are different possible variations, you can set with Size class:

enter image description here

enter image description here

Try this:

enter image description here

enter image description here

Here is (result) preview of font-size variation, in iPhone and iPad

enter image description here

Update

The result you are expecting, may not be possible using IB (Storyboard) but you can try it with following programmatic solution:

extension UIDevice {
    
    
    enum DeviceType: String {
        case iPhone4_4S = "iPhone 4 or iPhone 4S"
        case iPhones_5_5s_5c_SE = "iPhone 5, iPhone 5s, iPhone 5c or iPhone SE"
        case iPhones_6_6s_7_8 = "iPhone 6, iPhone 6S, iPhone 7 or iPhone 8"
        case iPhones_6Plus_6sPlus_7Plus_8Plus = "iPhone 6 Plus, iPhone 6S Plus, iPhone 7 Plus or iPhone 8 Plus"
        case iPhoneX = "iPhone X"
        case unknown = "iPadOrUnknown"
    }
    
    var deviceType: DeviceType {
        switch UIScreen.main.nativeBounds.height {
        case 960:
            return .iPhone4_4S
        case 1136:
            return .iPhones_5_5s_5c_SE
        case 1334:
            return .iPhones_6_6s_7_8
        case 1920, 2208:
            return .iPhones_6Plus_6sPlus_7Plus_8Plus
        case 2436:
            return .iPhoneX
        default:
            return .unknown
        }
    }
}


// Get device type (with help of above extension) and assign font size accordingly.
let label = UILabel()

let deviceType = UIDevice.current.deviceType

switch deviceType {
    
case .iPhone4_4S:
    label.font = UIFont.systemFont(ofSize: 10)
    
case .iPhones_5_5s_5c_SE:
    label.font = UIFont.systemFont(ofSize: 12)
    
case .iPhones_6_6s_7_8:
    label.font = UIFont.systemFont(ofSize: 14)
    
case .iPhones_6Plus_6sPlus_7Plus_8Plus:
    label.font = UIFont.systemFont(ofSize: 16)
    
case .iPhoneX:
    label.font = UIFont.systemFont(ofSize: 18)
    
default:
    print("iPad or Unkown device")
    label.font = UIFont.systemFont(ofSize: 20)

}
like image 133
Krunal Avatar answered Oct 18 '22 12:10

Krunal


Note: This is not a straightforward answer. However, this can be achieved based on the constraints.

If you are using autolayout, you can have the font scale automatically through storyboards. In the Attributes inspector for UILabel, there is an Autoshrink section where you can set the Minimum Font Size or Minimum Font Scale. So, as your label resizes itself through constraints, it will also scale down your fonts to fit.enter image description here

like image 40
Shivakumar Avatar answered Oct 18 '22 13:10

Shivakumar