MDC-104 Android: المكونات المتقدمة للمواد (Java)

تساعد المكونات المادية (MDC) مطوّري البرامج على تنفيذ التصميم المتعدد الأبعاد. أنشأ فريق من المهندسين ومصمِّمي تجارب المستخدمين في Google العشرات من مكوّنات واجهة المستخدم الجميلة والعملية، وهي متوفّرة لنظامَي التشغيل Android وiOS والويب وFltter. material.io/develop

في الدرس التطبيقي حول الترميز MDC-103، تم تخصيص اللون والارتفاع والكتابة في مكوّنات المواد (MDC) لنمط تطبيقك.

ينفِّذ مكوِّن في نظام التصميم المتعدد الأبعاد مجموعة من المهام المحددة مسبقًا وله خصائص معينة، مثل الزر. ومع ذلك، فإن الزر لا يُعد مجرد طريقة للمستخدم لتنفيذ الإجراء، بل هو أيضًا تعبير مرئي عن الشكل والحجم واللون يتيح للمستخدم معرفة أن هذا التفاعل تفاعلي وأن ذلك سيحدث عند اللمس أو النقر.

تصف إرشادات التصميم المتعدد الأبعاد المكونات من وجهة نظر المصمم. وهي تصف مجموعة واسعة من الوظائف الأساسية المتاحة على الأنظمة الأساسية، بالإضافة إلى العناصر التشريحية التي يتألف منها كل مكوّن. على سبيل المثال، تشتمل الخلفية على طبقة خلفية ومحتواها، والطبقة الأمامية ومحتواها، وقواعد الحركة، وخيارات العرض. يمكن تخصيص كل من هذه المكونات وفقًا لاحتياجات كل تطبيق وحالات الاستخدام والمحتوى. وتشكّل هذه الأجزاء في الغالب طريقة عرض تقليدية وعناصر تحكّم ودوال من حزمة تطوير البرامج (SDK) للمنصّة التي تستخدمها.

وعلى الرغم من أن إرشادات التصميم المتعدد الأبعاد تُسمّى العديد من المكوّنات، إلا أنها ليست كلها مرشحة جيدًا لرمز قابل لإعادة الاستخدام، وبالتالي لم يتم العثور عليها في MDC. يمكنك إنشاء هذه التجارب بنفسك لتحقيق نمط مخصّص لتطبيقك، وكل ذلك باستخدام رمز تقليدي.

العناصر التي سيتم إنشاؤها

في هذا الدرس التطبيقي حول الترميز، ستضيف صورة خلفية إلى الضريح. سيؤدي ذلك إلى تصفية المنتجات المعروضة في الشبكة غير المتماثلة حسب الفئة. ستستخدم:

• شكل
• الحركة
• دروس تقليدية في حزمة تطوير البرامج (SDK) لنظام التشغيل Android

هذا هو آخر 4 دروس تطبيقية حول الترميز ترشدك أثناء إنشاء تطبيق لمنتج يُسمى Shrine. وننصحك بتنفيذ كل الدروس التطبيقية حول الترميز بينما تتقدّم في المهام الدراسية خطوة بخطوة. يمكن العثور على الدروس التطبيقية حول الترميز ذات الصلة على: MDC-101: أساسيات المواد الأساسية (MDC) MDC-102: بنية التصميم المتعدد الأبعاد وتخطيطه. MDC-103: Material Design المظهر باستخدام اللون والشكل والارتفاع والنوع

مكوّنات MDC-Android في هذا الدرس التطبيقي حول الترميز

• شكل

المتطلبات اللازمة

• معرفة أساسية بتطوير تطبيقات Android
• استوديو Android (يمكنك تنزيله هنا إذا لم يكن لديك حاليًا)
• محاكي أو جهاز يعمل بنظام التشغيل Android (متاح من خلال "استوديو Android")
• نموذج الرمز (يُرجى الاطّلاع على الخطوة التالية)

كيف تقيّم مستوى خبرتك في إنشاء التطبيقات المتوافقة مع Android؟

مبتدئ متوسط محترف

هل تريد المتابعة من MDC-103؟

في حال إكمال MDC-103، سيكون الرمز جاهزًا لهذا الدرس التطبيقي حول الترميز. يمكنك التخطّي إلى الخطوة 3.

هل تريد إطلاق الخدمة من جديد؟

تنزيل تطبيق Codelab للمبتدئين

تنزيل تطبيق إجراء التفعيل

يتوفّر تطبيق إجراء التفعيل في الدليل 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"

1. بعد انتهاء معالج الإعداد وظهور النافذة مرحبًا بك في استوديو Android، انقر على فتح مشروع حالي في Android Studio. انتقِل إلى الدليل الذي تم تثبيت نموذج الرمز عليه، واختَر java ->ضريح(أو ابحث في جهاز الكمبيوتر عن ضريح) لفتح مشروع الضريح.
2. انتظر قليلاً حتى يُنشئ Android Studio المشروع ويزامنه، كما هو موضح من خلال مؤشرات الأنشطة أسفل نافذة Android Studio.
3. في هذه المرحلة، قد يطرح Android Studio بعض أخطاء الإصدار لأنك تفتقد إلى حزمة تطوير البرامج (SDK) لنظام التشغيل Android أو أدوات الإصدار، مثل الأداة الموضّحة في ما يلي. اتبع التعليمات الواردة في "استوديو Android" لتثبيت هذه التطبيقات أو تعديلها ومزامنة مشروعك.

إضافة تبعيات المشاريع

يحتاج المشروع إلى اعتمادية على مكتبة دعم 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'
}

تشغيل تطبيق إجراء التفعيل

تأكَّد من أنّ بنية الإصدار على يمين زر التشغيل / التشغيل هي app. اضغط على الزر تشغيل / تشغيل الأخضر لإنشاء التطبيق وتشغيله. في نافذة اختيار هدف النشر، إذا كان لديك جهاز Android مُدرَج في الأجهزة المتاحة، يمكنك التخطّي إلى الخطوة 8. بخلاف ذلك، انقر على إنشاء جهاز افتراضي جديد. في شاشة اختيار الأجهزة، اختَر جهاز هاتف، مثل Pixel 2، ثم انقر على التالي. في شاشة System System (صورة النظام)، اختَر إصدار Android حديثًا، ويُفضَّل أن يكون أعلى مستوى لواجهة برمجة التطبيقات. وفي حال عدم تثبيت التطبيق، انقر على الرابط تنزيل الذي يظهر، ثم أكمِل عملية التنزيل. انقر على التالي. في شاشة جهاز Android الافتراضي (AVD)، اترك الإعدادات كما هي وانقر على إنهاء. اختَر جهاز Android من مربع حوار الهدف للنشر. انقر على حسنًا. ينشئ Android Studio التطبيق وينشره ويفتحه تلقائيًا على الجهاز المستهدف.

إذا لم تتمكّن من إضافة الاعتمادية أو تشغيل التطبيق بنجاح، يمكنك إيقاف بيئة مطوّري البرامج وحلّها.

إذا ظهرت لك رسالة الخطأ INSTALL_FAILED_INVALID_APK عند الإصدار، يُرجى محاولة إجراء "إنشاء' -> "محو مشروع" في "استوديو Android".

نجحت عملية تسجيل الدخول. من المفترض أن يظهر تطبيق 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، أضِف ما يلي كأول عنصر في جذر FrameLayout، قبل AppBarLayout:

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&#39؛ بعد ذلك، سنضيف قائمة.

إضافة قائمة الطعام

القائمة هي في الأساس قائمة بأزرار نصية. سنضيف واحدًا هنا.

أنشئ تنسيقًا جديدًا باسم 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>

ويمكنك إضافة هذه القائمة إلى LinearLayout التي أضفتها مؤخرًا في shr_product_grid_fragment.xml باستخدام العلامة <include>:

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>

إنشاء وتشغيل. من المفترض أن تظهر الشاشة الرئيسية على النحو التالي:

خَلْفِيَّة. لنعيد المحتوى الذي أخفيناه سابقًا.

قبل أن نُجري أي تغييرات على "الضريح" في هذا الدرس التطبيقي، كان يتوفّر محتوى المنتج الأساسي في أقصى سطح خلفية. من خلال إضافة صورة خلفية، يتم الآن إبراز هذا المحتوى بدرجة أكبر لأنه يظهر أمام تلك الصور الخلفية.

إضافة طبقة جديدة

ويجب أن نعرض طبقة شبكة المنتج مرة أخرى. أزِل السمة 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() قبل عبارة الإرجاع مباشرةً:

ProductNetworkFragment.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>

إنشاء وتشغيل:

لقد منحنا الضريح شكلاً مخصّصًا على سطحه الأساسي. بسبب ارتفاع السطح، يمكن للمستخدمين رؤية شيء خلف الطبقة البيضاء الأمامية مباشرة. لنبدأ بإضافة الحركة حتى يتمكن المستخدمون من رؤية العنصر المتوفّر في القائمة.

الحركة هي طريقة لإضفاء الحيوية على تطبيقك. قد تكون الحركة كبيرة ودرامية أو رقيقة وبسيطة أو في أي مكان بينها. يجب أن يكون نوع الحركة الذي تستخدمه مناسبًا للموقف. يجب أن تكون الحركة التي يتم تطبيقها على الإجراءات العادية المتكررة صغيرة وخفيفة، لذلك لا تستغرق وقتًا طويلاً جدًا بشكل منتظم. ويمكن أن تكون الأحداث الأخرى، مثل المرة الأولى التي يفتح فيها المستخدم تطبيقًا، أكثر جاذبيةً، ويمكن أن تساعد في تعريف المستخدم بكيفية استخدام تطبيقك.

إضافة حركة الكشف إلى زر القائمة

الحركة هي الشكل الذي يظهر في الأمام يتحرك للأسفل مباشرةً. لقد قدّمنا لك مستمعًا للنقر سيؤدي إلى تنفيذ الصورة المتحركة لترجمة الورقة في NavigationIconClickListener.java. يمكننا اختيار أداة معالجة النقرات هذه داخل طريقة setupToolbar() في ProductGridFragment.java:

ProductNetworkFragment.java

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

من المفترض أن تظهر الآن طريقة setUpToolbar() على النحو التالي:

ProductNetworkFragment.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 لإدخال أداة إقحام إلى رمز التنقل على رمز التنقّل كما يلي:

ProductNetworkFragment.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 لإنشاء عناصر قابلة للسحب في شريط الأدوات عند فتح القائمة وعند إغلاقها، كما يلي:

ProductNetworkFragment.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
}

إنشاء وتشغيل:

ممتاز. وعندما يمكن الكشف عن الصورة الخلفية، يتم عرض رمز قائمة الماس. عند إخفاء القائمة، يتم عرض رمز الإغلاق بدلاً منها.

وخلال هذه الدروس التطبيقية حول الترميز، تعرّفت على كيفية استخدام "المكوّنات المادية" لإنشاء تجارب فريدة وأنيقة للمستخدمين تعبِّر عن شخصية العلامة التجارية وتصميمها.

يتوفّر التطبيق MDC 104 المكتمل من خلال تنزيل الدرس التطبيقي حول الترميز المكتمل، أو من خلال الاطّلاع على 104-complete باستخدام git: git checkout 104-complete.

ويمكنك اختبار الإصدار الذي تستخدمه من التطبيق مقارنةً بالتطبيق على هذا الفرع.

الخطوات التالية

يُكمِّل هذا الدرس التطبيقي حول الترميز، MDC-104، هذا التسلسل من الدروس التطبيقية حول الترميز. ويمكنك استكشاف المزيد من المكوّنات في MDC-Android بالانتقال إلى كتالوج أدوات Android.

لزيادة مستوى التحدي باستخدام هذا الدرس التطبيقي، عدِّل تطبيق Shrine لتغيير صور المنتج المعروضة عند اختيار فئة من قائمة الصور الخلفية.

لمعرفة كيفية ربط هذا التطبيق بمنصّة Firebase للحصول على خلفية قيد التشغيل، يُرجى الاطّلاع على الدرس التطبيقي حول الترميز: Android Android.

تمكّنتُ من إكمال هذا الدرس التطبيقي بقدرٍ معقول من الوقت والجهد.

أوافق بشدة أوافق محايد أعارض أعارض بشدة

أود مواصلة استخدام المكونات المتعددة في المستقبل

أوافق بشدة أوافق لستُ موافقًا أعارض أعارض بشدة