آموزش برنامه نویسی برای اندروید با ایکلیپس(12)- طراحی واسط کاربر (UI)

ایجاد اپلیکیشن تغییر وضعیت مد بی صدا یا SMT(Silent Mode Toggle) قبل ایجاد یک اپلیکیشن جدید، باید همه ی فایلهای باز در ایکلیپس را ببندید. این کار باعث افزایش سرعت می شود.
پنجشنبه، 18 دی 1393
تخمین زمان مطالعه:
موارد بیشتر برای شما
آموزش برنامه نویسی برای اندروید با ایکلیپس(12)- طراحی واسط کاربر (UI)
آموزش  برنامه نویسی  برای اندروید با ایکلیپس(12)- طراحی واسط کاربر (UI)

 

مترجم: حبیب الله علیخانی
منبع: راسخون




 
ایجاد اپلیکیشن تغییر وضعیت مد بی صدا یا SMT(Silent Mode Toggle)
قبل ایجاد یک اپلیکیشن جدید، باید همه ی فایلهای باز در ایکلیپس را ببندید. این کار باعث افزایش سرعت می شود.
برای ایجاد پروژه ی SMT از مسیر File➪New Project می رویم و از لیست باز شده گزینه ی Android Project را انتخاب کنید و سپس دکمه ی Next را کلیک کنید. برای این پروژه مقادیر زیر را وارد کنید:

نام اپلیکیشن: Silent Mode Toggle
نام پروژه: Silent Mode Toggle
Content : با همان مقدار پیشفرض در نظر می گیریم.
Build target : Android 2.2
نام پکیج: com.dummies.android.silentmodetoggle
Create activity : MainActivity
Min SDK Version: 8

در پایان دکمه ی finish را کلیک کنید. مانند تصویر زیر، در اکسپلورر پکیج(Package Explorer)، باید نام آن آمده باشد.
آموزش  برنامه نویسی  برای اندروید با ایکلیپس(12)- طراحی واسط کاربر (UI)
اگر پیغام خطایی مانند زیر دریافت شود: “The project cannot be built until build path errors are resolved” شما می توانید آن را با کلیک راست روی پروژه و انتخاب Android Tools➪Fix Project Properties رفع کنید. این کار پروژه ی شما را از طریق فضای کاری IDE تنظیم می کند(در خط هم تراز می کند).
توجه کنید، شما در بالا اندروید 2.2 و MinSDK ورژن 8 را انتخاب کرده اید. شما می توانید کدتان را روی هر وسیله ای که دست کم آخرین کدورژن 8 را اجرا می کند،(اندروید 2.2) اجرا کنید. اگر شما آن را به کدورژن 4 تغییر داده بودید، می خواستید بگویید که اپلیکیشن شما می تواند روی هر وسیله با ورژن 4 یا بالاتر اجرا شود.

چیدمان(Layout) اپلیکیشن

اکنون که شما اپلیکیشن SMT را در ایکلیپس دارید، زمان آن است که واسط کاربر (UI) اپلیکیشن را طراحی کنید. UI بخشی از اپلیکیشن شما است که کاربران با اپیکیشن شما فعل و انفعال دارند.
اپلیکیشن شما قصد دارد یک دکمه در وسط صفحه برای تغییر وضعیت به حالت بی صدا(Silent) قرار گیرد. درست در بالای دکمه، یک تصویر برای فیدبک تصویری قرار خواهد گرفت تا کاربران بفهمند که آیا در حالت بیصدا است یا در حالت زنگ زدن عادی. یک تصویر به اندازه ی هزاران کلمه ارزشمند است. مانند تصاویر زیر خواهد بود:
آموزش  برنامه نویسی  برای اندروید با ایکلیپس(12)- طراحی واسط کاربر (UI)
آموزش  برنامه نویسی  برای اندروید با ایکلیپس(12)- طراحی واسط کاربر (UI)

استفاده از فایل چیدمان(Layout) XML

همانطور که در گذشته گفته شد بخش res این بخش دارای 3 زیر پوشه به نام‌های drawable و layout و values است.

• در بخش drawable عکس‌ها و فایل هایی را که برای طراحی UI به آن احتیاج دارید، در این پوشه ذخیره می‌کنید.
• در بخش layout قالب GUI برنامه شما در این پوشه ذخیره می‌شود.
• در بخش values شما می‌توانید منابع نوشتاری برنامه مثل پیغام‌های خطا و برچسب‌های مورد نیاز برنامه را در آن ذخیره کنید.

همه ی فایل های چیدمان برای اپلیکیشن شما در مسیر res/layouts پروژه اندروید شما در ایکلیپس ذخیره شده است. زمانیکه شما اپلیکیشن SMT را که در قبل ایجاد کردید، ADT یک فایل به نام main.xml را در مسیر res/layouts ایجاد کرده است. زمانیکه شما یک اپلیکیش جدید ایجاد می کنید، این یک فایل پیشفرض چیدمان است که ADT برای شما ایجاد می کنید.
از فولدر res به زیر شاخه ی Layout بروید و با دابل کلیک فایل Main.xml ، می توانید آن را باز کنید. بعد از باز کردن آن، کد های XML را در پنجره ی ادیتور ایکلیپس خواهید دید. مانند تصویر زیر:
آموزش  برنامه نویسی  برای اندروید با ایکلیپس(12)- طراحی واسط کاربر (UI)
آنچه که در تصویر بالا مشاهده می کنید، یک layout ساده است و کار آن این است که متن مورد نظر را در وسط صفحه نشان می دهد. کد شما باید به شکل زیر باشد:
<?xml version=”1.0” encoding=”UTF-8”?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
>
<TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”@string/hello”
/>
</LinearLayout>
این فایل XML دقیقا چیزی که شما مشاهده کرده اید را تعریف می کند.
واژه XML مخفف واژگان Extensible Markup Language به معنی "زبان نشانه گذاری قابل گسترش" است. این زبان برخلاف HTML که به منظور نمایش داده ها مورد استفاده قرار می گیرد، برای ذخیره سازی و انتقال داده به کار گرفته می شود. شاید از دلایلی که از XML برای برنامه نویسی layout در توسعه اندروید استفاده شده است بتوان به گسترش پذیری آن، سهولت استفاده، خوانایی آن هم توسط انسان و هم توسط سیستم اشاره کرد. از سوی دیگر یک رابط گرافیکی کاربر یا همان GUI که توسط XML ایجاد شده باشد به سادگی قابل تحلیل و نمایش دادن است اما این در حالی است که اگر دیگر زبان ها در ساخت یک GUI استفاده می شد، تحلیل و Compile و اجرای آن به مراتب نسبت به یک فایل XML پیچیده تر می بود.
در این بخش فایل را جز به جز تفکیک خواهیم کرد.

اعلان XML پیشفرض

جز اول اعلان XML پیشفرض را فراهم می کند و به ادیتورها مانند ایکلیپس و مصرف کننده مانند اندروید اجازه می دهد تا بفهمد که نوع فایل چه است:
<?xml version=”1.0” encoding=”UTF-8”?>
این دستور نشانگر شماره ی نسخه ی XML است که نسخه ی آن 1.0 می باشد و نوع رمز گذاری آن UTF-8 است. مخفف واژگان UTF Unicode Transformation Format به معنی"فرمت تبدیل یونیکد" می باشد )لازم به ذکر است که یونیکد به منزله استانداردی است که از طریق آن کاراکترها و اعداد و علائم در اکثر زبان ها نشان داده می شود(. عدد 8 حاکی از آن است که این استاندارد از 8 بیت حافظه برای ذخیره سازی یک کاراکتر استفاده می کند.

نوع Layout

جز بعدی نوع Layout یا چیدمان را تعریف می کند. این بخش به منزله ی کد اصلی است که مسئول ساخت layout است. در این مورد، شما با LinearLayout کار می کنید. اکنون برای شما در مورد LinearLayout توضیح مختصری خواهیم داد. ساختار layout است که ساختار خطی است. به عبارت دیگر عناصری که روی این layout قرار می گیرند به صورت خطی یکی پس از دیگری یا از بالا به پایین و یا از چپ به راست در کنار یکدیگر قرار می گیرند. باید بدانید که یک LinearLayout ، یک ظرف برای عناصر دیگر view(که با چشم دیده می شود) که در صفحه ظاهر می شود، می باشد. توجه کنید که تگ بسته شدن آن </LinearLayout> در زیر بلافاصله نیامده؛ علت آن این است که این تگ دربرگیرنده ی آیتم های دیگر می باشد و تگ بسته شدن بعد از همه ی آیتم های دیداری(view) که به این ظرف اضافه می شود، آمده است:
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
>
View ها
"آیتم های دیگر" که در بالا به آن اشاره به عنوان view معروف است. view در اندروید، بلاک های ساختمانی اصلی برای کامپوننت های واسط های کاربر(UI) می باشد. به طور کلی می توان گفت که هر چیزی که روی یک UI قرار می گیرد به منزله یک view است یعنی چیزی که نمایی دارد مثل یک متن، یک دکمه و غیره. در کد زیر TextView را نشان می دهد که مسئول نمایش متن در صفحه می باشد.:
<TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”@string/hello”
/>
یک View یک فضای مستطیل شکل را روی صفحه اشغال کرده و مسئول ترسیم و هندل کردن(اداره کردن) رویداد می باشد. همه ی آیتم هایی که می توانند روی صفحه ی یک وسیله نشان داده شود، View می باشد. کلاس View سوپرکلاس است که همه ی آیتم ها در اندروید از آن ارث بری می کنند.
در پایان همه ی آنها شما باید تگ LinearLayout را ببندید:
</LinearLayout>
در بخش زیر انواع مختلف Layout را توضیح خواهیم داد.

Layout های SDK اندروید

زمانی که واسط های کاربر را ایجاد می کنید، گاهی اوقات باید کامپوننت ها نسبت به یکدیگر یا در یک جدول، یا حتی تحت رویداد خاص، از موقعیت یابی مطلق استفاده کند. از مهندسان نابغه در گوگل تشکر می کنیم که اندروید را با در نظر داشتن همه ی اینها ساخته اند و برای شما ابزار ضروری برای ساخت Layout های مختلف فراهم کرده اند. در زیر خلاصه ای از انواع رایج Layout که در SDK اندروید در دسترس اند، آورده شده:
LinearLayout: یک Layout که فرزندان را در یک سطر مجزا مرتب می کند.
RelativeLayout: یک Layout که موقعیت فرزندان می تواند نسبت به یکدیگر یا نسبت به پدر توصیف کند.
FrameLayout: یک Layout که طراحی شده تا ناحیه ای از صفحه را برای نمایش یک آیتم مجزا جاسازی می کند. شما می توانید چندین فرزند را به یک FrameLayout اضافه کنید، اما همه ی فرزندان را در قسمت بالای سمت چپ صفحه ثابت نگه می دارد. فرزندان در یک پشته قرار می گیرند و فرزند جدید به بالای پشته اضافه می شود. عموما این Layout به عنوان روشی برای چیدمان view ها در یک موقعیت مطلق استفاده شده است.
TableLayout: یک Layout که فرزندان را درون سطرها و ستون ها مرتب می کند.
استفاده از مطالب این مقاله با ذکر منبع راسخون بلامانع می باشد.



 

 



نظرات کاربران
ارسال نظر
با تشکر، نظر شما پس از بررسی و تایید در سایت قرار خواهد گرفت.
متاسفانه در برقراری ارتباط خطایی رخ داده. لطفاً دوباره تلاش کنید.
مقالات مرتبط