MDC-103 Android: تحديد التصميم المتعدد الأبعاد استنادًا إلى اللون والارتفاع والنوع (Kotlin)

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

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

يمنح التوسّع الأخير في Material Design المصمّمين والمطوّرين مرونة أكبر للتعبير عن العلامة التجارية لمنتجاتهم. يمكنك الآن استخدام MDC لتخصيص Shrine وعكس أسلوبه الفريد.

ما ستنشئه

في هذا الدرس التطبيقي، ستخصّص تطبيق Shrine ليعكس علامته التجارية باستخدام:

• اللون
• فن الطباعة
• الارتفاع
• التنسيق

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

مكوّنات وأنظمة فرعية من "تصميم المواد" لنظام التشغيل Android مستخدَمة في هذا الدرس التطبيقي حول الترميز:

• المظاهر
• فن الطباعة
• الارتفاع

المتطلبات

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

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

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

هل سبق لك المشاركة في دورة MDC-102؟

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

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

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

يقع تطبيق البداية في دليل material-components-android-codelabs-103-starter/kotlin. احرص على cd في هذا الدليل قبل البدء.

...أو استنسِخه من GitHub

لاستنساخ هذا الدرس التطبيقي العملي من GitHub، شغِّل الأوامر التالية:

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 103-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 على جهازك أو المحاكي. عند الضغط على "التالي"، ستظهر صفحة Shrine الرئيسية مع شريط تطبيق في الأعلى وشبكة من صور المنتجات في الأسفل.

لنبدأ بتعديل شريط التطبيق العلوي ليتوافق مع العلامة التجارية Shrine من خلال تغيير لونه وارتفاعه وأسلوب الخط.

تم إنشاء مظهر الألوان هذا بواسطة مصمّم باستخدام ألوان مخصّصة (كما هو موضّح في الصورة أدناه). يحتوي على ألوان تم اختيارها من العلامة التجارية لـ Shrine وتم تطبيقها على أداة Material Theme Editor، ما أدّى إلى توسيعها لإنشاء لوحة ألوان أكثر شمولاً. (هذه الألوان ليست من لوحات ألوان Material لعام 2014).

نظَّم تطبيق Material Theme Editor هذه الألوان في درجات مظلّلة تحمل أرقامًا، بما في ذلك التصنيفات من 50 و100 و200 إلى 900 لكل لون. يستخدم تطبيق Shrine درجات الألوان 50 و100 و300 من عيّنة اللون الوردي و900 من عيّنة اللون البني فقط.

لنغيّر لون شريط التطبيق العلوي ليعكس نظام الألوان هذا.

ضبط colorPrimaryDark وcolorAccent

في colors.xml، عدِّل الأسطر التالية. تتحكّم السمة colorAccent في لون شريط التطبيق العلوي، من بين أمور أخرى، وتتحكّم السمة colorPrimaryDark في لون شريط الحالة.

colors.xml

<color name="colorPrimaryDark">#FBB8AC</color>
<color name="colorAccent">#FEDBD0</color>

لاستخدام رموز داكنة في شريط الحالة، أضِف ما يلي إلى Theme.Shrine، مظهر تطبيق Shrine:

styles.xml

<item name="android:windowLightStatusBar" tools:targetApi="m">true</item>

ملاحظة: عليك استيراد مساحة اسم الأدوات في العلامة <resource> كما هو موضّح أدناه:

<resources xmlns:tools="http://schemas.android.com/tools">

يجب أن يظهر colors.xml وstyles.xml على النحو التالي:

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="toolbarIconColor">#FFFFFF</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

في colors.xml، أضِف مجموعة موارد ألوان textColorPrimary جديدة إلى #442C2E، وعدِّل السمة toolbarIconColor للإشارة إلى لون textColorPrimary.

عدِّل ملف styles.xml لضبط

السمة إلى اللون textColorPrimary الذي حدّدناه للتوّ.

هناك خطوة أخرى يجب اتّخاذها، وهي ضبط السمة android:theme في نمط Widget.Shrine.Toolbar على Theme.Shrine.

سيؤدي ضبط android:textColorPrimary في Theme.Shrine إلى تنسيق النص في جميع العناصر، بما في ذلك شريط التطبيق العلوي والرموز في شريط التطبيق العلوي.

يجب أن يظهر colors.xml وstyles.xml على النحو التالي:

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

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

لنغيّر نمط شاشة تسجيل الدخول ليتوافق مع نظام الألوان.

تنسيق الحقول النصية

لنغيّر مربّعات إدخال النص في صفحة تسجيل الدخول لتصبح محدّدة بخطوط خارجية ونستخدم ألوانًا أفضل للتصميم.

أضِف مورد اللون التالي إلى ملف colors.xml:

colors.xml

<color name="textInputOutlineColor">#FBB8AC</color>

أضِف نمطَين جديدَين في styles.xml:

styles.xml

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
   <item name="hintTextColor">@color/textColorPrimary</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="boxStrokeColor">@color/textInputOutlineColor</item>
</style>

<style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

أخيرًا، اضبط سمة النمط على كلتا مكوّنات XML الخاصة بـ TextInputLayout في shr_login_fragment.xml على النمط الجديد:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/shr_hint_username">

   <com.google.android.material.textfield.TextInputEditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="text"
       android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/shr_hint_password"
   app:errorEnabled="true">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

تحديد ألوان الأزرار

أخيرًا، حدِّد أنماط ألوان الأزرار في صفحة تسجيل الدخول. أضِف الأنماط التالية إلى styles.xml:

styles.xml

<style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
   <item name="backgroundTint">?attr/colorPrimaryDark</item>
</style>

<style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

يمتد النمط Widget.Shrine.Button من النمط التلقائي MaterialButton، ويغيّر لون النص وتدرّج لون خلفية الزر. يمتد Widget.Shrine.Button.TextButton من نمط النص MaterialButton التلقائي، ويغيّر لون النص فقط.

اضبط النمط Widget.Shrine.Button على زر "التالي"، والنمط Widget.Shrine.Button.TextButton على زر "إلغاء"، كما يلي:

shr_login_fragment.xml

<RelativeLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">

   <com.google.android.material.button.MaterialButton
       android:id="@+id/next_button"
       style="@style/Widget.Shrine.Button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentEnd="true"
       android:layout_alignParentRight="true"
       android:text="@string/shr_button_next" />

   <com.google.android.material.button.MaterialButton
       android:id="@+id/cancel_button"
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginEnd="12dp"
       android:layout_marginRight="12dp"
       android:layout_toStartOf="@id/next_button"
       android:layout_toLeftOf="@id/next_button"
       android:text="@string/shr_button_cancel" />

</RelativeLayout>

تعديل لون شعار Shrine في صفحة تسجيل الدخول سيتطلّب ذلك إجراء تغيير بسيط على المتّجه القابل للرسم، shr_logo.xml. افتح ملف العنصر القابل للرسم وغيِّر السمة android:fillAlpha إلى 1. يجب أن يبدو العنصر القابل للرسم على النحو التالي:

shr_logo.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:width="149dp"
   android:height="152dp"
   android:tint="?attr/colorControlNormal"
   android:viewportWidth="149"
   android:viewportHeight="152">
   <path
       android:fillAlpha="1"
       android:fillColor="#DADCE0"
       android:fillType="evenOdd"
       android:pathData="M42.262,0L0,38.653L74.489,151.994L148.977,38.653L106.723,0M46.568,11.11L21.554,33.998L99.007,33.998L99.007,11.11L46.568,11.11ZM110.125,18.174L110.125,33.998L127.416,33.998L110.125,18.174ZM80.048,45.116L80.048,123.296L131.426,45.116L80.048,45.116ZM17.551,45.116L33.976,70.101L68.93,70.101L68.93,45.116L17.551,45.116ZM41.284,81.219L68.93,123.296L68.93,81.219L41.284,81.219Z"
       android:strokeWidth="1"
       android:strokeAlpha="0.4"
       android:strokeColor="#00000000" />
</vector>

بعد ذلك، اضبط السمة android:tint على شعار <ImageView> في shr_login_fragment.xml على ?android:attr/textColorPrimary، كما يلي:

shr_login_fragment.xml

<ImageView
   android:layout_width="64dp"
   android:layout_height="64dp"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="48dp"
   android:layout_marginBottom="16dp"
   android:tint="?android:attr/textColorPrimary"
   app:srcCompat="@drawable/shr_logo" />

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

ملاحظات حول الألوان والمظاهر:

• يمكنك تخصيص اللون في واجهة المستخدم للتعبير عن علامتك التجارية بشكل أفضل.
• أنشئ لوحة ألوان تبدأ بلونين (اللون الأساسي واللون الثانوي)، مع درجات فاتحة وداكنة من هذين اللونين. يمكنك أيضًا استخدام أداة لوحة الألوان في Material Design لإنشاء لوحات ألوان.
• لا تنسَ لون أسلوب الخط.
• تأكَّد من أنّ تباين لون النص مع لون الخلفية يبلغ نسبة يمكن الوصول إليها (3:1 للنصوص الكبيرة، و4.5:1 للنصوص الصغيرة).

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

تحديد نمط شريط التطبيق العلوي

يمكنك ضبط مظهر النص في شريط التطبيق العلوي ليتوافق مع المواصفات التي يقدّمها المصمّم. أضِف نمط مظهر النص التالي إلى styles.xml، واضبط السمة titleTextAppearance للإشارة إلى هذا النمط في نمط Widget.Shrine.Toolbar.

styles.xml

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">@style/Theme.Shrine</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

<style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
   <item name="android:textSize">16sp</item>
</style>

يجب أن يظهر colors.xml وstyles.xml على النحو التالي:

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
   <color name="textInputOutlineColor">#FBB8AC</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
       <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
       <item name="hintTextColor">@color/textColorPrimary</item>
       <item name="android:paddingBottom">8dp</item>
       <item name="boxStrokeColor">@color/textInputOutlineColor</item>
   </style>

   <style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
       <item name="backgroundTint">?attr/colorPrimaryDark</item>
   </style>

   <style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
       <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
   </style>

   <style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
       <item name="android:textSize">16sp</item>
   </style>

</resources>

تنسيق التصنيفات

سننسّق تصنيفات بطاقة المنتج لاستخدام شكل النص الصحيح، ولتوسيطها أفقيًا داخل البطاقة.

عدِّل الكتابة على تصنيف العنوان من textAppearanceHeadline6 إلى textAppearanceSubtitle2 على النحو التالي:

shr_product_card.xml

<TextView
   android:id="@+id/product_title"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:text="@string/shr_product_title"
   android:textAppearance="?attr/textAppearanceSubtitle2" />

لتوسيط تصنيفات الصور، عدِّل التصنيف <TextView>s في shr_product_card.xml لضبط السمة android:textAlignment="center":

shr_product_card.xml

<LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:padding="16dp">

   <TextView
       android:id="@+id/product_title"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/shr_product_title"
       android:textAlignment="center"
       android:textAppearance="?attr/textAppearanceSubtitle2" />

   <TextView
       android:id="@+id/product_price"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/shr_product_description"
       android:textAlignment="center"
       android:textAppearance="?attr/textAppearanceBody2" />
</LinearLayout>

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

لنغيّر تصميم الخط في شاشة تسجيل الدخول ليتطابق مع التصميم الحالي.

تغيير خط شاشة تسجيل الدخول

في styles.xml، أضِف النمط التالي:

styles.xml

<style name="TextAppearance.Shrine.Title" parent="TextAppearance.MaterialComponents.Headline4">
   <item name="textAllCaps">true</item>
   <item name="android:textStyle">bold</item>
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

في shr_login_fragment.xml، اضبط النمط الجديد على عنوان "SHRINE" <TextView> (واحذف السمتَين textAllCaps وtextSize المتوفّرتَين):

shr_login_fragment.xml

<TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_marginBottom="132dp"
   android:text="@string/shr_app_name"
   android:textAppearance="@style/TextAppearance.Shrine.Title" />

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

ملاحظات حول أسلوب الخط:

• عند اختيار خطوط النصوص المستخدمة في الكتابة الصغيرة والنص الأساسي، اختَر خطوطًا واضحة بدلاً من خطوط ذات نمط معيّن.
• يجب استخدام خطوط العرض، التي تُستخدَم للكتابة الكبيرة والعناوين، للتعبير عن العلامة التجارية أو التأكيد عليها.

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

تغيير ارتفاع شبكة المنتجات

لجعل المحتوى يبدو وكأنّه على ورقة عائمة فوق شريط التطبيق العلوي، غيِّر الارتفاعات في شريط التطبيق العلوي. أضِف السمة app:elevation إلى عنصر AppBarLayout، والسمة android:elevation إلى عنصر NestedScrollView في ملف XML ضمن shr_product_grid_fragment.xml على النحو التالي:

shr_product_grid_fragment.xml

<com.google.android.material.appbar.AppBarLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:elevation="0dp">

   <androidx.appcompat.widget.Toolbar
       android:id="@+id/app_bar"
       style="@style/Widget.Shrine.Toolbar"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       app:navigationIcon="@drawable/shr_menu"
       app:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>

<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:paddingStart="@dimen/shr_product_grid_spacing"
   android:paddingEnd="@dimen/shr_product_grid_spacing"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

   <androidx.recyclerview.widget.RecyclerView
       android:id="@+id/recycler_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />

</androidx.core.widget.NestedScrollView>

تغيير ارتفاع البطاقة (ولونها)

اضبط مستوى ارتفاع كل بطاقة من خلال تغيير app:cardElevation في shr_product_card.xml من 2dp إلى 0dp. غيِّر app:cardBackgroundColor إلى @android:color/transparent أيضًا.

shr_product_card.xml

<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:cardBackgroundColor="@android:color/transparent"
   app:cardElevation="0dp"
   app:cardPreventCornerOverlap="true">

يمكنك إلقاء نظرة عليها عدّلت مستوى ارتفاع كل بطاقة في صفحة شبكة المنتجات.

تغيير ارتفاع زر "التالي"

في styles.xml، أضِف السمة التالية إلى نمط Widget.Shrine.Button:

styles.xml

<item name="android:stateListAnimator" tools:ignore="NewApi">
    @animator/shr_next_button_state_list_anim
</item>

ملاحظة: إذا واجه Android Studio أخطاء Cannot resolve symbol عند كتابة هذا الرمز، اضغط على Alt + Enter أو (Option + Return على جهاز Mac) لاستيراد الرموز الناقصة.

يؤدي ضبط android:stateListAnimator في نمط Button إلى ضبط زر "التالي" لاستخدام أداة تحريك الصور التي قدّمناها.

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

ملاحظات حول الارتفاع:

• تحتوي جميع مساحات Material Design ومكوّناتها على قيم ارتفاع.
• يتم التمييز بين المكان الذي ينتهي فيه سطح ويبدأ فيه سطح آخر من خلال حواف الأسطح.
• يمكن التعبير عن اختلاف الارتفاع بين مساحات العرض باستخدام خلفيات معتمة أو خلفيات ساطعة أو ظلال.
• تحتوي المساحات التي تظهر في المقدّمة عادةً على محتوى أكثر أهمية.

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

استخدام محوّل RecyclerView متداخل

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

لاستخدام هذا المحوّل الجديد، عدِّل طريقة onCreateView() في ProductGridFragment.kt. استبدِل كتلة الرموز بعد التعليق "إعداد RecyclerView" بما يلي:

ProductGridFragment.kt

// Set up the RecyclerView
view.recycler_view.setHasFixedSize(true)
val gridLayoutManager = GridLayoutManager(context, 2, RecyclerView.HORIZONTAL, false)
gridLayoutManager.spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {
   override fun getSpanSize(position: Int): Int {
       return if (position % 3 == 2) 2 else 1
   }
}
view.recycler_view.layoutManager = gridLayoutManager
val adapter = StaggeredProductCardRecyclerViewAdapter(
       ProductEntry.initProductEntryList(resources))
view.recycler_view.adapter = adapter
val largePadding = resources.getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_large)
val smallPadding = resources.getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_small)
view.recycler_view.addItemDecoration(ProductGridItemDecoration(largePadding, smallPadding))

سنحتاج أيضًا إلى إجراء تغيير بسيط على shr_product_grid_fragment.xml لإزالة المساحات المتروكة من 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"
   app:layout_behavior="@string/appbar_scrolling_view_behavior"
   android:elevation="6dp">

أخيرًا، سنعدّل أيضًا مساحة الحشو في البطاقة ضمن RecyclerView من خلال تعديل ProductGridItemDecoration.kt. عدِّل طريقة getItemOffsets() في ProductGridItemDecoration.kt على النحو التالي:

ProductGridItemDecoration.kt

override fun getItemOffsets(outRect: Rect, view: View,
                           parent: RecyclerView, state: RecyclerView.State?) {
   outRect.left = smallPadding
   outRect.right = largePadding
}

البناء والتنفيذ من المفترض أن تكون عناصر شبكة المنتجات متداخلة الآن:

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

تعديل الأنماط والألوان

في styles.xml، أضِف المظهر الجديد التالي:

styles.xml

<style name="Theme.Shrine.Autumn" parent="Theme.Shrine">
   <item name="colorPrimary">#FFCF44</item>
   <item name="colorPrimaryDark">#FD9725</item>
   <item name="colorAccent">#FD9725</item>
   <item name="colorOnPrimary">#FFFFFF</item>
   <item name="colorError">#FD9725</item>
</style>

وفي AndroidManifest.xml، استخدِم هذا التصميم الجديد في تطبيقك:

AndroidManifest.xml

<application
   android:allowBackup="true"
   android:icon="@mipmap/ic_launcher"
   android:label="@string/shr_app_name"
   android:roundIcon="@mipmap/ic_launcher_round"
   android:supportsRtl="true"
  android:name="com.google.codelabs.mdc.kotlin.shrine.application.ShrineApplication"
   android:theme="@style/Theme.Shrine.Autumn">
   <activity android:name=".MainActivity">
       <intent-filter>
           <action android:name="android.intent.action.MAIN" />

           <category android:name="android.intent.category.LAUNCHER" />
       </intent-filter>
   </activity>
</application>

عدِّل لون رمز شريط الأدوات في colors.xml كما هو موضّح أدناه:

colors.xml

<color name="toolbarIconColor">#FFFFFF</color>

بعد ذلك، اضبط السمة android:theme لنمط شريط الأدوات للإشارة إلى المظهر الحالي باستخدام السمة "?theme" بدلاً من الترميز الثابت:

styles.xml

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">?theme</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

بعد ذلك، خفِّف لون النص التلميحي في حقول النص في شاشة تسجيل الدخول. أضِف السمة android:textColorHint إلى نمط حقول النص:

styles.xml

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">
@style/TextAppearance.Shrine.TextInputLayout.HintText
</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="android:textColorHint">?attr/colorPrimaryDark</item>
</style>

البناء والتنفيذ من المفترض أن يظهر لك التصميم الجديد الآن لمعاينته.

عليك التراجع عن الرمز الذي تم تغييره في هذا القسم قبل الانتقال إلى MDC-104.

في هذه المرحلة، تكون قد أنشأت تطبيقًا يشبه مواصفات التصميم التي قدّمها لك المصمّم.

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

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

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

لقد استخدمت مكوّنات MDC التالية: المظهر والطباعة والارتفاع. يمكنك استكشاف المزيد من المكوّنات والأنظمة الفرعية في [مكتبة MDC Web].

ماذا لو كان تصميم تطبيقك المُخطَّط له يتضمّن عناصر لا تتوفّر لها مكوّنات في مكتبة MDC؟ في MDC-104: مكونات Material Design المتقدّمة، سنتناول كيفية إنشاء مكونات مخصّصة باستخدام مكتبة MDC لتحقيق مظهر معيّن.

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

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

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

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