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

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

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

ما يجب معرفته

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

ما ستتعرَّف عليه

• كيفية إضافة جزء ثابت إلى تطبيقك

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

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

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

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

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

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

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

1. نزِّل مشروع استوديو AndroidTrivia-Starter.
2. افتح المشروع في Android Studio وابدأ تشغيل التطبيق. عند فتح التطبيق، لن يتم تنفيذ أي إجراء سوى عرض اسم التطبيق وشاشة فارغة.
   
   
   
3. في جزء مشروع "استوديو Android"، افتح عرض المشروع: Android لاستكشاف ملفات المشروع. افتح مجلد app > 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. اختَر File > New > Fragment > Fragment (فارغ).
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? {
}

إنشاء كائن مُلزِم

لن يتم تجميع الجزء الآن. لجعل التجميع جزءًا من التجميع، عليك إنشاء كائن مُلزِم وتضخيم عرض الجزء (39) الذي يعادل ذلك (ما يعادل استخدام 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": 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 تحديد مسارات التنقل

وللحصول على روابط إلى دروس تطبيقية أخرى حول الترميز في هذه الدورة التدريبية، يُرجى الاطّلاع على الصفحة المقصودة لتطبيق الدروس التطبيقية حول الترميز Kotlin Fundamentals.