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

1. مقدمة

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

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

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

ما الذي ستنشئه

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

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

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

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

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

المتطلبات

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

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

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

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

هل تريد المتابعة من 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_ضي_APK عند إنشاء التطبيق، حاوِل النقر على إنشاء -> مشروع نظيف في "استوديو Android".

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

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

3- تغيير اللون

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

نظمها "محرِّر مظهر Material Theme Editor" في ظلال مصنَّفة رقميًا، بما في ذلك التصنيفات من 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:

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 للنص الصغير).

4. تعديل أنماط الخط والتصنيفات

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

تصميم شريط التطبيق العلوي

اضبط نمط مظهر نص شريط التطبيق العلوي ليلائم المواصفات التي يوفرها المصمم. أضِف نمط مظهر النص التالي إلى 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" />

أنشئ التطبيق وشغِّله. من المفترض أن تظهر لك شاشة تسجيل الدخول الآن على النحو التالي:

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

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

5- ضبط الارتفاع

بعد أن صمّمت الصفحة باستخدام ألوان وخطوط معيّنة تتوافق مع علامة 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" أخطاء تعذّر حل الرمز عند كتابة هذا الرمز، اضغط على Alt + Enter أو (Option + Return في Mac) لاستيراد الرموز المفقودة.

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

أنشئ التطبيق وشغِّله. من المفترض أن تظهر لك شاشة تسجيل الدخول الآن على النحو التالي:

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

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

6- تغيير التنسيق

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

استخدام محوِّل 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
}

البناء والتشغيل. من المفترض أن تكون عناصر شبكة المنتجات مُدرَجة الآن على نحو متقطّع:

7- تجربة مظهر آخر

يعد اللون طريقة قوية للتعبير عن علامتك التجارية، ويمكن أن يكون لتغيير بسيط في اللون تأثير كبير على تجربة المستخدم. لاختبار ذلك، دعونا نرى كيف سيبدو 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.

8. ملخّص

الآن، لقد أنشأت تطبيقًا يشبه مواصفات التصميم من المصمم.

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

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

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

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

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

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

أوافق بشدة أوافق محايد لا أوافق لا أوافق أبدًا

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

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