[iOS] iPhone 해상도별 기기대응을 좀 더 쉽게 해보자
Closed this issue · 0 comments
jane1choi commented
하나의 디바이스를 기준으로 디자인된 뷰가 다른 해상도의 디바이스에서도 최적화되도록 해주려면
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