이미지 크기에 따라서 text의 크기가 변경되는 인증서 실습을 해보겠다.
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의 수평방향 우측, 수직방향 하단에 배치된다
이제 사이즈 인스펙터로 가서 비율을 맞춰준다. 이미지 자체의 크기가 1009:1438의 비율을 갖고 있기 때문에 Multiplier에 1009:1438을 넣어준다.
이제 Label을 추가해서 텍스트를 작성하고 Multiplier를 사용해서 Label을 이미지 비율에 맞춰서 배치하자.
이렇게 하면 완료된 거 처럼 보이지만 아래와 같이 다른 화면 크기의 디바이스에서는 Label의 위치가 달라진다.
-> 그 이유는, Label을 이미지에 맞춰서 정렬을 해지만 실제로는 해당 디바이스의 최상단 View에 맞춰서 정렬했기 때문에 위치가 달라지는 것이다.
따라서 우리는 이미지에 맞춰서 정렬을 하는 방법을 배워야한다.
top의 multiplier는 바꿔도 아무 변화가 없는데 아래의 설명을 참고하자.
y (끝점) = a (multiplier) * x (시작점) + b (constant)
즉, ?? = Y/a (b = 0) 이기 때문에 ?? 값은 반비례한다.
따라서 bottom의 multiplier를 조절해주면 Label이 올라간다.
이렇게 하면 크기가 다른 디바이스를 사용해도 동일하기 위치가 배치되었다.
이제 비율적인 부분에 대한 문제는 해결 되었는데 작은 화면을 가진 디바이스로 보면 폰트가 많이 튀어나와있다. 이제 이 문제를 해결해보자.
Label의 어트리뷰트 인스펙터에 가서 AutoShrink라는 것을 볼 수 있다.
이건 시스템에서 제공해주는 폰트 설정옵션이다.
minimum font scale: 최소 폰트의 비율 -> 현재 폰트에서 어느정도 비율까지 축소가 가능하다.
minimum font size: 최소 폰트의 크기 -? 현재 폰트에서 어느정도 크기까지 축소가 가능하다.
[AutoShrink를 하기전에 알아야할 것]
AutoShrink는 상황에 따라서 줄어들고 늘어나는 것이 아니라 줄어들기만 하기 때문에 가장 큰화면에서 가장 적당한 폰트를 찾아주는 것을 우선으로 해야한다.
가장 큰화면에서 가장 적당한 폰트를 찾기
AutoShrink - minimum font size - 15 설정
해당하는 넓이가 상황에 맞춰서 작아져야하기 때문에 해당 Label을 이미지의 비율에 맞춰야한다. 따라서 Label을 우측클릭한 상태에서 이미지에 놓고 Equal Widths를 선택해준다.
Label을 추가하고 top, bottom Edge와 Horizontal 정렬을 해주고 bottom의 multiplier를 설정해준다.
폰트의 크기도 마찬가지로 AutoShrink를 이용해준다.
위의 사진처럼 발급자 Label에 종류 Label을 좌측정렬하고 싶다면?
기존에 했던 거 처럼 위, 아래, 수평 정렬을 해준다.
왼쪽 정렬이 필요하기 때문에 가운데(X) 정렬을 지우고 발급자 Label과 종류 Label모두 클릭하고 Leading Edge를 클릭해서 정렬해준다.
만료일 Label도 마찬가지로 설정해준다.
화면에 따른 이미지의 크기는 View를 추가해서 해당 View에 맞춰서 이미지의 크기를 잡아준다.
텍스트의 위치는 해당 이미지에 맞춰서 텍스트의 비율을 잡아서 배치해준다.
텍스트 폰트의 사이즈는 해당 이미지의 Width에 맞춰서 비율을 잡아준다.