Sabtu, 04 Mei 2013

Pemrograman Android Mendeteksi MultiTouch, Two Finger Tap, Three Finger, atau Click Lebih dari Dua Jari

Akhirnya ketemu juga cara mendeteksi klik dengan banyak jari, atau disebut multitouch, dengan dua jari (two finger), three finger (tiga jari) atau lebih. Sebenarnya Android mendukung sampai 256 jari :D Tetapi kenyataannya device atau perangkat Android hanya mendukung sampai 2 jari, tetapi perangkat Android versi HoneyComb, IceCream Sandwich dan Jelly Beans kabarnya sudah mendukung hingga 4 jari. Dengan kata lain Froyo dan Gingerbread hanya mendukung 2 jari ^_^'

Oh ya, deteksi multi tap ini dimaksudkan sekaligus mendeteksi koordinat dari screen, dalam hal ini koordinat dari komponen ImageView, karena komponen ini mampu memuat gambar background misalnya gambar piano atau gitar, sehingga dengan mendeteksi koordinatnya kita tahu tombol atau senar mana pada gambar yang tersentuh.

Kita mulai saja dengan membuat Project Android Baru, kemudian ketikkan kode program berikut pada MainActivity.java :


package com.amijaya.androidmultitouch;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.Toast;

// http://cariprogram.blogspot.com
// nuramijaya@gmail.com

public class MainActivity extends Activity {
boolean satujari = true;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        ImageView imageView1 = (ImageView)findViewById(R.id.imageView1);
        imageView1.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub

}
});
        
        imageView1.setOnTouchListener(new OnTouchListener() {

@Override
public boolean onTouch(View arg0, MotionEvent arg1) {
// TODO Auto-generated method stub
int action = arg1.getAction();
//if (action == MotionEvent.ACTION_DOWN)
//{
// Toast.makeText(getApplicationContext(), "Satu Jari", Toast.LENGTH_LONG).show();
//}
float x1, y1, x2, y2, x3=0, y3=0, x4=0, y4=0;
switch(action & MotionEvent.ACTION_MASK)
{
//tidak bisa memakai ACTION_DOWN karena akan berjalan beberapa kali 
//dan berjalan lebih dahulu dari ACTION_PONTER_DOWN
//case MotionEvent.ACTION_DOWN:
// Toast.makeText(getApplicationContext(), "Satu Jari", Toast.LENGTH_LONG).show();
// break;
case MotionEvent.ACTION_POINTER_DOWN:
x1 = arg1.getX(arg1.getPointerId(0));
y1 = arg1.getY(arg1.getPointerId(0));
x2 = arg1.getX(arg1.getPointerId(1));
y2 = arg1.getY(arg1.getPointerId(1));
if (arg1.getPointerCount() >= 3)
{
x3 = arg1.getX(arg1.getPointerId(2));
y3 = arg1.getY(arg1.getPointerId(2));
}
if (arg1.getPointerCount() >= 4)
{
x3 = arg1.getX(arg1.getPointerId(3));
y3 = arg1.getY(arg1.getPointerId(3));
}
satujari = false;
Toast.makeText(getApplicationContext(), "Dua Jari Atau Lebih, x1="+x1+",y1="+y1+",x2="+x2+",y2="+y2+",x3="+x3+",y3="+y3+",x4="+x4+",y4="+y4+"", Toast.LENGTH_LONG).show();
break;
default:
if ((action & MotionEvent.ACTION_MASK) == MotionEvent.ACTION_UP)
{
if (satujari == true)
{
x1 = arg1.getX(arg1.getPointerId(0));
y1 = arg1.getY(arg1.getPointerId(0));
Toast.makeText(getApplicationContext(), "Satu Jari, x1="+x1+",y1="+y1+"", Toast.LENGTH_LONG).show();
}
satujari = true;
}
break;
}
return false;
}
});
        
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }
    
}

Kemudian pada layout activity_main.xml buat tampilan dengan xml sebagai berikut :


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher" />

</LinearLayout>

Untuk file AndroidManifest.xml tidak perlu ada perubahan :


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.amijaya.androidmultitouch"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.amijaya.androidmultitouch.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Hasilnya jika diklik dua jari atau lebih :


Jika diklik satu jari :


Project selengkapnya silakan didownload disini. Jika ada kesulitan ini cara downloadnya.

Semoga berhasil ^_^