[Auto Layout] 실습편 - Dynamic Font

iOSoo·2022년 3월 13일
0

이미지 크기에 따라서 text의 크기가 변경되는 인증서 실습을 해보겠다.

[잘못된 방법의 예시 - 비율 문제]

  1. image View를 화면에 놓고 인증이미지를 선택해준다.
  1. cmd + = 을 눌러서 실제 이미지의 크기를 화면에 만들어주고 leading, trailing을 각 20씩 잡아주고 vertical정렬을 해준다.

Content Mode에 대해서

  • scaleToFill: 이미지의 높이와 너비가 ImageView의 크기와 동일하게 늘어난다.

  • AspectFit: 이미지의 가장 긴 부분(height or width)이 ImageView와 일치하도록 늘어난다. (이미지 왜곡x)

  • AspectFill: 이미지의 가장 짧은 부분(height or width)이 ImageView와 일치하도록 늘어난다. (이미지 왜곡x)

  • center: 이미지가 이미지의 크기는 유지하면서 ImageView의 중앙에 배치된다.

  • redraw: ImageView의 크기를 꽉채우기 위해서 비율이 늘어난다.

  • top: 이미지가 ImageView의 수직방향 상단, 수평방향 중앙에 배치된다.

  • bottom: 이미지가 ImageView의 수직방향 하단, 수평방향 중앙에 배치된다.

  • left: 이미지가 ImageView의 수평방향 좌측, 수직방향 중앙에 배치된다.

  • right: 이미지가 ImageView의 수평방향 우측, 수직방향 중앙에 배치된다.

  • topLeft: 이미지가 ImageView의 수평방향 좌측, 수직방향 상단에 배치된다.

  • topRight: 이미지가 ImageView의 수평방향 좌측, 수직방향 하단에 배치된다

  • bottomLeft: 이미지가 ImageView의 수평방향 좌측, 수직방향 하단에 배치된다

  • bottomRight: 이미지가 ImageView의 수평방향 우측, 수직방향 하단에 배치된다

  1. 현재 Height가 문제가 있기 때문에 이미지 자치의 비율을 맞춰주어야한다. Constraints에서 Aspect Ratio를 클릭해준다.

  1. 이제 사이즈 인스펙터로 가서 비율을 맞춰준다. 이미지 자체의 크기가 1009:1438의 비율을 갖고 있기 때문에 Multiplier에 1009:1438을 넣어준다.

  2. 이제 Label을 추가해서 텍스트를 작성하고 Multiplier를 사용해서 Label을 이미지 비율에 맞춰서 배치하자.

이렇게 하면 완료된 거 처럼 보이지만 아래와 같이 다른 화면 크기의 디바이스에서는 Label의 위치가 달라진다.

-> 그 이유는, Label을 이미지에 맞춰서 정렬을 해지만 실제로는 해당 디바이스의 최상단 View에 맞춰서 정렬했기 때문에 위치가 달라지는 것이다.

따라서 우리는 이미지에 맞춰서 정렬을 하는 방법을 배워야한다.

[올바른 예시]

  1. ImageView를 이용해서 이미지를 화면에 놓고 Embed in으로 ImageView를 View로 감싸준다.


  1. Label을 해당 View의 비율에 맞춰서 배치하기 위해서 Constraint를 잡아주자. View의 leading, trailing을 각 20씩 잡아주고 vertical정렬을 해주고 View내부의 ImageView의 4방향 모두 0으로 Constraints를 잡아준다.

  1. Constraints에서 Aspect Ratio를 클릭해주고, 미지 자체의 크기가 1009:1438의 비율을 갖고 있기 때문에 Multiplier에 1009:1438을 넣어준다.

  1. 이미지와 Label을 모두 선택하고 top, bottom Edge와 Horizontal 정렬을 해주고 bottom의 multiplier를 설정해준다.

top의 multiplier는 바꿔도 아무 변화가 없는데 아래의 설명을 참고하자.

y (끝점) = a (multiplier) * x (시작점) + b (constant)

  • top: ?? = a * 0 + b 이기 떄문에 어떤 값을 넣어도 0이다.
    반면에 bottom은
  • bottom: 이미 정해진 Y = a * ?? + b

즉, ?? = Y/a (b = 0) 이기 때문에 ?? 값은 반비례한다.



따라서 bottom의 multiplier를 조절해주면 Label이 올라간다.

이렇게 하면 크기가 다른 디바이스를 사용해도 동일하기 위치가 배치되었다.

[폰트의 문제]

이제 비율적인 부분에 대한 문제는 해결 되었는데 작은 화면을 가진 디바이스로 보면 폰트가 많이 튀어나와있다. 이제 이 문제를 해결해보자.

Label의 어트리뷰트 인스펙터에 가서 AutoShrink라는 것을 볼 수 있다.

이건 시스템에서 제공해주는 폰트 설정옵션이다.

  • minimum font scale: 최소 폰트의 비율 -> 현재 폰트에서 어느정도 비율까지 축소가 가능하다.

  • minimum font size: 최소 폰트의 크기 -? 현재 폰트에서 어느정도 크기까지 축소가 가능하다.

[AutoShrink를 하기전에 알아야할 것]
AutoShrink는 상황에 따라서 줄어들고 늘어나는 것이 아니라 줄어들기만 하기 때문에 가장 큰화면에서 가장 적당한 폰트를 찾아주는 것을 우선으로 해야한다.

  1. 가장 큰화면에서 가장 적당한 폰트를 찾기

  2. AutoShrink - minimum font size - 15 설정

  3. 해당하는 넓이가 상황에 맞춰서 작아져야하기 때문에 해당 Label을 이미지의 비율에 맞춰야한다. 따라서 Label을 우측클릭한 상태에서 이미지에 놓고 Equal Widths를 선택해준다.

  1. 이제 Label의 Width를 이미지의 Width와 바꿔야하기 때문에 사이즈 인스펙터에서 Equal Width의 Multiplier를 바꾼다.

  1. 나머지 Lable도 추가해서 적용해보자.
  • 이름

Label을 추가하고 top, bottom Edge와 Horizontal 정렬을 해주고 bottom의 multiplier를 설정해준다.

폰트의 크기도 마찬가지로 AutoShrink를 이용해준다.

[텍스트 좌측정렬]

위의 사진처럼 발급자 Label에 종류 Label을 좌측정렬하고 싶다면?

  1. 기존에 했던 거 처럼 위, 아래, 수평 정렬을 해준다.

  2. 왼쪽 정렬이 필요하기 때문에 가운데(X) 정렬을 지우고 발급자 Label과 종류 Label모두 클릭하고 Leading Edge를 클릭해서 정렬해준다.

만료일 Label도 마찬가지로 설정해준다.


요약

  1. 화면에 따른 이미지의 크기는 View를 추가해서 해당 View에 맞춰서 이미지의 크기를 잡아준다.

  2. 텍스트의 위치는 해당 이미지에 맞춰서 텍스트의 비율을 잡아서 배치해준다.

  3. 텍스트 폰트의 사이즈는 해당 이미지의 Width에 맞춰서 비율을 잡아준다.


profile
애플을 좋아하는 비전공생

0개의 댓글