دوره طراحی رابط کاربری و طراحی متریال Android قسمت اول: مفاهیم اولیه

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

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

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

دوره آموزش اندروید

پیش از ارائه شدن طراحی متریال اندروید، برنامه نویسان اندروید هیچ استانداردی برای پیاده سازی رابط کاربری مناسب کاربران نداشتند.

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

در قسمت اول دوره اندروید گفتیم هر ورژن اندروید به ترتیب با یک حرف انگلیسی شروع می‌شود. مثلا نسخه سوم اندروید Cupcake، و یا نسخه چهارم Donut نام دارد.

البته یک نام گذاری دیگر بر اساس API Level نیز وجود دارد که لیست انتشار نسخه‌های اندروید را با دقت بیشتری نشان می‌دهد. دانستن این لیست در برنامه نویسی اندروید به شما کمک می‌کند.

در شروع برنامه نویسی اندروید حتما باید کمترین نسخه قابل پشتیبانی (Minimum SDK) را برای پروژه خود معرفی کنید و نرم افزار شما برای گوشی با اندروید پایین تر قابل اجرا نخواهد بود. البته گاهی نسخه‌های قدیمی فاقد قابلیت‌هایی هستند که تولید نرم افزار را غیر ممکن و یا خیلی سخت می‌کنند.

این لیست به شرح زیر است:

انتخاب نسخه Minimum SDK بسیار مهم است، اگر قصد دارید توسعه‌ای کم دردسر داشته باشید این آیتم را روی API17 تنظیم کنیم. در این نسخه از اندروید قابلیت پشتیبانی از RTL به اندروید افزوده شد که در فرایند طراحی نرم افزار برای زبان فارسی انتخاب بهتری است. اگر از API کمتر از 17 استفاده کنید نا گزیر هستید کدهای اضافه‌ای به برنامه خود بدهید تا ظاهر نرم افزار شما دچار تغییر بزرگی در نسخه‌های پایین تر اندروید نشود. البته به خاطر داشته باشید بیشتر از 90 درصد افراد گوشی با اندروید بالاتر از API17 دارند  و روز به روز این درصد بیشتر خواهد شد.

برای داشتن قابلیت‌های طراحی متریال باید کتابخانه‌ای با نام com.android.support:design را به لیست وابستگی‌های برنامه خود اضافه کنید.

از منو File گزینه Project Structure را انتخاب کرده و از منو سمت چپ گزینه app و Dependencies را کلیک می‌کنیم. در این جا لیست کتابخانه‌های نصب شده در پروژه خود را خواهید دید. از این بخش با کلیک روی علامت مثبت و انتخاب Library Dependency می‌توانید کتابخانه‌های دیگری را به پروژه خود اضافه کنید.

در باکس جستجوی این بخش عبارت com.android.support:design را وارد کرده و Enter را فشار دهید تا جستجو انجام شود. پس از جستجو در لیست کتابخانه‌ها باید این کتابخانه را انتخاب کنید. طبعا پس از عبارت com.android.support:design ورژن کتابخانه موجود در sdk شما نمایان خواهد شد.

پس از اضافه کردن این کتابخانه این امکان وجود دارد در برنامه خود از قابلیت‌های متریال دیزاین دسترسی داشته باشید.

نکته: اندروید استودیو گاهی برای پیاده سازی پکیج‌ها نیازمند ف.ی.ل.ت.ر شکن است.

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

طراحی لایه‌های متفاوت برای گوشی‌های مختلف

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

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

یا این که این لایه‌های نمایش بر اساس نسخه اندروید تقسیم شوند:

فایل AndroidManifest.xml را باز کنید از خصوصیات تگ application خاصیتی به نام android:theme را بیابید. مقدار این خاصیت عبارت است از @> همانطور که در دوره اندروید گفتیم کاراکتر @ نشان دهنده مشتق شدن این مقدار از فایل >

<resources>
    <>

بخش >Theme.AppCompat.Light.DarkActionBar است که یک قالب از قالب‌های سیستمی می‌باشد.

item‌های درون >@color  به این معناست که این مقدار از فایلی با نام color از پوشه values استخراج می‌گردد. نام این اجزا را در تصویر زیر ببینید:

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

به عنوان مثال قصد داریم برای گوشی‌های با نسخه 21 و بالاتر یک استایل جدید ایجاد کنیم. روی پوشه res راست کلیک کرده و Show in Explorer را باز کنید. وارد پوشه res شده و در آن یک پوشه به نام values-v21 ایجاد کنید. درون این پوشه جدید فایلی با نام >

در مسیر پروژه خود در اندروید استودیو خواهید دید که یک پوشه به نام > ساخته شده است که در آن دو فایل وجود دارد که عبارتند از > و > .

از این به بعد اگر برنامه خود را در یک گوشی و یا ماشین مجازی با اندروید 5 به بالا اجرا کنید فایل > و اگر نسخه دستگاه شما پایین تر از 5 باشد فایل > استفاده خواهد شد.

سطرهای زیر را  درون فایل > قرار دهید:

<resources>
    <>

سطرهای زیر را نیز درون فایل >

<resources>
    <>

در هر دو فایل فوق خاصیت colorPrimary را ویرایش کردیم و به آن یک رنگ به صورت RGB دادیم. (آشنایی با سیستم رنگ RGB)

دو ماشین مجازی یکی با API 21 یا بالاتر و دومی کمتر از API 21 ایجاد کنید. می‌توانید ماشین مجازی خود را در محیط اندروید استودیو و یا Genymotion ایجاد کنید.

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

نتیجه اجرا مانند زیر خواهد بود:

کد رنگ بخش colorPrimary فایل > رنگ صورتی و برای فایل > رنگ زرد بود.

نکته: برخی بخش‌ها را در گوشی‌های قدیمی نمی‌توان ویرایش کرد، مانند تغییر رنگ بخش colorPrimaryDark.

رنگ‌ها در طراحی متریال دیزاین

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

سایت materialpalette.com یک راهنمای تمام عیار برای انتخاب رنگ بندی لایه‌ها به شما ارائه می‌دهد.

در این سایت پس از انتخاب دو رنگ اصلی رنگ بندی مناسب سایر بخش‌ها به شما پیشنهاد داده می‌شود:

در بالا دو رنگ PINK و DEEP ORANGE را انتخاب کردیم و هشت رنگ برای بخش‌های مختلف برنامه پیشنهاد داده شد. البته ممکن است مایل نباشید از همه آن‌ها استفاده کنید و فقط موارد مهم را به کار ببرید.

یک سایت دیگر flatuicolorpicker.com نام دارد که برای هر رنگ اکثر طیف رنگ‌های جالب را ارائه می‌دهد:

قسمت‌های بسیار مهم بعدی را از دست ندهید.

تگ ها: android / اندروید android studio Genymotion طراحی متریال
نظر خود را برای این مطلب وارد کنید
دریافت خبرنامه

مطالب برگزیده برنامه نویسی اندروید