فصل پنجم : طراحی رابط کاربری اندروید (UI)

به نام خدا. پس از آشنایی با مقدمات کار در محیط اندروید استودیو، لازم است توسعه دهنده با طراحی رابط کاربری آشنا شود.به طور خلاصه مباحث مطرح شده در این فصل را بیان می کنیم :

  • معرفی کلی رابط کاربری (User Interface)
  • معرفی Activity در اندروید
  • معرفی زبان نشانه گذاری XML
  • شناخت Layout ها (ViewGroup) و معرفی LinearLayout و RelativeLayout
  • معرفی Widget (ویجت) ها مانند Button ، ImageView، TextView و سایر عناصر (View)
  • آشنایی با ویژگی (Property) های مختلف مانند padding ، margin ، width ، height ، match_parent ، wrap_content و …
  • معرفی واحدهای تعیین اندازه (dp ، sp ، px)
  • تعریف ویژگی ها توسط id برای هر عنصر
  • تعیین آیکون (icon) اپلیکیشن
  • معرفی ویژگی orientation در چینش layout ها و آشنایی با دو نوع چینش horizontal (افقی) و vertical (عمودی)

 

این فصل در ۵۱ صفحه تهیه شده که در ادامه می توانید چند صفحه ابتدایی مقاله را مطالعه نمایید :

 

هر اپلیکیشن یا نرم افزار و یا وب سایت به طور کلی به دو بخش تقسیم می شود :
–    بخش اول که رابط کاربری (User Interface) نامیده شده و شامل تمامی عناصری است که کاربر با آن در ارتباط است، از جمله منو ها، دکمه ها، فیلدهای متنی، متون، تصاویر و …
–    بخش دوم که مربوط به پردازش عملیات های موردنیاز کاربر بوده و از چشم کاربر پنهان می باشد.
اپلیکیشن های اندروید هم از این قاعده مستثنی نیستند. یک اپلیکیشن ساده ماشین حساب را در نظر بگیرید.

رابط کاربری

چیزی که کاربر مشاهده می کند یک صفحه نمایش اعداد و چند دکمه شامل اعداد ۱ تا ۹ و دکمه های عملگر مانند جمع و تفریق و ضرب و … می باشد. اما پشت صحنه مربوط به بخش عملکردی برنامه است که ورودی های کاربر (شامل اعداد و عملگرهای ریاضی) را دریافت کرده، پردازش موردنظر روی ورودی اعمال شده و در نهایت جواب بر روی صفحه نمایش ماشین حساب در کسری از ثانیه ظاهر می گردد.
توجه داشته باشید در اندروید، هر صفحه قابل نمایش برای کاربر یک Activity نامیده می شود.به عنوان مثال اگر بخواهیم یک اپلیکیشن بسازیم که شامل سه صفحه “صفحه اصلی” ، “صفحه آشنایی با شرکت” و “صفحه ارسال پیام به پشتیبانی شرکت” باشد، راه ساده و ابتدایی این است که سه اکتیویتی مجزا ایجاد شود که هر اکتیویتی نیز شامل دو فایل می شود. یک فایل با پسوند xml برای تعامل با کاربر (نمایش متن و تصویر و دکمه ها و …) و یک فایل با پسوند java برای کدهای عملکردی مربوط به آن صفحه که به زبان جاوا نوشته می شود.وقتی در اندروید استودیو یک پروژه جدید تعریف می کنید، به صورت پیش فرض یک اکتیویتی نیز ساخته می شود که مربوط به صفحه اصلی اپلیکیشن شماست و از دو فایل activity_main.xml (در مسیر res/layout) و MainActivity.java (در مسیر java/YourPackageName) تشکیل شده است.
در این فصل به آموزش بخش اول یعنی رابط کاربری می پردازیم.

XML
اگر خاطرتان باشد قبلا هم اشاره کردیم که پیاده سازی رابط کاربری در اندروید به عهده XML می باشد. XML مخفف عبارت eXtensible Markup Language به معنای زبان نشانه گذاری قابل گسترش می باشد.این زبان تا حدودی شبیه به زبان HTML بوده که از تعدادی برچسب (tag) از پیش تعریف شده تشکیل شده است، با این تفاوت که در XML برچسب ها به دلخواه برنامه نویس نامگذاری شده و محدودیتی وجود ندارد. اگر قبلا در حوزه طراحی وب (HTML و CSS) مقداری کار کرده و یا حتی یک آشنایی مقدماتی نسبت به این موارد داشته باشید، این مبحث را خیلی سریع تر به پایان خواهید رساند.
در توسعه اپلیکیشن های اندروید از XML برای تعریف و پیاده سازی عناصر رابط کاربری (دکمه ها، تصاویر، فیلدهای متنی، چک باکس ها، نحوه چینش عناصر و …) استفاده می شود.
<name>Seyed Mehdi</name>
عبارت بالا را می توان ساده ترین مثال از زبان XML نامید.ما تگ دلخواه با عنوان name تعریف کردیم و نام یک شخص را داخل آن قرار داده ایم.باز هم تاکید می کنیم که قاعده و قانونی برای عنوان تگ ها وجود ندارد. به عنوان مثال برای مورد بالا می توانستیم به صورت زیر نیز تگ را تعریف کنیم :
<esm>Seyed Mehdi</esm>
البته در اندروید تگ هایی مانند Button (برای دکمه ها) و یا ImageView (برای نمایش تصاویر) مشخص و به صورت استاندارد از سوی گوگل معرفی شده است.
هر تگ به صورت باز و بسته تعریف می شود. در مثال قبل، تگ نمایش نام شخص با <name> باز و با </name> بسته شده است. تفاوت تگ بسته با تگ باز در “/” می باشد. ضمن اینکه رعایت حروف کوچک و بزرگ در بخش های ابتدا و انتهای تگ الزامی است، به اینصورت که :
<name>Seyed Mehdi</name> با <Name>Seyed Mehdi</Name> متفاوت خواهد بود و <name>Seyed Mehdi</Name> اشتباه است.

Layout
Layout به معنی طرح و به عنوان لایه ای برای نمایش عناصر و View ها (شامل ویجت (Widget) ، فیلدهای متنی و …) به کار می رود.ماشین حسابی که در ابتدای فصل مثال زدیم، یک Layout می باشد که اجزاء موردنیاز جهت پیاده سازی ماشین حساب (دکمه ها، صفحه نمایش خروجی و …) داخل آن قرار گرفته اند.
برای مشاهده انواع Layout های اندروید، یک پروژه جدید ایجاد می کنیم.از آنجایی که Layout مربوط به بخش نمایشی اپلیکیشن مربوط می شود، در فولدر res به دنبال فولدر layout  می گردیم.

activity_main.xml

همانطور که در تصویر مشاهده می کنید در پوشه layout فایل activity_main.xml به صورت پیش فرض ایجاد شده که مربوط به صفحه اصلی اپلیکیشن ما می باشد.فایل را باز می کنیم.

فولدر layout

مشاهده می کنید که در خط شماره ۱ ، xml و اِنکدینگ آن تعریف شده است.این خط برای همه اکتیویتی ها ثابت است و تغییری نمی کند. انکدینگ utf-8 برای پشتیبانی از کاراکترهای غیر ASCII مانند زبان فارسی می باشد.به صورت پیش فرض یک Layout از نوع RelativeLayout و یک ویجت TextView برای نمایش متن Hello World! استفاده شده. از خط ۲ تا ۱۰ نیز به صورت پیش فرض در هنگام ایجاد layout جدید اضافه می شود. خطوط ۴ و ۵ عرض و ارتفاع layout را تعیین می کند که هر دو مقدار match_parent دارند به این معنی که نسبت به والد خود فاصله ای ندارند (به عبارتی از هر چهار طرف به ابتدای صفحه نمایش چسبیده هستند و تمام فضای موجود را دربر گرفته).
اگر مقداری با طراحی وب آشنا باشید، می دانید که از ویژگی (property) های width (عرض) ، height (ارتفاع) ، padding (فاصله از درون) و margin (فاصله از بیرون) به تعداد زیاد استفاده می شود.
خطوط ۶ تا ۹ برای تعیین فاصله از درون صفحه به صورت پیش فرض نوشته شده اند.به خاطر سپردن کارایی هر ویژگی ساده است زیرا با ترجمه لغوی هر کدام می توانید به کاربر آن پی ببرید. به عنوان مثال PaddingBottom به معنی فاصله از پایین و PaddingRight به معنای فاصله از سمت راست می باشد. وقتی ما برای layout تعریف کرده ایم که padding از هر سمت ۱۶dp باشد به این معنی است که عناصر و view هایی که داخل layout قرار بگیرند (عناصر فرزند)، از چهار طرف آن به اندازه ۱۶dp فاصله خواهند داشت (به عبارتی همه عناصر حداقل ۱۶dp از حاشیه صفحه نمایش فاصله خواهند داشت). در ادامه با ویژگی ها به صورت مفصل آشنا خواهیم شد.

جهت مطالعه ادامه آموزش، فایل PDF را دانلود نمائید.

با توجه به اینکه آموزشهای پایه با قیمت ناچیزی برای تامین هزینه های سایت و تهیه آموزش های بعدی عرضه می شود، به اشتراک گذاری این فایل با دیگران خلاف اخلاق خواهد بود.

 

در صورتی که در پرداخت سبد خرید زیر با مشکل مواجه شدید، با مراجعه به این لینک مشخصات خود را به همراه مبلغ ۵۰۰۰ تومان ثبت نمایید.

دانلود فایل آموزشی با فرمت PDF
تعداد صفحات : ۵۱
قیمت : ۵۰۰۰ تومان

برچسب ها :
۰۴ خرداد ۱۳۹۵
سوالاتی که مشمول موارد زیر باشد تایید و پاسخ داده نخواهد شد :
۱ : جزء موارد پاسخ داده شده در مطلب "مشکلات و پرسش های رایج" باشد
۲ : سوال قبلا توسط افراد در دیدگاهها مطرح و پاسخ داده شده باشد
۳ : سوال خارج از مبحث آموزشی موجود در این صفحه باشد

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

کد امنیتی *