반응형

TextView의 문자열들을 특정 줄 수 만큼만 표시시키고, 출력되는 문자열에 줄임 표시를 넣어보자.


테스트를 위해 긴 문자열이 필요해서 장범준님의 '당신과는 천천히' 노래의 가사를 가져왔다.

장범준 - 당신과는 천천히 가사를 사용했다.

TextView에 줄 수 제한을 주지 않고 텍스트를 넣으면 모든 텍스트가 표시된다. 물론 사진에서는 layout의 가로세로 길이를 wrap content로 두어서 모든 텍스트가 보여지고 있는 상태이고, parent의 크기가 작은 곳에서 match parent였거나 지정된 임의의 크기였다면 텍스트는 가능한 만큼만 표시되고 잘렸을 것이다.

 

경우에 따라 임의의 줄만큼만 보여주고 싶거나 제한을 해야하는 때가 있다. 예로들면 뉴스 기사 내용이나 포털 검색 결과물에서 보여지는 포스팅 상세 내용들이 그렇다.

YTN 뉴스 웹사이트 (https://www.ytn.co.kr/)

이러한 효과들을 TextView에서 나타내보자.


TextView에 maxLines 속성 값을 5로 지정했다.

줄 수를 제한하는 방법은 아주 간단하다. TextView 속성 중에 'maxLines'를 넣어주고 원하는 줄 수 만큼을 넣어주면 된다. 다만 이렇게 내용이 뚝 잘려버리면 어색하기도 하고 내용이 더 있다는게 표현되지 않기 때문에 줄임 표시 '...'를 넣어주면 더 보기 좋지 않을까?


TextView에 ellipsize 속성 값을 end로 설정했다.

(텍스트가 너무 작아서 보기 힘들길래 fontsize를 20으로 설정했다.)

줄임 표시 또한 간단하다. TextView 속성 중 'ellipsize' 라는 속성을 사용하면 된다. 속성 값으로는 'end', 'none', marquee', 'middle', 'start' 총 5가지가 존재하는데 줄임 표시의 위치를 지정해준다고 생각하면 될 것 같다.


TextView의 줄 수를 제한할 수 있는 'maxLines' 속성과 텍스트 내용을 조건에 따라 줄임 표시할 수 있는 'ellipsize'를 알아보았다. 카카오톡이나 이메일 어플리케이션 등에서도 아주 빈번하게 사용되는 옵션이니 잘 기억해두면 좋을 것 같다.

반응형
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기