MDC-103 Android: مظهر المواد باستخدام اللون والارتفاع والنوع (Kotlin)

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

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

وبفضل التوسّع الأخير في التصميم المتعدد الأبعاد، أصبح المصمّمون ومطوّرو البرامج أكثر مرونة للتعبير عن منتجاتهم التجارية. يمكنك الآن استخدام تنسيق MDC لتخصيص الضريح وإظهار نمطه الفريد.

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

في هذا الدرس التطبيقي حول الترميز، يمكنك تخصيص الضريح ليعكس علامته التجارية باستخدام:

• اللون
• فن الطباعة
• الارتفاع
• التصميم

هذا هو ثالث 4 دروس تطبيقية حول الترميز سترشدك أثناء إنشاء تطبيق يُسمى Shrine، وهو تطبيق للتجارة الإلكترونية يبيع الملابس والسلع المنزلية. يمكن العثور على الدروس التطبيقية حول الترميز ذات الصلة على: MDC-101: أساسيات المواد الأساسية (MDC) MDC-102: بنية التصميم المتعدد الأبعاد وتصميمه MDC-104: المكونات المتقدمة للتصميم المتعدد الأبعاد بنهاية MDC 104، ستنشئ تطبيقًا يبدو على النحو التالي:

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

• التصميمات
• فن الطباعة
• الارتفاع

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

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

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

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

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

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

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

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

يتوفّر تطبيق إجراء التفعيل في الدليل 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 Studio. انتقِل إلى الدليل الذي ثبَّت فيه الرمز النموذجي، واختَر kotlin ->ضريح (أو ابحث في جهاز الكمبيوتر عن shrine) لفتح مشروع الشحن.
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&#39 في جهازك أو المحاكي. عند الضغط على "التالي"، ستظهر الصفحة الرئيسية لـ "الضريح" في شريط التطبيق في الأعلى وشبكة من صور المنتجات في الجزء السفلي.

لنجعل شريط التطبيق العلوي مطابقًا للعلامة التجارية للمزار من خلال تغيير لونه وارتفاعه وطباعةه.

تم إنشاء مظهر الألوان هذا من قِبل مُصمِّم ألوان مخصّصة (الموضّح في الصورة أدناه). تحتوي هذه السلسلة على الألوان التي تم اختيارها من العلامة التجارية Shrine&#39s، كما تم تطبيقها على محرر Material Theme، ما أدى إلى توسيعها لإنشاء لوحة أشمل. (هذه الألوان ليست من لوحات ألوان المواد لعام 2014).

لقد عدّلها "محرّر مظهر المواد" في ظلال تم تصنيفها رقميًا، بما في ذلك التصنيفات 50 و100 و200 و.... إلى 900 من كل لون. ولا يستخدم الضريح سوى الظلال 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&#39s:

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>

تعديل لون شعار الضريح في صفحة تسجيل الدخول سيتطلب هذا تغييرًا بسيطًا في المتّجه القابل للسحب، 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" />

إنشاء وتشغيل. من المفترض أن تظهر شاشة تسجيل الدخول الآن بالشكل التالي:

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

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

إنشاء وتشغيل. من المفترض أن تظهر شاشة تسجيل الدخول الآن بالشكل التالي:

ملاحظات عن الطباعة:

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

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

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

لتغيير ظهور المحتوى في ورقة عائمة أعلى شريط التطبيقات العلوي، غيِّر ارتفاعات شريط التطبيق العلوي. أضِف السمة app:elevation إلى السمة AppBarLayout والسمة android:elevation إلى مكوّنات XML بتنسيق NestedScrollView في 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" تعذّر حلّ الرمز عند كتابة هذا الرمز، اضغط على Alt + Enter أو (Option + Return على Mac) لاستيراد الرموز المفقودة.

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

إنشاء وتشغيل. من المفترض أن تظهر شاشة تسجيل الدخول الآن بالشكل التالي:

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

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

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

استخدام محوّل مُدرَج لإعادة التدوير

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

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

ProductNetworkFragment.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 على النحو التالي:

ProductNetworkItemDecoration.kt

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

إنشاء وتشغيل. من المفترض أن يتم الآن تقسيم عناصر شبكة المنتج إلى:

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

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

في 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 إلى حقول النص' style:

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.

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

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

لقد استخدمت المكونات التالية في "مركز مطوّري البرامج للنشر" (DDC): المظهر، والطباعة الإملائية، والارتفاع. ويمكنك استكشاف المزيد من المكوّنات والأنظمة الفرعية في [مكتبة الويب MDC].

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

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

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

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

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