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

تساعد Material Components (MDC) المطوّرين في تنفيذ Material Design. تم إنشاء MDC بواسطة فريق من المهندسين ومصممي تجربة المستخدم في Google، وتتضمّن عشرات المكوّنات الجميلة والوظيفية لواجهة المستخدم، وهي متاحة على Android وiOS والويب وFlutter. material.io/develop

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

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

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

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

ما ستنشئه

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

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

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

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

• الشكل

المتطلبات

• معرفة أساسية بتطوير تطبيقات Android
• استوديو Android (يمكنك تنزيله من هنا إذا لم يكن مثبّتًا لديك)
• محاكي Android أو جهاز Android (متاح من خلال Android Studio)
• الرمز النموذجي (راجِع الخطوة التالية)

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

مبتدئ متوسط متقدّم

هل سبق لك المشاركة في فعالية MDC-103؟

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

هل تريد البدء من الصفر؟

تنزيل تطبيق الدرس التطبيقي الأوّلي

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

يقع تطبيق البداية في دليل 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"

1. بعد انتهاء معالج الإعداد وظهور النافذة مرحبًا بك في "استوديو Android"، انقر على فتح مشروع حالي في "استوديو Android". انتقِل إلى الدليل الذي ثبّت فيه نموذج الرمز، واختَر kotlin -> shrine (أو ابحث في جهاز الكمبيوتر عن shrine) لفتح مشروع Shipping.
2. انتظِر لحظة إلى أن ينتهي "استوديو Android" من إنشاء المشروع ومزامنته، كما هو موضّح من خلال مؤشرات النشاط في أسفل نافذة "استوديو Android".
3. في هذه المرحلة، قد يعرض "استوديو Android" بعض أخطاء الإنشاء لأنّك لم تثبِّت حزمة تطوير البرامج (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، ثم انقر على التالي. في شاشة صورة النظام، اختَر إصدارًا حديثًا من 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. بعد ذلك، سنضيف قائمة.

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

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

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

البناء والتنفيذ يجب أن تبدو شاشتك الرئيسية على النحو التالي:

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

قبل إجراء أي تغييرات على تطبيق 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">

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

إضافة شكل

تعديل شكل الشبكة قدّمنا خلفية بشكل مخصّص، ولكن لا يظهر الشكل بشكل صحيح إلا على نظام التشغيل 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()، قبل عبارة الإرجاع مباشرةً:

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 شكلاً مخصّصًا لسطحه الأساسي. بسبب ارتفاع السطح، يمكن للمستخدمين ملاحظة وجود شيء ما خلف الطبقة البيضاء الأمامية. لنضِف حركة حتى يتمكّن المستخدمون من رؤية ما هو معروض: القائمة.

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

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

الحركة هي الشكل الأمامي الذي يتحرّك للأسفل مباشرةً. لقد وفّرنا لك أداة معالجة نقرات ستنفّذ الحركة المتحركة للترجمة في الورقة، وذلك في 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()))

هذا يؤدي إلى تأثير مختلف، أليس كذلك؟

تمتد الأيقونات التي تحمل علامة تجارية إلى الأيقونات المألوفة أيضًا. لنخصّص رمز الكشف وندمجه مع العنوان للحصول على مظهر فريد يحمل علامتنا التجارية.

تغيير رمز زر القائمة

غيِّر زر القائمة لعرض رمز يتضمّن تصميمًا ماسيًا. عدِّل شريط الأدوات في 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

إنشاء التطبيق وتشغيله:

أحسنت. عندما يمكن إظهار الخلفية، يظهر رمز قائمة الألماس. عندما يمكن إخفاء القائمة، يتم عرض رمز إغلاق بدلاً من ذلك.

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

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

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

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

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

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

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

لقد تمكّنت من إكمال هذا الدرس العملي البرمجي خلال فترة زمنية معقولة وبجهد معقول

أوافق بشدة أوافق لا أوافق ولا أعارض لا أوافق لا أوافق أبدًا

أريد مواصلة استخدام Material Components في المستقبل

أوافق بشدة أوافق لا أوافق ولا أعارض لا أوافق لا أوافق أبدًا