۱۹
آبان

جلسه ۳۸ : حرکات صفحه لمسی در اندروید

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش برنامه نویسی اندروید را دنبال می کنند. آندروید نوع خاصی از رویدادهای صفحه لمسی را ارائه می کند، که از جمله می توان به pinch ، دوبار ضربه زدن، کپی، فشار دادن طولانی و flinch اشاره کرد. این همه به عنوان gestures ( حرکات) شناخته شده است. آندروید کلاس GestureDetector را برای دریافت رویدادهای حرکتی فراهم می کند و به ما اعلام می کند که این رویدادها به حرکات مربوط می شوند یا خیر. برای استفاده از این رویدادها، شما باید یک شی از GestureDetector ایجاد کرده و یک کلاس با GestureDetector.SimpleOnGestureListener گسترش دهید.در ادامه ی مباحث این آموزش برای آشنایی با حرکات صفحه لمسی در اندروید با ما همراه باشید.

حرکات صفحه لمسی در اندروید

در این مبحث ما شما را با ساختار استفاده از حرکات صفحه لمسی در اندروید و یک مثال ساده آشنا می کنیم.

همانطور که اشاره شده ابتدا باید یک کلاس GestureDetector ایجاد کنید.

سپس می توانید سایر کلاس ها را با GestureDetector.SimpleOnGestureListener گسترش داده یا extend کنید.

ساختار کار به صورت زیر است:

مثال :

GestureDetector myG;
myG = new GestureDetector(this,new Gesture());
   
class Gesture extends GestureDetector.SimpleOnGestureListener{
   public boolean onSingleTapUp(MotionEvent ev) {
   }
   
   public void onLongPress(MotionEvent ev) {
   }
   
   public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
   float distanceY) {
   }
   
   public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
   float velocityY) {
   }
}

GestureDetector myG;

myG = new GestureDetector(this,new Gesture());

class Gesture extends GestureDetector.SimpleOnGestureListener{

public boolean onSingleTapUp(MotionEvent ev) {

}

public void onLongPress(MotionEvent ev) {

}

public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,

float distanceY) {

}

public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,

float velocityY) {

}

دستکاری Pinch Gesture

اندروید کلاس ScaleGestureDetector را برای دستکاری حرکات صفحه نمایش ارائه می دهد.

شما ابتدا باید یک آبجکت از این کلاس ایجاد کنید، که ساختار آن به صورت زیر است:

مثال :

ScaleGestureDetector SGD;
SGD = new ScaleGestureDetector(this,new ScaleListener());

1 2	ScaleGestureDetector SGD; SGD = new ScaleGestureDetector(this,new ScaleListener());

اولین پارامتر context ، و پارامتر دوم نیز رویداد listener است.

ابتدا باید رویداد listener را تعریف کرده و سپس یک تابع OnTouchEvent را override کنیم.

ساختار این اقدامات به صورت زیر است:

مثال :

public boolean onTouchEvent(MotionEvent ev) {
   SGD.onTouchEvent(ev);
   return true;
}

private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
   @Override
   public boolean onScale(ScaleGestureDetector detector) {
      float scale = detector.getScaleFactor();
      return true;
   }
}

public boolean onTouchEvent(MotionEvent ev) {

SGD.onTouchEvent(ev);

return true;

}

private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {

@Override

public boolean onScale(ScaleGestureDetector detector) {

float scale = detector.getScaleFactor();

return true;

}

علاوه بر این متدهای دیگری نیز وجود دارد که رویدادهای لمس صفحه نمایش را ارائه می دهند، که به شرح جدول زیر است:

ردیف	متد و توضیحات مربوطه
۱	getEventTime() این متد زمان رویداد فعلی را پردازش می کند
۲	getFocusX() این متد مختصات x حرکت فعلی صفحه را می گیرد.
۳	getFocusY() این متد مختصات y حرکت فعلی صفحه را می گیرد.
۴	getTimeDelta() این متد تفاوت زمانی را در میلی ثانیه بین رویداد scaling قبلی قبول شده و رویداد scaling شدن فعلی نشان می دهد.
۵	isInProgress() اگر یک فرآیند scale در حال انجام باشد این متد true را برمی گرداند.
۶	onTouchEvent(MotionEvent event) این متد رویدادهای MotionEvents و dispatches را در زمان مناسب می پذیرد.

مثال

در اینجا یک مثال کاربردی از کلاس ScaleGestureDetector را نشان می دهیم.

در این مثال یک برنامه ایجاد می کنیم که با استفاده از pinch بتوان در صفحه نمایش برنامه zoom کرد.

نکته : برای تست این برنامه باید از دستگاه اندروید واقعی و یا از شبیه ساز به همراه صفحه نمایش لمسی فعال استفاده کنید.

مراحل انجام برنامه:

مراحل	توضیحات
۱	مراحل ایجاد برنامه در اندروید استدیو را طبق بخش های قبلی دنبال کرده و نام پکیج را com.pvlearn.myapplication قرار بدهید.
۲	به محتوای فایل src/MainActivity.java کدهای ضروری را اضافه کنید.
۳	اجزای رابط کاربری را به فایل res/layout/activity_main اضافه کنید.
۴	برنامه را اجرا کنید تا شبیه ساز اندروید نتیجه را نمایش دهد.

محتوای main activity در فایل src/MainActivity.java:

مثال :

package com.example.Pvlearn.myapplication;

import android.app.Activity;
import android.graphics.Matrix;
import android.os.Bundle;

import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.widget.ImageView;

public class MainActivity extends Activity {
   private ImageView iv;
   private Matrix matrix = new Matrix();
   private float scale = 1f;
   private ScaleGestureDetector SGD;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);

      iv=(ImageView)findViewById(R.id.imageView);
      SGD = new ScaleGestureDetector(this,new ScaleListener());
   }

   public boolean onTouchEvent(MotionEvent ev) {
      SGD.onTouchEvent(ev);
      return true;
   }

   private class ScaleListener extends ScaleGestureDetector.
      SimpleOnScaleGestureListener {
      
      @Override
      public boolean onScale(ScaleGestureDetector detector) {
         scale *= detector.getScaleFactor();
         scale = Math.max(0.1f, Math.min(scale, 5.0f));
         matrix.setScale(scale, scale);
         iv.setImageMatrix(matrix);
         return true;
      }
   }
}

package com.example.Pvlearn.myapplication;

import android.app.Activity;

import android.graphics.Matrix;

import android.os.Bundle;

import android.view.MotionEvent;

import android.view.ScaleGestureDetector;

import android.widget.ImageView;

public class MainActivity extends Activity {

private ImageView iv;

private Matrix matrix = new Matrix();

private float scale = 1f;

private ScaleGestureDetector SGD;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

iv=(ImageView)findViewById(R.id.imageView);

SGD = new ScaleGestureDetector(this,new ScaleListener());

}

public boolean onTouchEvent(MotionEvent ev) {

SGD.onTouchEvent(ev);

return true;

}

private class ScaleListener extends ScaleGestureDetector.

SimpleOnScaleGestureListener {

@Override

public boolean onScale(ScaleGestureDetector detector) {

scale *= detector.getScaleFactor();

scale = Math.max(0.1f, Math.min(scale, 5.0f));

matrix.setScale(scale, scale);

iv.setImageMatrix(matrix);

return true;

}

محتوای فایل res/layout/activity_main.xml:

مثال :

<RelativeLayout 
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools" 
   android:layout_width="match_parent"
   android:layout_height="match_parent" 
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:paddingBottom="@dimen/activity_vertical_margin" 
   tools:context=".MainActivity" >
   
   <TextView android:text="Gestures  
      Example" android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/textview"
      android:textSize="35dp"
      android:layout_alignParentTop="true"
      android:layout_centerHorizontal="true" />
      
   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Pvlearn"
      android:id="@+id/textView"
      android:layout_below="@+id/textview"
      android:layout_centerHorizontal="true"
      android:textColor="#ff7aff24"
      android:textSize="35dp" />
      
   <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/imageView"
      android:src="@drawable/abc"
      android:scaleType="matrix"
      android:layout_below="@+id/textView"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true"
      android:layout_alignParentBottom="true"
      android:layout_alignParentRight="true"
      android:layout_alignParentEnd="true" />
      
</RelativeLayout>

<RelativeLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:paddingBottom="@dimen/activity_vertical_margin"

tools:context=".MainActivity" >

<TextView android:text="Gestures

Example" android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/textview"

android:textSize="35dp"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Pvlearn"

android:id="@+id/textView"

android:layout_below="@+id/textview"

android:layout_centerHorizontal="true"

android:textColor="#ff7aff24"

android:textSize="35dp" />

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/imageView"

android:src="@drawable/abc"

android:scaleType="matrix"

android:layout_below="@+id/textView"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:layout_alignParentBottom="true"

android:layout_alignParentRight="true"

android:layout_alignParentEnd="true" />

</RelativeLayout>

محتوای فایل res/values/string.xml:

مثال :

<resources>
   <string name="app_name>My Application</string>
</resources>

<string name="app_name>My Application</string>

</resources>

محتوای فایل AndroidManifest.xml:

مثال :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.Pvlearn.myapplication" >

   <application
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
      
      <activity
         android:name="com.example.Pvlearn.myapplicationMainActivity"
         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>

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.example.Pvlearn.myapplication" >

<application

android:allowBackup="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme" >

<activity

android:name="com.example.Pvlearn.myapplicationMainActivity"

android:label="@string/app_name" >

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

اجرای برنامه

برای اجرای برنامه ی اندرویدی خود یکی از فایل های activity در برنامه ی خود کلیک کنید.

سپس روی نماد (Run) از نوار ابزار برای شروع اجرای برنامه کلیک کنید.

سپس نتیجه اجرای برنامه را در دستگاه اندروید خود مشابه زیر مشاهده خواهید کرد.

حرکات صفحه لمسی در اندروید

حالا همانند زوم کردن هر تصویری در صفحه ی موبایل با استفاده از دو انگشت خود روی صفحه زوم کرده و نتیجه را ببینید:

حرکات صفحه لمسی در اندروید -نتیجه

سپس مجددا با استفاده از حرکت دو انگشت خود روی صفحه سعی کنید آن را کوچک کنید:

حرکات صفحه لمسی در اندروید -نتیجه کوچک کردن

کلام آخر

در بعضی موارد شما نیاز دارید که از قابلیت های مختلف حرکات صفحه لمسی در اندروید از جمله زوم کردن ، جا به جایی ،اسکرول و… در اپلیکیشن خود نیز استفاده کنید، اندروید این قابلیت ها را به سادگی همانطور که در مباحث فوق مشاهده کردید در اختیاز شما قرار می دهد.

مباحث بخش بعدی را به Google Maps در اندروید اختصاص می دهیم.

به اشتراک بگذارید

صفحه لمسی در اندروید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۳۸ : حرکات صفحه لمسی در اندروید

مقدمه

حرکات صفحه لمسی در اندروید

دستکاری Pinch Gesture

مثال

اجرای برنامه

کلام آخر

لیست مطالب دوره

آموزش اندروید

رابط کاربری در اندروید

مفاهیم پیشرفته در اندروید

مثال های مفید

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ