MDC-111 Android: ترکیب اجزای مواد در پایگاه کد شما (Kotlin)

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 وجود دارد که می توانید آنها را بررسی کنید که از اجزای زیادی برای ساخت یک برنامه استفاده می کنند. برای شروع، به این آدرس مراجعه کنید: MDC-101: Material Components (MDC) Basics .

اجزای 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

برای راهنمایی بیشتر: شبیه سازی یک مخزن از GitHub

کد شروع را در Android Studio بارگیری کنید

1. هنگامی که جادوگر راه اندازی به پایان رسید و پنجره خوش آمدید به Android Studio نشان داده شد، روی باز کردن پروژه موجود Android Studio کلیک کنید. به فهرستی که کد نمونه را در آن نصب کرده بودید بروید و kotlin -> shipping را انتخاب کنید (یا رایانه خود را برای حمل و نقل جستجو کنید) تا پروژه حمل و نقل باز شود.
2. همانطور که توسط نشانگرهای فعالیت در پایین پنجره Android Studio نشان داده شده است، کمی صبر کنید تا Android Studio پروژه را بسازد و همگام کند.
3. در این مرحله، Android Studio ممکن است برخی از خطاهای ساخت را ایجاد کند زیرا شما Android SDK یا ابزارهای ساخت را از دست داده اید، مانند آنچه در زیر نشان داده شده است. دستورالعمل‌های موجود در Android Studio را برای نصب/به‌روزرسانی و همگام‌سازی پروژه خود دنبال کنید.

برنامه استارتر را اجرا کنید

مطمئن شوید که پیکربندی ساخت در سمت چپ دکمه Run / Play app است. برای ساخت و اجرای برنامه ، دکمه سبز Run / Play را فشار دهید. در پنجره Select Deployment Target ، اگر قبلاً یک دستگاه Android در لیست دستگاه های موجود خود دارید، به مرحله 8 بروید. در غیر این صورت، روی Create New Virtual Device کلیک کنید. در صفحه انتخاب سخت افزار ، یک دستگاه تلفن مانند Pixel 2 را انتخاب کنید و سپس روی Next کلیک کنید. در صفحه تصویر سیستم ، یک نسخه جدید Android را انتخاب کنید، ترجیحاً بالاترین سطح API را انتخاب کنید. اگر نصب نیست، روی لینک دانلودی که نشان داده شده است کلیک کنید و دانلود را کامل کنید. روی Next کلیک کنید. در صفحه دستگاه مجازی Android (AVD) ، تنظیمات را همانطور که هستند رها کنید و روی Finish کلیک کنید. یک دستگاه Android را از گفتگوی هدف استقرار انتخاب کنید. Ok را کلیک کنید. Android Studio برنامه را می سازد، آن را مستقر می کند و به طور خودکار آن را در دستگاه مورد نظر باز می کند.

اگر نتوانستید وابستگی را اضافه کنید یا برنامه را با موفقیت اجرا کنید، محیط توسعه دهنده خود را متوقف کرده و عیب یابی کنید.

اگر هنگام ساخت با خطای INSTALL_FAILED_INVALID_APK مواجه شدید، سعی کنید « ساخت » -> « پروژه پاک » را در Android Studio انجام دهید. اگر باز هم انجام نشد، لطفاً مطمئن شوید که از Android Studio نسخه 3.2 یا بالاتر استفاده می‌کنید.

موفقیت! باید برنامه و فرم آن را ببینید.

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.

برنامه تکمیل شده MDC 111 با دانلود کد لبه تمام شده یا با بررسی 111-complete با git: git checkout 111-complete در دسترس است.

می‌توانید نسخه برنامه خود را با برنامه موجود در آن شعبه آزمایش کنید.

مراحل بعدی

با مراجعه به کاتالوگ ابزارک‌های Android می‌توانید اجزای بیشتری را در MDC-Android کاوش کنید.

من توانستم با صرف زمان و تلاش معقول این کد لبه را تکمیل کنم

کاملا موافقم موافقم خنثی مخالف به شدت مخالفم

من می‌خواهم در آینده از Material Component استفاده کنم

کاملا موافقم موافقم خنثی مخالف به شدت مخالفم