EditText Scrollable

Multiline EditText

 

Title을 입력 받는 EditText와 다르게 Description는 여러 줄의 내용을 입력받을 수 있다.

하지만 EditText의 Height를 무한히 늘일 수 없기 때문에 5줄의 내용만 보여지도록 제한시켜놓았다.

 

만약 장문을 입력한다고 했을때 화면에서 보여지는 이전 내용을 수정하기 위해서는 여타 다른 에디터처럼 스크롤해서 윗부분으로 커서를 이동시킬 수 있어야한다.

 

 

에디트텍스트의 멀티라인 적용 그리고 스크롤적용 코드는 간단하다.

<EditText
    android:maxLines="5"
    android:scrollbar="vertical" />

 

두 가지 옵션값으로 간단하게 지정할 수 있다.

 

## android:lines="5" 그리고 android:maxLines="5"의 차이점.

lines="5"의 경우 EditText의 기본 높이가 5줄에 고정된다. 아무런 내용이 없을 때에도 5줄을 차지한다.
그리고 내용이 5줄을 넘어갈 경우 높이가 계속해서 늘어나게 된다.

 

maxLines="5"의 경우 내용이 없을 경우 EditText의 높이는 1이다. 하지만 내용의 줄이 늘어날 수록 높이가 늘어나는데.
최대 5줄까지 높이가 늘어난다. 5줄보다 많은 내용을 입력했을 경우 보여지는 최대 높이는 5줄크기이며 스크롤이 가능하게 된다.

# 문제점. NestedScrollView 내에 속한 EditText

위와 같이 간단한 옵션값으로 EditText의 스크롤바는 적용할 수 있지만 현재 사용하고 있는 구조에서는 스크롤이 작동하지 않았다.

 

그 이유는 NestScrollView가 EditText를 감싸고 있는 구조이기 때문이다.

<NestedScrollView
                  app:layout_behavior="@string/appbar_scrolling_view_behavior">
   <EditText/>
</NestedScrollView>

NestedScrollView가 더 외부에 위치하며 Scroll을 위한 Touch Action을 소비한다.
그러므로 EditText의 스크롤이 적용되지 않는 문제가 발생했다.

이 문제를 해결하기 위해서는 EditText가 Touch Action을 소비할 수 있도록 만들어줘야한다.

# CustomEditText 만들기

스크롤뷰 내부에서도 EditText가 Touch를 감지할 수 있도록 기능을 추가한 CustomEditText를 생성한다.

class CustomEditText extends TextInputEditText

@Override
    public boolean onTouchEvent(MotionEvent event) {
        super.onTouchEvent(event);

        getParent().requestDisallowInterceptTouchEvent(true);
        switch (event.getAction() & MotionEvent.ACTION_MASK) {
            case MotionEvent.ACTION_UP:
                getParent().requestDisallowInterceptTouchEvent(false);
                performClick();
                break;
        }

        return true;
    }

onTouchEvent 메소드를 오버라이드해서 에디트 텍스트에 대한 터치에 한에서 부모(스크롤뷰)의 Touch Event를 가로채오도록(Intercept) 구현한다.

위 방법으로 스크롤뷰 내에 위치한 EditText의 스크롤을 정상작동시키는 커스텀 에디트텍스트를 만들 수 있다.

# 느낀점

구현할수록 뷰의 계층구조가 어떻게 디자인 되어있는지가 중요한 것 같다.
그리고 스크롤뷰 등 기능이 복잡한 레이아웃이 많이 사용될수록 새로운 기능을 추가하거나 수정할때 복잡한 수정이 필요해진다.

 

UX를 위해서 반드시 필요한 지점이 아니라면 스크롤뷰의 사용을 배제하고 구현할 수 있는 방법을 찾는 것이 좋은 방법일 수 있다.

 

생각한대로 기능이 동작하지 않을때 XML를 보고 어떤 컴포넌트가 Touch Event를 가져가는지 체크해보자.

앞선 Drawer - Toolbar 관계에서도 그렇지만 유저에게 보여지는 화면은 평면적이지만
실제 동작은 계층적으로 구현된 어느 파트에서 어떤 우선순위로 동작을 수행하는지 잘 생각해보면서 개발을 진행해야겠다.