آموزش اندروید فصل سوم قسمت هشتم – رابط کاربری پویا
در قسمت بیست و ششم آموزش اندروید دررابطه با رابط های کاربری اندروید که به صورت پویا و با استفاده از برنامه نویسی بوجود می آید آموزش داده ایم همچنین متد های اکتیویتی را شرح داده ایم.
آموزش اندروید فصل سوم قسمت هشتم – رابط کاربری پویا
توجه : برای مشاهده تصاویر در سایز اصلی برروی آنها کلیک کنید.
ایجاد رابط کاربری در زمان اجرا (به صورت برنامه نویسی)
تا اینجا تمام رابطهای کاربری از طریق فایل 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 فراخوانی میگردد.
