آموزش اندروید فصل سوم قسمت هشتم – رابط کاربری پویا

در قسمت بیست و ششم آموزش اندروید دررابطه با رابط های کاربری اندروید که به صورت پویا و با استفاده از برنامه نویسی بوجود می آید آموزش داده ایم همچنین متد های اکتیویتی را شرح داده ایم.

آموزش اندروید فصل سوم قسمت هشتم – رابط کاربری پویا

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

ایجاد رابط کاربری در زمان اجرا (به صورت برنامه نویسی)

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

برای درک بیشتر پروژه جدیدی به نام UIPrj ایجاد کرده و در فایل MainActivity.java چنین کدنویسی میکنیم

package com.example.uiprj;



import android.os.Bundle;

import android.app.Activity;

import android.view.ViewGroup.LayoutParams;

import android.widget.Button;

import android.widget.LinearLayout;

import android.widget.TextView;



public class MainActivity extends Activity {



        @Override

        protected void onCreate(Bundle savedInstanceState) {

                 super.onCreate(savedInstanceState);

                 //setContentView(R.layout.activity_main);

                 //--param for views

                 LayoutParams params=
 new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);



                 //--create layout

                 LinearLayout layout = new LinearLayout(this);

                 layout.setOrientation(LinearLayout.VERTICAL);



                 //--create a TextView

                 TextView tv=new TextView(this);

                 tv.setText("This is a TextView");

                 tv.setLayoutParams(params);



                 //--create a button

                 Button btn=new Button(this);

                 btn.setText("This is a Button");

                 btn.setLayoutParams(params);



                 //--adds the TextView

                 layout.addView(tv);



                 //--adds the Button

                 layout.addView(btn);



                 //--create a layout param for the layout

                 LinearLayout.LayoutParams layoutparam =
 new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);

                 this.addContentView(layout, layoutparam);

        }
}

حال برنامه را اجرا کرده ونتیجه را بدین صورت خواهیم دید.

روش کار

در این برنامه همانگونه که مشاهده میکنید ابتدا ()onCreateView را به صورت کامنت درآورده ایم تا هنگام اجرا فایل activity_main.xml اجرا نشود و رابط کاربری ایجاد شده توسط برنامه نویسی اجرا شود. سپس یک شی LayoutParams برای استفاده به عنوان پارامتر layout در ابزارهای نمایش ایجاد  کرده ایم

//--param for views

                 LayoutParams params=
 new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);

سپس یک شی LinearLayout را  برای اینکه ابزار های نمایش رادر برگیرد ایجاد میکنیم 

              //--create layout

                 LinearLayout layout = new LinearLayout(this);

                 layout.setOrientation(LinearLayout.VERTICAL);

سپس دو ابزار نمایش TextView و Button را بدین صورت ایجاد میکنیم

//--create a TextView

                 TextView tv=new TextView(this);

                 tv.setText("This is a TextView");

                 tv.setLayoutParams(params);



                 //--create a button

                 Button btn=new Button(this);

                 btn.setText("This is a Button");

                 btn.setLayoutParams(params);

حال آنهارا به layout که ایجاد کردیم بدین صورت اضافه میکنیم

//--adds the TextView

                 layout.addView(tv);



                 //--adds the Button

                 layout.addView(btn);

و یک شی LayoutParams برای استفاده از شی LinearLayout نیز ایجاد میکنیم

//--create a layout param for the layout

                 LinearLayout.LayoutParams layoutparam =
 new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);

                 this.addContentView(layout, layoutparam);

در انتها نیز شی LinearLayout را به اکتیویتی اضافه میکنیم

this.addContentView(layout, layoutparam);

کنترل رویدادهای رابط کاربری

تعاملات کاربر با رابط کاربری در دو سطح صورت میگیرد:سطح اکتیوتی و سطح view , در سطح اکتیویتی کلاس Activity متدهای موردنیاز رادر اختیار شما قرار میدهد.بعضی از این متد ها که میتوانید در اکتیویتی های خود از آن استفاده کنید شامل زیر  است:

onKeyDown :وقتی کلیدی فشرده میشود که توسط هیچ viewیی از اکتیویتی تحت کنترل قرار نگرفته است.

onKeyUp : وقتی کلیدی رها میشود که توسط هیچ viewیی از اکتیویتی تحت کنترل قرار نگرفته است.

onMenuItemSelected : وقتی که گزینه ای از منو توسط کاربر انتخاب گردد(در ادامه بیشتر توضیح خواهیم داد)

onMenuOpened :وقتی که پنل منو توسط کاربر باز میشود.

استفاده از متد های موجود در اکتیویتی

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

ابتدا پروژه جدیدی به نام UIActivityPrj ایجاد کرده و در فایل activity_main.xml آن چنین کدنویسی میکنیم

</span></p>

<TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Your Name" />



    <EditText

        android:id="@+id/txt1"

        android:layout_width="214dp"

        android:layout_height="wrap_content"

        android:layout_alignLeft="@+id/textView1"

        android:layout_below="@+id/textView1"

        android:ems="10" />



    <Button

        android:id="@+id/btn1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/txt1"

        android:layout_marginTop="14dp"

        android:layout_toLeftOf="@+id/button2"

        android:text="Ok" />



    <Button

        android:id="@+id/btn2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignBottom="@+id/button1"

        android:layout_centerHorizontal="true"

        android:text="Cancel" />

همانگونه که در عبارات فوق مشاهده میکنید ما ابزار های نمایش TextView , EditeText ,Button را به سادگی ایجاد کرده ایم.حال در فایل MainActivity.java نیز چنین کدنویسی میکنیم

package com.example.uiactivityprj;



import android.os.Bundle;

import android.view.Menu;

import android.widget.*;

import android.view.KeyEvent;

import android.app.Activity;



public class MainActivity extends Activity {



        @Override

        protected void onCreate(Bundle savedInstanceState) {

                 super.onCreate(savedInstanceState);

                 setContentView(R.layout.activity_main);

        }



        @Override

        public boolean onKeyDown(int keycode, KeyEvent event)

        {

                 switch(keycode)

                 {                          

                 case KeyEvent.KEYCODE_DPAD_LEFT:

                           Toast.makeText(getBaseContext(),
 "Left arrow was clicked", Toast.LENGTH_LONG).show();

                           break;



                 case KeyEvent.KEYCODE_DPAD_DOWN:

                           Toast.makeText(getBaseContext(),
 "Down arrow was clicked", Toast.LENGTH_LONG).show();

                           break;



                 case KeyEvent.KEYCODE_DPAD_UP:

                           Toast.makeText(getBaseContext(),
 "Up arrow was clicked", Toast.LENGTH_LONG).show();

                           break;



                 case KeyEvent.KEYCODE_DPAD_RIGHT:

                           Toast.makeText(getBaseContext(),
 "Right arrow was clicked", Toast.LENGTH_LONG).show();

                           break;

                 }

                 return false;

        }

}

پس از اجرای برنامه ابتدا متنی را درون EditeText نوشته سپس فلش پایین درپد جهت ها را فشرده و پیام مناسب را مشاهده کنید

روش کار

وقتی که اکتیوتی شروع به کار میکند curser در حال چشمک زدن در EditText است چرا که این ابزار فوکوس شده. همانگونه که مشاهده میکنید در کلاس MainActivity متد KeyDown از کلاس Activity را پیاده سازی کردیم.

در اندروید وقتی کلیدی فشار داده میشود, ابزارها یا viewهایی که در حالت فوکوس قرار دارند سعی میکنند تا این رویداد را خود کنترل یا Handle  کنند به طور مثال در تمرین فوق وقتی ابزار EditText درحالت فوکوس است و مایکی از کلید های حروف صفحه کلیدرا فشار میدهیم این ابزار رویداد اتفاق افتاده را کنترل میکند و حرف انتخاب شده در ابزار  EditText نمایش میدهد.حال اگر کلیدهای فلش بالا و پایین را فشار دهیم EditText دیگر نمیتواند از این رویدادها پشتیبانی کند پس این رویداد به اکتیویتی سپرده میشود و متد onKeyDown فراخوانی میگردد در این مثال کلید فشرده شده شناسایی میگردد و پیغام مربوط به آن نمایش داده میشود برای مثال وقتی فلش جهت پایین فشرده میشود دکمه ok فوکوس میشود و پیغام مربوط نیز نمایش داده میشود.

جالب است بدانید وقتی که درون EditText متنی موجود باشد و curser در پایان متن قرارداشته باشد با فشردن کلید سمت چپ متد KeyDown فراخوانی نمیگردد چرا که این دکمه curser را تنها یک کاراکتر عقب میبرد پس خود EditText از این رویداد پشتیبانی میکند اما اگر در انتها یا ابتدا متن باشد و برای هرکدام به ترتیب فلش سمت راست و چپ را فشار دهید متد KeyDown فراخوانی میگردد.

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

آموزش اندروید فصل سوم قسمت هفتم

آموزش اندروید فصل سوم قسمت نهم