한라인에 TextView가 2개 붙어 있을때 앞에 ellipsize 옵션적용
1.문제상황
텍스트뷰의 글자가 길어질 경우에 ellipsize 옵션을 사용하여 글자가 텍스트뷰 영역에 다 노출할 수 없을때 앞/뒤 말줄임 또는 흐르게 할 수 있습니다.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".main"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!"
android:maxLines="1"
android:ellipsize="end"
android:textColor="@android:color/holo_red_light"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
- 속성 설명
android:fillViewport="true" // 남아있는 공백을 자식 뷰의 높이만큼 채운다
android:maxLines="1" // 출력되는 글자를 1줄로 제한
android:ellipsize="end" // 출력이 제한되면 ...으로 표시
한개의 텍스트뷰만 표현할땐 문제가 없지만 2개 이상의 텍스트뷰가 겹쳐있을때는 여러 문제가 발생합니다
다음 그림을 살펴봅시다!
2.해결방법
<TextView
android:id="@+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!Hello World!Hello World!Hello World!"
android:ellipsize="end"
android:textColor="@android:color/holo_red_light"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="@+id/tv2"/>
<TextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요"
android:ellipsize="end"
android:textColor="@android:color/holo_blue_bright"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@+id/tv1"/>

위와같이 작성하게 되면 1번째 말줄임은 정상적으로 작동하지만 텍스트뷰 영역이 뷰 밖으로 나가에 됩니다.
영역이 벗어나지 않도록 하려면 넓이를 0dp로 바꾸면 되지만 그렇게 한다면 각 텍스트뷰가 전체뷰를 반으로 나눠서 갖는 상태이기 때문에 원하는 방식대로 동작하지 않습니다 ㅠ.ㅠ

-1)뒤에 텍스트뷰를 줄일때
1번택스트를 wrap으로 고치고 2번텍스트를 0dp로 주게 되면 2번텍스트가 나머지 영역을 가지게 되므로 어렵지않게 표현할수 있습니다.

-2)앞에 텍스트뷰를 줄일때
1번텍스트뷰를 줄이고 싶다면 몇가지 설정을 해주어야 합니다
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".main"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello WorldWorld!Hello World!Hello World!"
android:ellipsize="end"
android:maxLines="1"
android:textColor="@android:color/holo_red_light"
app:layout_constrainedWidth="true"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="@+id/tv2"/>
<TextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_chainStyle="packed"
android:text="안녕하세요"
android:ellipsize="end"
android:maxLines="1"
android:textColor="@android:color/holo_blue_bright"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@+id/tv1"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

위 사진과 같이 올바르게 1번택스트가 늘어나도 텍스트뷰의 영역이 넘쳐는 오류가 발생하지 않네요!
위 속성에서 3가지 주요한 속성이 있습니다
app:layout_constrainedWidth="true" // ConstraintLayout 에서 리니어레이아웃에서 weight가 적용이 되게 해주는 속성입니다
app:layout_constraintHorizontal_bias="0" // 값이 0~1사이에서 조정가능합니다 0.5보다 클수록 오른쪽, 작을수록 왼쪽으로 치우치게 배치됨
app:layout_constraintHorizontal_chainStyle="packed" // horizontal로 딱 붙게하는 chain연결을 한다
마치면서...
내용을 붙여넣어서 실행이 되서 정상적으로 표현이 된다면 속성을 하나씩 지워가면서 이 속성이 어떤 동작을하는지 알아보시면 학습에 더 도움이 될거예요!
2번째글을 작성하면서 아직 부족한 부분이 많다고 생각합니다 위 글에대한 질문오류지적 댓글은 언제나 환영합니다:) 위글을 보고 이해가 되지않으시는 분은 아래 링크를 참조해주세요;)
저의 콘스트레인트 기본 글- https://velog.io/@kbs95123/Constraintlayout%EC%A0%9C%EC%95%BD-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83
다른 참조할만한글
https://medium.com/@futureofdev/android-constraintlayout-%EC%89%BD%EA%B2%8C-%EC%95%8C%EC%95%84%EA%B0%80%EC%9E%90-62d2ded79c17
ㅇ
Author And Source
이 문제에 관하여(한라인에 TextView가 2개 붙어 있을때 앞에 ellipsize 옵션적용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@kbs95123/한라인에-TextView가-2개-붙어-있을때-앞에-ellipsize-옵션적용
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<TextView
android:id="@+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!Hello World!Hello World!Hello World!"
android:ellipsize="end"
android:textColor="@android:color/holo_red_light"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="@+id/tv2"/>
<TextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요"
android:ellipsize="end"
android:textColor="@android:color/holo_blue_bright"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@+id/tv1"/>
위와같이 작성하게 되면 1번째 말줄임은 정상적으로 작동하지만 텍스트뷰 영역이 뷰 밖으로 나가에 됩니다.
영역이 벗어나지 않도록 하려면 넓이를 0dp로 바꾸면 되지만 그렇게 한다면 각 텍스트뷰가 전체뷰를 반으로 나눠서 갖는 상태이기 때문에 원하는 방식대로 동작하지 않습니다 ㅠ.ㅠ
1번택스트를 wrap으로 고치고 2번텍스트를 0dp로 주게 되면 2번텍스트가 나머지 영역을 가지게 되므로 어렵지않게 표현할수 있습니다.
1번텍스트뷰를 줄이고 싶다면 몇가지 설정을 해주어야 합니다
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".main"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello WorldWorld!Hello World!Hello World!"
android:ellipsize="end"
android:maxLines="1"
android:textColor="@android:color/holo_red_light"
app:layout_constrainedWidth="true"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="@+id/tv2"/>
<TextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_chainStyle="packed"
android:text="안녕하세요"
android:ellipsize="end"
android:maxLines="1"
android:textColor="@android:color/holo_blue_bright"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@+id/tv1"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
위 사진과 같이 올바르게 1번택스트가 늘어나도 텍스트뷰의 영역이 넘쳐는 오류가 발생하지 않네요!
위 속성에서 3가지 주요한 속성이 있습니다
app:layout_constrainedWidth="true" // ConstraintLayout 에서 리니어레이아웃에서 weight가 적용이 되게 해주는 속성입니다
app:layout_constraintHorizontal_bias="0" // 값이 0~1사이에서 조정가능합니다 0.5보다 클수록 오른쪽, 작을수록 왼쪽으로 치우치게 배치됨
app:layout_constraintHorizontal_chainStyle="packed" // horizontal로 딱 붙게하는 chain연결을 한다
마치면서...
내용을 붙여넣어서 실행이 되서 정상적으로 표현이 된다면 속성을 하나씩 지워가면서 이 속성이 어떤 동작을하는지 알아보시면 학습에 더 도움이 될거예요!
2번째글을 작성하면서 아직 부족한 부분이 많다고 생각합니다 위 글에대한 질문오류지적 댓글은 언제나 환영합니다:) 위글을 보고 이해가 되지않으시는 분은 아래 링크를 참조해주세요;)
저의 콘스트레인트 기본 글- https://velog.io/@kbs95123/Constraintlayout%EC%A0%9C%EC%95%BD-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83
다른 참조할만한글
https://medium.com/@futureofdev/android-constraintlayout-%EC%89%BD%EA%B2%8C-%EC%95%8C%EC%95%84%EA%B0%80%EC%9E%90-62d2ded79c17
ㅇ
Author And Source
이 문제에 관하여(한라인에 TextView가 2개 붙어 있을때 앞에 ellipsize 옵션적용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kbs95123/한라인에-TextView가-2개-붙어-있을때-앞에-ellipsize-옵션적용저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)