[UI] bottom-up slide view

이번에는 다음과 같이 드래그해서 view를 올리고 내리는 컨셉으로 구현해보겠습니다.

첫번째 뷰는 사용자가 드래그 할 수 있는 뷰 컨트롤 버튼 이고 두번째는 첫번째 확장 세번째는 두번째 확장입니다.

슬라이드 layout xml 파일에서 ImageView를 세개 두어 다음과 같이 컨트롤 버튼 부분과 확장 뷰 2개를 두었습니다.

이동은 다음과같이 animation을 적용하여 absolute position으로 이동하고 있습니다. yBy(0)은 현재 뷰의 위치에서 시작하는 것이고 y(...)은 도착하는 위치를 표시합니다. 

getView().clearAnimation();

getView().animate().setDuration(ANI_MOVE_DELAY)

.yBy(0)

.y(destination to move)

.setListener(new AnimatorListener() {

...

}).start();

뷰의 드래그 이동은 onTouch()에서 제어하며 ACTION_DOWN에서는 현재 뷰에서의 터치 위치와 드래그의 시작을 표시하는 플래그를 설정합니다. ACTION_MOVE에서는 터치된 위치의 움직임에 따라 view의 위치를 설정해 줍니다. ACTION_UP에서는 현재 위치가 세가지 영역 중에 어느 영역에 포함되는지를 판단하여 view의 확장 모드를 설정하게 됩니다.

또한, 뷰의 확장 모드 전환은 drag 뿐만 아니라 click이나 fling gesture로 쉽게 변경할 수 있습니다.

아래 첨부된 파일은 지금 설명한 슬라이드 뷰의 샘플 소스입니다.

test.zip