[iOS] iPhone 해상도별 기기대응을 좀 더 쉽게 해보자

[jane1choi]

하나의 디바이스를 기준으로 디자인된 뷰가 다른 해상도의 디바이스에서도 최적화되도록 해주려면
AutoLayout을 잘 설정해주는 것이 중요합니다.
다양한 아이폰 스크린 사이즈에 대응해주기 위해서는 컴포넌트들을 동일한 비율로 보이도록 해주어야 하는데요!
요 작업을 좀 더 쉽게 해봅시다..!

코드

import UIKit

/**
 - Description:
 스크린 너비 375를 기준으로 디자인이 나왔을 때 현재 기기의 스크린 사이즈에 비례하는 수치를 Return한다.
 
 - Note:
 기기별 대응에 사용하면 된다.
 ex) (size: 20.adjusted)
 */
extension CGFloat {
    var adjusted: CGFloat {
        let ratio: CGFloat = UIScreen.main.bounds.width / 375
        return self * ratio
    }
    
    var adjustedH: CGFloat {
        let ratio: CGFloat = UIScreen.main.bounds.height / 812
        return self * ratio
    }
}

extension Double {
    var adjusted: Double {
        let ratio: Double = Double(UIScreen.main.bounds.width / 375)
        return self * ratio
    }
    
    var adjustedH: Double {
        let ratio: Double = Double(UIScreen.main.bounds.height / 812)
        return self * ratio
    }
}

너비가 375, 높이가 812인 뷰를 기준으로 오토레이아웃을 적용해주고싶다면,
위와 같은 코드를 extension 파일로 빼놓고 기기대응을 쉽게 해줄 수 있습니다.

간단한 코드지만 뜯어보자면,
현재 스크린 사이즈를 기준 뷰의 너비 or 높이로 나눠주어 비율을 계산해준 다음, 현재의 값에 ratio에 할당해준 비율 값을 곱한 수치를 리턴해서
기준이 되는 뷰의 사이즈 보다 ratio 배 더 큰 디바이스에서 컴포넌트도 ratio 만큼 더 크게 보이도록 해줍니다!

사용 예시

button.contentEdgeInsets = UIEdgeInsets(inset: 5.adjusted)

containerView.layer.cornerRadius = 8.adjusted

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        if indexPath.section == 0 {
            return 84.adjustedH
        } else if indexPath.section == 1 {
            return UITableView.automaticDimension
        } else {
            return 0
        }
    }

요런 식으로 Label이나 UIView 사이즈, 간격 설정 등 다양한 곳에서 유용하게 쓸 수 있는데,

오늘 코드리뷰를 통해 CollectionView의 cell 사이즈도 이렇게 간편하게 지정해줄 수 있다는 것을 알게 되었습니다!
꿀코드다 꿀코드..!!

참고 자료: https://hanulyun.medium.com/swift-iphone-해상도별-오토레이아웃을-하는-2가지-방법-5ef1f3726d0d