آموزش برنامه نویسی Android قسمت چهارم: شروع طراحی رابط کاربری

قسمت چهارم آموزش برنامه نویسی Android قسمت چهارم: شروع طراحی رابط کاربری

نوشته شده توسط: مهندس مهدی موسوی

بخش برنامه نویسی و نرم افزار|برنامه نویسی اندروید

قسمت های دیگر این مطلب:

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

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

رابط کاربری در اندروید توسط لایه‌ها ایجاد می‌شود و در مسیر res -> layout قرار می‌گیرد.

لایه‌های اندروید

به عنوان مثال تمام تصاویری که در پایین می‌بینید هر کدام یک لایه نمایشی هستند:

طراحی لایه‌ها در اندروید

لایه‌ها انواع متنوعی دارند ولی دو نوع از مهم ترین لایه‌ها در اندروید Linear (خطی) و Relative (نسبی) هستند.

لایه‌های خطی یا Linear در اندروید: لایه‌های خطی پرکاربرد ترین لایه در اندروید هستند و قابلیت‌های جالبی دارند. این لایه‌ها به دو صورت افقی و عمودی شکل می‌گیرند.

لایه‌های نسبی یا Relative در اندروید: در این لایه عناصر به صورت نسبی در کنار هم قرار می‌گیرند و مانند لایه‌های خطی موقعیت دهی آن‌ها مطلق نیست.

اجزای بخش طراحی لایه اندروید استودیو

بخش UI اندروید

برای باز کردن بخش طراحی فایل‌های رابط کاربری به پوشه res و از آن جا به Layout می‌رویم.

قسمت طراحی رابط کاربردی Android Studio از بخش‌های متعددی تشکیل شده است که در ادامه قصد داریم این بخش‌ها را با شماره موجود در عکس فوق به شما معرفی کنیم.

1) پنل پیش نمایش رابط کاربری: در این بخش پیش نمایشی از لایه نمایش جاری که در حال کار روی آن هستید مشاهده می‌کنید.

2) پنل Component Tree: در این بخش تمام اجزای موجود در صفحه، از لایه‌ها گرفته تا عکس‌ها و دکمه‌ها و هر جزء دیگری در صفحه به صورت درختی آمده است.

3) پنل Properties: روی هر جزئی در از صفحه که کلیک کنید مختصات کامل آن در این پنل قابل مشاهده و ویرایش است.

4) پنل Palette: در این پنل تمام چیزی که در یک صفحه می‌توانید ایجاد کنید، از لایه‌ها گرفته تا ویجت‌ها و هر آیتم دیگری لیست شده است و می‌توانید آن را به سادگی درون لایه نمایش و یا پنل Component Tree بکشید و اضافه کنید. توجه کنید جایگاه رها کردن این المان در Component Tree و یا پنل نمایش مهم است و اولویت‌ها و زیر شاخه‌ها و شاخه‌های اصلی با دقت انتخاب می‌شوند.

5) انتخاب حالت نمایش: حالت پیش فرضی که در صفحه می‌بینید نوع نمایش گرافیکی صفحه است، ولی این نوع نمایش در واقع یک سورس کد بر پایه xml است که با کلیک روی Text می‌توانید این سورس کد را مشاهده و ویرایش کنید.

آشنایی بیشتر با پنل پیش نمایش رابط کاربری

پیش نمایش اندروید

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

لایه نمایش غیر از سایز گوشی به نسخه اندروید نیز ممکن است واکنش متفاوتی نشان دهد که در این بخش تمام این نکات را می‌توانید بررسی کنید.

بخش‌های مهم این بخش با توجه به شماره‌های موجود در تصویر فوق عبارتند از:

1) در این قسمت می‌توانید لایه نمایش خود را در انواع گوشی‌ها و یا دستگاه‌های مختلف در یک آن ببینید.

2) در این بخش می‌توانید به صورت اختصاصی لایه نمایش خود را در یک دستگاه به خصوص مشاهده کنید.

3) با این دکمه می‌توانید جهت گوشی را از عرضی به طولی و بالعکس تبدیل کنید.

4) Theme گوشی را در این بخش عوض کنید.

5) انتخاب ورژن اندروید اجرا کننده رابط کاربری.

آشنایی با پنل Component Tree

component tree اندروید

در این پنل کلیه المان‌های موجود در صفحه از لایه‌ها گرفته تا اجزای درونی آن‌ها به صورت درختوار و درون هم گرد هم آمده اند. برخی المان‌ها مانند ظرف عمل می‌کنند و المان‌های دیگر را در خود جمع می‌کنند.

موقعیت عناصر نسبت به هم و قرار گیری آن‌ها در کنار هم بسیار مهم است.

آشنایی با پنل Properties

properties اندروید

هر عنصر و یا Component در اندروید یک سری خاصیت منحصر به خود دارد. مثلا اگر کامپوننت نوشته به لایه خود اضافه کنید می‌توانید خواص زیر را در آن اختصاصی کنید:

سایز و نوع خط
فاصله سطرهای خط
فاصله نوشته از چهار جهت
رنگ و حالت نوشته
و ...

یا اگر یک عکس اضافه کنید نیز خاصیت‌های دیگری در خود جا می‌دهد.

اگر چند المان دارای خاصیت‌های مشترکی باشند، با فشردن کلید Ctrl و انتخاب آن‌ها از Component Tree می‌توانید خواص مشترک آن‌ها را ویرایش کنید.

آشنایی بیشتر با پنل Palette

این پنل از هفت بخش تشکیل شده است که با کلیک روی بخش‌ها آن‌ها را به حالت بسته و یا باز در می‌آوریم:

component‌های اندروید palette

Layouts: این بخش شامل شش لایه مختلف به نام‌های زیر است:

FrameLayout
LinearLayout
TableLayout
TableRow
GridLayout
RelativeLayout

همان طور که در ابتدای این بخش گفتیم دو نوع لایه Linear و Relative مهم ترین نوع لایه‌های نمایشی هستند و با آن‌ها می‌توان تقریبا هر نوع رابط کاربری را طراحی کرد.

Widgets: در این بخش ابزارهای کاربردی و کامپوننت‌هایی برای اعمال زیر قرار گرفته اند:

اضافه کردن نوشته
انواع دکمه‌ها و سویچ ها
چک باکس‌ها و دکمه‌های رادیویی
نمایشگر تصاویر
ProgressBar
SeekBar
RattingBar
Spinner
WebView برای نمایش صفحه وب در نرم افزار

Text Fields: برای اضافه کردن انواع نوشته اعم از نوشته‌های ساده، پسوردها، ایمیل، زمان و تاریخ.

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

Date & Time: کامپوننت‌هایی برای وارد کردن و یا نشان دادن زمان و تاریخ در این بخش قرار گرفته اند.

Expert: کامپوننت‌های حرفه‌ای برای کارهای پیچیده.

Custom: کامپوننت‌هایی که توسط کاربر ایجاد می‌شوند.

آشنایی با نوع نمایش Text و Design

کدنویسی و نمایش لایه نمایش اندروید

لایه کاربری گرافیکی که شما در اندروید استودیو مشاهده و ویرایش می‌کنید در واقع یک سری کد XML است که در حین اضافه کردن عناصر به صورت خودکار ویرایش می‌شود.

مثلا صفحه زیر:

لایه نمایش اندروید