1. مقدمه
Material Components (MDC) به توسعه دهندگان کمک می کند طراحی مواد را پیاده سازی کنند. MDC که توسط تیمی از مهندسان و طراحان UX در Google ایجاد شده است، دارای ده‌ها مؤلفه رابط کاربری زیبا و کاربردی است و برای Android، iOS، وب و Flutter.material.io/develop در دسترس است. |
Material Components for Android (MDC Android) یک سیستم یا چارچوب جدیدی نیست که نیاز به تغییر الگو در برنامه شما داشته باشد. MDC Android بر روی همان کلاس‌ها و APIهایی ساخته شده است که قبلاً در اندروید می‌شناسید، مانند دکمه‌های AppCompat و فیلدهای متنی. اجزای ارائه شده توسط MDC Android می توانند در صورت نیاز مورد استفاده قرار گیرند و طراحی فوری برنامه موجود شما را بهبود بخشند.
چیزی که خواهی ساخت
در این کد لبه، برخی از اجزای موجود را به شکلی با اجزای جدید MDC جایگزین خواهید کرد.
اجزای MDC-Android در این کد لبه
- فیلدهای متنی
- دکمه ها
- منوها
آنچه شما نیاز دارید
- دانش اولیه توسعه اندروید
- Android Studio (اگر قبلاً آن را ندارید آن را از اینجا دانلود کنید)
- شبیه ساز یا دستگاه اندروید (در دسترس از طریق Android Studio)
- کد نمونه (مرحله بعدی را ببینید)
سطح تجربه خود را در ساخت برنامه های اندروید چگونه ارزیابی می کنید؟
2. محیط توسعه خود را تنظیم کنید
برنامه codelab starter را دانلود کنید
برنامه شروع در فهرست راهنمای material-components-android-codelabs-111-starter/kotlin قرار دارد. حتما قبل از شروع به آن دایرکتوری cd بزنید.
... یا آن را از GitHub شبیه سازی کنید
برای شبیه سازی این کد لبه از GitHub، دستورات زیر را اجرا کنید:
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 111-starter
کد شروع را در Android Studio بارگیری کنید
- هنگامی که جادوگر راه اندازی به پایان رسید و پنجره خوش آمدید به Android Studio نشان داده شد، روی باز کردن پروژه موجود Android Studio کلیک کنید. به فهرستی که کد نمونه را در آن نصب کرده بودید بروید و kotlin -> shipping را انتخاب کنید (یا رایانه خود را برای حمل و نقل جستجو کنید) تا پروژه حمل و نقل باز شود.
- همانطور که توسط نشانگرهای فعالیت در پایین پنجره Android Studio نشان داده شده است، کمی صبر کنید تا Android Studio پروژه را بسازد و همگام کند.
- در این مرحله، Android Studio ممکن است برخی از خطاهای ساخت را ایجاد کند زیرا شما Android SDK یا ابزارهای ساخت را از دست داده اید، مانند آنچه در زیر نشان داده شده است. دستورالعمل‌های موجود در Android Studio را برای نصب/به‌روزرسانی و همگام‌سازی پروژه خود دنبال کنید.
برنامه استارتر را اجرا کنید
|
|
موفقیت! باید برنامه و فرم آن را ببینید.
3. فیلدهای متنی را به روز کنید
فیلدهای متنی طراحی متریال نسبت به فیلدهای نوشتاری ساده، قابلیت استفاده زیادی دارند. با تعریف منطقه بازدید با طرح کلی یا پر کردن پس‌زمینه، کاربران به احتمال زیاد با فرم شما تعامل می‌کنند یا فیلدهای متنی را در محتوای پیچیده‌تر شناسایی می‌کنند.
MDC-Android را وارد کنید
به فایل 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!
}
}
}
بسازید و اجرا کنید. ذخیره را فشار دهید، اما حداقل یک فیلد متنی را خالی بگذارید:
فیلدهای متنی که خالی هستند قرمز هستند و متن خطا در زیر آنها وجود دارد.
4. دکمه را به روز کنید
MDC دارای دکمه هایی با:
- موج جوهر
- گوشه های گرد
- پشتیبانی از تم
- چیدمان و تایپوگرافی بی نقص پیکسل
- بر روی AppCompatButton (کلاس استاندارد دکمه های اندروید) ساخته شده است تا بدانید چگونه از آنها در کد خود استفاده کنید.
به صورت اختیاری جایگزین کلاس دکمه
به طور پیش فرض کتابخانه Material به طور خودکار دکمه های معمولی را به دکمه های MDC تبدیل می کند. با این حال، می‌توانید به‌طور اختیاری همه ارجاع‌ها به Button را با MaterialButton جایگزین کنید تا بتوانید به روش‌های دیگری که فقط در MaterialButton در دسترس هستند، مانند تغییر شعاع گوشه دسترسی داشته باشید. دکمه‌های MDC یک جزء ساده برای پلاگین و بازی هستند. شما فقط نام کامپوننت 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" />
ساخت و اجرا:
5. کارت اضافه کنید
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 راهی آشنا اما تازه برای قرار دادن آسان محتوای خود در کارت است.
6. خلاصه کنید
برخی از مؤلفه‌های رایج را جایگزین کرده‌اید تا ارزش فوری را نشان دهید: فیلدهای متنی، دکمه‌ها، کارت‌ها، و نیازی به طراحی مجدد برنامه خود ندارید. سایر اجزا نیز می توانند تفاوت بزرگی ایجاد کنند، مانند نوار برنامه بالا و TabLayout.
مراحل بعدی
با مراجعه به کاتالوگ ابزارک‌های Android می‌توانید اجزای بیشتری را در MDC-Android کاوش کنید.