طراحی رابط کاربری اندروید (UI)

برنامه نویس و توسعه دهنده اندروید لازم است پس از آشنایی اولیه با محیط اندروید استودیو، با رابط کاربری اندروید و نحوه طراحی آن آشنا شود. UI یا همان رابط کاربری واسط بین کاربر و برنامه می‌باشد. واضح است که اولین و مهمترین آیتم در جذب مخاطب و گرفتن نتیجه مناسب از انتشار اپلیکیشن، ساخت رابط کاربری اصولی، استاندارد و مدرن برای صفحات مختلف برنامه است. در این جلسه با کلیت رابط کاربری و انواع Layout ها، ویجت‌ها، واحدهای تعیین اندازه و… آشنا خواهیم شد.

این جلسه در قالب PDF و در ۵۱ صفحه تهیه شده که در ادامه چند صفحه‌ ابتدایی را مشاهده می‌کنید:

هر اپلیکیشن یا نرم افزار و یا وب سایت به طور کلی به دو بخش تقسیم می شود :
– بخش اول که رابط کاربری (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 می گردیم.

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

مشاهده می کنید که در خط شماره ۱ ، 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 را دانلود نمائید

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