کلاس اموزش برنامه نویسی اندروید(دوره اول)

آموزش:

در این قسمت قصد داریم که طریقه اتصال عناصر UI - User Interface * که در فایل XML تعریف می شوند را به کدهای جاوا یاد بگیریم. در اینصورت خواهیم توانست برای Button ها، EditBox ها، ImageView ها، ListView ها و ... برنامه بنویسیم.

در مرحله اول یک Button و یک TextView بر روی فرم اولیه ( main.xml ) قرار می دهیم و برنامه می نویسیم که با کلیک کردن بر روی Button نوشته داخل TextView تغییر کند. لذا دستور العمل زیر را دنبال کنید:
» با استفاده از آموزشهای قسمت دوم یک پروژه با پکیج com.uncocoder.course.lessons و نام پروژه AndroidCourse بسازید. این پروژه، پروژه ای خواهد بود که تا انتهای آموزشها با آن کار خواهیم کرد و آرشیوی از تمامی پروژه ها و کدهایی خواهد بود که در طول دوره آموزش دیده ایم.

» از پنل Package Explorer وارد AndroidCourse/res/layout/main.xml شوید. پس از مدتی یک صفحه تیره حاوی UI یی که در پروژه قبل به عنوان خروجی مشاهده کردید خواهید دید. یعنی تصویر زیر:


در تصویر بالا:
َA- محیط طراحی گرافیکی رابط کاربر ( Visual UI Designer ) که همین صفحه نمایش داده شده می باشد، است. خروجی طراحی انجام شده در این صفحه با B که نمایش XML رابط گرافیکی طراحی شده توسط شمااست. بنابراین A و B یکی هستند با دو نمایش متفاوت. هر تغییری در محیط A باعث تغییر در XML خروجی در محیط B می شود و بالعکس. خیلی اوقات راحتتر است که از محیط A استفاده کنیم و خیلی اوقات دیگر هم استفاده از محیط B راه گشاست بنابراین به یک محیط تکیه و بسنده نکنید.

B- نمایش UI طراحی شده در محیط A بصورت XML است و قابل ادیت می باشد.
C- رابط گرافیکی نهایی که بر روی گوشی نمایش داده خواهد شد. نمایش آن در این قسمت شبیه سازی می شود.
D- لیستی از UI Component * های در دسترس که با انتخاب و Drag آن می توانید به UI طراحی شده اضافه کنید.
E- در شرایطی که سایز مانیتور شما کوچک است ( Low Resolution ) ممکن است این Scroll دیده نشود و نتوانید لیست کاملی از UI Component ها را ببینید. با بزرگتر کردن کل محیط فوق و Resize کردن پنل سمت چپ، Scroll نمایان خواهد شد.

F- مجموعه ای از تنظیمات جهت بررسی UI تولید شده در سایزها مختلف گوشی های موبایل، ورژن های SDK متفاوت، Theme های متفاوت و ... . بنابراین می توانید UI خود را برای صحت عملکرد و نمایش، آزمایش کنید.

G- دکمه هایی که با استفاده از آنها می توانید نمایش UI را بزرگتر و کوچکتر کنید ( برای راحتتر شدن طراحی و یا دقیقتر شدن در ابعاد و ...)

» با انتخاب TextView اول که دارای محتوای Hello World, AndroidCourseActivity! است کلید Delete را روی کیبورد فشار دهید تا حذف شود.
» از لیست Palette ها، یک Button و یک TextView داخل UI ( پنجره سیاه ) Drag کنید.
» بر روی Button ، راست کلیک کنید و بزنید Edit ID و وارد کنید btn_action و OK بزنید، این نام اختیاری است اما توجه داشته باشید که حتماً باید تمامی حروف آن کوچک باشد و از _ برای جداکردن نام کلمات استفاده کنید. از Space و کاراکترهای نامتعارف جهت نامگذاری استفاده نکنید. با نوشتن btn_ در ابتدای نام دکمه ها به خوانا بودن نامگذاری کمک می کنیم.

» بر روی TextView ، راست کلید کنید و بزنید Edit ID و وارد کنید txt_caption و OK بزنید. از این پس به این فرآیند می گوییم Set کردن ID.
» حالا می توانید main.xml را ببندید.
» وارد فایل AndroidCourse/src/com.uncocoder.course.lessons/AndroidCourseActivity.java شوید. محیط ویرایش سورس جاوا باز می شود. سورس را به گونه زیر تغییر دهید.

ویرایش: نکته مهم: از این لحظه، هر گاه قرار هست چیزی رو تغییر بدیم به باقی فایل کاری نخواهیم داشت، نه سایر متدها را پاک می کنیم، نه package و import ها را پاک می کنیم، فقط متدهای موجود در کد را تغییر می دهیم. همینطور Line Number های کنار سورس کدها فقط برای توضیح خطوط است و مطمئناً می تواند با Line Number های دروس فایل شما متفاوت باشد.
 

01    public class AndroidCourseActivity extends Activity ..
02    
03        /** Called when the activity is first created. */
04        @Override
05        public void onCreate(Bundle savedInstanceState) ..
06            super.onCreate(savedInstanceState);
07            setContentView(R.layout.main);
08    
09            Button btn = (Button) findViewById(R.id.btn_action);
10            final TextView text = (TextView) findViewById(R.id.txt_caption);
11            btn.setOnClickListener(new OnClickListener() ..
12    
13                @Override
14                public void onClick(View v) ..
15                    text.setText("New String...");
16                }
17            });
18        }
19    }

توجه داشته باشید در صورتیکه مربع های خط چین ظاهر شدند کد شما نیاز به ورود و شناسایی Package Name مناسب دارد لذا در این شرایط بر روی کلمه OnClickListener با موس کمی صبر کنید، بعد از ظاهر شدن لیست گزینه Import OnClickListener (Android.view.View را انتخاب کنید. با اینکار یک خط جدید به لیست import های بالای همین فایل با محتوای import android.view.View.OnClickListener اضافه می شود که از این پس شناسایی صحیح این کلاس صورت می گیرد.
» با right click بر روی AndroidCourse و انتخاب Run As -> Android Application برنامه را اجرا کنید. دفعات بعد با زدن کلید F5 این عمل انجام می شود. در صورتیکه در نحوه اجرای Emulator و برنامه مشکل دارید، قسمت دوم آموزش را مطالعه کنید.
 

توضیح طریقه کار خطوط برنامه:

خط 7: به Activity می گوییم که فایل حاوی UI این پنجره در فایل main.xml قرار گرفته است.
خط 9: دکمه ای که ID آنرا btn_action قرار دادیم را به یک اشاره گر ( Pointer * ) در جاوا از جنس Button متصل می کنیم.
خط 10: متنی را که ID آنرا txt_caption قرار داریم را به یک اشاره گر در جاوا از جنس TextView متصل می کنیم. کلمه final فعلاً مهم نیست که چه کار می کند اما استفاده از آن در این نوع کد نویسی ضروری است.
حط 11: یک دستور العمل جدید برای پاسخ گویی به OnClick روی دکمه تعریف می کنیم. این دستور العمل درون onClick قرار می گیرد. لذا با کلیک شدن بر روی دکمه اجرا خواهد شد.
خط 15: دستور العمل اجرایی با کلیک بر روی دکمه است که می گوید محتوای TextView قرار داده شده در UI را به جمله New String تغییر بده.

خطوطی که توضیحی برای آنها ندادم را به عنوان یک کلیشه ( فعلاً ) در نظر بگیرید. با پیشرفت آموزشها و قسمتهای آموزش شیء گرایی این خطوط برای شما گویا خواهند شد اما الان دانستن علت نوشتاری آن گیج کننده و غیر ضروری است. کافیست این را بدانید که برای تعیین دستور العمل Click روی دکمه مورد نظر به چه شکل آنرا بنویسیم.
حالا برای تمیز تر شدن قطعه کد سورس را به شکل زیر تغییر دهید. این دو نوع نوشتار مانند یکدیگر عمل می کنند اما از نظر برنامه نویسی کد زیر بهتر است:
 

01    public class AndroidCourseActivity extends Activity ..
02    
03        private Button   btn  = null;
04        private TextView text = null;
05    
06    
07    
08        /** Called when the activity is first created. */
09        @Override
10        public void onCreate(Bundle savedInstanceState) ..
11            super.onCreate(savedInstanceState);
12            setContentView(R.layout.main);
13    
14            initializeUi();
15        }
16    
17    
18    
19        private void initializeUi() ..
20            btn = (Button) findViewById(R.id.btn_action);
21            text = (TextView) findViewById(R.id.txt_caption);
22    
23            btn.setOnClickListener(new OnClickListener() ..
24    
25                @Override
26                public void onClick(View v) ..
27                    text.setText("New String...");
28                }
29            });
30        }
31    }

خط 3 و 4: اشاره گرها تعریف و با مقدار اولیه null مقدار دهی می کنیم.
خط 14: به برنامه می گوییم متدی ( method * ) با نام initializeUi را که در همین کلاس تعریف شده است را اجرا کند.
خط 19: شروع به تعریف متد initializeUi می کنیم
خط 20: به اشاره گر تعریف شده با نام btn در همین کلاس مقداری ارجاع می دهیم.
خط 21: به اشاره گر تعریف شده با نام text در همین کلاس مقداری ارجاع می دهیم.
باقی خطوط: مانند گذشته است.


خوب این قسمت از آموزش هم به پایان رسید.

سورس برنامه و ورود پروژه جدید:

جهت دریافت سورس این پروژه می توانید از لینک زیر استفاده کنید.


جهت ورود یک پروژه از پیش تعریف شده مانند پروژه بالا در Eclipse به طریقه زیر عمل کنید:
» ابتدا باید مطمئن باشید که در Eclipse پروژه های همنام وارد نشوند بنابراین می توانید نام پروژه خود را تغییر دهید و آنرا به مثلاً با MyAndroidCourse تغییر دهید. به این منظور بر روی AndroidCourse راست کلیک کنید و انتخاب کنید Refactor->Rename و بنویسید MyAndroidCourse و تیک هم فعال باشد. سپس OK کنید. لذا پروژه شما تغییر نام پیدا می کند.

» منوی File->Import را بزنید و Existing Projects into Workspace را انتخاب کنید
» فایلی را که دانلود کرده اید در مسیر DEV_ROOT\download کپی کنید و آنرا با Extract To AndroidCourse در همین دایرکتوری Extract کنید. اگر نمی دانید DEV_ROOT چیست پس آموزشهای گذشته را به درستی مطالعه نکرده اید.

» مسیر DEV_ROOT\download را در قسمت Select root directory وارد کنید و با زدن Refresh پروژه های موجود در این مسیر را خواهید دید.
» پروژه مورد نظر را انتخاب و Finish بزنید.
» برای اجرای پروژه روی پروژه Right Click کنید و گزینه Run As->Android Application را انتخاب کنید.
» در صورتیکه قبلاً پروژه AndroidCourse دانلود شده در Eclipse وارد شده بود می توانید با انتخاب آن و زدن کلید Delete روی کیبورد آنرا از این لیست حذف کنید. با زدن تیک موجود در صفحه به نام Delete project content on disk فایلهای موجود در Hard Disk هم پاک می شوند و بدون زدن این انتخاب فایلها باقی خواهند ماند ولی پروژه از لیست پروژه ها حذف خواهد شد. اینجا انتخاب با خودتان است که تیک بزنید یا نزنید.

با توجه به اینکه شما پروژه خود را احتمالاً Rename خواهید کرد از این پس منظور از پروژه AndroidCourse همان پروژه ایست که شما در حال توسعه آن هستید با اینکه ممکن است آنرا به MyAndroidCourse تغییر نام داده باشید. پروژه های ارسال شده بصورت فایل، صرفاً جهت مرور شما هستند و آنها را تغییر ندهید. پس منظور از AndroidCourse پروژه ای است که شما توسعه می دهید.

توصیه ها:

- اگر با مفاهیم شیء گرایی ( Object Oriented * ) آشنایی لازم را ندارید بهتر است کتابی در مورد java تهیه و مطالعه کنید، با اینکه در این آموزشها با آن خواهیم پرداخت، اما مطالعه شما بهتر است.
- با استفاده از چند خط آموزش داده شده و کمی ابتکار عمل می توانید خیلی چیزها را آزمایش کنید و خودتان بسیازی از مفاهیم را دریابید. بنابراین زمینه وقت گذاشتن بر روی همین چند خط کد بسیار آماده است.
- اگر سرعتتان در تایپ و کار با ادیتور کم است، بسیار تمرین کنید. فاصله زمان تصمیم گرفتن به تغییر یا نوشتن یک قطعه کد تا اجرا کردن آن باید بسیار کوتاه باشد. یعنی چنانچه تصمیم به تغییر کد گرفتید اصلاً نباید به چگونگی تایپ آن فکر کنید بلکه بصورت غیر ارادی باید بتوانید این کار را انجام دهید. لذا در صورت نیاز بسیار تمرین کنید و یک قطعه کد را بارها و بارها بنویسید و ویرایش کنید.
- از سایر کنترلهای موجود در Palette کنترل ها استفاده کنید و ببنید که چه امکاناتی می توانیم در UI داشته باشیم.