한라인에 TextView가 2개 붙어 있을때 앞에 ellipsize 옵션적용

BSpindroid·2022년 1월 6일
1

콘스트레인트

목록 보기
1/2
post-thumbnail

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

profile
Android 신입 개발자를 향해!

1개의 댓글

comment-user-thumbnail
2022년 1월 6일

아.... 다 작성해서 출간하기 버튼만 누르면되는데 링크 잘못 클릭해서 페이지 이동되서 다시돌아오니 마치면서 부분이 저장이 안되있으니 사람이 화가나는건 어쩔수 없네요...

답글 달기