فصل پنجم : طراحی رابط کاربری اندروید (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 را دانلود نمائید.

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

در صورتی که در دانلود از طریق باکس زیر (سبد دانلود) با مشکل مواجه شدید، با مراجعه به این لینک گزینه UI به مبلغ ۵۰۰۰ تومان را انتخاب نمائید.

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

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

    سلام
    من بعد از طراحی پروژه هایی این بخش نمیتونم اجراشون کنم.
    بعد از بیلد رو گوشی پیغام میاد unfortunately, myapp has stopped.
    از جنی موشن استفاده میکنم و روی اندروید ۵ و ۶ هم همینطوره
    پروژه های این بخش قابلیت run کردن دارن؟

    1. سید مهدی مطهری (مدیر) گفت:

      باید Log رو چک کنید ببینید کجای برنامه رو گیر میده. چیز مشخصی نیست که بشه ندیده راهنمایی کرد. لاگ رو به دقت بررسی کنید متوجه میشید کجا رو اشتباه کردین

  • محمد رضا گفت:

    نحوه آموزش تون عالیه. سپاسگزارم.

  • ali mirsalehi گفت:

    ادمین عزیز من کد
    android:layout_alignparentbottom=”true”
    کردم خطا داد که این چیزه وجود نداره و اشتباهه 😐
    ورژن برنامم ۲٫۳٫۳
    ورژن jdk ام ۹
    تموم جزوه هاتونو دانلود کردم ولی یه سری تفاوتا هست بینشون متاسفانه
    http://s9.picofile.com/file/8307688376/Capture.PNG

    1. سید مهدی مطهری (مدیر) گفت:

      شما رو لایه ConstraintLayout کار می کنید در حالی که در فایل آموزشی لایه RelativeLayout کار شده!

      1. ali mirsalehi گفت:

        شرمندده استاد میشه بگید چجوری به لایه RelativeLayout برم من همون طور که شما گفتید به پوشه res و بعد layout رو انتخاب کردم

        1. سید مهدی مطهری (مدیر) گفت:

          مطلب پرسش های رایج رو مطالعه کنید

  • محمدحسین گفت:

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

    1. Admin گفت:

      با سلام
      آموزشها به ترتیب از صفحه آخر به اول در دسترس هستن و آموزشهای رایگان با عنوان “آموزش رایگان” مشخص شدن

  • amirmasoud گفت:

    سلام استاد
    بعد از نصب اندروید استودیو به دلیل اینکه فونت ادیتور برنامه به هم ریخته بود رفتم تنظیمات فونت اما فونت بسته بود یعنی دیده میشد اما حالت این که بسته باشه و نشه تغییر داد وجود داشت ممنون میشم راهنمایی کنید

  • علی گفت:

    وقتی که موبایل زبان فارسی باشد همه view ها در برنامه به سمت راست میره! برای اینکه در موبایل هایی که زبان فارسی هستند این مشکل پیش نیاد و مث حالتی باشه که موبایل زبان انگلیسی هست چه کدی باید بزنیم؟

    1. Admin گفت:

      فارسی یا انگلیسی بودن زبان سیستم عامل ارتباطی با محتوای اپلیکیشن ها نداره

    2. ارش گفت:

      کافیه از بخش manifest, گزینه ای که rtl داره رو false کنید

      1. علی گفت:

        سلام
        به غیر از راه کار غیر فعال کردن rtl می تونی برای هر لایه یک gravity خاص تعریف کنی که بر اساس زبان سیستم عامل چینش محتوای لایه رو تنظیم کنه.
        در حال حاضر از گزینه end و start استفاده میشه که با یه سرچ کوچیک می تونی دقیق تر به جوابت برسی.
        موفق باشی

دیدگاهتان را بنویسید

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

کد امنیتی *