case DragEvent.ACTION_DRAG_LOCATION:
    if(v instanceof BrunchEditTopLayout) {
        mScrollView.smoothScrollBy(0, -SCROLL_AMOUNT);
    }
    else if(v instanceof BrunchEditToolbarLayout)
    {
        mScrollView.smoothScrollBy(0, SCROLL_AMOUNT);
    }

제목/소제목/내용이 들어가는 ScrollView 의 구조를 좀 더 살펴보자.

ScrollView 는 무조건 한개의 View를 하위에 가져야 한다. 우리는 LinearLayout을 한개 갖고 있다.

<LinearLayout
android:id="@+id/ll_scroll_body"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:orientation="vertical"/>

자 이녀석은 orientation 이 vertical 이며, 이제부터 글쓰기에 필요한 다양한 View들이 붙을 예정이다.

기본적으로 텍스트 편집을 위한 EditText View 3개(제목/소제목/본문한개)를 가지고 시작한다.

그리고, 사진첨부를 위한 View / 지도첨부 View / 구분선 View / 스티커 View 등등... 브런치에서 제공되는 각종 요소가 작가의 입력에 의해 추가적으로 붙게 될 예정이다.

각종 요소들은 독립적인 View들로 구성되어 있으며, 작가의 입력때 마다 레고 블럭을 쌓는 것처럼 차곡차곡 쌓이게 된다.

우리는 이런 에디터방식을 블럭에디터 라고 불러왔다.

사진이나, 지도, 구분선등의 View 는 드래그앤드롭이 가능하다. 이 아이들이 이동되어져야 할 곳의 View 에 DragListener 가 존재해야한다.

이를 위해서 브런치 에디터엔 각 요소 View 사이사이에 BrunchEditLayoutEmpty 라는 것을 넣어놨다.

이 녀석은 각각의 에디팅 View의 드롭을 받게 되며, 드롭이 완료되면 ScrollView 의 LinearLayout 에서의 순서 변경을 처리하게 된다.

case DragEvent.ACTION_DROP:
     if(mMovingLayout instanceof BrunchEditLayoutImage) {
     // 이미지 드랍됨
     ...
     }
     else if(mMovingLayout instanceof BrunchEditLayoutLine) {
     // 라인 드랍됨
     ...
    }
    ...
    reOrderIndex(); // 드래그앤드롭 완료후 View의 순서 재조정
break;

에디터에서 각 에디팅 요소 View의 위아래 이동은 이처럼 구현이 된다.

한가지 더 필요한게 있는데, 글자입력을 받는 EditText 에서는 엔터(줄바꿈) 입력할 때 마다 그것을 분리한다.

그러니까, 한줄 쓰고 엔터를 입력할 경우 이 View는 2개의 EditText가 된다. 엔터가 들어간 문단 사이사이에는 다른 요소의 드래그를 받을 수 있다는 얘기이다.

그리고, 사진의 경우 한 블럭에 3개까지 배치가 되는데 이 녀석의 경우에도 DragListener 를 갖고 있다.

이녀석의 설명은 나중에 따로 한번 설명을 해 보겠다.

p.s.

추가적으로 EditText 는 자체적으로 셀렉션 후에, 롱클릭으로 드래그앤드롭이 기본으로 제공되어져있다.

개발초기에 이것때문에 삽질을 좀 많이 했다 ㅡ.ㅡ;; 유의해야 한다.

keyword