دنیای هفت کد

نوشته های ارسال شده توسط : رضا پورحسن

newandroid8
ساخت کتاب اندرویدی_ قسمت سوم

پس از اینکه صفحه ی گرافیکی UI اول خود را ساختیم،حالا نوبت به آن میرسد که برای این صفحه در اکتیویتی اصلی خود کد های مخصوص آن را بنویسیم… همانطور که مشاهده کردید،در صفحه ی اول خود یک تصویر داشتیم که شکل نماد اندروید بود بعلاوه ی اسم سایت مان و نام بنده! در پایین این تصویر یک دکمه (BUTTON) گذاشتیم… و آی دی دکمه را btnstart نام گذاری کردیم… حالا باید در صفحه ی کدنویسی مان این دکمه را ابتدا معرفی کنیم و سپس دستورات لازم را بنویسیم تا با لمس این دکمه،به صفحه ی دوم برویم… کد های لازم را در تصویر زیر مشاهده میکنید

 

1

در تصویر بالا مشاهده میکنید که قطعه کد زیر Button ما را معرفی میکند:
Button btnstart = (Button) findViewById(R.id.btnstart);

 

سپس با دستور btnstart.setOnClickListener(new OnClickListener() دستور میدهیم که هنگامی که دکمه را لمس میکنیم کاری انجام دهد،اما چه کاری؟! توسط کلاس Intent میتوانیم دستور دهیم که از اکتیویتی اول به اکتیویتی دوم برود! یعنی این کد:
Intent intent = new Intent(SimpleBookActivity.this, Pageone.class);
SimpleBookActivity.this.startActivity(intent);

برای اینکه صفحه ی ما برای همیشه بسته شود و دیگر با زدن دکمه ی Back گوشی برای خروج از برنامه به این صفحه باز نگردیم کد زیر را اضافه میکنیم:
SimpleBookActivity.this.finish();

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

2

مشاهده میکنیم که باز هم مثل UI قبلی از یک ImageView و یک Button استفاده شده است.
در قسمت src موجود در ImageView میتوانیم عکس دوممان را که در Drawable ذخیره کرده بودیم را انتخاب کنیم…
در سه تصویر زیر تنظیمات لازم برای ImageView و Button این UI را مشاهده میکنیم.
نکته! : تنظیمات در قسمت Properties هر عنصر انجام میشود.

3

4

5

نکته! : برای دکمه ای که تعریف کردیم، طبق آنچه که در جلسه ی قبلی آموختیم یک ID و یک Text انتخاب میکنیم.
ID = btnnext
Text = Next Page

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

6

به تصویر بالا و کد ها توجه کنید. مشاهده میکنیم که باز هم دکمه معرفی شده ، سپس دستور setOnClickListener نوشته شده و در ادامه با تعریف متفاوتی از Intent ( برای یادگیریه بیشتر) مواجه هستیم و در نهایت دستور finish را داریم…
________________________________
اما نوبت به اکتیویتی سوم و فایل xml مربوط به آن میرسد…
درست مثل دو صفحه ی UI قبلی، باز هم از یک ImageView و یک Button استفاده خواهیم کرد…
به تصویر دقت کنید:

7

باز هم مثل xml های قبلی باید برای دکمه ی خود یک ID و یک Text انتخاب کنیم:
ID = btnFinish
Text = The End

حالا میرویم به سراغ تنظیمات ImageView و Button خود از طریق نوار Properties :
به تصاویر زیر دقت کنید:

8

9

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

10

در این تصویر ابتدا Button را تعریف میکنیم. سپس دستور setOnClickListener را داریم و اینبار به جای Intent و رفتن به صفحه ی دیگر از دستور finish استفاده میکنیم تا از برنامه خارج شویم.
________________________________________
ظاهرا پروژه ی ما تمام شده اما اصلی ترین نکته اینجاست که ما باید Activity های خود را در فایل Androidmanifest.xml تعریف کنیم.زیرا در این فایل فقط اکتیویتی اول ما تعریف شده است.
به تصویر زیر توجه کنید و به توضیحات پس از تصویر دقت کنید:

11

در تگ application> مشاهده میکنید که اکتیویتی اول تعریف شده و چهار خط کد اضافه نیز در آن موجود است که این چهار خط نشان میدهند که این اکتیویتی،اکتیویتی اصلی ما است.
اما اکتیویتی دوم و سوم را باید خودمان به صورت دستی وارد کنیم…
در تصویر بالا مشاهده میکنید که شروع اکتیویتی هارا با تیک سبز رنگ مشخص کرده ایم.
خُب حالا پروژه ی ما تقریبا تمام است و کافی است به فولدری که اکلیپس را نصب کرده ایم برویم و فولدر Project و سپس فولدر android و فولدر Simple Book را باز کرده و در نهایت به فولدر bin میرویم. مشاهده میکنیم که یک فایل با پسوند apk داریم. این فایل،فایل خام و قابل نصب پروژه ی ماست که در اینجا نیز برای شما عزیزان قرار داده ایم تا دانلود کنید.
_______________________________________________
دوستان عزیز توجه داشته باشید که جلسه ی مقدماتی آموزش اندروید به اتمام رسید و به زودی با آموزش های حرفه ای تر در این سایت بازمیگردیم.
این پروژه ای که در این هشت جلسه آموختید صرفا برای آشنا تر شدن شما با ساخت پروژه ی جدید،آشنایی شما با اکتیویتی ها،فایل های XML و Androidmanifest.xml ، آشنایی با تنظیمات عناصر در Properties ، آشنایی با تعریف دکمه ها،حرکت از یک اکتیویتی به اکتیویتی بعدی،نام گذاری روی دکمه،تغییر ID و src برای Button ها و ImageView ها و…. بود.
این پروژه بسیار ساده و بدونه گرافیک حرفه ای و بسیار مبتدیانه ساخته شده تا بتوانید مباحث را به راحتی درک کنید و با کار کردن با آن آشنا شوید…
مباحث جدیدتر و حرفه ای تر به همراه پروژه های بهتر و پیچیده تر،بزودی در همین سایت…

newandroid7
ساخت کتاب اندرویدی_ قسمت دوم

پس از اینکه با مقدمات ساخت یک پروژه آشنا شدیم، حالا در فولدر res یک Newfolder میسازیم و اسمش را drawable میگذاریم.

1

حالا از طریق فتوشاپ ۳ تا عکس با فرمت png درست میکنیم که یکی صفحه آغازی ما است و دو تای بعدی صفحات کتاب ما را تشکیل میدهند…
ما هر ۳ تصویر ساخته شده را در اینجا در یک تصویر نشان داده ایم که صفحه اول (آغازی) ما نماد اندروید است، صفحه دوم ما صفحه زرد رنگ و متن درونش است و صفحه سوم ما صفحه سبز رنگ و متن آن است…

 

Untitled-2

حالا هر ۳ تصویر مان را در فولدری که ساختیم و آن را Drawable نامیدیم ذخیره میکنیم…
________________________
نوبت به آن میرسد که اولین صفحه ی UI خود را بسازیم.
مانند عکس پایین به فولدر res سپس فولدر layout رفته و main.xml را باز میکنیم.

 

do

در قسمت Palette یک Button و یک Imageview انتخاب میکنیم و در صفحه ی UI قرار میدهیم.

 

33

333

میخواهیم تناسبی بین تصویرمان و دکمه ای که انتخاب کرده ایم بسازیم…
روی تصویرمان در صفحه ی UI کلیک میکنیم و در قسمت چپ اکلیپس نوار properties تنظیمات زیر را انجام میدهیم :
44
حالا روی دکمه در صفحه UI کلیک کرده و در properties مانند شکل زیر تنظیمات را انجام میدهیم :
444
____________________________
نوبت به این میرسد که برای دکمه خود اسم بگذاریم و هم اینکه یک متن را در آن درج کنیم…
برای درج متن روی دکمه مانند تصاویر زیر عمل میکنیم:
2

3
____________________
توجه داشته باشید که ما در مرحله ی قبلی فقط متن دکمه را نام گذاری کردیم تا کاربر ببیند که روی دکمه چه نوشته ای وجود دارد…
اما مهمتر از آن این است که یک اسم رمز یا ID برای دکمه انتخاب کنیم تا در قسمت کد نویسی دکمه را تعریف کرده باشیم… پس این گونه عمل میکنیم:
4
5

______________________________
حالا نوبت به آن میرسد که تصویری که برای تصویر آغازین مان ساخته بودیم را انتخاب کنیم…
روی تصویر در صفحه UI راست کلیک میکنیم…
6

7

نکته! : اسم تصویر شماره یک خود را که در فولدر drawable قرار داده ایم را first گذاشته ایم.
###################
تا اینجا اولین صفحه ی UI یا User Interface خود را ساخته ایم و حالا باید برای آن کد بنویسیم…
کد نویسی این صفحه و ۲ صفحه ی دیگر را در جلسه ی بعدی توضیح خواهیم داد.

logo-samandehi
حامیان ما :
aparat aparat aparat aparat
شبکه های اجتماعی :
aparat aparat aparat aparat aparat

پیامک : 30007006000096 ایمیل : 7code.ir@gmail.com