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

برنامه نویسی مهم تر است یا طراحی رابط گرافیکی؟

اگر بخواهیم تصور کنیم که در توسعه اندروید، برنامه نویسی جاوا از اهمیت بیشتری برخوردار است یا طراحی رابط گرافیکی یا همان UI مسلماً گروهی را خواهیم یافت که طرفدار اهمیت بیشتر برنامه نویسی یک اپلیکیشن هستند و گروهی هم بیشتر روی طراحی UI تکیه می کنند. واقعیت امر این است که این دو مسئله مکمل یکدیگر می باشند.

فرض کنیم که ما به زبان برنامه نویسی جاوا بسیار مسلط هستیم و در پشت پرده یک کدنویسی بسیار حرفه ای انجام داده ایم اما این در حالی است که اپلیکیشن طراحی شده ما از لحاظ بصری ضعیف است و حتی کاربر را سردرگم هم می کند. عکس این قضیه هم صادق است. به عبارت دیگر فرض کنیم که ما یک طراح گرافیکی حرفه ای هستیم و با اصول طراح و رنگ شناسی به خوبی آشنا هستیم و به راحتی می توانیم UI هایی برای اپلیکیشن های خود طراحی کنیم که نظر هر کاربر را به خود جلب می کند اما در عین حال کدنویسی اپلیکیشن ما تا حدودی دارای Bug است و حتی این احتمال وجود دارد که کاربر در حین کار با اپلیکیشن ما با مشکل مواجه شود.

برای روشن شدن این مسئله می توانیم بازی Angry Birds که در سطح دنیا با استقبال خوبی مواجه شده است را مد نظر قرار دهیم. فرض کنیم که این بازی کدنویسی بسیار حرفه ای داشت به همین صورت که می بینیم اما از لحاظ بصری همانند بازی های آتاری که بیست سال پیش وجود داشتند بود. در چنین حالتی این بازی به هیچ وجه توان رقابت با بازی هایی که امروزه در بازار وجود دارند را نداشت. حال عکس این قضیه را فرض کنیم. بازی پرندگان خشمگین با همین UI که مشاهده می کنیم بود ولی برنامه نویسی آن بسیار ضعیف بود. به عبارت دیگر در حین بازی کردن اپلیکیشن متوقف می شد و یا سطح دشواری آن حساب شده نبود. مثلا با یک شلیک بسیار آهسته کل ساختمان هدف می آمد پایین!

می بینیم که برنامه نویسی یک اپلیکیشن و طراحی رابط گرافیکی لازم و ملزوم یکدیگر می باشند. اکنون از آنجا که در این سری از آموزش ها قصد داریم تا یکسری پروژه تعریف کنیم و در قالب آن پروژه ها توسعه اندروید را فرا بگیریم، پس نیاز است تا با هر دو مسئله آشنا شویم. در ابتدا به مسئله UI یا همان رابط گرافیکی کاربر می پردازیم.

انواع Layout ها

به طور کلی می توان گفت که هر فایل XML در برگیرندۀ یکی از انواع مختلف Layout ها می باشد. برای مثال پروژه ای جدید تحت عنوان Layouts به معنی "انواع Layout ها" در محیط اکلیپس ایجاد می کنیم(برای آشنایی بیشتر با نحوه ساخت یک پروژه جدید در محیط برنامه نویسی اکلیپس به آموزش هشتم مراجعه نمایید). پس از باز کردن فایل main.xml که در زیر شاخه فولدر layout قرار دارد، با کد زیر مواجه خواهیم شد:

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent"
5. android:orientation="vertical" >
6. <TextView
7. android:layout_width="fill_parent"
8. android:layout_height="fill_parent"
9. android:text="@string/hello"
10. android:textColor="#fff">
11. <LinearLayout>

همانطور که در کد فوق مشاهده می کنیم، نوع Layout به کار گرفته شده در این پروژه به صورت پیش فرض یک LinearLayout می باشد(لازم به ذکر است واژه Linear از واژه Line به معنی "خط" گرفته شده است که به معنی "خطی" می باشد). در یک LinearLayout همانطور که از نام این Layout بر می آید، عناصر روی صفحه در امتداد یک خط یکی پس از دیگری قرار می گیرند. حال اینکه این عناصر به صورت عمودی در کنار یکدیگر قرار گیرند یا به صورت افقی بسته تنظیماتی است که داخل این Layout انجام می دهیم. همانطور که در کد فوق ملاحظه می شود Value متد orientation این Layout معادل با vertical به معنی "عمودی" در نظر گرفته شده است. به عبارت دیگر اگر مثلاً یک TextView دیگر به این Layout اضافه کنیم، این TextView جدید زیر TextView قبلی قرار می گیرد و هر دو به صورت عمودی در کنار یکدیگر قرار می گیرند.

نحوه به کار گیری Graphical Layout

همانطور که در آموزش بیست و هشتم توضیح داده شد، می توانیم با کدنویسیی مشابه آنچه در آن آموزش دیدیم، اقدام به ایجاد یک TextView ، دکمه و یا هر چیزی دیگری روی UI اپلیکیشن خود نماییم اما این در حالی است که اینکار نه تنها زمان بر می باشد بلکه احتمال خطای ما را نیز افزایش خواهد داد. به عبارت دیگر با استفاده از Graphical Layout به سادگی با استفاده از Drag & Drop خواهیم توانست بدون نیاز به نوشتن کد اقدام به ساخت عناصر مختلفی همچون TextView نماییم. برای روشن شدن این مطلب، این کار را به صورت عملی انجام خواهیم داد:

همانطور که در تصویر فوق مشاهده می کنیم، با کلیک کردن روی گزینه Graphical Layout که با یک بیضی قرمز رنگ مشخص شده است به محیط گرافیکی فایل XML مرتبط با Layout دست پیدا خواهیم کرد. همانطور که در قسمت فوق توضیح داده شد، قصد داریم تا یک TextView دیگر به UI خود اضافه کنیم. برای این منظور از Tab های مختلفی که در Graphical Layout وجود دارد روی گزینه Form Widgets کلیک کرده و از میان گزینه های موجود یکی از گزینه های مربوط به TextView را انتخاب می کنیم(به طور کلی برای ساخت یک TextView سه گزینه TextView ، Medium Text و Large Text وجود دارد). برای مثال، همانطور که در تصویر فوق مشاهده می شود، با موس خود گزینه Large Text را گرفته و به سمت UI می کشیم و به محض اینکه نشانگر موس ما روی UI قرار گیرد یک علامت به علاوه کوچک کنار نشانگر موس نمایان خواهد شد که به معنی این است که پس از رها کردن دکمه موس TextView به UI اضافه خواهد شد:

در تصویر فوق نقطه چینی به رنگ شبرنگ با یک فلش قرمز رنگ مشخص شده است. در حقیقت این نقطه چین حاکی از آن است که این TextView جدید که قرار است روی UI قرار بگیرد، داخل مستطیلی قرار خواهد گرفت که با نقطه چین زیر TextView قبلی مشخص شده است(در واقع از آنجا که Value متد orientation این Layout معادل با vertical است، TextView جدید زیر TextView قبلی قرار خواهد گرفت):

پس از رها کردن دکمه موس، TextView جدید روی UI قرار می گیرد(لازم به ذکر است از آنجا که از میان سه نوع TextView گزینه Large Text را انتخاب کردیم، از اینرو اندازه فونت این TextView جدید بزرگ تر از حالت قبلی خواهد بود). اکنون اگر روی Tab مربوط به main.xml کلیک کنیم خواهیم دید که یک TextView دیگر پس از TextView قبلی ایجاد شده است:

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent"
5. android:orientation="vertical">
6. <TextView
7. android:layout_width="fill_parent"
8. android:layout_height="wrap_content"
9. android:text="@string/hello" >
10. <TextView
11. android:id="@+id/textView1"
12. android:layout_width="wrap_content"
13. android:layout_height="wrap_content"
14. android:text="Large Text"
15. android:textAppearance="?android:attr/textAppearanceLarge" >
16. <LinearLayout>

حال فرض کنیم که به جای آنکه این دو TextView زیر یکدیگر به صورت عمودی قرار گیرند، می خواهیم آن دو را در کنار یکدیگر به صورت افقی قرار دهیم. برای این منظور دو راه کار وجود دارد که یک از طریق ویرایش فایل XML است و دیگری از طریق پنجره Properties است که در ابتدا این کار را از طریق ویرایش فایل XML انجام خواهیم داد. همانطور که در کد فوق ملاحظه می شود، در کد مربوطه به LinearLayout مقدار نسبت داده شده به متد orientation برابر با vertical است. حال اگر این مقدار را به horizontal تغییر دهیم عناصر داخل این Layout به صورت افقی کنار یکدیگر قرار خواهند گرفت. اکنون برای مشاهده نتیجه مجدد روی Tab مربوط به Graphical Layout کلیک می کنیم:

همانطور که در تصویر فوق ملاحظه می شود، پس از تغییر مقدار متد orientation از حالت vertical به horizontal فقط همان TextView اول را خواهیم دید و TextView جدیدی که ساختیم از دید پنهان است. در حقیقت علت این مسئله این است که همانطور که در تصویر فوق مشاهده می شود width یا عرض TextView قبلی برابر با fill_parent است:

به عبارت دیگر عرض این TextView کل صفحه UI را در برخواهد گرفت از این روی TextView جدیدی که به صورت افقی در کنار آن قرار گرفته است به بیرون UI رانده شده است. برای رفع این مشکل می بایست مقدار متد width را از حالت fill_parent به wrap_content تغییر دهیم(برای آشنایی بیشتر با این مقادیر به آموزش بیست و هشتم مراجعه نمایید):

اکنون مشاهده می کنیم که هر دو TextView در کنار یکدیگر قرار گرفته اند. راهکار دوم برای تغییر مقدار width از fill_parent به wrap_content استفاده از پنجره Properties است. برای این منظور مقدار متد width را دوباره با حالت اول باز می گردانیم تا این بار این تغییرات را در پنجره Properties اعمال کنیم:

ابتدا روی چیزی که می خواهیم تنظیمات آن را در پنجره Properties تغییر دهیم کلیک می کنیم تا انتخاب شود (مرحله 1). سپس در پنجره Properties روی Tab مربوط به Misc کلیک می کنیم تا زیرشاخه های آن باز شوند (مرحله 2) و در نهایت همانطور که در مرحله 3 نشان داده شده است روی مقدار مقابل Layout width کلیک کرده و روی گزینه wrap_content کلیک می کنیم تا انتخاب شود:

همانطور که در تصویر فوق ملاحظه می شود، باز هم هر دو TextView به صورت افقی در کنار یکدیگر قرار می گیرند (برای آشنایی بیشتر با پنجره Properties به آموزش بیستم مراجعه نمایید). پیش از این گفتیم که برای تغییر مقدار متد orientation از vertical به horizontal راه کار دیگری هم وجود داشته و آن استفاده از پنجره Properties است. پس از آنکه تنظیمات UI را به حال اول برگرداندیم، ابتدا روی جایی در صفحه مشکی UI کلیک می کنیم. با این کار به اکلیپس می فهمانیم که منظور ما از این کار انتخاب کل UI است. سپس به پنجره Properties رفته و تنظیمات آن را به صورت زیر تغییر می دهیم:

می بینیم که مجدد هر دو TextView در کنار یکدیگر قرار گرفته اند: