Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I make text labels scale the font size with different Apple product screens?

This is for ios dev with swift. I have a very simplistic layout:

link1 (not enough rep to actually post the pic)

All I'm trying to do is make sure that "results" label scales to roughly the same proportion for each different screen size. As you can see below, the difference is extremely noticeable between a 3.5 screen and an iPad screen:

link2

So I want to make the label on the iPad screen big enough to take up the same percentage of space as it does on the 3.5 screen, both vertically and horizontally. How do I go about doing this? I've been through several other tutorials/solutions, but they all teach you something different like how to change the label size, but not the font size. I tried adding the aspect ratio constraint, but that only shifts it around without changing the font size. Adding a height/width constraint also only changes the label size without the font size.

like image 598
Hien Avatar asked Feb 26 '16 05:02

Hien


2 Answers

Hien,

Here is a super post about detecting the device/screen size.

How to detect iPhone 5 (widescreen devices)?

This is my favourite suggestion on it, please click on it and thank the real author!

Add a 'New Swift File'-> AppDelegateEx.swift

add an extension to AppDelegate

import UIKit
extension AppDelegate {
    class func isIPhone5 () -> Bool{
         return max(UIScreen.mainScreen().bounds.width, UIScreen.mainScreen().bounds.height) == 568.0
    }
    class func isIPhone6 () -> Bool {
        return max(UIScreen.mainScreen().bounds.width, UIScreen.mainScreen().bounds.height) == 667.0
    }
    class func isIPhone6Plus () -> Bool {
        return max(UIScreen.mainScreen().bounds.width,     UIScreen.mainScreen().bounds.height) == 736.0
    }  
}

usage:

if AppDelegate.isIPhone5() {
    collectionViewTopConstraint.constant = 2
}else if AppDelegate.isIPhone6() {
    collectionViewTopConstraint.constant = 20
}

Combine it with setting the font in your application, which you surely must be doing right now?

variable.font = UIFont(name: "Palatino", size: 24)
like image 176
user3069232 Avatar answered Nov 15 '22 22:11

user3069232


You can actually do it in your Storyboard.

1, open File Inspector tab(First tab) on your storyboard, set both Use auto layout and Use size classes check.

2, Then you can go to your label attribute(Forth tab), you will notice that there is a "+" beside, click it to add.

3, Choose the screen size u want like, can refer "Adaptivity and Layout" and then select your font size.

Answer refer to THIS LINK, you can also take a look

like image 41
Lee Avatar answered Nov 15 '22 22:11

Lee