‫Android Kotlin Fundamentals 01.2: البنية الأساسية للتطبيق

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

مقدمة

لقد أعددت كل شيء حتى الآن، وأنشأ Android Studio الكثير من الرموز البرمجية لك. قبل تعديل كل هذا الرمز، من المهم معرفة ما أنشأته للتو وكيفية التنقّل في ملفات المصدر لتطبيق Android.

في هذا الدرس العملي، ستتعرّف على المكوّنات الرئيسية لتطبيق Android وتضيف تفاعلاً بسيطًا إلى تطبيق باستخدام زر.

ما يجب معرفته

• كيفية تثبيت "استوديو Android" وفتحه
• كيفية إنشاء مشروع تطبيق جديد
• كيفية تشغيل تطبيق على محاكي أو جهاز فعلي

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

• كيفية تعديل ملف تنسيق التطبيق
• كيفية إنشاء تطبيق يتضمّن سلوكًا تفاعليًا
• الكثير من المصطلحات الجديدة اطّلِع على مسرد المفردات للحصول على شرح بسيط للمصطلحات والمفاهيم.

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

• استكشِف ملف MainActivity Kotlin وملف تنسيق النشاط.
• عدِّل تخطيط النشاط في XML.
• أضِف عنصر Button إلى تصميم النشاط.
• استخرِج السلاسل البرمجية المضمّنة في التعليمات البرمجية إلى ملف موارد السلاسل.
• نفِّذ طرق معالجة النقرات لعرض الرسائل على الشاشة عندما ينقر المستخدم على Button.

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

في الدرس العملي السابق، تعرّفت على الأجزاء الرئيسية من مشروع تطبيق، بما في ذلك الدليلان java وres. في هذه المهمة، ستركز على أهم ملفَين يشكّلان تطبيقك، وهما ملف MainActivity Kotlin وملف activity_main.xml التصميم.

الخطوة 1: فحص MainActivity

‫MainActivity هو مثال على Activity. Activity هي فئة أساسية في Android ترسم واجهة مستخدم (UI) لتطبيق Android وتتلقّى أحداث الإدخال. عند تشغيل تطبيقك، يتم تشغيل النشاط المحدّد في الملف AndroidManifest.xml.

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

يحتوي كل نشاط على ملف تصميم مرتبط به. يتم ربط النشاط والتصميم من خلال عملية تُعرف باسم تضخيم التصميم. عند بدء النشاط، يتم تحويل طرق العرض المحدّدة في ملفات تنسيق XML إلى عناصر عرض Kotlin (أو "تضخيمها") في الذاكرة. وبعد حدوث ذلك، يمكن للنشاط رسم هذه العناصر على الشاشة وتعديلها ديناميكيًا أيضًا.

1. في "استوديو Android"، انقر على ملف > جديد > مشروع جديد لإنشاء مشروع جديد. استخدِم "نشاط فارغ" وانقر على التالي.
2. أطلِق على المشروع اسم DiceRoller، وتأكَّد من صحة جميع القيم الأخرى الخاصة باسم المشروع وموقعه. تأكَّد من وضع علامة في المربّع "استخدام عناصر AndroidX". انقر على إنهاء.
   
   
   
3. في لوحة المشروع > Android، وسِّع java > com.example.android.diceroller. انقر مرّتين على MainActivity. تعرض أداة تعديل الرموز الرمز في MainActivity.
   
   
   
4. يظهر أسفل اسم الحزمة وعبارات الاستيراد تعريف الفئة MainActivity. تمتد الفئة MainActivity إلى AppCompatActivity.

class MainActivity : AppCompatActivity() { ...

‫AppCompatActivity هي فئة فرعية من Activity تتوافق مع جميع ميزات Android الحديثة وتوفّر إمكانية التوافق مع الإصدارات القديمة من Android. لإتاحة تطبيقك لأكبر عدد ممكن من الأجهزة والمستخدمين، استخدِم دائمًا AppCompatActivity.

5. لاحظ طريقة onCreate(). لا تستخدم الأنشطة دالة إنشائية لتهيئة العنصر. بدلاً من ذلك، يتم استدعاء سلسلة من الطرق المحدّدة مسبقًا (تُعرف باسم "طُرق مراحل النشاط") كجزء من عملية إعداد النشاط. إحدى طرق مراحل النشاط هذه هي onCreate()، والتي يتم دائمًا إلغاء تعريفها في تطبيقك. يمكنك التعرّف على المزيد من المعلومات عن طرق مراحل النشاط في درس برمجة لاحق.
   
   في onCreate()، يمكنك تحديد التصميم المرتبط بالنشاط، ثم توسيع التصميم. تنفّذ الطريقة setContentView() كلا الإجراءين.
   

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

يشير الأسلوب setContentView() إلى التنسيق باستخدام R.layout.activity_main، وهو في الواقع مرجع عدد صحيح. يتم إنشاء الفئة R عند إنشاء تطبيقك. وتتضمّن الفئة R جميع مواد عرض التطبيق، بما في ذلك محتويات الدليل res.

في هذه الحالة، يشير R.layout.activity_main إلى فئة R التي تم إنشاؤها والمجلد layout وملف التصميم activity_main.xml. (لا تتضمّن المراجع امتدادات الملفات). ستشير إلى العديد من موارد التطبيق (بما في ذلك الصور والسلاسل والعناصر داخل ملف التصميم) باستخدام مراجع مشابهة في الفئة R.

الخطوة 2: فحص ملف تصميم التطبيق واستكشافه

تحتوي جميع الأنشطة في تطبيقك على ملف تصميم مرتبط بها في الدليل res/layout للتطبيق. ملف التنسيق هو ملف XML يعبّر عن الشكل الفعلي للنشاط. ويتم ذلك من خلال تحديد طرق العرض وتحديد أماكن ظهورها على الشاشة.

طرق العرض هي عناصر مثل النصوص والصور والأزرار التي توسّع فئة View. تتوفّر أنواع عديدة من طرق العرض، بما في ذلك TextView وButton وImageView وCheckBox.

في هذه المهمة، ستفحص ملف تخطيط التطبيق وتعدّله.

1. في لوحة المشروع > Android، وسِّع res > layout وانقر نقرًا مزدوجًا على activity_main.xml. يتم فتح أداة تعديل تصميم التنسيق. يتضمّن Android Studio هذا المحرّر الذي يتيح لك إنشاء تصميم تطبيقك بطريقة مرئية ومعاينة تصميم التخطيط. يمكنك التعرّف على المزيد حول "محرّر التصميم" في درس برمجة لاحق.
2. لعرض ملف التصميم بتنسيق XML، انقر على علامة التبويب نص في أسفل النافذة.
   
   
   
3. احذف كل رموز XML الحالية في "محرّر التصميم". يُعدّ التصميم التلقائي الذي تحصل عليه مع مشروع جديد نقطة بداية جيدة إذا كنت تعمل باستخدام أداة تعديل التصميم في "استوديو Android". في هذا الدرس، ستعمل على ملف XML الأساسي لإنشاء تخطيط جديد من البداية.
4. انسخ هذا الرمز والصقه في التنسيق:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout   
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</LinearLayout>

الآن، افحص الرمز البرمجي:

1. العنصر ذو المستوى الأعلى أو العنصر الجذر للتصميم هو عنصر <LinearLayout>. العرض LinearLayout هو ViewGroup. عناصر عرض المجموعات هي حاويات تتضمّن عناصر عرض أخرى وتساعد في تحديد مواضع عناصر العرض على الشاشة.
   
   يتم تنظيم جميع طرق العرض ومجموعات طرق العرض التي تضيفها إلى التصميم في تسلسل هرمي لطرق العرض، ويكون عنصر XML الأعلى هو جذر هذا التسلسل الهرمي. يمكن أن يحتوي العرض الأساسي على عروض ومجموعات عروض أخرى، ويمكن أن تحتوي مجموعات العروض على عروض ومجموعات عروض أخرى. عندما يشغّل تطبيقك تسلسل عرض العناصر، يتحوّل تسلسل عرض العناصر في ملف تخطيط XML إلى تسلسل هرمي للكائنات عند توسيع التخطيط. في هذه الحالة، تكون مجموعة العرض الجذرية عبارة عن تخطيط خطي، ما يؤدي إلى تنظيم طرق العرض الثانوية خطيًا، أي واحدة تلو الأخرى (إما عموديًا أو أفقيًا).
   
   إنّ الجذر التلقائي الذي تحصل عليه لمشروع Android جديد هو ConstraintLayout، وهو يعمل بشكل جيد بالتنسيق مع أداة تعديل التصميم. بالنسبة إلى هذا التطبيق، يمكنك استخدام مجموعة عرض LinearLayout، وهي أبسط من تخطيط القيود. ستتعرّف على المزيد من المعلومات حول مجموعات العرض وتصميم القيود في الدرس التالي.
2. داخل العلامة LinearLayout، لاحظ السمة android:layout_width. تم ضبط عرض LinearLayout على match parent، ما يجعله بالعرض نفسه الذي يظهر به العنصر الرئيسي. بما أنّ هذا هو العرض الأساسي، يتوسّع التصميم ليملأ عرض الشاشة بالكامل.
3. لاحظ السمة android:layout_height التي تم ضبطها على wrap_content. تجعل هذه السمة ارتفاع LinearLayout مطابقًا للارتفاع المجمّع لجميع طرق العرض التي يحتوي عليها، والتي لا تتضمّن حاليًا سوى TextView.
4. افحص عنصر <TextView>. هذا العنصر TextView، الذي يعرض النص، هو العنصر المرئي الوحيد في تطبيق DiceRoller. تحتوي السمة android:text على السلسلة الفعلية المطلوب عرضها، وهي في هذه الحالة السلسلة "Hello World!"
5. لاحظ السمتَين android:layout_width وandroid:layout_height في العنصر <TextView>، وكلتاهما مضبوطتان على wrap_content. محتوى عرض النص هو النص نفسه، لذا لن يشغل العرض سوى المساحة المطلوبة للنص.

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

الخطوة 1: إضافة زر إلى التصميم

1. أضِف عنصر Button إلى التنسيق أسفل عرض النص عن طريق إدخال <Button ثم اضغط على Return. يظهر المربع Button الذي ينتهي بـ /> ويتضمّن السمتَين layout_width وlayout_height.

<Button
   android:layout_width=""
   android:layout_height="" />

2. اضبط السمتَين layout_width وlayout_height على "wrap_content". باستخدام هذه القيم، يكون الزر بنفس عرض وارتفاع تصنيف النص الذي يحتويه.
3. أضِف السمة android:text إلى الزر، وأدخِل القيمة "Roll". يظهر عنصر الزر الآن على النحو التالي:

<Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Roll" />

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

الخطوة 2: استخراج موارد السلاسل

بدلاً من الترميز الثابت للسلاسل في ملفات التنسيق أو الرموز البرمجية، من أفضل الممارسات وضع جميع سلاسل تطبيقك في ملف منفصل. اسم هذا الملف هو strings.xml، ويقع ضمن موارد التطبيق في الدليل res/values/.

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

يساعدك "استوديو Android" في تذكُّر وضع السلاسل في ملف موارد من خلال تزويدك بتلميحات وتحذيرات.

1. انقر مرة واحدة على السلسلة "Roll" في السمة android:text الخاصة بالعلامة <Button>.
2. اضغط على Alt+Enter (Option+Enter في نظام التشغيل macOS) واختَر استخراج مورد السلسلة من القائمة المنبثقة.
3. أدخِل roll_label في حقل اسم المورد.
4. انقر على موافق. يتم إنشاء مورد سلسلة في الملف res/values/string.xml، ويتم استبدال السلسلة في عنصر الزر بإشارة إلى هذا المورد:
   android:text="@string/roll_label"
5. في لوحة المشروع > Android، وسِّع res > القيم، ثم انقر مرّتين على strings.xml لعرض موارد السلسلة في الملف strings.xml:

<resources>
   <string name="app_name">DiceRoller</string>
   <string name="roll_label">Roll</string>
</resources>

ملاحظة: بالإضافة إلى السلسلة التي أضفتها للتو، يتضمّن الملف strings.xml أيضًا اسم التطبيق. يظهر اسم التطبيق في شريط التطبيق أعلى الشاشة إذا بدأت مشروع تطبيقك باستخدام "النموذج الفارغ". يمكنك تغيير اسم التطبيق من خلال تعديل مورد app_name.

الخطوة 3: تصميم طرق العرض وتحديد موضعها

يحتوي التنسيق الآن على طريقة عرض TextView واحدة وطريقة عرض Button واحدة. في هذه المهمة، عليك ترتيب طرق العرض ضمن مجموعة طرق العرض لتصبح أكثر جاذبية.

1. انقر على علامة التبويب تصميم للاطّلاع على معاينة للتصميم. في الوقت الحالي، يظهر كلا العرضَين بجانب بعضهما البعض ويتم نقلهما إلى أعلى الشاشة.
   
   
   
2. انقر على علامة التبويب نص للرجوع إلى محرّر XML. أضِف السمة android:orientation إلى العلامة LinearLayout، وأعطِها القيمة "vertical". من المفترض أن يبدو العنصر <LinearLayout> الآن على النحو التالي:

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   tools:context=".MainActivity">

تحدّد مجموعة العرض LinearLayout مواضع طرق العرض التي تحتويها واحدة تلو الأخرى في سطر، إما أفقيًا في صف أو عموديًا في حزمة. يكون التنسيق الأفقي هو التنسيق التلقائي. بما أنّك تريد وضع TextView فوق Button، عليك ضبط الاتجاه على عمودي. أصبح التصميم الآن على النحو التالي، مع ظهور الزر أسفل النص:

3. أضِف السمة android:layout_gravity إلى كل من TextView وButton، وأعطِها القيمة "center_horizontal". يؤدي ذلك إلى محاذاة كلتا طريقتَي العرض على طول مركز المحور الأفقي. يجب أن يبدو العنصران TextView وButton الآن على النحو التالي:

<TextView   
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:text="Hello World!" />

<Button
   android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="@string/roll_label" />

4. أضِف السمة android:layout_gravity إلى التصميم الخطي، وأعطِها القيمة "center_vertical". يجب أن يبدو العنصر LinearLayout الآن على النحو التالي:

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:layout_gravity="center_vertical"
   tools:context=".MainActivity">

ملاحظة: إذا أضفت الجاذبية center_vertical إلى كل من الزر وعناصر عرض النص (بدلاً من center_horizontal)، سيتم توسيط عناصر العرض أفقيًا وعموديًا في منتصف التصميم. أي أنّ طرق العرض تكون فوق بعضها البعض.

لتوسيط جميع العناصر الفرعية في آنٍ واحد، استخدِم center_vertical على العنصر الرئيسي (العنصر LinearLayout)، كما هو موضّح أعلاه.

5. لزيادة حجم النص في عرض النص، أضِف السمة android:textSize إلى العنصر <TextView> بالقيمة "30sp". يشير الاختصار sp إلى وحدات البكسل القابلة للتوسّع، وهي مقياس لتحديد حجم النص بشكل مستقل عن جودة شاشة الجهاز. من المفترض أن يبدو عنصر TextView الآن على النحو التالي:

<TextView   
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:textSize="30sp"
   android:text="Hello World!" />

6. جمِّع تطبيقك وشغِّله.
   
   
   

الآن، تم وضع كلّ من النص والزر بشكلٍ مناسب، ويظهر نص أكبر في عرض النص. لا يتضمّن الزر أي وظائف حتى الآن، لذا لن يحدث أي شيء عند النقر عليه. يمكنك العمل على ذلك لاحقًا.

الخطوة 4: الحصول على مرجع للزر في الرمز

رمز Kotlin في MainActivity مسؤول عن تحديد الأجزاء التفاعلية في تطبيقك، مثل ما يحدث عند النقر على زر. لكتابة دالة يتم تنفيذها عند النقر على الزر، عليك الحصول على مرجع إلى عنصر الزر في التنسيق الذي تم تضخيمه في MainActivity. للحصول على مرجع للزر:

• امنح Button رقم تعريف في ملف XML.
• استخدِم طريقة findViewById() في الرمز البرمجي للحصول على مرجع إلى View بمعرّف معيّن.

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

1. افتح ملف تنسيق activity_main.xml، إذا لم يكن مفتوحًا من قبل، وانقر على علامة التبويب نص.
2. أضِف السمة android:id إلى الزرّ، وأعطِها اسمًا (في هذه الحالة، @+id/roll_button"). سيصبح العنصر <Button> الآن على النحو التالي:

<Button
   android:id="@+id/roll_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:text="@string/roll_label" />

عند إنشاء معرّف لعنصر عرض في ملف تنسيق XML، ينشئ Android Studio ثابتًا صحيحًا باسم هذا المعرّف في الفئة R التي تم إنشاؤها. لذا، إذا سمّيت طريقة عرض roll_button، ينشئ Android Studio ثابتًا صحيحًا باسم roll_button في الفئة R. تخبر البادئة "@+id" لاسم المعرّف المترجم البرمجي بإضافة ثابت المعرّف هذا إلى الفئة R. يجب أن تتضمّن جميع معرّفات طرق العرض في ملف XML هذه البادئة.

3. افتح MainActivity ملف Kotlin. داخل onCreate()، بعد setContentView()، أضِف السطر التالي:

val rollButton: Button = findViewById(R.id.roll_button)

استخدِم طريقة findViewById() للحصول على مرجع View للعرض الذي حدّدته في فئة XML. في هذه الحالة، يمكنك الحصول على المرجع Button من الفئة R والمعرّف roll_button، ثم تعيين هذا المرجع إلى المتغيّر rollButton.

ملاحظة: إذا كتبت السطر بدلاً من نسخه ولصقه، ستلاحظ أنّ Android Studio يقدّم تلميحًا للإكمال التلقائي لاسم المعرّف بمجرد البدء في الكتابة.

4. لاحظ أنّ Android Studio يميّز الفئة Button باللون الأحمر ويضع تحتها خطًا للإشارة إلى أنّها مرجع لم يتم حله وأنّه عليك استيراد هذه الفئة قبل أن تتمكّن من استخدامها. قد يظهر أيضًا تلميح أدوات يشير إلى اسم الفئة المؤهَّل بالكامل:
   
   
   
5. اضغط على Alt+Enter (Option+Enter على جهاز Mac) لقبول اسم الفئة المؤهَّل بالكامل.

ملاحظة: يمكنك ضبط Android Studio لإضافة عبارات الاستيراد تلقائيًا للفئات إذا كان المعنى واضحًا. تحدّد لوحة الإعدادات المحرّر > الإعدادات العامة > الاستيراد التلقائي كيفية التعامل مع عمليات الاستيراد.

الخطوة 5: إضافة معالج نقرات لعرض إشعار مؤقت

معالج النقرات هو طريقة يتم استدعاؤها في كل مرة ينقر فيها المستخدم على عنصر واجهة مستخدم قابل للنقر، مثل زر. لإنشاء معالج نقرات، يجب توفُّر ما يلي:

• طريقة تنفّذ بعض العمليات
• طريقة setOnClickHandler()، التي تربط Button بطريقة المعالجة

في هذه المهمة، ستنشئ طريقة معالجة النقرات لعرض Toast. (الإشعار المنبثق هو رسالة تظهر على الشاشة لفترة قصيرة). عليك ربط طريقة معالجة النقرات بـ Button.

1. في فئة MainActivity بعد onCreate()، أنشئ دالة خاصة باسم rollDice().

private fun rollDice() {
  
}

2. أضِف هذا السطر إلى طريقة rollDice() لعرض Toast عند استدعاء rollDice():

Toast.makeText(this, "button clicked", 
   Toast.LENGTH_SHORT).show()

لإنشاء إشعار مؤقت، استدعِ طريقة Toast.makeText(). تتطلّب هذه الطريقة ثلاثة أمور:

• كائن Context يتيح لك العنصر Context التواصل مع نظام التشغيل Android والحصول على معلومات حول حالته الحالية. أنت بحاجة إلى Context هنا حتى يتمكّن العنصر Toast من إخبار نظام التشغيل بعرض الإشعار المؤقت. بما أنّ AppCompatActivity هي فئة فرعية من Context، يمكنك استخدام الكلمة الرئيسية this للسياق.
• الرسالة التي سيتم عرضها، هنا "button clicked"
• مدة عرض الرسالة تعرض الطريقة show() في النهاية الإشعار المؤقت.

3. في onCreate()، بعد طلب findViewById()، أضِف هذا السطر لتعيين rollDice() كمعالج نقرات للعنصر rollButton:

rollButton.setOnClickListener { rollDice() }

يبدو التعريف الكامل للفئة MainActivity الآن على النحو التالي:

class MainActivity : AppCompatActivity() {

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

        val rollButton: Button = findViewById(R.id.roll_button)
        rollButton.setOnClickListener { rollDice() }
    }

    private fun rollDice() {
        Toast.makeText(this, "button clicked",
            Toast.LENGTH_SHORT).show()
    }
}

4. يمكنك تجميع تطبيقك وتشغيله. وفي كل مرة تنقر فيها على الزر، من المفترض أن يظهر إشعار مؤقت.

في هذه المهمة، يمكنك تعديل طريقة rollDice() لتغيير النص في TextView. في الخطوة الأولى، يمكنك تغيير هذا النص من "Hello World!" إلى السلسلة "Dice Rolled!". في الخطوة الثانية، اعرض رقمًا عشوائيًا بين 1 و6.

الخطوة 1: عرض سلسلة

1. افتح activity_main.xml وأضِف رقم تعريف إلى TextView.

android:id="@+id/result_text"

2. فتح "MainActivity" في الطريقة rollDice()، علِّق على السطر لعرض Toast.
3. استخدِم طريقة findViewById() للحصول على مرجع إلى TextView من خلال معرّفه. عيِّن المرجع إلى متغيّر resultText.

val resultText: TextView = findViewById(R.id.result_text)

4. عيِّن سلسلة جديدة للسمة resultText.text لتغيير النص المعروض. يمكنك تجاهل التلميح لاستخراج السلسلة إلى مورد، فهذه مجرد سلسلة مؤقتة.

resultText.text = "Dice Rolled!"

5. جمِّع التطبيق وشغِّله. لاحظ أنّ النقر على الزر التجربة يؤدي الآن إلى تعديل TextView.

الخطوة 2: عرض رقم عشوائي

أخيرًا، في هذه المهمة، ستضيف عشوائية إلى النقر على الزر لمحاكاة رمي النرد. في كل مرة يتم فيها النقر على الزر أو الضغط عليه، يختار الرمز رقمًا عشوائيًا من 1 إلى 6 ويعدّل TextView. إنّ مهمة إنشاء رقم عشوائي ليست خاصة بنظام التشغيل Android، ويمكنك استخدام الفئة Random لتنفيذها.

1. في أعلى طريقة rollDice()، استخدِم طريقة Random.nextInt() للحصول على رقم عشوائي بين 1 و6:

val randomInt = Random().nextInt(6) + 1

2. اضبط السمة text على قيمة العدد الصحيح العشوائي، كسلسلة:

resultText.text = randomInt.toString()

3. جمِّع التطبيق وشغِّله. في كل مرة تنقر فيها على الزر رمي النرد، يتغيّر الرقم في طريقة عرض النص.

مشروع "استوديو Android": DiceRoller

ملاحظة: جميع تحديات البرمجة اختيارية.

التحدي: أضِف زرًا ثانيًا إلى التطبيق يحمل التصنيف "العدّ التصاعدي" ويظهر أسفل الزر رمي النرد مباشرةً. عند النقر على الزر العدّ التصاعدي، يجب أن يحصل على القيمة الحالية لعرض نص النتيجة، ويضيف إليها 1، ويعدّل عرض النص. احرص على التعامل مع الحالات الهامشية التالية:

• إذا كان عرض نص النتيجة لا يزال لا يحتوي على رقم (أي إذا كان عرض النص لا يزال يتضمّن السلسلة التلقائية "Hello World")، اضبط نص النتيجة على 1.
• إذا كان الرقم 6، لا تفعل شيئًا.

ملاحظة: السلسلة في طرق العرض TextView هي مثيل للفئة CharSequence. لاختبار قيمته، عليك تحويله إلى سلسلة:

resultText.text.toString()

رمز حلّ تحدّي البرمجة

مشروع "استوديو Android": DiceRoller-challenge

الأنشطة

• ‫MainActivity هو فئة فرعية من AppCompatActivity، التي بدورها فئة فرعية من Activity. Activity هي فئة أساسية في Android مسؤولة عن رسم واجهة مستخدم تطبيق Android وتلقّي أحداث الإدخال.
• تحتوي جميع الأنشطة على ملف تصميم مرتبط بها، وهو ملف XML في موارد التطبيق. يتم تسمية ملف التنسيق باسم النشاط، مثل activity_main.xml.
• تربط الطريقة setContentView() في MainActivity التنسيق بالنشاط، وتوسّع هذا التنسيق عند إنشاء النشاط.
• تضخيم التصميم هو عملية يتم فيها تحويل طرق العرض المحدّدة في ملفات تصميم XML إلى كائنات عرض Kotlin (أو "تضخيمها") في الذاكرة. بعد اكتمال عملية تضخيم التصميم، يمكن Activity رسم هذه العناصر على الشاشة وتعديلها بشكلٍ ديناميكي.

الملفات الشخصية

• جميع عناصر واجهة المستخدم في تخطيط التطبيق هي فئات فرعية من الفئة View وتُسمى طرق العرض. ‫TextView وButton هما مثالان على طرق العرض.
• يمكن تجميع عناصر View داخل ViewGroup. تعمل مجموعة العرض كحاوية للعروض أو مجموعات العرض الأخرى بداخلها. ‫LinearLayout هو مثال على مجموعة طرق عرض ترتّب طرق العرض الخاصة بها بشكل خطي.

عرض السمات

• تشير السمتان android:layout_width وandroid:layout_height إلى وزن العرض وارتفاعه. تعمل القيمة match_parent على توسيع العرض إلى عرض أو ارتفاع العنصر الرئيسي. تقلّص القيمة wrap_content حجم العرض ليناسب محتواه.
• تشير السمة android:text إلى النص الذي يجب أن يعرضه أحد عناصر العرض (إذا كان هذا العنصر يعرض نصًا). بالنسبة إلى الأزرار، android:text هو تصنيف الزر.
• ترتّب السمة android:orientation في مجموعة عرض LinearLayout عناصر العرض التي تحتوي عليها. تؤدي القيمة horizontal إلى ترتيب طرق العرض من اليسار إلى اليمين. تؤدي القيمة vertical إلى ترتيب طرق العرض من الأعلى إلى الأسفل.
• تحدّد السمة android:layout_gravity موضع العرض وجميع العناصر الثانوية لهذا العرض.
• تحدّد السمة android:textSize حجم النص في عرض النص. يتم تحديد أحجام النص بوحدات sp (وحدات بكسل قابلة للتوسّع). باستخدام وحدات sp، يمكنك تحديد حجم النص بشكل مستقل عن جودة عرض الجهاز.

السلاسل

• بدلاً من الترميز الثابت للسلاسل في التصميم، من أفضل الممارسات استخدام موارد السلاسل.
• يتم تضمين موارد السلسلة في ملف values/res/string.xml.
• لاستخراج السلاسل، استخدِم Alt+Enter (Option+Enter على جهاز Mac). اختَر استخراج موارد السلاسل من القائمة المنبثقة.

استخدام طرق العرض

• لربط رمز Kotlin بعنصر عرض حدّدته في التصميم، عليك الحصول على مرجع إلى عنصر العرض بعد أن يتم تضخيمه. عيِّن معرّفًا (android:id) للعرض في التصميم، ثم استخدِم طريقة findViewById() للحصول على عنصر العرض المرتبط.
• عند إنشاء معرّف لعنصر عرض في ملف تنسيق XML، ينشئ Android Studio ثابتًا صحيحًا باسم هذا المعرّف في الفئة R التي تم إنشاؤها. يمكنك بعد ذلك استخدام مرجع R.id هذا في طريقة findViewById().
• يمكنك ضبط سمات عنصر العرض في رمز Kotlin مباشرةً حسب اسم السمة. على سبيل المثال، يتم تحديد النص في عرض النص من خلال السمة android:text في XML، ويتم تحديده من خلال السمة text في Kotlin.
• معالج النقرات هو طريقة يتم استدعاؤها عندما ينقر المستخدم على أحد عناصر واجهة المستخدم. لربط طريقة معالجة النقرات بعرض، مثل زر، استخدِم الطريقة setOnClickListener().

استخدام الإشعارات المنبثقة

الإشعار المنبثق هو طريقة عرض تُظهر للمستخدم رسالة بسيطة في نافذة منبثقة صغيرة.

لإنشاء إشعار مؤقت، استدعِ طريقة المصنع makeText() في الفئة Toast باستخدام ثلاثة وسيطات:

• سياق التطبيق Activity
• الرسالة التي سيتم عرضها، مثل مورد سلسلة
• مدة، مثلاً Toast.LENGTH_SHORT

لعرض الإعلام المنبثق، استدعِ الدالة show().

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

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

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

• التعرّف على "استوديو Android"
• التنسيقات
• View
• Button
• TextView
• نظرة عامة على مراجع التطبيق
• نظرة عامة على أحداث الإدخال
• findViewById()
• setOnClickListener()
• Context

غير ذلك:

• مسرد المفردات والمفاهيم

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

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

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

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

تغيير تطبيق

افتح تطبيق DiceRoller. أضِف زرًا إلى التطبيق يحمل اسم "إعادة الضبط" (Reset) ويظهر أسفل الزر رمي النرد مباشرةً. اجعل هذا الزر يعيد ضبط عرض النص الخاص بالنتيجة إلى 0.

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

السؤال 1

أيّ طريقة في Activity تزيد من حجم تصميم التطبيق وتتيح عرض المشاهدات كعناصر؟

• onCreate()
• setClickListener()
• setContentView()
• show()

السؤال 2

ما هي سمة طريقة العرض التي تستخدمها لضبط عرض طريقة العرض بحيث يتم تعديلها لتناسب المحتوى؟

• android:view_width="wrap"
• android:layout_width="wrap_content"
• android:layout_height="wrap_content"
• android:layout_width="match_parent"

إرسال تطبيقك للحصول على درجة

يُرجى التأكّد من أنّ التطبيق يتضمّن ما يلي:

• يجب أن يتضمّن تخطيط التطبيق عرضًا نصيًا واحدًا وزرَّين.
• يجب أن يضبط رمز التطبيق معالجَين للنقرات، أحدهما لكل زر.
• يجب أن يضبط معالج النقرات الذي يعيد ضبط عرض النص خاصية النص على 0.

ابدأ الدرس التالي: 1.3 مراجع الصور والتوافق

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