MDC-104 Android: Material Advanced Components (Kotlin)

1. مقدمه

Material Components (MDC) به توسعه دهندگان کمک می کند طراحی مواد را پیاده سازی کنند. MDC که توسط تیمی از مهندسان و طراحان UX در Google ایجاد شده است، دارای ده‌ها مؤلفه رابط کاربری زیبا و کاربردی است و برای Android، iOS، وب و Flutter.material.io/develop در دسترس است.

در Codelab MDC-103، رنگ، ارتفاع، و تایپوگرافی Material Components (MDC) را برای استایل دادن به برنامه خود سفارشی کردید.

یک جزء در سیستم طراحی متریال مجموعه ای از وظایف از پیش تعریف شده را انجام می دهد و ویژگی های خاصی مانند یک دکمه دارد. با این حال، یک دکمه بیشتر از یک روش ساده برای کاربر برای انجام یک عمل است، بلکه بیانی بصری از شکل، اندازه و رنگ است که به کاربر اجازه می‌دهد بفهمد که تعاملی است و با لمس یا کلیک چیزی اتفاق می‌افتد.

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

در حالی که دستورالعمل‌های طراحی متریال از بسیاری از مؤلفه‌ها نام می‌برند، همه آنها کاندیدای خوبی برای کدهای قابل استفاده مجدد نیستند و بنابراین در MDC یافت نمی‌شوند. شما می توانید این تجربیات را خودتان ایجاد کنید تا به یک سبک سفارشی برای برنامه خود دست پیدا کنید، همه با استفاده از کد سنتی.

چیزی که خواهی ساخت

در این لبه کد، یک پس‌زمینه به Shrine اضافه می‌کنید. محصولات نشان داده شده در شبکه نامتقارن را بر اساس دسته فیلتر می کند. شما استفاده خواهید کرد:

• شکل
• حرکت
• کلاس های Android SDK سنتی

این آخرین مورد از 4 کد لبه است که شما را در ساخت یک برنامه برای محصولی به نام Shrine راهنمایی می کند. ما به شما توصیه می کنیم که همه کدها را به ترتیب انجام دهید، همانطور که در کارها به صورت گام به گام پیشرفت می کنند. MDC-101: مبانی اجزای مواد (MDC). MDC-102: ساختار و چیدمان طراحی متریال . MDC-103: طرح زمینه طراحی متریال با رنگ، شکل، ارتفاع و نوع

اجزای MDC-Android در این کد لبه

• شکل

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

• دانش اولیه توسعه اندروید
• Android Studio (اگر قبلاً آن را ندارید آن را از اینجا دانلود کنید)
• شبیه ساز یا دستگاه اندروید (در دسترس از طریق Android Studio)
• کد نمونه (مرحله بعدی را ببینید)

سطح تجربه خود را در ساخت برنامه های اندروید چگونه ارزیابی می کنید؟

تازه کار متوسط مسلط

2. محیط توسعه خود را تنظیم کنید

از MDC-103 ادامه می دهید؟

اگر MDC-103 را تکمیل کرده اید، کد شما باید برای این کد لبه آماده باشد. به مرحله 3 بروید.

از صفر شروع کنم؟

برنامه codelab starter را دانلود کنید

دانلود برنامه استارت

برنامه شروع در فهرست راهنمای material-components-android-codelabs-104-starter/kotlin قرار دارد. حتما قبل از شروع به آن دایرکتوری cd بزنید.

... یا آن را از GitHub شبیه سازی کنید

برای شبیه سازی این کد لبه از GitHub، دستورات زیر را اجرا کنید:

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 104-starter

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

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

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

وابستگی های پروژه را اضافه کنید

این پروژه به کتابخانه پشتیبانی MDC Android نیاز دارد. کد نمونه ای که دانلود کرده اید باید قبلاً این وابستگی را در لیست داشته باشد، اما برای اطمینان از انجام مراحل زیر تمرین خوبی است.

1. به فایل build.gradle ماژول app بروید و مطمئن شوید که بلوک dependencies دارای وابستگی به MDC Android است:

api 'com.google.android.material:material:1.1.0-alpha06'

2. (اختیاری) در صورت لزوم، فایل build.gradle را ویرایش کنید تا وابستگی های زیر را اضافه کنید و پروژه را همگام سازی کنید.

dependencies {
    api 'com.google.android.material:material:1.1.0-alpha06'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    implementation 'com.android.volley:volley:1.1.1'
    implementation 'com.google.code.gson:gson:2.8.5'
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.21"
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:core:1.1.0'
    androidTestImplementation 'androidx.test.ext:junit:1.1.0'
    androidTestImplementation 'androidx.test:runner:1.2.0-alpha05'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0-alpha05'
}

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

مطمئن شوید که پیکربندی ساخت در سمت چپ دکمه 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 انجام دهید.

موفقیت! باید برنامه Shrine را در حال اجرا در دستگاه خود مشاهده کنید.

3. منوی پس زمینه را اضافه کنید

پس زمینه دورترین سطح پشتی برنامه است که در پشت همه محتوا و اجزای دیگر ظاهر می شود. این از دو سطح تشکیل شده است: یک لایه پشتی (که اعمال و فیلترها را نمایش می دهد) و یک لایه جلو (که محتوا را نمایش می دهد). می توانید از یک پس زمینه برای نمایش اطلاعات و اقدامات تعاملی مانند پیمایش یا فیلترهای محتوا استفاده کنید.

محتوای شبکه را پنهان کنید

در shr_product_grid_fragment.xml ، ویژگی android:visibility="gone" را به NestedScrollView خود اضافه کنید تا به طور موقت محتوای محصول را حذف کنید:

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   android:visibility="gone"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

ما یک پس زمینه در این منطقه نصب می کنیم. برای جلوگیری از نمایش تقسیم بین نوار بالای برنامه و محتوای منو که در پس‌زمینه ظاهر می‌شود، پس‌زمینه را همرنگ نوار برنامه بالا می‌کنیم.

در shr_product_grid_fragment.xml ، قبل از AppBarLayout ، موارد زیر را به عنوان اولین عنصر در FrameLayout ریشه خود اضافه کنید:

shr_product_grid_fragment.xml

<LinearLayout
   style="@style/Widget.Shrine.Backdrop"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:gravity="center_horizontal"
   android:orientation="vertical"
   android:paddingTop="100dp"
   android:paddingBottom="100dp">

</LinearLayout>

در styles.xml موارد زیر را اضافه کنید:

styles.xml

<style name="Widget.Shrine.Backdrop" parent="">
   <item name="android:background">?attr/colorAccent</item>
</style>

آفرین! شما یک پس زمینه زیبا به رابط کاربری Shrine اضافه کرده اید. بعد، یک منو اضافه می کنیم.

منو را اضافه کنید

منو در اصل فهرستی از دکمه های متنی است. یکی را در اینجا اضافه می کنیم.

یک فایل layout جدید به نام shr_backdrop.xml در دایرکتوری res -> layout خود ایجاد کنید و موارد زیر را اضافه کنید:

shr_backdrop.xml

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_featured_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_apartment_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_accessories_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_shoes_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_tops_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_bottoms_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_dresses_label" />

   <View
       android:layout_width="56dp"
       android:layout_height="1dp"
       android:layout_margin="16dp"
       android:background="?android:attr/textColorPrimary" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_account_label" />

</merge>

و این لیست را با استفاده از یک تگ <include> به LinearLayout که به تازگی در shr_product_grid_fragment.xml اضافه کرده اید اضافه کنید:

shr_product_grid_fragment.xml

<LinearLayout
   style="@style/Widget.Shrine.Backdrop"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:gravity="center_horizontal"
   android:orientation="vertical"
   android:paddingTop="88dp">

   <include layout="@layout/shr_backdrop" />
</LinearLayout>

بسازید و اجرا کنید. صفحه اصلی شما باید به شکل زیر باشد:

اکنون ما پس زمینه خود را تنظیم کرده ایم. بیایید محتوایی را که قبلا پنهان کرده بودیم بازگردانیم.

4. یک شکل اضافه کنید

قبل از ایجاد هرگونه تغییری در Shrine در این آزمایشگاه کد، محتوای اولیه محصول در دورترین سطح پشتی قرار داشت. با افزودن یک پس زمینه، این محتوا اکنون بیشتر مورد تاکید قرار می گیرد زیرا در جلوی آن پس زمینه ظاهر می شود.

یک لایه جدید اضافه کنید

ما باید دوباره لایه شبکه محصول را نشان دهیم. ویژگی android:visibility="gone" از NestedScrollView خود حذف کنید:

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

یک شکل اضافه کنید

شکل شبکه را تغییر دهید. ما یک پس‌زمینه شکل سفارشی ارائه کرده‌ایم، اما شکل فقط در Android Marshmallow و بالاتر به درستی نمایش داده می‌شود. ما می‌توانیم پس‌زمینه shr_product_grid_background_shape را در NestedScrollView شما فقط برای Android Marshmallow و بالاتر تنظیم کنیم. ابتدا یک id به NestedScrollView خود اضافه کنید تا بتوانیم به صورت کد به آن ارجاع دهیم:

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:id="@+id/product_grid"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

سپس، پس‌زمینه را به صورت برنامه‌نویسی در ProductGridFragment.kt تنظیم کنید. منطق زیر را برای تنظیم پس‌زمینه در انتهای onCreateView() درست قبل از عبارت return اضافه کنید:

ProductGridFragment.kt

// Set cut corner background for API 23+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
       view.product_grid.background = context?.getDrawable(R.drawable.shr_product_grid_background_shape)
}

در نهایت، منبع رنگ productGridBackgroundColor (که توسط پس‌زمینه شکل سفارشی نیز استفاده می‌شود) را به‌صورت زیر به‌روزرسانی می‌کنیم:

Colors.xml

<color name="productGridBackgroundColor">#FFFBFA</color>

ساخت و اجرا:

ما به Shrine یک شکل سفارشی به سطح اولیه آن داده ایم. به دلیل ارتفاع سطح، کاربران می توانند ببینند که چیزی در پشت لایه سفید جلویی وجود دارد. بیایید حرکت را اضافه کنیم تا کاربران بتوانند آنچه را که در آنجا وجود دارد ببینند: منو.

5. حرکت را اضافه کنید

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

حرکت آشکار را به دکمه منو اضافه کنید

حرکت شکل جلویی است که مستقیماً به سمت پایین حرکت می کند. ما قبلاً یک شنونده کلیک برای شما ارائه کرده‌ایم که انیمیشن ترجمه را برای برگه در NavigationIconClickListener.kt انجام می‌دهد. ما می‌توانیم این کلیک شنونده را در onCreateView() ProductGridFragement ، در بخشی که مسئول تنظیم نوار ابزار است، تنظیم کنیم. خط زیر را برای تنظیم شنونده کلیک روی نماد منو نوار ابزار اضافه کنید:

ProductGridFragment.kt

view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid))

اکنون بخش باید به صورت زیر باشد:

ProductGridFragment.kt

// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid))

بسازید و اجرا کنید. دکمه منو را فشار دهید:

فشار دادن مجدد نماد منوی پیمایش باید آن را پنهان کند.

حرکت لایه جلویی را تغییر دهید

حرکت یک راه عالی برای بیان برند شما است. بیایید ببینیم انیمیشن آشکار با استفاده از یک منحنی زمان‌بندی متفاوت چگونه به نظر می‌رسد.

شنونده کلیک خود را در ProductGridFragment.kt به روز کنید تا یک Interpolator به شنونده کلیک آیکون پیمایش خود ارسال کنید، به شرح زیر:

ProductGridFragment.kt

view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid, AccelerateDecelerateInterpolator()))

این یک اثر متفاوت ایجاد می کند، اینطور نیست؟

6. نماد مارک

نماد نگاری مارک به نمادهای آشنا نیز گسترش می یابد. بیایید نماد آشکار را سفارشی کنیم و آن را با عنوان خود ادغام کنیم تا ظاهری منحصر به فرد و مارک دار داشته باشیم.

نماد دکمه منو را تغییر دهید

دکمه منو را تغییر دهید تا نمادی با طرح الماس نمایش داده شود. نوار ابزار خود را در shr_product_grid_fragment.xml به‌روزرسانی کنید تا از نماد مارک جدیدی که برای شما ارائه کرده‌ایم ( shr_branded_menu ) استفاده کنید و ویژگی‌های app:contentInsetStart و android:padding تنظیم کنید تا نوار ابزار بهتر با مشخصات طراح شما مطابقت داشته باشد:

shr_product_grid_fragment.xml

<androidx.appcompat.widget.Toolbar
   android:id="@+id/app_bar"
   style="@style/Widget.Shrine.Toolbar"
   android:layout_width="match_parent"
   android:layout_height="?attr/actionBarSize"
   android:paddingStart="12dp"
   android:paddingLeft="12dp"
   android:paddingEnd="12dp"
   android:paddingRight="12dp"
   app:contentInsetStart="0dp"
   app:navigationIcon="@drawable/shr_branded_menu"
   app:title="@string/shr_app_name" />

ما یک بار دیگر شنونده کلیک خود را در onCreateView() در ProductGridFragment.kt به روز می کنیم تا در هنگام باز و بسته شدن منو، نقشه های نوار ابزار را به صورت زیر دریافت کنیم:

ProductGridFragment .kt

// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(
       activity!!,
       view.product_grid,
       AccelerateDecelerateInterpolator(),
       ContextCompat.getDrawable(context!!, R.drawable.shr_branded_menu), // Menu open icon
       ContextCompat.getDrawable(context!!, R.drawable.shr_close_menu))) // Menu close icon

ساخت و اجرا:

خوب! هنگامی که پس زمینه آشکار می شود، نماد منوی الماس نمایش داده می شود. هنگامی که منو می تواند پنهان شود، به جای آن یک نماد بسته نمایش داده می شود.

7. خلاصه کنید

در طول این چهار کد، شما نحوه استفاده از Material Components را برای ایجاد تجربیات کاربر منحصر به فرد و ظریفی که بیانگر شخصیت و سبک یک برند است، مشاهده کرده اید.

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

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

مراحل بعدی

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

برای چالش بیشتر با این لبه کد، برنامه Shrine خود را تغییر دهید تا تصاویر محصول نشان داده شده در هنگام انتخاب یک دسته از منوی پس زمینه را تغییر دهد.

برای آشنایی با نحوه اتصال این برنامه به Firebase برای یک Backend کارآمد، به Firebase Android Codelab مراجعه کنید.

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

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

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

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