‫Android Kotlin Fundamentals 03.1: إنشاء جزء

هذا الدرس التطبيقي حول الترميز هو جزء من دورة "أساسيات Android Kotlin". يمكنك تحقيق أقصى استفادة من هذه الدورة التدريبية إذا اتبعت ترتيب الخطوات في دروس البرمجة. يتم إدراج جميع الدروس التطبيقية حول الترميز الخاصة بالدورة التدريبية في الصفحة المقصودة للدروس التطبيقية حول الترميز في دورة Android Kotlin Fundamentals.

في هذا الدرس التطبيقي، ستتعرّف على "اللقطات"، وستنشئ لقطة داخل تطبيق مبتدئ يُسمى AndroidTrivia. في درس الترميز التالي، ستتعرّف على المزيد من المعلومات حول التنقّل وستعمل على تطبيق AndroidTrivia.

ما يجب معرفته

• أساسيات Kotlin
• كيفية إنشاء تطبيقات Android أساسية في Kotlin
• كيفية استخدام التنسيقات

أهداف الدورة التعليمية

• كيفية إضافة Fragment بشكل ثابت إلى تطبيقك

الإجراءات التي ستنفذّها

• إنشاء جزء داخل نشاط

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

يوضّح تطبيق AndroidTrivia أنماط التنقّل وعناصر التحكّم. يحتوي التطبيق على عدة مكوّنات:

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

يعرض الجزء العلوي من التطبيق طريقة عرض ملوّنة تُعرف باسم شريط التطبيق، ويُعرف أيضًا باسم شريط الإجراءات.

في هذا الدرس التطبيقي حول الترميز، ستعمل على تطبيق مبتدئ يوفّر رمز النموذج وفئات الأجزاء التي تحتاج إليها أثناء إكمال تطبيق Trivia.

1. نزِّل مشروع AndroidTrivia-Starter في "استوديو Android".
2. افتح المشروع في "استوديو Android" وشغِّل التطبيق. وعند فتح التطبيق، لن ينفّذ أي إجراء سوى عرض اسم التطبيق وشاشة فارغة.
   
   
   
3. في لوحة "المشروع" في "استوديو Android"، افتح طريقة العرض "المشروع: Android" لاستكشاف ملفات المشروع. افتح المجلد التطبيق > java لعرض فئة MainActivity وفئات الأجزاء.
   
   
4. افتح المجلد res > layout وانقر مرّتين على activity_main.xml. يظهر ملف activity_main.xml في "أداة تعديل التصميم".
5. انقر على علامة التبويب التصميم. تعرض شجرة المكوّنات لملف activity_main.xml التنسيق الأساسي على أنّه عمودي LinearLayout.
   
   
   
   في التصميم الخطي العمودي، تتم محاذاة جميع طرق العرض الثانوية في التصميم عموديًا.

يمثّل الجزء سلوكًا أو جزءًا من واجهة المستخدم في أحد الأنشطة. يمكنك الجمع بين عدة أجزاء في نشاط واحد لإنشاء واجهة مستخدم متعددة اللوحات، ويمكنك إعادة استخدام جزء في أنشطة متعددة.

يمكنك اعتبار الجزء كقسم نمطي من نشاط، مثل "نشاط فرعي" يمكنك استخدامه أيضًا في أنشطة أخرى:

• يحتوي الجزء على دورة حياة خاصة به ويتلقّى أحداث الإدخال الخاصة به.
• يمكنك إضافة جزء أو إزالته أثناء تشغيل النشاط.
• يتم تحديد جزء في فئة Kotlin.
• يتم تحديد واجهة المستخدم لأحد الأجزاء في ملف تنسيق XML.

يحتوي تطبيق AndroidTrivia على نشاط رئيسي وعدة أجزاء. تم تحديد معظم الأجزاء وملفات التنسيق لك. في هذه المهمة، ستنشئ جزءًا وتضيفه إلى النشاط الرئيسي للتطبيق.

الخطوة 1: إضافة فئة جزء

في هذه الخطوة، يمكنك إنشاء صف TitleFragment فارغ. ابدأ بإنشاء فئة Kotlin لجزء جديد:

1. في "استوديو Android"، انقر في أي مكان داخل لوحة "المشروع" لإعادة التركيز إلى ملفات المشروع. على سبيل المثال، انقر على المجلد com.example.android.navigation.
2. اختَر ملف > جديد > جزء > جزء (فارغ).
3. بالنسبة إلى اسم الجزء، استخدِم TitleFragment. أزِل جميع علامات الاختيار، بما في ذلك إنشاء ملف XML للتصميم وتضمين طرق إنشاء أجزاء وتضمين عمليات رد الاتصال بالواجهة.
4. انقر على إنهاء.
5. افتح ملف جزء TitleFragment.kt، إذا لم يكن مفتوحًا بعد. يحتوي على طريقة onCreateView()، وهي إحدى الطرق التي يتم استدعاؤها أثناء دورة حياة جزء.
6. في onCreateView()، أزِل القسم return TextView(activity).apply، بما في ذلك السطر الذي يبدأ بـ setText. لم يتبقَّ في الدالة onCreateView() سوى الرمز التالي:

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
}

إنشاء عنصر ربط

لن يتم تجميع الجزء الآن. لإتاحة تجميع الجزء، عليك إنشاء عنصر ربط وتوسيع طريقة عرض الجزء (وهو ما يعادل استخدام setContentView() لنشاط).

1. في طريقة onCreateView() في TitleFragment.kt، أنشئ متغيّر binding (val binding).
2. لتوسيع عرض الجزء، استدعِ طريقة DataBindingUtil.inflate() على عنصر Binding الخاص بالجزء، وهو FragmentTitleBinding.
   
   مرِّر أربع مَعلمات إلى الطريقة:

• ‫inflater، وهو LayoutInflater المستخدَم لتوسيع تنسيق الربط.
• مورد تصميم XML للتصميم الذي سيتم تضخيمه استخدِم أحد التنسيقات المحدّدة لك مسبقًا، R.layout.fragment_title.
• container للوالد ViewGroup (هذه المَعلمة اختيارية).
• false للقيمة attachToParent.
  

2. عيِّن عملية الربط التي تعرضها الدالة DataBindingUtil.inflate إلى المتغير binding.
3. إرجاع binding.root من الطريقة التي تحتوي على العرض الموسّع تبدو طريقة onCreateView() الآن على النحو التالي:

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
   val binding = DataBindingUtil.inflate<FragmentTitleBinding>(inflater,
           R.layout.fragment_title,container,false)
   return binding.root
   }

الخطوة 2: إضافة الجزء الجديد إلى ملف التصميم الرئيسي

في هذه الخطوة، عليك إضافة TitleFragment إلى ملف تنسيق activity_main.xml الخاص بالتطبيق.

1. افتح res > layout > activity_main.xml وانقر على علامة التبويب نص لعرض رمز XML للتصميم.
2. داخل العنصر LinearLayout الحالي، أضِف العنصر fragment.
3. اضبط رقم تعريف الجزء على titleFragment.
4. اضبط اسم الجزء على المسار الكامل لفئة الجزء، وهو com.example.android.navigation.TitleFragment في هذه الحالة.
5. اضبط عرض التصميم وارتفاعه على match_parent.

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <fragment
                android:id="@+id/titleFragment"
                android:name="com.example.android.navigation.TitleFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                />
        </LinearLayout>

</layout>

6. شغِّل التطبيق. تمت إضافة الجزء إلى شاشتك الرئيسية.

مشروع Android Studio: AndroidTriviaFragment

في هذا الدرس التطبيقي حول الترميز، أضفت جزءًا إلى تطبيق AndroidTrivia، وستواصل العمل عليه في الدرسَين التطبيقيَين التاليَين في هذا الدرس.

• الجزء هو قسم نمطي من أحد الأنشطة.
• يحتوي الجزء على دورة حياة خاصة به ويتلقّى أحداث الإدخال الخاصة به.
• استخدِم العلامة <fragment> لتحديد التصميم الخاص بالجزء في ملف تصميم XML.
• تضخيم التنسيق لجزء في onCreateView()
• يمكنك إضافة جزء أو إزالته أثناء تشغيل النشاط.

دورة Udacity التدريبية:

• تطوير تطبيقات Android باستخدام لغة Kotlin

مستندات مطوّري تطبيقات Android:

• التصميم الخطي
• LinearLayout
• دورة حياة الأجزاء
• DataBindingUtil

يسرد هذا القسم مهامًا منزلية محتملة للطلاب الذين يعملون على هذا الدرس التطبيقي العملي كجزء من دورة تدريبية يقودها مدرّب. على المعلّم تنفيذ ما يلي:

• حدِّد واجبًا منزليًا إذا لزم الأمر.
• توضيح كيفية إرسال الواجبات المنزلية للطلاب
• وضع درجات للواجبات المنزلية

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

إذا كنت تعمل على هذا الدرس العملي بنفسك، يمكنك استخدام مهام الواجب المنزلي هذه لاختبار معلوماتك.

الإجابة عن هذه الأسئلة

السؤال 1

ما هي بعض الاختلافات بين الأجزاء والأنشطة؟ اختَر كل العبارات الصحيحة.

• عند إنشاء جزء، يمكنك توسيع التنسيق في طريقة onCreateView(). عند إنشاء نشاط، يمكنك توسيع التصميم في onCreate().
• يحتوي النشاط على تصميمه الخاص، ولكن لا يمكن أن يحتوي الجزء على تصميمه الخاص.
• يحتوي النشاط على دورة حياة خاصة به، ولكن لا يحتوي الجزء على دورة حياة.
• عند إنشاء تنسيق إما لجزء أو نشاط، يمكنك الرجوع إلى التنسيق على النحو التالي: R.layout.layoutname.

السؤال 2

أيّ من العبارات التالية صحيحة بشأن "اللقطات"؟ يُرجى اختيار جميع الإجابات المناسبة.

• يمكنك استخدام جزء في أكثر من نشاط واحد.
• يمكن أن يتضمّن نشاط واحد عدة أجزاء.
• بعد تحديد جزء في فئة Kotlin، تتم إضافة الجزء تلقائيًا إلى ملف التنسيق activity_main.xml.
• استخدِم العلامة <fragment> لتحديد الموضع في ملف التنسيق الذي سيتم إدراج جزء فيه.

ابدأ الدرس التالي: 3.2 تحديد مسارات التنقّل

للحصول على روابط تؤدي إلى دروس تطبيقية أخرى في هذه الدورة التدريبية، اطّلِع على الصفحة المقصودة الخاصة بالدروس التطبيقية حول أساسيات Android Kotlin.