[iOS] AutoLayout : Dynamic Text ( 동적 텍스트 )

1. 📌 AutoLayout : Dynamic Text 

1.0.1. 동적 텍스트 구현 방법

 

---

 

View의 위치는 수평, 수직으로 설정을 해주었고

View내 imageView의 위치를 잡아주어야 한다. 

 

꽉차게 만들기 위해, 상하좌우 여백을 0으로 설정하면

 

 

비율이 깨져서 이상하게 보일 것이다.

 

그 이유는

 

imageView의 크기에 들어가는 image를 픽셀값 그대로 가져왔기때문이다.

즉, 제약조건을 지정해주지 않아서이다.

 

 

먼저 imageView의 ContentMode를 Asfect Fit으로 설정한다.

 

 

그럼에도 아직 크기가 맞지 않는다.

 

image의 원본 크기대로 올리려면 -> 사진의 Aspect Ratio를 추가하여 사진의 원본 크기(width, height )를 비율을 설정해준다.

 

 

 

사진의 원본 크기

 

 

 

 

그럼 imageView의 크기가 해결 완료 된다.

 

 

 

Label을 추가하였는데, 이렇게만 배치하면 시뮬레이터가 달라지면 Label의 위치가 달라지게 된다.

 

위쪽 여백과 수평정렬을 설정하여도 같으므로, 

 

다른 방법인 사진의 크기에 맞게 비율이 바뀌도록 해야한다.

 

 

imageView와 Label을 같이 선택하여 

상하좌우 모두 정렬을 한다.

 

 

이후, Label의 Align Bottom to 속성의 Multipier의 비율을 설정해준다.

 

 

이렇게하면 항상 이 비율의 위치로 설정되므로, 기기가 달라져도 같은 위치에 있게 된다.

 

이후 해야 할 일은, 기기별로 폰트의 크기를 설정해주어야 한다는 것이다.

즉, 해상도가 작으면 폰트의 크기도 자동적으로 작아져야 한다는 것이다.

 

Label을 선택하고, 우측에서 

Autoshrink 를 Minimum Font Scale 혹은 Minimum Font Size로 변경한다.

=> 자동적으로 사이즈를 비율 혹은 해당 사이즈별로 변경해준다는 속성.

 

💡 Autoshrink
AutoShrink는 라벨의 최소 크기를 지정 해 줄 수 있다.
동적으로 라벨의 크기가 변화할 때 최소 이 폰트 크기는 유지해야하고 최대 크기가 바로 Font 가 되는 것이다.
그래서 폰트의 크기는 가로의 길이에 따라서 동적으로 변화하게 됩니다. 

 

 

 

 

 

Label의 trailing과 leading을 제거하고, 수평정렬을 하나만 설정해준다

-> 바뀌는 해상도만큼 크기가 변해야 하기 때문에 크기 설정을 없애는 것

 

 

 

 

 

 

 

 

Label을 우클릭하여 드래그해서 imageView에 맞추고

Aspect Ratio를 설정해주면

 

바뀌는 imageView의 크기만큼 같은 비율로 Label로 바뀌는 동적 텍스트가 완성된다.

 

 

 

홍길동 Label 도 똑같이 설정해준다면, 

시뮬레이터의 해상도에 따라 image, Label 모두 크기가 바뀌게 된다.

 

 

홍길동 Label 과

밑에 5줄의 텍스트를 쓴 Label도 똑같게 설정해준다.

 

 

Label 우측 메뉴중, Text에서 줄바꿈은 control + 엔터

 

 

 

Lines는 5줄이므로 5

Autoshrink 설정

해상도마다 크기가 변해야 하므로 -> 좌우를 뺀 상하 정렬만 설정한후, Horizontally container 정렬 사용

텍스트 크기가 다 안보일경우에 cmd + = 로 필요한 크기로 설정

Label 우클릭 -> ImageView -> Aspect ratio로 비율 같게 변화하도록 !

 

 

아이폰14 Pro Max

아이폰 SE ( 3rd )