[iOS] iOS UI Guide 개념

UI에 필요한 개념들에 대해 알아 보겠습니다.

 

Resolution(해상도)

https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

The Ultimate Guide To iPhone Resolutions

iOS, MAC등 constraint나 constant값을 줄 때의 숫자값들은 모두 포인트단위입니다.

플러스+ 종류는 다운스케일이 되어 렌더링 됩니다.(물리적인에 비율에 맞추기 위해 다운스케일 조정을 합니다.)

 

Point와 Pixel의 개념

Point

pt로 나타낸다
포인트는 절대적인값 입니다.
1인치를 72로 나눈 값이 1point라고 합니다
즉, 1pt = 1/72 inch = 약 0.3527

Pixel

px로 나타낸다
픽셀은 상대적인값 입니다.
이미지를 이루는 가장 작은 단위인 작은 점들이라고 하는데
이 작은 점들이 많은 수록 해상도가 높다고 할 수 있습니다.

 

Point와 Pixel의 관계

1pt는 1px?

Window기반과 Mac기반에 따라 다릅니다.

Window에서 9pt = 12px
Mac에서 9pt = 9px

이렇게 차이가 나는 이유는 Window에서 화면 해상도는 96dpi를 사용하지만,
Mac에서는 72dpi를 사용하기 때문입니다.
즉, 1 inch당 96개의 점이 있는점과 72개의 점이 있는것에 대한 차이점인것 입니다.

하지만 레티나가 나오고 pixel에 차이가 있습니다.

Retina 디스플레이

결과적으로 보면 레티나가 아닌 디스플레이에선 1pt = 1px가 되는데,
레티나에선 iPhoneX, 플러스+ 종류의 Device는 3x 렌더링을 하게 되는데
1pt = 9px라고 생각하고,

iPhoneX, 플러스+ 를 제외한 Device는 2x로 렌더링을 하게 되서
1pt = 4px라고 생각하시면 될것 같습니다.

 

 

좌표 시작점

UIKit을 사용할땐 좌측 상단(0,0) 기준점부터 시작
Quartz 2D를 사용하땐 좌측 하단(0,0) 기준점부터 시작

 

frame과 bounds 차이점

frame : 상위 뷰를 기준으로하는 상대값
bounds : 상위 뷰와 관계없이 자기자신을 기준으로하는 절대값

UIViewContentMode

public enum UIViewContentMode : Int {

    /* Scailing */
    case scaleToFill 
    case scaleAspectFit 
    case scaleAspectFill 
            
    /* Redrawing */        
    case redraw

    /* Positioning */       
    case center
    case top
    case bottom
    case left
    case right
    case topLeft
    case topRight
    case bottomLeft
    case bottomRight
}

Scailing

• ScaleToFill : 원본 이미지 비율에 상관 없이 ImageView의 영역에 들어가는것.
• AspectFit : 원본 이미지 비율을 유지하면서 ImageView의 영역에서 이미지를 모두 표시하는것.
• AspectFill : 원본 이미지 비율을 유지하지만 ImageView의 영역에 가득차게 표시하는데, 전체 이미지가 나오지 않고 비율을 유지하느라 짤릴 수도 있습니다.

Redrawing

• ScaleToFill과 비슷한 동작이지만 내부적으론 다른 로직이라고 합니다.
  처음으로 drawRect()가 호출되고 뷰가 렌더링됩니다. 나중에 geometry가 변경되면 drawRect()가 호출되지 않고 이미 렌더링 된 내용이 뷰를 그리기 위해 크기가 조정됩니다.
• redraw : 경계를 변경할 때마다 drawRect()가 호출되어 뷰를 다시 또 다시 렌더링합니다. 계속 설정하면 drawRect()를 계속 호출하기 때문에 속도가 느려져서 정말 필요한 이상 사용하지 않는것을 추천합니다.

Positioning