<div id="readability-page-1" class="page">by
 
 
 Jan 11. 2016
 <div><h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;브런치 에디터에 쓰인 드래그 앤 드롭 살펴보기&quot;}],&quot;size&quot;:&quot;h3&quot;}">브런치 에디터에 쓰인&nbsp;드래그 앤 드롭 살펴보기</h3>안드로이드 View 는 DragListener 를 갖을 수 있다. 아래 링크는 API가이드이다.<p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;anchor&quot;,&quot;url&quot;:&quot;http://developer.android.com/intl/ko/guide/topics/ui/drag-drop.html&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;http://developer.android.com/intl/ko/guide/topics/ui/drag-drop.html&quot;}],&quot;target&quot;:&quot;_blank&quot;}]}"><a target="_blank" href="http://developer.android.com/intl/ko/guide/topics/ui/drag-drop.html">http://developer.android.com/intl/ko/guide/topics/ui/drag-drop.html</a><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;브런치 에디터 View의 기본 구조는 위에서 아래기준으로 [상단 타이틀] + [&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;color&quot;:&quot;#2e84b6&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;ScrollView&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;] + [하단툴바] 이다.&quot;}]}">브런치 에디터 View의 기본 구조는 위에서 아래기준으로&nbsp;[상단 타이틀] + [ScrollView] + [하단툴바] 이다.<div data-app="{&quot;type&quot;:&quot;img&quot;,&quot;align&quot;:&quot;content-full&quot;,&quot;mobileAlign&quot;:&quot;full&quot;,&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/2re/image/aCrmtfmCaU3A6SpoCNWUz411wqI.png&quot;,&quot;caption&quot;:&quot;&quot;,&quot;width&quot;:&quot;1080&quot;,&quot;height&quot;:&quot;1920&quot;,&quot;originalName&quot;:&quot;Screenshot_2016-01-08-17-50-50.png&quot;}"><img src="https://t1.daumcdn.net/thumb/R1280x0/?fname=http://t1.daumcdn.net/brunch/service/user/2re/image/aCrmtfmCaU3A6SpoCNWUz411wqI.png" data-filename="Screenshot_2016-01-08-17-50-50.png"></div>여기서 [상단&nbsp;타이틀]과 [하단 툴바]는 DragListener를 갖고 있다.이 두개의 View는&nbsp;이미지의 드래깅시에&nbsp;ScrollView의 스크롤 이동을 처리한다.<blockquote data-app="{&quot;type&quot;:&quot;quotation&quot;,&quot;kind&quot;:&quot;box&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;case DragEvent.ACTION_DRAG_LOCATION:&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot; if(v instanceof BrunchEditTopLayout) {&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot; mScrollView.smoothScrollBy(0, -SCROLL_AMOUNT);&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot; }&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot; else if(v instanceof BrunchEditToolbarLayout)&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot; {&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot; mScrollView.smoothScrollBy(0, SCROLL_AMOUNT);&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot; } &quot;}]}">case DragEvent.ACTION_DRAG_LOCATION: &nbsp;&nbsp;&nbsp;&nbsp;if(v instanceof BrunchEditTopLayout) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mScrollView.smoothScrollBy(0, -SCROLL_AMOUNT); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;else if(v instanceof BrunchEditToolbarLayout) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mScrollView.smoothScrollBy(0, SCROLL_AMOUNT); &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;</blockquote>제목/소제목/내용이 들어가는 ScrollView 의 구조를 좀 더 살펴보자.ScrollView 는 무조건 한개의 View를 하위에 가져야 한다. 우리는 LinearLayout을 한개 갖고 있다.<blockquote data-app="{&quot;type&quot;:&quot;quotation&quot;,&quot;kind&quot;:&quot;box&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;\u003cLinearLayout&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;android:id\u003d\&quot;@+id/ll_scroll_body\&quot;&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;android:layout_width\u003d\&quot;match_parent\&quot;&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;android:layout_height\u003d\&quot;match_parent\&quot;&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;android:animateLayoutChanges\u003d\&quot;true\&quot;&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;android:orientation\u003d\&quot;vertical\&quot;/\u003e &quot;}]}">&lt;LinearLayout android:id="@+id/ll_scroll_body" android:layout_width="match_parent" android:layout_height="match_parent" android:animateLayoutChanges="true" android:orientation="vertical"/&gt;&nbsp;</blockquote>자 이녀석은 orientation 이 vertical 이며,&nbsp;이제부터 글쓰기에 필요한 다양한 View들이 붙을 예정이다.기본적으로 텍스트 편집을 위한 EditText View 3개(제목/소제목/본문한개)를 가지고 시작한다.<p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;그리고, 사진첨부를 위한 View / 지도첨부 View / 구분선 View / 스티커 View 등등... 브런치에서 제공되는 각종 요소가 작가의 입력에 의해 추가적으로 붙게 될 예정이다.&quot;}]}">그리고,&nbsp;사진첨부를 위한 View / 지도첨부 View / 구분선 View / 스티커&nbsp;View 등등... 브런치에서 제공되는 각종 요소가 작가의 입력에 의해 추가적으로 붙게 될 예정이다.각종 요소들은 독립적인 View들로&nbsp;구성되어 있으며, 작가의 입력때 마다 레고 블럭을 쌓는 것처럼 차곡차곡 쌓이게 된다.우리는 이런 에디터방식을 블럭에디터 라고 불러왔다.<p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;사진이나, 지도, 구분선등의 View 는 드래그앤드롭이 가능하다. 이 아이들이 이동되어져야 할 곳의 View 에 DragListener 가 존재해야한다.&quot;}]}">사진이나, 지도, 구분선등의 View 는 드래그앤드롭이 가능하다. 이 아이들이 이동되어져야 할 곳의 View 에 DragListener 가 존재해야한다.이를 위해서 브런치 에디터엔 각 요소&nbsp;View 사이사이에 BrunchEditLayoutEmpty 라는 것을 넣어놨다.<p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;이 녀석은 각각의 에디팅 View의 드롭을 받게 되며, 드롭이 완료되면 ScrollView 의 LinearLayout 에서의 순서 변경을 처리하게 된다.&quot;}]}">이 녀석은 각각의 에디팅 View의&nbsp;드롭을 받게 되며, 드롭이 완료되면 ScrollView 의 LinearLayout 에서의 순서 변경을 처리하게 된다.<blockquote data-app="{&quot;type&quot;:&quot;quotation&quot;,&quot;kind&quot;:&quot;box&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;case DragEvent.ACTION_DROP: &quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot; if(mMovingLayout instanceof BrunchEditLayoutImage) {&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot; // 이미지 드랍됨&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot; ...&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot; }&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot; else if(mMovingLayout instanceof BrunchEditLayoutLine) {&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot; // 라인 드랍됨&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot; ...&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot; }&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot; ...&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot; reOrderIndex(); // 드래그앤드롭 완료후 View의 순서 재조정 &quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;break;&quot;}]}">case DragEvent.ACTION_DROP:&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(mMovingLayout instanceof BrunchEditLayoutImage) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 이미지 드랍됨 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;... &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if(mMovingLayout instanceof BrunchEditLayoutLine) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 라인 드랍됨 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;... &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;... &nbsp;&nbsp;&nbsp;&nbsp;reOrderIndex(); // 드래그앤드롭 완료후 View의 순서 재조정&nbsp; break;</blockquote><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;에디터에서 각 에디팅 요소 View의 &quot;},{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;위아래 이동&quot;}],&quot;styleType&quot;:&quot;bold&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;은 이처럼 구현이 된다.&quot;}]}">에디터에서 각 에디팅 요소&nbsp;View의 위아래 이동은 이처럼 구현이 된다.한가지 더 필요한게 있는데, 글자입력을 받는 EditText 에서는 엔터(줄바꿈) 입력할 때 마다 그것을 분리한다.<p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;그러니까, 한줄 쓰고 엔터를 입력할 경우 이 View는 2개의 EditText가 된다. 엔터가 들어간 문단 사이사이에는 다른 요소의 드래그를 받을 수 있다는 얘기이다.&quot;}]}">그러니까, 한줄&nbsp;쓰고 엔터를 입력할 경우 이 View는 2개의 EditText가 된다. 엔터가 들어간 문단 사이사이에는 다른 요소의 드래그를 받을 수 있다는 얘기이다.그리고, 사진의 경우 한 블럭에 3개까지 배치가 되는데 이 녀석의 경우에도 DragListener 를 갖고 있다.이녀석의 설명은 나중에 따로 한번 설명을 해 보겠다.p.s.추가적으로 EditText 는 자체적으로 셀렉션 후에,&nbsp;롱클릭으로 드래그앤드롭이 기본으로 제공되어져있다.&nbsp;개발초기에 이것때문에 삽질을 좀 많이 했다 ㅡ.ㅡ;; 유의해야 한다.</div></div>

장대희

브런치 에디터에 쓰인 드래그 앤 드롭 살펴보기  안드로이드 View 는 DragListener 를 갖을 수 있다. 아래 링크는 API가이드이다. http://developer.android.com/intl/ko/guide/topics/ui/drag-drop.html  브런치 에디터 View의 기본 구조는 위에서 아래기준으로 [상단 타이틀] + [Scroll

Android Brunch Editor 살펴보기 - Drag and Drop

댓글