قبل از اینکه به آموزش متریال دیزاین در اندروید بپردازیم بهتر است بدانیم متریال دیزاین چیست؟ متریال دیزاین Material Design یک زبان طراحی مبتنی بر اندروید Android است که توسط شرکت گوگل Google ایجاد شده است که از اشیاء واقعی که در دنیای واقعی ما وجود دارد؛ برای طراحی استفاده می کند. در متریال دیزاین از ویژگی‌های مهم در طراحی از جمله نور پردازی، جلوه های سه بعدی، جلوه های انیمیشنی و حرکات طبیعی اشیاء که در دنیای واقعی دارند؛ استفاده می شود.
متریال دیزاین زاییده تفکر گوگل در طراحی مدرن است که در اواسط سال ۲۰۱۴ با اسم رمز “کاغذ کوانتومی” و با نام طراحی به سبک “جوهر و قلم” ظاهر شد. در متریال دیزاین، هدف ارائه خروجی با کیفیت بالا به طور مداوم در همه پلتفرم‌ها است که به کاربران اجازه می‌دهد تا بر روی اجزا با ظاهر دلپذیر که به وضوح نشان داده شده‌اند و مانند اشیاء دنیای واقعی رفتار می‌کنند، کنترل داشته باشند. درست است که در ابتدا این نوع طراحی برای اندروید ساخته شده بود ولی اکثر پلتفرم ها از این نوع طراحی استفاده می کنند.
هدف مهم گوگل از ارائه سبک متریال دیزاین ایجاد تجربه کاربری همسان و منسجم در اپلیکشن های مختلف اندرویدی است. در واقع رویکرد اساسی در این نوع طراحی از ریسپانسیو بودن طراحی در انیمیشن های، لی‌اوت‌ها، Shadowها و غیره در کنار هم استفاده می شود تا یک طراحی استاندارد آماده شود و در برنامه های مختلف از آن استفاده شود.
در متریال دیزاین بیشترین توجه به سیستم Grid و Animationها و عمق و سایه‌ها برای اشیا و المان ها است. ادعای گوگل در طراحی این سبک الهام از مرکب و کاغذ است به نوعی که گفته می شود همانطور که اشیا و اجسام در دنیای واقعی دارای حس هستند (طول و عرض و ارتفاع دارند) در این سبک طراحی نیز باید این حس ها به کاربر منتقل شوند. به طور کلی می توان گفت متریال دیزاین بر ۵ اصل زیر استوار است.
برای درک کامل متریال دیزاین پیام های بازرگانی دهه ۷۰ تلویزیون را با الان در نظر بگیرید و تفاوت نوع طراحی در تبلیغات تلویزیونی را متوجه شوید. گوگل این اصول را برای طراحی اندروید به عنوان یک سبک و استاندارد طراحی مطرح کرده تا کاربران لذت استفاده از اپلیکشن های اندرویدی را همیشه بیاد داشته باشند. برای آشنایی بیشتر درباره متریال دیزاین و توضیحات تکمیلی درباره آن، می توانید از طریق لینک زیر مقاله کامل آموزش متریال دیزاین را از فرادرس مطالعه کنید.
پس از توضیحات مختصری در مورد متریال دیزاین بهتر است وارد آموزش متریال دیزاین در اندروید استادیو شویم پس با ادامه آموزش با ما همراه شوید تا نحوه استفاده از متریال دیزاین در اندروید استادیو را توضیح دهیم.
خوب در این بخش از آموزش متریال دیزاین در اندروید اصول لازم برای استفاده از متریال دیزاین در اندروید استادیو را شرح خواهیم داد و نحوه جاگذاری کدها و تنظیمات لازم برای بهره مندی از توابع کتابخانه ای Material و استفاده آن ها در پروژه را آموزش خواهیم داد. پس ابتدا با جایگذاری وابستگی ها شروع می کنیم.
برای اینکه بتوانیم از دستورالعمل های متریال دیزاین در پروژه های خود استفاده کنیم راه ساه ای وجود دارد. کامپوننت های متریال Material Components برای اندروید از طریق مخزن Maven Google در دسترس است برای استفاده از این مخزن لازم است فایل build.gradle پروژه اندروید استادیو را برای برنامه خود باز کنید و اطمینان حاصل کنید که بخش مخازن شامل Maven Repository Google باشد. مثلا:
allprojects {
repositories {
google()
jcenter()
}
}
همچنین در بخش dependencies یا وابستگی ها، کتابخانه material را بایستی به بخش وابستگی ها اضافه کنید. البته ممکن است بسته به پروژه شما ورژن متریال متفاوت باشد به همین دلیل در کد پایین قسمت ورژن را قرار ندادیم.
dependencies {
// ...
implementation 'com.google.android.material:material:<version>'
// ...
}
اگر برنامه شما در حال حاضر به کتابخانه اصلی پشتیبانی طراحی وابسته است، می توانید از گزینه Refactor to AndroidX… ارائه شده توسط Android Studio استفاده کنید. با انجام این کار، وابستگی‌ها و کدهای برنامه شما برای استفاده از کتابخانه‌های جدید بسته‌بندی‌شده androidx و com.google.android.material به‌روزرسانی می‌شوند.
اگر هنوز نمی‌خواهید به بسته‌های جدید androidx و com.google.android.material تغییر دهید، می‌توانید از Material Components از طریق وابستگی com.android.support:design:28.0.0 استفاده کنید.
توجه: نباید از وابستگی های com.android.support و com.google.android.material به طور همزمان در برنامه خود استفاده کنید.
حتماً برنامه خود را با اندروید ۱۰ کامپایل کنید. برای استفاده از Material Components برای اندروید و آخرین نسخه‌های پشتیبانی کتابخانه‌ها، باید Android Studio 3.5 یا بالاتر را برای ساخت با Android 10 نصب کنید و کامپایل SdkVersion برنامه خود را به ۲۹ به‌روزرسانی کنید. موراد اشاره شده برای کامپایل و در نهایت اجرای برنامه در اندروید استادیو لازم و ضروری می باشد.
مطمئن شوید که از AppCompatActivity استفاده می کنید استفاده از AppCompatActivity اطمینان حاصل می کند که همه اجزا به درستی کار می کنند. اگر نمی توانید از AppCompatActivity گسترش یا Extend داشته باشید، Activityهای خود را برای استفاده از AppCompatDelegate به روز کنید. این باعث می‌شود که نسخه‌های AppCompat اجزاء در میان سایر موارد مهم باد شوند.
طرح زمینه برنامه خود را تغییر دهید تا از یک طرح زمینه Material Components را به ارث ببرد. انجام یک انتقال در سراسر برنامه با تغییر طرح زمینه برنامه به ارث بردن از طرح زمینه Material Components، یک رویکرد توصیه شده از طرف گوگل است. با این حال، مطمئن شوید که پس از این ارث بری هیچ خطایی برای اجرای برنامه وجود نداشته باشد، زیرا اجزای موجود در طرح‌بندی‌های موجود ممکن است ظاهر و طرح بندی را تغییر دهد. اگر نمی توانید theme خود را تغییر دهید، می توانید یکی از موارد زیر را انجام دهید:
تم های متریال کامپوننت Material Components
در زیر لیستی از تم های Material Components آمده است که می توانید از آنها برای دریافت جدیدترین سبک های مؤلفه و ویژگی های تم استفاده کنید.
Theme.MaterialComponents Theme.MaterialComponents.NoActionBar Theme.MaterialComponents.Light Theme.MaterialComponents.Light.NoActionBar Theme.MaterialComponents.Light.DarkActionBar Theme.MaterialComponents.DayNight Theme.MaterialComponents.DayNight.NoActionBar Theme.MaterialComponents.DayNight.DarkActionBar
theme برنامه خود را به‌روزرسانی کنید تا از یکی از این طرح‌ها را به ارث ببرد، به عنوان مثال:
<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight">
<!-- ... -->
</style>
تم های Bridge
اگر نمی توانید طرح زمینه خود را به ارث بردن از یک طرح زمینه Material Components تغییر دهید، می توانید از یک طرح زمینه Material Components Bridge ارث بری کنید.
<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light.Bridge">
<!-- ... -->
</style>
هر دو Theme.MaterialComponents و Theme.MaterialComponents.Light دارای تم های Bridge هستند:
Theme.MaterialComponents.Bridge Theme.MaterialComponents.Light.Bridge Theme.MaterialComponents.NoActionBar.Bridge Theme.MaterialComponents.Light.NoActionBar.Bridge Theme.MaterialComponents.Light.DarkActionBar.Bridge
تم‌های Bridge از تم‌های AppCompat ارث بری می کنند، اما ویژگی‌های تم جدید Material Components را نیز برای شما تعریف می‌کنند. اگر از یک تم Bridge استفاده می‌کنید، می‌توانید بدون تغییر تم برنامه، از اجزای طراحی متریال استفاده کنید.
تم های AppCompat
همچنین می‌توانید بدون تغییر تم برنامه، مؤلفه‌های جدید Material را به‌صورت تدریجی آزمایش کنید. این کار به شما این امکان را می‌دهد که طرح‌بندی‌های موجود خود را یکسان نگه دارید و در عین حال اجزای جدیدی را یکی یکی به طرح‌بندی خود وارد کنید. با این حال، باید ویژگی های تم جدید زیر را به طرح زمینه برنامه فعلی خود اضافه کنید، در غیر این صورت با خطاهای ThemeEnforcement مواجه خواهید شد:
<style name="Theme.MyApp" parent="Theme.AppCompat"> <!-- Original AppCompat attributes. --> <item name="colorPrimary">@color/my_app_primary_color</item> <item name="colorSecondary">@color/my_app_secondary_color</item> <item name="android:colorBackground">@color/my_app_background_color</item> <item name="colorError">@color/my_app_error_color</item> <!-- New MaterialComponents attributes. --> <item name="colorPrimaryVariant">@color/my_app_primary_variant_color</item> <item name="colorSecondaryVariant">@color/my_app_secondary_variant_color</item> <item name="colorSurface">@color/my_app_surface_color</item> <item name="colorOnPrimary">@color/my_app_color_on_primary</item> <item name="colorOnSecondary">@color/my_app_color_on_secondary</item> <item name="colorOnBackground">@color/my_app_color_on_background</item> <item name="colorOnError">@color/my_app_color_on_error</item> <item name="colorOnSurface">@color/my_app_color_on_surface</item> <item name="scrimBackground">@color/mtrl_scrim_color</item> <item name="textAppearanceHeadline1">@style/TextAppearance.MaterialComponents.Headline1</item> <item name="textAppearanceHeadline2">@style/TextAppearance.MaterialComponents.Headline2</item> <item name="textAppearanceHeadline3">@style/TextAppearance.MaterialComponents.Headline3</item> <item name="textAppearanceHeadline4">@style/TextAppearance.MaterialComponents.Headline4</item> <item name="textAppearanceHeadline5">@style/TextAppearance.MaterialComponents.Headline5</item> <item name="textAppearanceHeadline6">@style/TextAppearance.MaterialComponents.Headline6</item> <item name="textAppearanceSubtitle1">@style/TextAppearance.MaterialComponents.Subtitle1</item> <item name="textAppearanceSubtitle2">@style/TextAppearance.MaterialComponents.Subtitle2</item> <item name="textAppearanceBody1">@style/TextAppearance.MaterialComponents.Body1</item> <item name="textAppearanceBody2">@style/TextAppearance.MaterialComponents.Body2</item> <item name="textAppearanceCaption">@style/TextAppearance.MaterialComponents.Caption</item> <item name="textAppearanceButton">@style/TextAppearance.MaterialComponents.Button</item> <item name="textAppearanceOverline">@style/TextAppearance.MaterialComponents.Overline</item> </style>
برای اضافه کردن Material Component به برنامه از فیلدهای متنی استفاده می کنیم به عنوان مثال برای پیاده سازی یک فیلد متنی از طریق XML به صورت زیر تعریف استفاده می شود:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/textfield_label">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
توجه: اگر از theme استفاده نمی‌کنید که از یک Material Components ارث بری نمی کند، باید سبک فیلد متن را نیز از طریق style=”@style/Widget.MaterialComponents.TextInputLayout.FilledBox” مشخص کنید. برای مثال، اگر می‌خواهید یک فیلد متنی مشخص در طرح‌بندی خود داشته باشید، می‌توانید سبک مشخص شده Material Components را در قسمت متن در XML اعمال کنید:
<com.google.android.material.textfield.TextInputLayout
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/textfield_label">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
در این بخش از آموزش متریال دیزاین در اندروید یک مثال کامل از نحوه استفاده متریال دیزاین در اندروید استادیو را ارائه می دهیم. مراحل گفته شده را می توانید مرحله به مرحله در اندروید استادیو انجام دهید تا نحوه استفاده از مولفه‌های طراحی متریال را در برنامه اندروید مشاهده کنید.
مرحله ۱ – یک پروژه جدید در Android Studio ایجاد کنید، به File ⇒ New Project بروید و تمام جزئیات مورد نیاز را برای ایجاد یک پروژه جدید کامل کنید.
مرحله ۲ – کد زیر را در پروژه خود به res/layout/activity_main.xml اضافه کنید.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F95E5E"
android:orientation="vertical"
android:paddingTop="80dp"
tools:context=".LoginActivity">
<ImageView
android:id="@+id/loginLogo"
android:layout_width="240dp"
android:layout_height="222dp"
android:layout_gravity="center"
android:contentDescription="@string/login_logo"
android:paddingStart="8dp"
android:paddingLeft="250dp"
android:paddingTop="50dp"
android:paddingEnd="8dp"
android:src="@drawable/read_my_blog" />
<EditText
android:id="@+id/emailText"
android:layout_width="350dp"
android:layout_height="60dp"
android:ems="10"
android:autofillHints="@string/email_hint"
android:hint="@string/email_hint"
android:textColor="#FFFF"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:layout_marginBottom="10dp"/>
<EditText
android:id="@+id/pwdText"
android:layout_width="350dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:textColor="#FFFF"
android:layout_marginBottom="25dp"
android:ems="10"
android:hint="@string/pass_hint"
android:inputType="textPassword"/>
<Button
android:id="@+id/buttonLogin"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:backgroundTint="@color/colorPrimary"
android:text="@string/login_btn_txt"
android:textColor="@android:color/white"
android:layout_marginBottom="20dp"/>
<ProgressBar
android:id="@+id/loginProgress"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="400dp"
android:layout_height="20dp"
android:layout_gravity="center"
android:visibility="invisible"
android:indeterminate="true"
android:layout_marginBottom="30dp" />
<Button
android:id="@+id/buttonRegister"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:backgroundTint="@android:color/white"
android:text="@string/login_reg_btn_txt"
android:textColor="@color/colorPrimary" />
</LinearLayout>
مرحله ۳ – در ادامه آموزش متریال دیزاین در اندروید کد زیر را به src/MainActivity.java اضافه کنید:
package com.app.sample;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
مرحله ۴ – کد زیر را به Module dependencies در قسمت gradle برنامه خود اضافه کنید:
apply plugin: 'com.android.application'
android {
compileSdkVersion 29
defaultConfig {
applicationId "com.app.sample"
minSdkVersion 21
targetSdkVersion 29
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
///
implementation "com.google.android.material:material:1.1.0-alpha02"
}
مرحله ۵ – در قسمت Manifest نیز کد زیر را به Manifests/AndroidManifest.xml اضافه کنید:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.app.sample">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
خوب حالا وقت آن رسیده که برنامه خودتان را اجرا کنید. فرض می کنیم که شما دستگاه موبایل Android واقعی خود را به کامپیوتر خود متصل کرده اید. برای اجرای برنامه از استودیو اندروید، یکی از فایل های activity پروژه خود را باز کنید و روی نماد Run از نوار ابزار کلیک کنید. دستگاه موبایل خود را به عنوان یک گزینه برای شبیه سازی انتخاب کنید و سپس دستگاه موبایل خود را بررسی کنید تا صفحه پیش فرض شما نمایش داده شود:
برای استفاده از آموزش کاملاً کاربردی در زمینه استفاده از متریال دیزاین در اندروید استادیو می توانید فیلم آموزش Material Design فرادرس را تهیه کرده و مطالعه کنید.
در این پست به آموزش متریال دیزاین در اندروید پرداخته شد. اگر علاقه مند به برنامه نویسی اندروید هستید و دوست دارید اپلیکشن های جذاب و بروز ایجاد کنید، لازم است در پروژه های خودتان از قابلیت های متریال دیزاین استفاده کنید تا برنامه های کاربرپسند و خوش فرمی را ارائه کنید.
متریال دیزاین به شما این امکان را می دهد که پروژه های شما هم از لحاظ ساختاری و هم از لحاظ ظاهری، استانداردهای رایج یک اپلیکشن به‌روز را داشته باشد. با امکاناتی که در اندروید استادیو برای استفاده از متریال دیزاین گذاشته شده براحتی می توانید به با آن کار کنید. اگر تمایل داشتید از آخرین مقالات و آموزش های برنامه نویسی ما را مطالعه کنید و نظرات و پیشنهادات خود را با ما در میان بگذارید. موفق و پیروز باشید.
یک پاسخ
خیلی ممنون توضیحاتی که دادین کامل بود