[Android] ImageView Scroll 가로, 세로, 대각선

ScrollView와 HorizontalScrollView를 이용해서 ImageView(화면크기를 넘어서는)를 스크롤 하려고 한다.

기본적으로 제공되는 아래와 같은 형태의 Layout으로는 가로스크롤 따로, 세로스크롤 따로 밖에 되지 않는다.

<ScrollView .. > <HorizontalScrollView ... > <ImageView ... /> </HorizontalScrollView> </ScrollView>

위와 같이 되어있는 레이아웃의 경우,

각 뷰에 대한 이벤트가 한번에 하나씩만 일어나기 때문에,

이미지뷰는 대각선으로 스크롤 되지 않는다.

이를 해결하기 위해 OnTouchListener로 이벤트를 직접 조작했다.

(horizontalscrollview, scrollview 둘중 하나에만 이벤트가 일어나도 가로챈다.)

이 방법은 

멤버변수 선언 / 메소드 구현 / 터치리스너 override / 터치리스너 등록

4단계로 이루어진다.

1. 멤버변수 선언

private static HorizontalScrollView Scroll_Horizontal; private static ScrollView Scroll_Vertical; protected static int currentX = 0; protected static int currentY = 0;

멤버변수를 선언하기 위해서는 두가지 widget이 import 되어 있어야한다.

import android.widget.HorizontalScrollView;
import android.widget.ScrollView;

HorizontalScrollView와 ScrollView는 가로 스크롤, 세로 스크롤로 사용된다.
currentX와 currentY는 화면에서 터치된 x, y 좌표의 최신 좌표로 사용된다.

2. 좌표처리 메소드 구현

public static void scrollBy(int x, int y)     {      Scroll_Horizontal.scrollBy(x, 0);      Scroll_Vertical.scrollBy(0, y);         }

scrollBy는 ScrollView의 scrollBy가 아닌 사용자정의메소드이다.
(override한 메소드가 아니라는 것)

이 메소드를 통해 이벤트 발생시, 하나의 좌표(가로, 또는 세로)만 처리하는게 아닌, 두가지 좌표(가로와 세로)를 한꺼번에 처리 할 수 있다.        

3. OnTouchListener

OnTouchListener touchHandler = new OnTouchListener()  { @Override public boolean onTouch(View v, MotionEvent event)  { switch (event.getAction()) {     case MotionEvent.ACTION_DOWN : ScrollTest.currentX = (int)event.getRawX(); ScrollTest.currentY = (int)event.getRawY(); break; case MotionEvent.ACTION_MOVE : int x2 = (int)event.getRawX(); int y2 = (int)event.getRawY(); ScrollTest.scrollBy(currentX-x2, currentY-y2); ScrollTest.currentX = x2; ScrollTest.currentY = y2; break; case MotionEvent.ACTION_UP : break; default : ScrollTest.currentX = (int)event.getRawX(); ScrollTest.currentY = (int)event.getRawY();   break;     } ScrollTest.currentX = (int)event.getRawX(); ScrollTest.currentY = (int)event.getRawY(); return false; } };

MotionEvent가 일어났을 때, 

event가 Down이면 x좌표, y좌표를 event를 통해 얻어와서 멤버변수(currentX, currentY)에 저장해 둔다, 

event가 Move이면 로컬변수(x2, y2)에 이동된 최신좌표를 저장하고,

이 두 좌표를 통해 이동한 거리를 계산해 실제 스크롤 바에 직접 입력시주는 것이다. (기존좌표-현재좌표)를 통해 처리한다.

이 처리를 static 멤버 메소드 scrollBy에 넘겨주어

두가지 스크롤 뷰를 각각 x, y에 맞게 갱신하여 준다.

4. touchListener 등록

  Scroll_Vertical.setOnTouchListener((OnTouchListener)touchHandler);
  Scroll_Horizontal.setOnTouchListener((OnTouchListener)touchHandler); 

onCreate에서 등록해주면 된다.
이렇게 사용하면 하나의 touchHandler를 통해 두가지 스크롤 모두
같은 내용을 처리 할 수 있게 된다.

화면 디스플레이 크기보다 큰 이미지를 넣고 해보면 확인 할 수 있다.

실제로 가로스크롤과 세로스크롤이 모두 한꺼번에 사용되는 걸 볼 수 있다.