MDC-111 Android: دمج مكونات المواد في قاعدة التعليمات البرمجية (Kotlin)

1. مقدمة

logo_components_color_2x_web_96dp.png

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

‫Material Components for Android (MDC Android) ليس نظامًا أو إطار عمل جديدًا يتطلّب تغييرًا جذريًا في تطبيقك، بل يعتمد على الفئات وواجهات برمجة التطبيقات نفسها التي تعرفها في Android، مثل أزرار AppCompat وحقول النص. يمكن استخدام المكوّنات التي توفّرها مكتبة MDC Android حسب الحاجة وإجراء تحسين فوري على تصميم تطبيقك الحالي.

ما ستنشئه

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

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

  • حقول النص
  • الأزرار
  • القوائم

المتطلبات

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

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

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

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

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

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

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

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

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 111-starter

تحميل رمز البداية في "استوديو Android"

  1. بعد انتهاء معالج الإعداد وظهور النافذة مرحبًا بك في "استوديو Android"، انقر على فتح مشروع حالي في "استوديو Android". انتقِل إلى الدليل الذي ثبّت فيه الرمز النموذجي، واختَر kotlin -> shipping (أو ابحث في جهاز الكمبيوتر عن shipping) لفتح مشروع Shipping.
  2. انتظِر لحظة إلى أن ينتهي "استوديو Android" من إنشاء المشروع ومزامنته، كما هو موضّح من خلال مؤشرات النشاط في أسفل نافذة "استوديو Android".
  3. في هذه المرحلة، قد يعرض "استوديو Android" بعض أخطاء الإنشاء لأنّك لم تثبِّت حزمة تطوير البرامج (SDK) لنظام التشغيل Android أو أدوات الإنشاء، مثل تلك الموضّحة أدناه. اتّبِع التعليمات الواردة في "استوديو Android" لتثبيت/تعديل هذه الحزم ومزامنة مشروعك.

2wEZ1kuSFwiRvi_vYXnYfwoQ5J79OVBi1SL6044ETje5cDT2rUHGy8ExjGxlBWlWuNUMf5tkLRUrr2_bz_0Im_JDvLyC-X-tNmBJvKUgsn8T4d11A1cq0ItqQl2n6DJrYKY-dEyRdw

تشغيل تطبيق المبتدئين

  1. تأكَّد من أنّ إعدادات التصميم على يسار زر التشغيل هي app.
  2. اضغط على زر التشغيل / التنفيذ الأخضر لإنشاء التطبيق وتشغيله.
  3. في نافذة اختيار هدف النشر، إذا كان لديك جهاز Android مُدرَج في الأجهزة المتاحة، انتقِل إلى الخطوة 8. بخلاف ذلك، انقر على إنشاء جهاز افتراضي جديد.
  4. في شاشة اختيار الجهاز، اختَر جهاز هاتف، مثل Pixel 2، ثم انقر على التالي.
  5. في شاشة صورة النظام، اختَر إصدارًا حديثًا من Android، ويُفضّل اختيار أعلى مستوى لواجهة برمجة التطبيقات. إذا لم يكن مثبّتًا، انقر على الرابط تنزيل الذي يظهر وأكمِل عملية التنزيل.
  6. انقر على التالي.
  7. في شاشة الجهاز الافتراضي المتوافق مع Android (AVD)، اترك الإعدادات كما هي وانقر على إنهاء.
  8. اختَر جهاز Android من مربّع حوار "هدف النشر".
  9. انقر على حسنًا.
  10. ينشئ استوديو Android التطبيق ويفعّله ويفتحه تلقائيًا على جهاز الاختبار.

اكتمال النقل بنجاح من المفترض أن يظهر لك التطبيق والنموذج.

dba8e6132a12da58.png

3- تعديل الحقول النصية

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

استيراد MDC-Android

انتقِل إلى ملف build.gradle الخاص بالوحدة app وتأكَّد من أنّ الحزمة dependencies تتضمّن تبعية على MDC Android:

api 'com.google.android.material:material:1.1.0-alpha05'

استبدال أنماط حقول النص

في shipping_info_activity.xml، أضِف النمط التالي إلى جميع عناصر TextInputLayout XML:

shipping_info_activity.xml

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

يجب أن يظهر كل TextInputLayout على النحو التالي:

shipping_info_activity.xml

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/name_text_input"
   style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:errorEnabled="true">

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

إنشاء التطبيق وتشغيله:

824c2b33592b2c7e.png

تم تعديل جميع حقول النص لاستخدام التصاميم الأحدث في MDC.

إضافة خطأ

تتضمّن حقول النص في MDC عرضًا مدمجًا للأخطاء. تضيف MDC نصًا أحمر أسفل حقل النص وتعدّل الزخارف لتصبح حمراء أيضًا.

في ShippingInfoActivity.kt، عدِّل onCreate() للتحقّق من إدخال النص وتحديد الأخطاء حسب الاقتضاء. يجب أن يظهر على النحو التالي:

ShippingInfoActivity.kt

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

   val rootView = findViewById<View>(android.R.id.content)

   val textInputLayouts = Utils.findViewsWithType(
           rootView, TextInputLayout::class.java)

   save_button.setOnClickListener {
       var noErrors = true
       for (textInputLayout in textInputLayouts) {
           val editTextString = textInputLayout.editText!!.text.toString()
           if (editTextString.isEmpty()) {
               textInputLayout.error = resources.getString(R.string.error_string)
               noErrors = false
           } else {
               textInputLayout.error = null
           }
       }

       if (noErrors) {
           // All fields are valid!
       }
   }
}

البناء والتنفيذ انقر على "حفظ"، ولكن اترك حقل نص واحدًا على الأقل فارغًا:

ef2a846d08f2780d.png

تظهر حقول النص الفارغة باللون الأحمر ويظهر نص الخطأ تحتها.

4. تعديل الزر

تحتوي حزمة MDC على أزرار تتضمّن ما يلي:

  • تموّجات الحبر
  • زوايا دائرية
  • إتاحة استخدام المظاهر
  • تصميم وطباعة بدقة فائقة
  • تم إنشاؤها استنادًا إلى AppCompatButton (فئة أزرار Android العادية) حتى تعرف كيفية استخدامها في الرمز البرمجي.

استبدال فئة الزر اختياريًا

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

في shipping_info_activity.xml، غيِّر الزر من:

shipping_info_activity.xml

<Button
   android:id="@+id/save_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="end"
   android:layout_marginTop="16dp"
   android:text="@string/label_save" />

إلى:

shipping_info_activity.xml

<com.google.android.material.button.MaterialButton
   android:id="@+id/save_button"
   style="@style/Widget.MaterialComponents.Button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="end"
   android:layout_marginTop="16dp"
   android:text="@string/label_save" />

إنشاء التطبيق وتشغيله:

824c2b33592b2c7e.png

5- إضافة بطاقة

‫MaterialCardView هو مكوّن يستند إلى CardView ويتضمّن ما يلي:

  • الارتفاع والتصميم الصحيحَين
  • تصنيفات عرض الخط ولونه

تضمين المحتوى في بطاقة

غلِّف LinearLayout الذي يحتوي على المحتوى الخاص بك في shipping_info_activity.xml باستخدام مكوّن MaterialCardView، على النحو التالي:

shipping_info_activity.xml

<com.google.android.material.card.MaterialCardView
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="16dp"
   app:contentPadding="16dp">


   <!-- LinearLayout goes here -->


</com.google.android.material.card.MaterialCardView>

البناء والتنفيذ يجب أن يكون النموذج بأكمله مضمّنًا في بطاقة:

75c86ab9fa395e3c.png

مكوّن Material Card View هو طريقة مألوفة ولكنها جديدة لتضمين المحتوى بسهولة في بطاقة.

6. ملخّص

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

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

يمكنك استكشاف المزيد من المكوّنات في MDC-Android من خلال الانتقال إلى كتالوج تطبيقات Android المصغّرة.

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

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

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

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