스마트폰의 화면은 여타 다른 기기보다 물리적인 화면크기가 작기때문에 컨텐츠를 표시하는데 한계가 발생합니다.
따라서 기기의 화면에 적절히 표시되도록 컨텐츠의 크기를 줄이거나 최대한 간단하게 전달하려고 하죠.
예를 들어, 목록에 표시되는 제목의 경우 상세페이지에서 전부 보여주면 되기 때문에 화면을 넘어가는 텍스트는 “…” 처리하는 경우가 많죠.
하지만 상세페이지에서는 텍스트를 생략하게 된다면 이는 적절한 화면 설계가 아닙니다..! 😂 아마 앱을 조용히 닫고 말겠지요.
그렇기 때문에 iOS에서 텍스트를 줄이지 않고 전부 표시하는 방법에 대해서 알아보겠습니다.
Multiline을 0으로 설정하세요
사실 텍스트를 여러줄에 걸쳐서 표시하는 방법은 정말 간단합니다. UILabel 과 같은 요소의 numberOfLines 를 0으로 설정하면 되거든요!
0이라는 의미가 마치 아무것도 표시하지 않겠다는 의미 같지만, 실은 여러 줄에 걸쳐서 컨텐츠를 표시하겠다는 의미입니다.
간단한 예제를 통해 살펴보겠습니다. 먼저 numberOfLines 를 변경하지 않은 상태입니다 :
뷰에서 보이듯 텍스트가 요소의 너비를 넘어가게 되면 “…”으로 생략됩니다.
이는 빨간색으로 표시된 Lines 값이 기본값인 1로 설정되어 있기때문입니다. 이 값을 1, 2, 3 … 로 늘려가더라도 텍스트가 설정된 값보다 크다면 (필요한 행이 Lines 값보다 크다면) 텍스트는 전부 표시되지 않습니다.
대신 텍스트를 전부 표시해주기 위해서는 값을 0으로 설정하면됩니다. 여기서 0의 의미는 “무한대”의 의미에 가깝죠. 값을 0으로 설정해보겠습니다 :
텍스트가 전부 표시되었습니다!
위 과정을 코드 작업을 통해서도 동일한 결과를 얻을 수 있습니다. 해당 요소를 컨트롤러로 가져오고 numberOfLines 를 0으로 설정하면 됩니다 :
스크린샷처럼 numberOfLines 의 값을 0으로 설정하면 텍스트가 여러 행으로 표시됩니다.
요소의 높이를 제한하면 텍스트를 여러 행으로 표시하지 않습니다
텍스트 컨텐츠를 포함하고 있는 요소에 height constraint 값을 설정하면 numberOfLines 값이 적용되지 않습니다 :
요소의 높이에 제한을 두면 numberOfLines 나 Lines 의 값을 0으로 설정하더라도 텍스트가 여러 행에 걸쳐 표시되지 않습니다.
이처럼 numberOfLines 혹은 Lines 속성을 통해 여러 행에 걸쳐서 텍스트를 표시할 수 있으나, 기사 본문과 같이 컨텐츠의 길이가 긴 경우에는 UITexrView 를 사용하는 것이 유리합니다.
지금까지 iOS에서텍스트를 여러 행에 걸쳐 표현하는 방법에 대해 알아보았습니다. 👏
감사합니다.
