۱. مقدمه
کامپوننتهای متریال (MDC) به توسعهدهندگان در پیادهسازی طراحی متریال کمک میکنند. MDC که توسط تیمی از مهندسان و طراحان UX در گوگل ایجاد شده است، دهها کامپوننت رابط کاربری زیبا و کاربردی را ارائه میدهد و برای اندروید، iOS، وب و Flutter.material.io/develop در دسترس است. |
کامپوننتهای متریال برای اندروید (MDC Android) یک سیستم یا چارچوب جدید نیست که نیاز به تغییر الگو در برنامه شما داشته باشد. MDC Android بر اساس همان کلاسها و APIهایی که از قبل در اندروید میشناسید، مانند دکمههای AppCompat و فیلدهای متنی، ساخته شده است. کامپوننتهای ارائه شده توسط MDC Android میتوانند در صورت نیاز مورد استفاده قرار گیرند و فوراً باعث بهبود طراحی برنامه موجود شما شوند.
آنچه خواهید ساخت
در این آزمایشگاه کد، شما برخی از اجزای موجود در یک فرم را با اجزای جدید توسط MDC جایگزین خواهید کرد.
اجزای MDC-Android در این آزمایشگاه کد
- فیلدهای متنی
- دکمهها
- منوها
آنچه نیاز دارید
- دانش پایه در توسعه اندروید
- اندروید استودیو (اگر ندارید، از اینجا دانلود کنید)
- یک شبیهساز یا دستگاه اندروید (از طریق اندروید استودیو قابل دسترسی است)
- کد نمونه (به مرحله بعدی مراجعه کنید)
سطح تجربه خود در ساخت برنامههای اندروید را چگونه ارزیابی میکنید؟
۲. محیط توسعه خود را تنظیم کنید
اپلیکیشن استارتر codelab را دانلود کنید
برنامهی آغازین در دایرکتوری material-components-android-codelabs-111-starter/kotlin قرار دارد. قبل از شروع، حتماً با cd به آن دایرکتوری بروید.
... یا آن را از گیتهاب کلون کنید
برای کپی کردن این codelab از گیتهاب، دستورات زیر را اجرا کنید:
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 111-starter
کد شروع را در اندروید استودیو بارگذاری کنید
- پس از اتمام مراحل نصب و نمایش پنجره Welcome to Android Studio ، روی Open an existing Android Studio project کلیک کنید. به پوشهای که کد نمونه را در آن نصب کردهاید بروید و kotlin -> shipping (یا عبارت shipping را در رایانه خود جستجو کنید) را انتخاب کنید تا پروژه Shipping باز شود.
- لحظهای صبر کنید تا اندروید استودیو پروژه را بسازد و همگامسازی کند، همانطور که توسط نشانگرهای فعالیت در پایین پنجره اندروید استودیو نشان داده شده است.
- در این مرحله، ممکن است اندروید استودیو به دلیل فقدان SDK اندروید یا ابزارهای ساخت، مانند آنچه در زیر نشان داده شده است، برخی خطاهای ساخت را ایجاد کند. برای نصب/بهروزرسانی این موارد و همگامسازی پروژه خود، دستورالعملهای موجود در اندروید استودیو را دنبال کنید.
برنامه شروع کننده را اجرا کنید
|
|
موفقیت! شما باید برنامه و فرم آن را ببینید.
۳. فیلدهای متنی را بهروزرسانی کنید
فیلدهای متنی طراحی متریال، نسبت به فیلدهای متنی ساده، از نظر کاربردپذیری پیشرفت قابل توجهی داشتهاند. با تعریف ناحیه هدف با یک طرح کلی یا یک پسزمینه، کاربران احتمال بیشتری دارند که با فرم شما تعامل داشته باشند یا فیلدهای متنی را در محتوای پیچیدهتر شناسایی کنند.
وارد کردن MDC-اندروید
به فایل build.gradle ماژول app بروید و مطمئن شوید که بلوک dependencies شامل یک وابستگی به MDC Android است:
api 'com.google.android.material:material:1.1.0-alpha05'
سبکهای فیلد متنی را جایگزین کنید
در shipping_info_activity.xml ، استایل زیر را به تمام کامپوننتهای XML مربوط TextInputLayout اضافه کنید:
shipping_info_activity.xml
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
هر TextInputLayout باید به شکل زیر باشد:
shipping_info_activity.xml
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/name_text_input"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/name_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/label_name" />
</com.google.android.material.textfield.TextInputLayout>
ساخت و اجرا:
فیلدهای متنی همگی بهروزرسانی شدهاند تا از طرحهای جدیدتر در MDC استفاده کنند.
اضافه کردن خطا
فیلدهای متنی MDC دارای نمایش خطای داخلی هستند. MDC متن قرمز را در زیر فیلد متنی شما اضافه میکند و تزئینات را نیز به رنگ قرمز بهروزرسانی میکند.
در ShippingInfoActivity.kt ، onCreate() را بهروزرسانی کنید تا ورودی متن بررسی شود و خطاها در صورت لزوم تنظیم شوند. این کد باید چیزی شبیه به این باشد:
ShippingInfoActivity.kt
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.shipping_info_activity)
val rootView = findViewById<View>(android.R.id.content)
val textInputLayouts = Utils.findViewsWithType(
rootView, TextInputLayout::class.java)
save_button.setOnClickListener {
var noErrors = true
for (textInputLayout in textInputLayouts) {
val editTextString = textInputLayout.editText!!.text.toString()
if (editTextString.isEmpty()) {
textInputLayout.error = resources.getString(R.string.error_string)
noErrors = false
} else {
textInputLayout.error = null
}
}
if (noErrors) {
// All fields are valid!
}
}
}
ساخت و اجرا. دکمهی ذخیره را بزنید، اما حداقل یک فیلد متنی را خالی بگذارید:
فیلدهای متنی که خالی هستند قرمز هستند و متن خطا در زیر آنها قرار دارد.
۴. دکمه را بهروزرسانی کنید
MDC دکمههایی با موارد زیر دارد:
- موجهای جوهر
- گوشههای گرد
- پشتیبانی از قالببندی
- طرحبندی و تایپوگرافی پیکسلی بینقص
- بر اساس AppCompatButton (کلاس استاندارد دکمه اندروید) ساخته شده است، بنابراین میدانید چگونه از آنها در کد خود استفاده کنید.
کلاس دکمه را به صورت اختیاری جایگزین کنید
به طور پیشفرض، کتابخانه Material به طور خودکار Buttonهای معمولی را به MDC Buttonها تبدیل میکند. با این حال، میتوانید به صورت اختیاری تمام ارجاعات به Button را با MaterialButton جایگزین کنید تا بتوانید به متدهای اضافی که فقط در MaterialButton موجود هستند، مانند تغییر شعاع گوشه، دسترسی داشته باشید. MDC Buttonها یک کامپوننت ساده plug-and-play هستند. شما فقط نام کامپوننت XML Button با MaterialButton جایگزین میکنید و سبک پیشفرض MaterialButton به MaterialButton اعمال میکنید.
در shipping_info_activity.xml ، دکمه خود را به صورت زیر تغییر دهید:
shipping_info_activity.xml
<Button
android:id="@+id/save_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
به:
shipping_info_activity.xml
<com.google.android.material.button.MaterialButton
android:id="@+id/save_button"
style="@style/Widget.MaterialComponents.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
ساخت و اجرا:
۵. کارت اضافه کنید
MaterialCardView کامپوننتی است که بر روی CardView ساخته شده و دارای ویژگیهای زیر است:
- ارتفاع و استایل صحیح
- عرض خط و ویژگیهای رنگ
قرار دادن محتوا در یک کارت
LinearLayout خود را که شامل محتوای شما در shipping_info_activity.xml است، با یک کامپوننت MaterialCardView به صورت زیر پوشش دهید:
shipping_info_activity.xml
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:contentPadding="16dp">
<!-- LinearLayout goes here -->
</com.google.android.material.card.MaterialCardView>
ساخت و اجرا. کل فرم باید در یک کارت قرار گیرد:
کامپوننت Material Card View روشی آشنا اما جدید برای قرار دادن آسان محتوای شما در یک کارت است.
۶. خلاصه
شما برخی از اجزای رایج را برای نمایش فوری ارزش جایگزین کردهاید: فیلدهای متنی، دکمهها، کارتها، و لازم نبود کل برنامه خود را از نو طراحی کنید. اجزای دیگر نیز میتوانند تفاوت بزرگی ایجاد کنند، مانند نوار بالای برنامه و TabLayout.
مراحل بعدی
شما میتوانید با مراجعه به کاتالوگ ابزارکهای اندروید ، اجزای بیشتری را در MDC-Android بررسی کنید.