MDC-104 Android: Material Advanced Components (Java)

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 در این Codelab

• شکل

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

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

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

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

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

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

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

1. هنگامی که جادوگر راه اندازی به پایان رسید و پنجره خوش آمدید به Android Studio نشان داده شد، روی باز کردن پروژه موجود Android Studio کلیک کنید. به دایرکتوری که کد نمونه را در آن نصب کرده بودید بروید و java -> shrine را انتخاب کنید (یا در رایانه خود برای 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 را در دستگاه خود مشاهده کنید.

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

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

در 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>

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

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

قبل از ایجاد هر گونه تغییری در 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>

ساخت و اجرا:

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

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

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

حرکت شکل جلویی است که مستقیماً به سمت پایین حرکت می کند. ما قبلاً یک شنونده کلیک برای شما ارائه کرده‌ایم که انیمیشن ترجمه را برای صفحه انجام می‌دهد، در NavigationIconClickListener.java . ما می توانیم این کلیک شنونده را در متد ProductGridFragment.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)));
}

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

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

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

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

کد خود را در 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()));
}

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

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

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

دکمه منو را تغییر دهید تا نمادی که شامل طرح الماس است نمایش داده شود. نوار ابزار خود را در 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
}

ساخت و اجرا:

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

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

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

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

مراحل بعدی

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

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

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

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

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

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

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