Gestures

Gestures

터치스크린은 모바일장치에서 애플리케이션과 연동하기 위한 대단한 방법이 있다. 터치스크린을 통해 사용자는 tab, drag, fling또는 slide를 통해 애플리케이션을 빠르게 액션을 수행할 수 있다. 개발자를 위해서 안드로이는 framework은 swite같은 간단한 액션을 인식할 수 있는 방법을 제공한다. 하지만 복잡한 제스쳐는 다루기 더 어렵다 간혹 개발자는 이런 복잡한 처리를 위해 추가적으로 많은 코딩을 해야 할 수도 있다.

Android 1.6(Donut)에서부터 새로운 제스쳐API를 제공한다. Android.gesture 패키지가 제공되며, 인식가능한 제스쳐들을 store, load, draw할수 있다. 이 문서는 이 패키지의 사용방법을 설명한다. 시작하기 전에 예제를 먼저 다운받아라(download the source code of the examples).

Creating a gestures library

Android 1.6이후 버전에는 Gestures Builder라는 어플이 설치된다. 이 어플로 미리정의된 당신만의 제스쳐를 만들 수 있다. 예제가 함께 제공되는데 제스쳐셋을 만들 수 있다. 아래 그림은 몇 가지 제스쳐를 추가한 이후의 화면을 보여준다.

위에서 보는바와 같이 제스쳐는 연관된 이름을 갖는다. 이름은 앱에서 각각 제스쳐를 구분하는데 사용되므로 아주 중요하다. 이름이 유일할 필요는 없다. 동일명하에 여러가지 제스쳐가 사용될 수 있다. 제스쳐빌더를 이용하여 제스쳐를 추가하거나 수정할 수 있으며 SD Card의 gestures폴더에 저장된다. 이 파일에는 제스쳐에 대한 모 든 정보가 저장되어 있으며 앱에서 /res/raw폴더에 위치시켜서 사용할 수 있다.

Loading the gestures library

이제 미리정의된 제스쳐를 갖게 되었다. 이제 앱 에서 반드시 로드하여 사용해야 한다. 몇가지 방법이 있으며 가장 간단한 방법은 GestureLibraries 클래스를 사용하는 방법이다.

mLibrary = GestureLibraries.fromRawResource(this, R.raw.spells);
if (!mLibrary.load()) {
    finish();
}

이 예에서, /res/raw/spells파일로부터 제스쳐가 로드되었다. SD card같은 다른 소스로부터 로드할 수도 있으며 앱에서 이 파일을 저장할 수도 있으며 변경할수 없더록 읽기전용으로 로드할수도 있다. 아래는 하나의 라이브러리의 구조를 다이어그램으로 보여준다.

Recognizing gestures

To start recognizing gestures in your application, all you have to do is add a GestureOverlayView to your XML layout:

앱에서 제스쳐를 인식하기 위해서 해야 하는 일은 XML layout에 GestureOverlayView을 추가하는 것 뿐이다.

<android.gesture.GestureOverlayView
    android:id="@+id/gestures"
    android:layout_width="fill_parent"
    android:layout_height="0dip"
    android:layout_weight="1.0" />

GestureOverlayView는 일반적인 android.widget package의 일부가 아니란걸 알아야 한다. 그러므로 full name을 사용해야 한다. Gesture overlay는 사용자가 제스쳐를 그리는 영역에서 동작한다. 몇가지 visual한 속성들을 변경할 수 있다. 색상이나 stroke의 두께, 그리고 액션이 진행동안의 사용되는 다양한 listener등을 변경할 수 있다. 가장 일반적으로 많이 사용되는 listener는 GestureOverlayView.OnGesturePerformedListener이다. 이 는 gesture가 그려질때마다 호출된다.

GestureOverlayView gestures = (GestureOverlayView) findViewById(R.id.gestures);
gestures.addOnGesturePerformedListener(this);

Listener가 호출될 때 GestureLibrary에 제스쳐를 인식하기 위한 질의를 보낼 수 있다. 리턴값에서 예측된값들의 리스트와 score를 얻게 될것이다. 그 리스트는 core에 역순으로 정렬되어 있다. 가장 고득점에 해당하는 gesture가 사용자가 그리길 원하는 것일것이다. 아래 코드는 첫번째 예측값의 이름을 검색하는 방법을 보여준다.

public void onGesturePerformed(GestureOverlayView overlay, Gesture gesture) {
    ArrayList<prediction> predictions = mLibrary.recognize(gesture);

    // We want at least one prediction
    if (predictions.size() > 0) {
        Prediction prediction = predictions.get(0);
        // We want at least some confidence in the result
        if (prediction.score > 1.0) {
            // Show the spell
            Toast.makeText(this, prediction.name, Toast.LENGTH_SHORT).show();
        }
    }
}

위 예제에서는 예측값이 1.0이상인경우만 고려하였다. 1.0이하는 낮은 일치율을 의미하며 위 코드가 앱에서 미리정의된 제스쳐를 인식하는 코드의 전부이다.

 

Gestures overlay

위 예제코드에서 GestureOverlayView는 LinearLayout의 안에 들어간 일반적인 뷰로 사용되었다. 하지만 이름에서 느껴지는 것 처럼, 다른뷰들의 최상위에 overlay로 사용될 수도 있다. 이는 게임이나 앱의 어느곳에서든 사용될 수 있는 유용한 방법이다. 두번째 데모인 GetstureListDemo에서는 Contacts list의 최상위에 overlay로 생성할것이다. 그리고 Getsture builder로 새로운 제스쳐를 정의할 것이다.

And here is what the XML layout looks like:

<android.gesture.GestureOverlayView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gestures"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
   
    android:gestureStrokeType="multiple"
    android:eventsInterceptionEnabled="true"
    android:orientation="vertical">

    <ListView
        android:id="@android:id/list"  
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"  />

</android.gesture.GestureOverlayView>

이 앱에서 일반적인 ListView의 최상위에 gesture의 overlay가 있다. 그리고 overlay에는 전에 본적없는 속성들이 몇가지 있다.

·         gestureStrokeType: single stroke를 사용할지 또는 multiple stroke를 사용할 지 지정한다.

·         eventsInterceptionEnabled: true로 설정하면 gesture를 처리할 수 있는 child view가 있는 경우 child로 이벤트가 전달되도록 한다. Scroll이 가능한 view가 있는경우 유용하며 scroll이벤트와 충돌이 발생하지 않는다.

·         orientation: scroll orientation을 지정한다. 여기서는 vertical로 하였으며 이것은 가로제스쳐인 action_delete는 바로 제스쳐로 인식될수 있음을 의미한다. 세로 제스쳐의 경우 반드시 가로제스쳐를 하나이상 가져야만 인식이 가능하게 된다. 다른 의미로 세로로 그려진 라인은 스크롤과 오인될 수 있으므로 이런 옵션이 필요하게 된다.

·          

Gesture library를 load하고 setup하는것과 overlay를 설정하는 것은 위에서 설명한 코드와 동일하다. 오직 한가지 다른 점은 이제 예측의 이름값을 이용하여 무엇을 했는지 알아낸다는 것이다.

public void onGesturePerformed(GestureOverlayView overlay, Gesture gesture) {
    ArrayList<Prediction> predictions = mLibrary.recognize(gesture);
    if (predictions.size() > 0 && predictions.get(0).score > 1.0) {
        String action = predictions.get(0).name;
        if ("action_add".equals(action)) {
            Toast.makeText(this, "Adding a contact", Toast.LENGTH_SHORT).show();
        } else if ("action_delete".equals(action)) {
            Toast.makeText(this, "Removing a contact", Toast.LENGTH_SHORT).show();
        } else if ("action_refresh".equals(action)) {
            Toast.makeText(this, "Reloading contacts", Toast.LENGTH_SHORT).show();
        }
    }
}

사용자는 이제 리스트의 위에 스크롤과 충돌없이 제스쳐의 입력이 가능해진다.

Overlay는 세로스크로크만 입력했을 경우 반투명한 컬러로 표시하여 유효하지 않은 제스쳐임을 표시한다.

It's your turn

당신의 앱에 제스쳐를 추가하는 것은 쉬우면서도 가치있는 추가기능이 될 수 있다. 현재는 아주 쉬운 입력만 가능하나 활용하기에 따라 여러가지 모양을 인식하게 할수도 있다.. 알아서 잘 활용하길..