آموزش مدیریت Event ها در اندروید استودیو

با نام و یاد خدا
در جلسات قبل با نحوه ایجاد یک اپلیکیشن  و ساختار layout و اکتیویتی ها و موارد تکمیلی دیگر آشنا شدیم. در این جلسه می خواهیم به آموزش رویدادها و نحوه مدیریت Event ها در اندروید استودیو بپردازیم.

رویداد چیست؟

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

مدیریت Event ها در اندروید استودیو

فرض کنید کاربر روی دکمه ای از اپلیکیشن کلیک کند در این حالت رویداد کلیک اتفاق افتاده است (onClick) و توسط سیستم عامل شنیده می شود(OnClickListener). و ما می توانیم این رویداد را کنترل کنیم مثلا با کلیک روی این دکمه، اکتیویتی دیگری باز شود. حالا اگر کاربر برای یک ثانیه یا بیشتر دکمه را لمس کند، در این صورت رویداد onLongClick اتفاق می افتد و توسط OnLongClickListener شنیده می شود.

در ادامه با ایجاد یک پروژه به صورت عملی با نحوه مدیریت Event ها در اندروید استودیو آشنا خواهیم شد.

پروژه

تعریف پروژه: فرض کنید می خواهیم اپلیکیشینی بنویسیم که وقتی کاربر روی دکمه 1 کلیک کرد ، رنگ متن (Textview) به دلخواه عوض شود و با کلیک روی دکمه دوم متن مخفی شود.

• ابتدا یک پروژه جدید با نام دلخواه (مثلا test1) ایجاد می کنیم.
• بعد از ایجاد پروژه دو Button با نام های دکمه 1 و دکمه 2 در layout قرار می دهیم(توجه داشته باشید xml ها را به صورت دستی می نویسیم تا بیشتر خصوصیات را درک کنیم)
  کدهای activity_main.xml به شکل زیر است:

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout
    android:layout_height=”match_parent”
    android:layout_width=”match_parent”
    android:orientation=”vertical”
    xmlns:android=”http://schemas.android.com/apk/res/android” >

<!– تعریف باتن 1 –>
    <Button
        android:id=”@+id/button1″
        android:layout_width=”match_parent”
        android:layout_height=”wrap_content”
        android:text=”@string/btn1_name”
        android:textSize=”20dp”
        android:layout_marginTop=”100dp”
        android:onClick=”click1″
        />

<!– تعریف باتن 2 –>  
    <Button
        android:id=”@+id/button2″
        android:layout_width=”match_parent”
        android:layout_height=”wrap_content”
        android:text=”@string/btn2_name”
        android:textSize=”20dp”
        android:layout_marginTop=”10dp”
        android:onClick=”click2″
         />

<!– تعریف متن  –>  
    <TextView
        android:id=”@+id/TV”
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
        android:text=”@string/Text_name”
        android:textSize=”30sp”
        android:layout_marginTop=”130dp”
        android:layout_marginLeft=”70dp”
        />
</LinearLayout>

نکته: از <linearLayout></linearLayout> استفاده کردیم و خصوصیت orientation آن را vertical قرار دادیم، تا تمام اشیایی که بین این تگ قرار می دهیم به صورت عمودی زیر هم قرار گیرند.

همانطور که در جلسات قبل آموزش دادیم اصولی تر است که نوشته ها را در فایل Strings.xml موجود در زیر شاخه res تعریف کنیم و هر جا لازم بود فراخوانی کنیم.
کدهای موجود در Strings.xml به صورت زیر تعریف کردیم:

<resources>
    <string name=”app_name”>Test1</string>
    <string name=”btn1_name”>دکمه اول</string>
    <string name=”btn2_name”>دکمه دوم</string>
    <string name=”Text_name”>داژیار پردازش ایساتیس</string>
</resources>

پس می خواهیم رویداد onClick را کنترل کنیم برای مدیریت رویدادها دو روش کلی داریم :

روش اول مدیریت event ها در اندروید استودیو:

• در layout برای هر کدام از دکمه ها یک ویژگی تعریف می کنیم به نام onClick که از ما یک نام دلخواه به عنوان نام تابع می خواهد که برای مثال ما نام هر دو را click انتخاب می کنیم. یعنی وقتی دکمه کلیک می شود تابعی ازنوع onClick با نام click صدا زده شود.(این تابع click را در ادامه کار در activity تعریف می کنیم)

android:onClick=”click”

• حالا سراغ MainActivity.java می رویم . ابتدا برای Textview یک متغیر از نوع خودش ایجاد می کنیم تا در اکتیویتی به شی موجود در layout دسترسی داشته باشیم.(ما متغیر را همنام با id شی موجود در layout تعریف می کنیم تا کارمون راحت تر باشه)

داخل کلاس: تعریف متغیر

private TextView TV;

 داخل متد OnCreate: نسبت دادن شی (TextView) موجود در layout به متغیر با کمک id

TV=findViewById(R.id.TV);

•  داخل کلاس یک تابع به غیر از OnCreate به نام click می سازیم.(همان تابعی که در layout به عنوان رویداد onClick تعریف کردیم)

نکته: توابعی که تعریف می کنیم تا در layout صدا بزنیم ، یک ورودی از نوع View با نام دلخواه دارند. (مثلا نام v)

چرا view؟ متغیر View که به عنوان ورودی تعریف کردیم می تواند هر کدام ازاشیا موجود در layout باشد(چون باتن و textview هر کدام یک نوع view هستند). درواقع ما از این متغیر استفاده می کنیم تا مشخص کنیم این تابع onClick مربوط به کدام شی موجود در layout است. در ادامه کاربرد آن را خواهید دید.

بنابراین فرم تابع به شکل زیر می شود:

Public void    نام تابع(View  نام دلخواه){

مجموعه دستورات

}

• چون رویداد onClick هر دو باتن را در layout یک تابع (نام های یکسان) انتخاب کردیم مثلا click ؛ بنابراین در تابع با دستور شرطی if تعیین می کنیم که هر باتنی کلیک شد چه اتفاقی بیفتد.
  خب یک دستور شرطی if می نویسیم که اگر باتن با آی دی  button1 کلیک شد رنگ متن با قرمز ست شود در غیر این صورت اگر باتن با آی دی button2 کلیک شد متن مخفی شود.

 

public void click(View v){

نکته: باتن 1  را از طریق id به متغیر View (یعنی v ) نسبت می دهیم//

if(v.getId()==R.id.button1) {  

اگر باتن 1 کلیک شده بود رنگ TextView را عوض کن//

      TV.setVisibility(View.VISIBLE);
      TV.setTextColor(Color.rgb(255, 0, 0));
}
else if (v.getId()==R.id.button2) {

اگر باتن 2 کلیک شده بود  TextView را مخفی کن//

      TV.setVisibility(View.INVISIBLE);
}

 

نکته: برای ست کردن رنگ TextView می توانیم از تابع  setTextColor استفاده کنیم.سپس از کلاس color تابع rgb را فراخوانی می کنیم و سه تا عدد به عنوان ورودی می خواهد که در بازه 0 تا 255 باشند و مقادیر قرمز –سبز–آبی را به ترتیب اعمال می کنند.

نکته: برای مخفی کردن TextView ، از تابع setVisibility استفاده می کنیم و View آن را برابر با INVISIBLE قرار می دهیم تا با کلیک باتن 2 ، متن مخفی شود.(به حروف بزرگ و کوچک دقت کنید)

نکته: بعد از مخفی شدن متن توسط دکمه 2، میخواهیم دکمه1 را کلیک کردیم متن نمایش داده شود بنابراین مجدد از setVisibility استفاده می کنیم ولی این بار View آن را برابر با VISIBLE قرار می دهیم تا متن ظاهر شود (به اضافه اینکه قبلا تعریف کرده بودیم رنگ آن قرمز شود)

توجه داشته باشید به غیر از VISIBLE یک مقدار دیگه ای به نام GONE وجود دارد که باعث می شود کلا شی نابود شود ونمایش داده نشود.

انتخاب رنگ به صورت رندوم

نکته: اگر بخواهیم به صورت رندوم یک رنگی انتخاب شود. ابتدا باید یک شی از کلاس Random بسازیم. (کد زیرداخل کلاس و خارج از توابع) :

Random rnd=new Random();

سپس به روش زیر تعیین می کنیم که اعداد در بازه 0 تا 255 به صورت رندوم انتخاب شوند(کد زیر داخل تابع به جای کد تغییر رنگ TextView):

TV.setTextColor(Color.rgb(rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256)));

ایجاد تابع

نکته: یک سری کدها در برنامه هستند که می خواهیم به یک تابع جداگانه تبدیل کنیم تا در صورت نیاز، مجدد کدها را ننویسیم و فقط تابع را فراخوانی کنیم. برای این کار کدها را انتخاب می کنیم و روی آن ها راست کلیک کرده گزینه Refactor—>Extract—>Method را انتخاب می کنیم. پنجره ای باز می شود که در آن اسم تابع و سطح دسترسی آن را مشخص می کنیم. سپس ok را می زنید. سپس می بینید که تابع جداگانه ای در انتهای کدها اضافه می کند و هر جا لازم باشد فقط تابع را صدا می زند.
برای مثال ما خط کدی که در آن رنگ TextView را به صورت رندوم ست کردیم را تبدیل به تابع می کنیم با نام MyColor و سطح دسترسی public.

 

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

روش دوم مدیریت event ها در اندروید استودیو:

• ابتدا صفت که مربوط به onClick که در layout تعریف کرده بودیم و تابع click در اکتیویتی را پاک می کنیم.سپس در اکتیویتی(MainActivity.java) شروع به کد نویسی می کنیم.
• در کلاس یک متغیر برای باتن 1 و یک متغیر برای باتن 2 تعریف می کنیم به شکل زیر:

private Button button1;
private Button button2;

• سپس در تابع OnCreate ابتدا باتن های موجود در layout را به متغیرها نسبت می دهیم:

button1=findViewById(R.id.button1);
button2=findViewById(R.id.button2);

• برای هر کدام از متغیرهای باتن متد setOnClickListener را صدا می زنیم. یعنی می گوییم باتن 1 (یا 2 ) همیشه به گوش باش که اگر روی تو کلیک شد چیزی که داخل پرانتز است (به عنوان ورودی setOnClickListener ) را اجرا کنی.
• ما داخل پرانتز می نویسیم this. کلمه this به خود اکتیویتی اشاره می کند.(مثلا برای باتن 1)

Button1. setOnClickListener(this);

• وقتی this می نویسیم خطا می دهد و خط قرمزی زیر آن می بینیم  چون اکتیویتی متوجه نمیشد چه کاری باید انجام شود. کافی است روی this کلیدهای ترکیبی Alt+Enter را بزنیم، تا خود اندروید استودیو یک لیست پیشنهادی به ما نشان بدهد گزینه Make ’MainActivity’ implement ‘android.view.OnClickListener را از لیست پیشنهادی انتخاب می کنیم.
  (منظورش این است که تابع OnClickListener را در این اکتیویتی پیاده سازی کنم البته توجه داشته باشید که تابع اکتیویتی از ابتدا از AppcompatActivity اکستند شده است)

• همین که این گزینه را انتخاب می کنیم. یک پنجره مطابق تصویر زیر باز می شود و گزینه onClick را انتخاب می کنیم که پیاده سازی شود. سپس ok را می زنیم.

حالا با زدن ok  و بسته شدن پنجره تغییرات زیر در کدها اعمال شده است:
اولا به کد تعریف اکتیویتی،قسمت قرمز رنگ اضافه می شود:

public class MainActivity extends AppCompatActivity implements View.OnClickListener

(در واقع قبل از اینکه ما به یک شی ای مثل باتن بگوییم به گوش باش برای کلیک شدن(setOnClickListener) باید تابع onClick را پیاده سازی کنیم؛ البته قبلا تابع آن را گوگل نوشته و فقط کافی است که ما به روش بالا implement کنیم)

دوما یک تابعی هم در انتها override شده به نام (onClick(View v . که داخل آن می توانیم دستورات شرطی را مطابق قبل بنویسیم که اگر باتن 1 کلیک شد رنگ متن تغییر کند و اگر باتن 2 کلیک شد متن مخفی شود.

نکته: تابع ست کردن رنگ که خودمان ساختیم را برای تغییر رنگ متن صدا می زنیم.

نکته: این روش وقتی استفاده می شود که اشیا زیادی در layout داریم و بخواهیم برای هر کدام رویداد تعریف کنیم ؛ در این صورت کافی است که تابع onClick را implement کنیم و از هر شی یک متغیر بسازیم و تابع setOnClickListener برای هر شی صدا بزنیم و در تابع onClick رفتار هر شی را تعریف کنیم.(درست مثل تصویر بالا که با برای دو باتن رویداد onclick تعریف کردیم)

روش سوم مدیریت event ها در اندروید استودیو:

در این روش، تا جایی که به کلمه this برسیم مطابق روش دوم می رویم ولی از this استفاده نمی کنیم و به جای آن مستقیما از تابع setOnClickListener  یک شی می سازیم و تابع onClick داخل آن به طور خودکار ایجاد می شود. (بنابراین دیگه نیازی به implement نیست). باید بدانیم که این روش اصولی نیست.

مثلا برای باتن 1 به روش زیر می نویسیم:

button1. setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

   TV.setVisibility(View.VISIBLE);
   MyColor();
}
});

 توجه: برای باتن 2 هم به همین شکل می نویسیم.

اجرای برنامه

حالا می خواهیم اجرای برنامه را باهم ببینیم(با استفاده از genymotion) . با هر سه روش بالا نتیجه یکسانی می گیریم.

 

امیدواریم با نحوه مدیریت Event ها در اندروید استودیو به خوبی آشنا شده باشید . توجه داشته باشید که در اینجا ما فقط روی رویداد onClick کار کردیم شما از هر کدام از رویدادهای دیگر می توانید استفاده کنید.

لطفا سوالات و نظرات خود را در رابطه با مدیریت event ها در اندروید استودیو در قسمت دیدگاه ها با ما درمیان بگذارید.

مدرس: مهندس مهدی نیکخواه