MDC-104 Android: Material Advanced Components (Java)

1. مقدمه

logo_components_color_2x_web_96dp.png

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

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

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

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

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

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

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

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

21c025467527a18e.pngdcde66003cd51a5.png

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

  • شکل

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

F5H6srsw_5xOPGFpKrm1RwgewatxA_HUbDI1PWoQUAoJcT6DpfBOkAYwq3S-2vUHvweUaFgAmG7BtUKkGouUbhTwXQh53qec8tO5eVecdlo8QNhBOBSL

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

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

  1. به فایل build.gradle ماژول app بروید و مطمئن شوید که بلوک dependencies دارای وابستگی به MDC Android است:
api 'com.google.android.material:material:1.1.0-alpha06'
  1. (اختیاری) در صورت لزوم، فایل 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'
}

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

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

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

79eaeaff51de5719.png

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 اضافه کرده اید. بعد، یک منو اضافه می کنیم.

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

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

یک طرح جدید به نام 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>

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

a87a58e2ccddbae5.png

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

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.java تنظیم کنید. منطق زیر را برای تنظیم پس‌زمینه در انتهای onCreateView() درست قبل از عبارت return اضافه کنید:

ProductGridFragment.java

// Set cut corner background for API 23+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    view.findViewById(R.id.product_grid).setBackgroundResource(R.drawable.shr_product_grid_background_shape);
}

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

Colors.xml

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

ساخت و اجرا:

9cf7a94091438011.png

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

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

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

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

حرکت شکل جلویی است که مستقیماً به سمت پایین حرکت می کند. ما قبلاً یک شنونده کلیک برای شما ارائه کرده‌ایم که انیمیشن ترجمه را برای صفحه انجام می‌دهد، در NavigationIconClickListener.java . ما می توانیم این کلیک شنونده را در متد setupToolbar() ProductGridFragment.java تنظیم کنیم:

ProductGridFragment.java

toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));

متد setUpToolbar() شما اکنون باید به صورت زیر باشد:

ProductGridFragment.java

private void setUpToolbar(View view) {
   Toolbar toolbar = view.findViewById(R.id.app_bar);
   AppCompatActivity activity = (AppCompatActivity) getActivity();
   if (activity != null) {
       activity.setSupportActionBar(toolbar);
   }

   toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));
}

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

46a878bade66f821.png

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

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

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

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

ProductGridFragment.java

private void setUpToolbar(View view) {
   Toolbar toolbar = view.findViewById(R.id.app_bar);
   AppCompatActivity activity = (AppCompatActivity) getActivity();
   if (activity != null) {
       activity.setSupportActionBar(toolbar);
   }

   toolbar.setNavigationOnClickListener(new NavigationIconClickListener(
           getContext(),
           view.findViewById(R.id.product_grid),
           new 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" />

شنونده کلیک ما را مجدداً در setupToolbar() در ProductGridFragment.java به روز کنید تا در هنگام باز و بسته شدن منو، نقشه های نوار ابزار را به صورت زیر دریافت کند:

ProductGridFragment.java

private void setUpToolbar(View view) {
   Toolbar toolbar = view.findViewById(R.id.app_bar);
   AppCompatActivity activity = (AppCompatActivity) getActivity();
   if (activity != null) {
       activity.setSupportActionBar(toolbar);
   }

   toolbar.setNavigationOnClickListener(new NavigationIconClickListener(
           getContext(),
           view.findViewById(R.id.product_grid),
           new AccelerateDecelerateInterpolator(),
           getContext().getResources().getDrawable(R.drawable.shr_branded_menu), // Menu open icon
           getContext().getResources().getDrawable(R.drawable.shr_close_menu))); // Menu close icon
}

ساخت و اجرا:

21c025467527a18e.pngdcde66003cd51a5.png

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

7. خلاصه کنید

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

مراحل بعدی

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

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

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

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

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

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

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