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

1. مقدمة

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

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

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

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

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

ما ستنشئه

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

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

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

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

• الشكل

المتطلبات

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

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

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

2. إعداد بيئة التطوير

هل سبق لك المشاركة في دورة 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" لتثبيت/تعديل هذه الحزم ومزامنة مشروعك.

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

يجب أن يتضمّن المشروع اعتمادية لمكتبة دعم Android المتوافقة مع MDC. من المفترض أنّ الرمز النموذجي الذي نزّلته يتضمّن هذه الاعتمادية، ولكن من الأفضل اتّباع الخطوات التالية للتأكّد من ذلك.

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 التطبيق ويفعّله ويفتحه تلقائيًا على جهاز الاختبار.

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

إذا ظهر لك الخطأ INSTALL_FAILED_INVALID_APK عند إنشاء التطبيق، جرِّب تنفيذ إنشاء -> تنظيف المشروع في "استوديو Android".

اكتمال النقل بنجاح من المفترض أن يظهر تطبيق 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، أضِف ما يلي كعنصر أول في 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>

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

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

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">

لنصمّم الطبقة الأمامية مع فتحة في الزاوية العلوية اليمنى. يشير التصميم المتعدد الأبعاد إلى هذا النوع من التخصيص باسم "الشكل". يمكن عرض مساحات عرض 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()، قبل عبارة 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 لتمرير أداة احتساب معدل التغير في الصور المتحركة إلى أداة معالجة النقرات الخاصة برمز التنقّل، كما يلي:

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. ملخّص

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

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

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

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

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

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

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

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

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

أريد مواصلة استخدام "مكوّنات Material" في المستقبل

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