MDC-101 Android: أساسيات مكونات المواد (MDC) (Kotlin)

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

ما المقصود بالتصميم المتعدد الأبعاد ومكوناته لنظام التشغيل Android؟

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

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

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

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

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

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

• حقلا نص، أحدهما لإدخال اسم المستخدم والآخر لكلمة المرور
• زرّان: إحداهما للخاصية "&&إلغاء؛" و&
• اسم التطبيق (ضريح)
• صورة لشعار الضريح.

يمكن العثور على الدروس التطبيقية حول الترميز ذات الصلة على:

• MDC 102: هيكل التصميم المتعدد الأبعاد وتخطيطه
• MDC 103: مظهر التصميم المتعدد الأبعاد باللون والشكل والارتفاع والنوع
• MDC 104: المكونات المتقدمة للتصميم المتعدد الأبعاد

بنهاية MDC 104، ستنشئ تطبيق Android على النحو التالي:

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

• حقل نص
• زرّ

في هذا الدرس التطبيقي حول الترميز، ستستخدم المكونات التلقائية التي يوفّرها MDC لنظام التشغيل Android. وستتعلّم كيفية تخصيصها في MDC 103: Material Design المظهر باستخدام اللون والشكل والارتفاع والنوع.

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

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

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

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

بدء استخدام "استوديو Android"

عند فتح Android Studio، من المفترض أن تظهر نافذة بعنوان "مرحبًا بك في استوديو Android&quot. ومع ذلك، إذا كانت هذه هي المرة الأولى التي تُطلق فيها "استوديو Android"، يُرجى اتّباع خطوات معالج إعداد "استوديو Android" باستخدام القيم التلقائية. يمكن أن تستغرق هذه الخطوة عدة دقائق لتنزيل الملفات اللازمة وتثبيتها، لذا يُرجى عدم التردد في ترك هذا الملف في الخلفية أثناء تنفيذ القسم التالي.

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

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

يوجد تطبيق إجراء التفعيل ضمن دليل material-components-android-codelabs-101-starter/kotlin.

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

لإنشاء نسخة طبق الأصل من هذا الدرس التطبيقي حول الترميز من GitHub، نفِّذ الأوامر التالية:

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 101-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 قيد التشغيل في المحاكي. من المفترض أن يظهر لك الاسم والمقوّس وشعار الضريح أسفله مباشرةً.

لنلقِ نظرة على الرمز. لقد قدّمنا إطار عمل بسيطًا للتنقّل Fragment في نموذج الرمز لعرض الأجزاء والتنقّل بين الأجزاء.

فتح MainActivity.kt في الدليل shrine -> app -> src -> main -> java -> com.google.codelabs.mdc.kotlin.shrine يجب أن يحتوي هذا الملف على:

ملاحظة: لمعرفة المزيد من المعلومات عن التنقّل وإنشاء مسارات التنقّل باستخدام "استوديو Android"، يُرجى الاطّلاع على التمرينة Kotlin Android Fundamentals 03.2: تحديد مسارات التنقّل

MainActivity.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment

class MainActivity : AppCompatActivity(), NavigationHost {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.shr_main_activity)

       if (savedInstanceState == null) {
           supportFragmentManager
                   .beginTransaction()
                   .add(R.id.container, LoginFragment())
                   .commit()
       }
   }

   override fun navigateTo(fragment: Fragment, addToBackstack: Boolean) {
       val transaction = supportFragmentManager
               .beginTransaction()
               .replace(R.id.container, fragment)

       if (addToBackstack) {
           transaction.addToBackStack(null)
       }

       transaction.commit()
   }
}

يعرض هذا النشاط ملف التنسيق R.layout.shr_main_activity، المحدد في shr_main_activity.xml.

يتضح لك أنه في onCreate(), بدأ MainActivity.kt معاملة Fragment ليتم عرض LoginFragment. في هذا الدرس التطبيقي حول الترميز، سنعدّل LoginFragment. ينفِّذ النشاط أيضًا طريقة navigateTo(Fragment)، المحدّدة في NavigationHost، والتي تسمح لأي جزء بالانتقال إلى جزء مختلف.

Command + النقر (أو Control + نقرة) shr_main_activity في ملف النشاط لفتح ملف التنسيق أو الانتقال إلى ملف التنسيق في app -> res -> layout -> shr_main_activity.xml.

ملاحظة: إذا ظهرت لك معاينة تطبيق بدلاً من ملف XML عند فتح shr_main_activity.xml، يمكنك التبديل من علامة التبويب &quot؛التصميم" إلى علامة التبويب "النص" أسفل يمين اللوحة. سنعمل في علامة التبويب & النصية على مدار مدة هذا الدرس التطبيقي حول الترميز.

shr_main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity"/>

يظهر هنا رمز <FrameLayout> بسيط يعمل كحاوية لأي أجزاء يعرضها النشاط.

بعد ذلك، افتح LoginFragment.kt.

LoginFragment.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment

class LoginFragment : Fragment() {

   override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       // Inflate the layout for this fragment
       val view = inflater.inflate(R.layout.shr_login_fragment, container, false)

       return view
   }
}

يعمل LoginFragment على تضخيم ملف التنسيق shr_login_fragment وعرضه في onCreateView().

والآن، لنلقِ نظرة على ملف تنسيق shr_login_fragment.xml لمعرفة الشكل الذي تظهر به صفحة تسجيل الدخول.

shr_login_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="@color/loginPageBackgroundColor"
   tools:context=".LoginFragment">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:clipChildren="false"
       android:clipToPadding="false"
       android:orientation="vertical"
       android:padding="24dp"
       android:paddingTop="16dp">

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

       <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:textAllCaps="true"
           android:textSize="16sp" />
   </LinearLayout>
</ScrollView>

هنا، يمكننا رؤية <LinearLayout> مع علامة <ImageView> في أعلى الشاشة، وهي تمثّل شعار الضريح.

بعد ذلك، هناك علامة <TextView> تمثل تصنيف الضريح أسفل الشعار. نص هذا التصنيف هو مورد سلسلة يُسمى @string/shr_app_name. إذا أنشأت Command + نقرة (أو Control + نقرة) على اسم مورد السلسلة، أو فتحت app -> res -> values -> strings.xml، سيظهر لك ملف strings.xml الذي تم تحديد موارد السلسلة فيه. وعند إضافة المزيد من موارد السلسلة في المستقبل، سيتم تحديدها هنا. يجب أن يحتوي كل مورد في هذا الملف على بادئة shr_ للإشارة إلى أنه جزء من تطبيق Shrine.

الآن بعد أن تعرّفت على رمز إجراء التفعيل، لنبدأ تنفيذ المكوِّن الأول.

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

تم إدخال تحسينات كبيرة على حقول نص "التصميم المتعدد الأبعاد" لتوفير المزيد من خيارات التخصيص لدعم علامتك التجارية، بالإضافة إلى التحسينات التي تم دعمها من خلال أبحاث تجربة المستخدم الشاملة (UX) لتحقيق سهولة استخدام وتصميم مرئي أفضل.

تعرّف على المزيد من المعلومات عن حقول النصوص الجديدة في مقالة إرشادات المحتوى المتعدد الأبعاد.

إضافة ملف XML

في shr_login_fragment.xml، أضِف عنصرَين (TextInputLayout) مع عنصر TextInputEditText فرعي داخل <LinearLayout>، تحت التصنيف &SHRINE" <TextView>:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_username">

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

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_password">

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

نصيحة: لفتح ملف في "استوديو Android" بسرعة، انقر مرّتين على المفتاح Shift لإظهار شريط بحث عائم، واكتب اسم الملف الذي تريد فتحه.

يمثّل المقتطف أعلاه حقليّ نص، يتألف كل منهما من عنصر <TextInputLayout> و<TextInputEditText> ثانوي. يتم تحديد نص التلميح لكل حقل نصي في السمة android:hint.

تم تضمين موردين جديدين لسلسلة في حقل النص -- @string/shr_hint_username و@string/shr_hint_password. افتح strings.xml للاطّلاع على موارد السلسلة هذه.

strings.xml

<string name="shr_hint_username">Username</string>
<string name="shr_hint_password">Password</string>

إضافة التحقق من صحة الإدخال

توفّر مكوّنات TextInputLayout وظيفة تعليقات مضمّنة للخطأ.

لعرض تعليقات الخطأ، أدخِل التغييرات التالية على shr_login_fragment.xml:

• اضبط السمة app:errorEnabled على true في العنصر كلمة المرور TextInputLayout. سيؤدي ذلك إلى إضافة مساحة متروكة إضافية لرسالة الخطأ أسفل حقل النص.
• اضبط السمة android:inputType على "textPassword" على العنصر كلمة المرور TextInputEditText. سيؤدي هذا إلى إخفاء نص الإدخال في حقل كلمة المرور.

مع هذه التغييرات، يجب أن تظهر حقول النص في shr_login_fragment.xml على النحو التالي:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_username">

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

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   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>

والآن، جرِّب تشغيل التطبيق. سترى صفحة تحتوي على حقلين نصيين لـ "Username" &"Password"!

تحقق من صورة متحركة لتصنيف عائم:

تتضمن ميزات حقل النص في MDC ما يلي:

• عرض تعليقات مضمّنة عن الأخطاء
• إتاحة التبديل إلى مستوى رؤية كلمة المرور باستخدام app:passwordToggleEnabled
• تقديم وظيفة نص مساعد مضمّنة باستخدام app:helperText
• عرض إجمالي عدد الأحرف والعدد الأقصى باستخدام app:counterEnabled وapp:counterMaxLength

بعد ذلك، سنضيف زرًّا إلى صفحة تسجيل الدخول: "إلغاء&&hl=ar;&&;;Next;" وسنستخدم مكوّن الزر MDC الذي يأتي مع تأثير موجات حبر التصميم المتعدد الأبعاد المدمَج.

إضافة ملف XML

في shr_login_fragment.xml، أضِف <RelativeLayout> إلى <LinearLayout> تحت عناصر TextInputLayout. ثم أضف عنصري <MaterialButton> إلى <RelativeLayout>.

ويجب أن يظهر ملف XML الناتج على النحو التالي:

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

ملاحظة: يحتوي المكوّن MaterialButton على نمط تلقائي لزر مرتفع وملوّن. وبالنسبة إلى زر الإلغاء هذا، فإننا نريد زرًا غير مرتفع وغير مُعبأ. ولتحقيق ذلك، نطبّق سمة style: @style/Widget.MaterialComponents.Button.TextButton.

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

تتضمن ميزات زر MDC ما يلي:

• تعليقات اللمس المضمّنة (المعروفة باسم MDC Ripple) تلقائيًا
• الارتفاع التلقائي
• نصف قطر زاوية قابل للتخصيص وضربة

أخيرًا، سنضيف بعض رموز Kotlin إلى LoginFragment.kt لإضافة زر "&&;الق&نص التالي"للانتقال إلى جزء آخر.

لنضّف طريقة isPasswordValid منطقية خاصة في LoginFragment.kt ضمن onCreateView()، مع منطق لتحديد ما إذا كانت كلمة المرور صالحة أم لا. لأغراض هذا العرض التوضيحي، سنحرص فقط على أن تتألف كلمة المرور من 8 أحرف على الأقل:

LoginFragment.kt

private fun isPasswordValid(text: Editable?): Boolean {
   return text != null && text.length >= 8
}

بعد ذلك، أضِف أداة معالجة نقرة إلى زر "&&;; الرمز التالي"الذي يحدّد الخطأ ويمحوه استنادًا إلى طريقة isPasswordValid() التي أنشأناها للتو. في onCreateView()، يجب وضع أداة معالجة النقر هذه بين خط المُضاعِف وسطر return view.

لنبدأ الآن في إضافة أداة معالجة رئيسية إلى كلمة المرور TextInputEditText للاستماع إلى الأحداث الرئيسية التي ستمحو الخطأ. يجب أن يستخدم المستمع أيضًا isPasswordValid() للتحقّق مما إذا كانت كلمة المرور صالحة أم لا. ويمكنك إضافة هذه الأداة مباشرةً أسفل أداة معالجة النقر في onCreateView().

من المفترض أن تبدو طريقة onCreateView() الآن على النحو التالي:

LoginFragment.kt

override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       // Inflate the layout for this fragment.
       val view = inflater.inflate(R.layout.shr_login_fragment, container, false)

       // Set an error if the password is less than 8 characters.
       view.next_button.setOnClickListener({
           if (!isPasswordValid(password_edit_text.text!!)) {
               password_text_input.error = getString(R.string.shr_error_password)
           } else {
               // Clear the error.
               password_text_input.error = null
           }
       })

       // Clear the error once more than 8 characters are typed.
       view.password_edit_text.setOnKeyListener({ _, _, _ ->
           if (isPasswordValid(password_edit_text.text!!)) {
               // Clear the error.
               password_text_input.error = null
           }
           false
       })

       return view
   }
}

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

والآن، يمكننا الانتقال إلى جزء آخر. في onCreateView()، عدِّل OnClickListener للانتقال إلى جزء آخر عند نجاح التحقق من الخطأ. من المفترض أن يظهر رمز clickListener الآن على النحو التالي:

LoginFragment.kt

// Set an error if the password is less than 8 characters.
view.next_button.setOnClickListener({
   if (!isPasswordValid(password_edit_text.text!!)) {
       password_text_input.error = getString(R.string.shr_error_password)
   } else {
       // Clear the error.
       password_text_input.error = null
       // Navigate to the next Fragment.
       (activity as NavigationHost).navigateTo(ProductGridFragment(), false)
   }
})

لقد أضفنا السطر (activity as NavigationHost).navigateTo(ProductGridFragment(), false) إلى حالة else للمستمع من خلال النقر. يطلب هذا السطر طريقة navigateTo() من MainActivity للانتقال إلى جزء جديد -- ProductGridFragment. هذه الصفحة فارغة حاليًا ستعمل عليها في MDC-102.

تعمل معلمة false في navigateTo() على إبلاغ النشاط بعدم إضافة الجزء الحالي إلى الجزء الخلفي، بحيث لن يتمكن المستخدم من الرجوع إلى شاشة تسجيل الدخول باستخدام المفتاح الخلفي.

والآن، أنشِئ التطبيق واضغط على زر "التالي".

أحسنت! ستكون هذه الشاشة هي نقطة البداية في درس الرمز البرمجي التالي الذي ستعمل عليه في MDC-102.

وباستخدام ترميز XML الأساسي وحوالي 30 سطرًا من لغة Kotlin، ساعدتك المكونات الأساسية لمكتبة Android في إنشاء صفحة تسجيل دخول رائعة تتوافق مع إرشادات التصميم المتعدد الأبعاد، كما تظهر وتعمل بشكلٍ سليم على جميع الأجهزة.

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

يمكنك اختبار نسخة الصفحة على النسخة المكتملة من خلال فتح مشروع shrine في هذا الدليل باستخدام "استوديو Android" وتشغيل التطبيق.

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

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

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

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

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

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