‫Android Kotlin Fundamentals 02.1: التنسيق الخطي باستخدام "أداة تعديل التنسيق"

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

ما يجب معرفته

• إنشاء تطبيق Android أساسي في Kotlin
• تشغيل تطبيق Android على محاكي أو جهاز
• أساسيات LinearLayout
• إنشاء تطبيق بسيط يستخدم LinearLayout وTextView

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

• كيفية العمل مع View وViewGroup
• كيفية ترتيب العروض في Activity باستخدام LinearLayout.
• كيفية استخدام ScrollView لعرض المحتوى القابل للتمرير
• كيفية تغيير مستوى رؤية View
• كيفية إنشاء موارد السلاسل والسمات واستخدامها
• كيفية إنشاء تخطيط خطي باستخدام "أداة تعديل التخطيط" في "استوديو Android"

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

• أنشئ تطبيق AboutMe.
• أضِف TextView إلى التصميم لعرض اسمك.
• إضافة ImageView.
• أضِف ScrollView لعرض نص قابل للتمرير.

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

في هذه المهمة، ستنشئ مشروع AboutMe في "استوديو Android".

1. افتح Android Studio إذا لم يكن مفتوحًا من قبل.
2. إذا كان أحد المشاريع مفتوحًا في "استوديو Android"، انقر على ملف > جديد > مشروع جديد.
   
   
   
3. إذا لم يكن هناك مشروع مفتوح، انقر على + بدء مشروع جديد في "استوديو Android" في مربّع الحوار مرحبًا بك في "استوديو Android".
   
   
   
4. في مربّع الحوار إنشاء مشروع جديد، ضِمن علامة التبويب الهاتف والجهاز اللوحي، اختَر نموذج نشاط فارغ. انقر على التالي.
   
   
   
5. في مربّع الحوار التالي إنشاء مشروع جديد، اضبط المَعلمات التالية وانقر على إنهاء.
   

السمة	القيمة
اسم التطبيق	AboutMe
اسم الشركة على Android	‫com.android.example.AboutMe (أو نطاقك الخاص)
حفظ الموقع الجغرافي	اترك الموقع الجغرافي التلقائي أو غيِّره إلى الدليل المفضّل لديك.
اللغة	Kotlin
الحد الأدنى لمستوى واجهة برمجة التطبيقات	المستوى 19 لواجهة برمجة التطبيقات: Android 4.4 (KitKat)
سيتوافق هذا المشروع مع التطبيقات الفورية	اترك مربّع الاختيار هذا بدون تحديد.
استخدام عناصر AndroidX	ضَع علامة في مربّع الاختيار هذا.

سيستغرق "استوديو Android" بعض الوقت لإنشاء ملفات المشروع.

6. شغِّل تطبيقك. ستظهر لك السلسلة "Hello World" على الشاشة الفارغة.
   

ينشئ نموذج "نشاط فارغ" نشاطًا فارغًا واحدًا، Mainactivity.kt. ينشئ النموذج أيضًا ملف تنسيق باسم activity_main.xml. يحتوي ملف التصميم على ConstraintLayout كعنصر جذر ViewGroup، ويتضمّن TextView واحدًا كمحتوى.

في هذه المهمة، يمكنك تغيير الجذر الذي تم إنشاؤه ViewGroup إلى LinearLayout. يمكنك أيضًا ترتيب عناصر واجهة المستخدم عموديًا.

عرض المجموعات

ViewGroup هو عنصر واجهة مستخدم يمكنه احتواء عناصر واجهة مستخدم ثانوية، وهي عناصر واجهة مستخدم ومجموعات عناصر واجهة مستخدم أخرى. يتم تنظيم طرق العرض التي تشكّل تخطيطًا على شكل تسلسل هرمي لطرق العرض مع مجموعة طرق العرض كعنصر أساسي.

في LinearLayout مجموعة عرض، يتم ترتيب عناصر واجهة المستخدم إما أفقيًا أو عموديًا.

غيِّر التنسيق الأساسي لكي يستخدم مجموعة عرض LinearLayout:

1. اختَر لوحة المشروع > Android. في المجلد app/res/layout ، افتح الملف activity_main.xml.
2. انقر على علامة التبويب نص وغيِّر مجموعة العرض الجذر من ConstraintLayout إلى LinearLayout.
3. أزِل TextView. في العنصر LinearLayout، أضِف السمة android:orientation واضبطها على vertical.

قبل:

<androidx.constraintlayout.widget.ConstraintLayout 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"
   tools:context=".MainActivity">

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

بعد:

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

</LinearLayout>

أداة Layout Editor هي أداة تصميم مرئي داخل Android Studio. بدلاً من كتابة رمز XML يدويًا لإنشاء تصميم تطبيقك، يمكنك استخدام "أداة تصميم التنسيقات" لسحب عناصر واجهة المستخدم إلى "أداة تصميم التنسيقات".

للاطّلاع على "محرّر التنسيق"، انقر على علامة التبويب تصميم. تعرض لقطة الشاشة أدناه أجزاء "أداة تعديل التصميم".

محرّر التصميم: يعرض تمثيلاً مرئيًا لتصميم الشاشة في "عرض التصميم" أو "عرض المخطط" أو كليهما. محرّر التصميم هو الجزء الرئيسي من "محرّر التنسيق".

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

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

لوحة الألوان: تقدّم قائمة بطرق العرض ومجموعات طرق العرض التي يمكنك سحبها إلى التصميم أو إلى جزء عرض المكوّنات.

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

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

الخطوة 1: إضافة TextView

1. افتح ملف res/layout/activity_main.xml إذا لم يكن مفتوحًا من قبل.
2. انتقِل إلى علامة التبويب نص وافحص الرمز. يحتوي الرمز على LinearLayout كمجموعة عرض جذرية. (طرق العرض المجمّعة هي طرق عرض تتضمّن طرق عرض أخرى).
   
   يحتوي LinearLayout على السمات المطلوبة layout_height وlayout_width وorientation، وهي vertical تلقائيًا.
3. انتقِل إلى علامة التبويب التصميم لفتح "محرِّر التنسيق".

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

4. اسحب عرض نص من لوحة لوحة الألوان إلى محرِّر التصميم.
   
   
   
5. لاحظ لوحة شجرة المكوّنات. يتم وضع عرض النص الجديد كعنصر فرعي لمجموعة العرض الرئيسية، وهي LinearLayout.
   
   
6. افتح جزء السمات إذا لم يكن مفتوحًا من قبل. (لفتح اللوحة، انقر مرّتين على TextView الذي تمت إضافته حديثًا في "محرّر التصميم").
7. اضبط السمات التالية في جزء السمات:

السمة	القيمة
رقم التعريف	name_text
نص	اضبطه على اسمك. (يعرض أحد حقول النص رمز مفتاح ربط للإشارة إلى أنّه مخصّص لمساحة الاسم tools. الرمز الذي لا يتضمّن مفتاح ربط مخصّص لمساحة الاسم android، وهو حقل النص الذي تريده.
textAppearance > textSize	20sp
textAppearance > textColor	@android:color/black
textAppearance > textAlignment	المركز

الخطوة 2: إنشاء مورد سلسلة

في شجرة المكوّنات، بجانب TextView,، سيظهر رمز تحذير . لعرض نص التحذير، انقر على الرمز أو أشر إليه، كما هو موضّح في لقطة الشاشة أدناه.

لحلّ التحذير، أنشئ مورد سلسلة على النحو التالي:

1. في لوحة السمات، انقر على النقاط الثلاث بجانب سمة النص التي ضبطتها على اسمك. يتم فتح محرّر الموارد.
   
   
   
2. في مربّع الحوار الموارد، انقر على إضافة مورد جديد > قيمة سلسلة جديدة.
3. في مربّع الحوار مورد قيمة السلسلة الجديد، اضبط حقل اسم المورد على name. اضبط حقل قيمة المورد على اسمك. انقر على حسنًا. لاحظ أنّ التحذير قد اختفى.
   
   
   
4. افتح ملف res/values/strings.xml وابحث عن مورد السلسلة الذي تم إنشاؤه حديثًا باسم name.

<string name="name">Aleks Haecky</string>

الخطوة 3: إنشاء مورد سمة

لقد أضفت للتو مرجعًا باستخدام "محرّر المراجع". يمكنك أيضًا استخراج الموارد في محرر رموز XML لإنشاء موارد جديدة:

1. في ملف activity_main.xml، انتقِل إلى علامة التبويب نص.
2. في السطر textSize، انقر على الرقم (20sp) واكتب Alt+Enter (Option+Enter على جهاز Mac). اختَر استخراج مورد السمة من القائمة المنبثقة.
3. في مربّع الحوار استخراج المورد، أدخِل text_size في الحقل اسم المورد. انقر على حسنًا.
   
   
   
4. افتح ملف res/values/dimens.xml للاطّلاع على الرمز الذي تم إنشاؤه:

<dimen name="text_size">20sp</dimen>

ملاحظة: إذا لم يكن ملف dimens.xml متوفّرًا من قبل داخل مجلد res/values، سينشئه "استوديو Android".

5. افتح ملف MainActivity.kt وابحث عن الرمز التالي في نهاية الدالة onCreate():

setContentView(R.layout.activity_main)

تربط الدالة setContentView() ملف التصميم بـ Activity. ملف مورد التصميم المحدّد هو R.layout.activity_main:

• ‫R هو مرجع إلى المورد. وهو صف يتم إنشاؤه تلقائيًا ويتضمّن تعريفات لجميع الموارد في تطبيقك.
• يشير layout.activity_main إلى أنّ المرجع هو تخطيط باسم activity_main.

6. شغِّل تطبيقك. سيظهر TextView باسمك.
   
   

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

المساحة المتروكة مقابل الهامش

المساحة المتروكة هي المساحة داخل حدود العرض أو العنصر. وهي المساحة بين حواف العرض ومحتوى العرض، كما هو موضّح في الشكل أدناه.

يتضمّن حجم طريقة العرض المساحة المتروكة. في ما يلي سمات الحشو الشائعة الاستخدام:

• يحدّد android:padding مساحة متروكة على جميع الحواف الأربعة للعرض.
• تحدّد android:paddingTop المساحة المتروكة للحافة العلوية.
• تحدّد android:paddingBottom مساحة متروكة للحافة السفلية.
• تحدّد android:paddingStart مساحة متروكة للحافة "البادئة" للعرض.
• تحدّد android:paddingEnd مساحة متروكة لحافة "النهاية" في طريقة العرض.
• تحدّد android:paddingLeft المساحة المتروكة للحافة اليسرى.
• تحدّد android:paddingRight مساحة متروكة للحافة اليمنى.

الهامش هو المساحة المُضافة خارج حدود العرض. وهي المسافة من حافة العرض إلى العنصر الرئيسي، كما هو موضّح في الشكل أعلاه. في ما يلي سمات الهامش الشائعة الاستخدام:

• تحدّد android:layout_margin هامشًا لجميع جوانب العرض الأربعة.
• تحدّد android:layout_marginBottom المساحة خارج الجانب السفلي من طريقة العرض هذه.
• تحدّد android:layout_marginStart المساحة خارج الجانب "البادئ" من طريقة العرض هذه.
• يحدّد android:layout_marginEnd المساحة على الجانب الأخير من طريقة العرض هذه.
• يحدّد android:layout_marginLeft المساحة على يمين طريقة العرض هذه.
• تحدّد android:layout_marginRight المساحة على الجانب الأيسر من طريقة العرض هذه.

اليمين/اليسار مقابل البداية/النهاية

يشير "اليمين" و "اليسار" دائمًا إلى الجانبَين الأيمن والأيسر من الشاشة، سواء كان تطبيقك يستخدم ترتيبًا من اليسار إلى اليمين أو من اليمين إلى اليسار. تشير "البداية" و "النهاية" دائمًا إلى بداية ونهاية المسار:

• بالنسبة إلى اتجاه الكتابة من اليمين إلى اليسار، تكون البداية = اليمين والنهاية=اليسار.
• بالنسبة إلى اتجاه الكتابة من اليمين إلى اليسار، يكون start=right وend=left.

إذا كان تطبيقك يستهدف المستوى 17 لواجهة برمجة التطبيقات (الإصدار 4.2 من نظام التشغيل Android) أو المستويات الأحدث:

• استخدِم "البداية" و "النهاية" بدلاً من "اليمين" و "اليسار".
• على سبيل المثال، يجب أن يصبح android:layout_marginLeft android:layout_marginStart ليتوافق مع اللغات التي تُكتب من اليمين إلى اليسار.

إذا كنت تريد أن يعمل تطبيقك مع إصدارات أقدم من Android 4.2، أي إذا كان targetSdkVersion أو minSdkVersion للتطبيق هو 16 أو أقل:

• أضِف "البداية" و"النهاية" بالإضافة إلى "اليمين" و"اليسار".
• على سبيل المثال، استخدِم كلّاً من android:paddingLeft وandroid:paddingStart.

الخطوة 1: إضافة مساحة متروكة

لإضافة مساحة بين اسمك والحافة العلوية لعرض النص name، أضِف مساحة متروكة في الأعلى.

1. افتح ملف activity_main.xml في علامة التبويب تصميم.
2. في شجرة المكوّنات أو في أداة تعديل التصميم، انقر على عرض النص لفتح لوحة السمات.
3. في أعلى لوحة السمات، انقر على رمز السهمين المزدوجين للاطّلاع على جميع السمات المتاحة.
4. ابحث عن الحشو، ووسِّعه، ثم انقر على النقاط الثلاث ... بجانب السمة أعلى. يظهر مربّع الحوار المراجع.
5. في مربّع الحوار الموارد، انقر على إضافة مورد جديد > قيمة سمة جديدة.
6. في مربّع الحوار مورد قيمة السمة الجديدة، أنشئ موردًا جديدًا dimen باسم small_padding بقيمة 8dp.
   
   يشير الاختصار dp إلى كثافة مستقلة. إذا كنت تريد أن يظهر عنصر واجهة المستخدم بالحجم نفسه على الشاشات ذات الكثافات المختلفة، استخدِم وحدات البكسل غير المرتبطة بالكثافة كوحدة قياس. عند تحديد حجم النص، استخدِم دائمًا وحدات البكسل القابلة للتوسّع (sp).
7. انقر على موافق.

الخطوة 2: إضافة هامش

لإبعاد طريقة عرض النص name عن حافة العنصر الرئيسي، أضِف هامشًا علويًا.

1. في لوحة السمات (Attributes)، ابحث عن "margin" للعثور على Layout_Margin.
2. وسِّع Layout_Margin، ثم انقر على النقاط الثلاث ... بجانب السمة top.
3. أنشئ مورد dimen جديدًا باسم layout_margin واجعله 16dp. انقر على حسنًا.

الخطوة 3: إضافة خط

لتحسين مظهر عرض النص name، استخدِم خط Roboto على Android. هذا الخط هو جزء من مكتبة الدعم، ويمكنك إضافته كمورد.

1. في لوحة السمات، ابحث عن "fontFamily".
2. في الحقل fontFamily، انقر على سهم القائمة المنسدلة، انتقِل إلى أسفل القائمة، ثم انقر على مزيد من الخطوط.
3. في مربّع الحوار المراجع، ابحث عن rob واختَر Roboto. في قائمة المعاينة، اختَر عادي.
4. انقر على زر الاختيار إضافة خط إلى المشروع.
5. انقر على حسنًا.
   
   

يحتوي المجلد res الآن على المجلد font الذي يتضمّن ملف الخط roboto.ttf. تتم إضافة السمة @font/roboto إلى TextView.

الخطوة 4: استخراج النمط

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

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

1. انقر بزر الماوس الأيمن على TextView في شجرة المكوّنات واختَر إعادة تصميم > استخراج النمط.
2. في مربّع الحوار استخراج نمط Android، أزِل العلامة من مربّع الاختيار layout_width ومربّع الاختيار layout_height ومربّع الاختيار textAlignment. تختلف هذه السمات عادةً لكل طريقة عرض، لذا لا تريد أن تكون جزءًا من النمط.
3. في حقل اسم النمط، أدخِل NameStyle.
4. انقر على حسنًا.
   
   
   
5. النمط هو أيضًا أحد الموارد، لذا يتم حفظه في المجلد res/values/ في ملف styles.xml. افتح styles.xml وافحص الرمز الذي تم إنشاؤه لنمط NameStyle، والذي سيبدو على النحو التالي:

<style name="NameStyle">
   <item name="android:layout_marginTop">@dimen/layout_margin</item>
   <item name="android:fontFamily">@font/roboto</item>
   <item name="android:paddingTop">@dimen/small_padding</item>
   <item name="android:textColor">@android:color/black</item>
   <item name="android:textSize">@dimen/text_size</item>
</style>

6. افتح activity_main.xml وانتقِل إلى علامة التبويب نص. لاحظ أنّه يتم استخدام النمط الذي تم إنشاؤه في عرض النص كـ style="@style/NameStyle".
7. شغِّل التطبيق ولاحظ التغييرات في الخط والمسافة المتروكة حول TextView.

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

ImageView هي طريقة عرض لموارد الصور. على سبيل المثال، يمكن أن يعرض ImageView موارد Bitmap، مثل ملفات PNG أو JPG أو GIF أو WebP، أو يمكن أن يعرض مورد Drawable، مثل رسم متّجهي.

تتوفّر موارد صور مع نظام التشغيل Android، مثل نماذج الأيقونات وصور الأفاتار والخلفيات. ستضيف أحد هذه الموارد إلى تطبيقك.

1. اعرض ملف التصميم في علامة التبويب تصميم، ثم اسحب ImageView من لوحة لوحة الألوان إلى أسفل name_text في عرض المكونات. سيتم فتح مربّع الحوار المراجع .
2. اختَر Drawable إذا لم يكن محدّدًا من قبل.
3. وسِّع android، وانتقِل إلى الأسفل، ثم اختَر btn_star_big_on. إنّها النجمة الصفراء .
4. انقر على موافق.
   
   
   
   تتم إضافة صورة النجمة إلى التنسيق أسفل اسمك. بما أنّ لديك عرضًا عموديًا LinearLayout، تتم محاذاة العروض التي تضيفها عموديًا.
   
   
5. انتقِل إلى علامة التبويب نص واطّلِع على رمز ImageView الذي تم إنشاؤه. تم ضبط العرض على match_parent، لذا سيكون العرض بنفس عرض العنصر الرئيسي. تم ضبط الارتفاع على wrap_content، لذا سيكون العرض بارتفاع المحتوى. يشير ImageView إلى العنصر القابل للرسم btn_star_big_on.

<ImageView
   android:id="@+id/imageView"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:srcCompat="@android:drawable/btn_star_big_on" />

6. لإعادة تسمية id الخاص بـ ImageView، انقر بزر الماوس الأيمن على "@+id/imageView" واختَر Refactor > Rename.
7. في مربّع الحوار إعادة التسمية، اضبط id على @+id/star_image. انقر على إعادة تصميم.
   
   
   

تعيد إعادة البناء > إعادة التسمية تسمية جميع مواضع اسم السمة أو المتغيّر في مشروع تطبيقك.

8. في علامة التبويب التصميم، ضِمن شجرة المكوّنات، انقر على رمز التحذير بجانب star_image. التحذير مخصّص لعدم توفّر contentDescription، وهو عنصر تستخدمه برامج قراءة الشاشة لوصف الصور للمستخدم.
9. في لوحة السمات، انقر على النقاط الثلاث ... بجانب السمة contentDescription. يتم فتح مربّع الحوار المراجع.
10. في مربّع الحوار الموارد، انقر على إضافة مورد جديد > قيمة سلسلة جديدة. اضبط حقل اسم المورد على yellow_star، واضبط حقل قيمة المورد على Yellow star. انقر على حسنًا.
11. استخدِم لوحة السمات لإضافة هامش علوي بقيمة 16dp (أي @dimen/layout_margin) إلى yellow_star، لفصل صورة النجمة عن الاسم.
12. شغِّل تطبيقك. سيظهر اسمك وصورة النجمة في واجهة مستخدم تطبيقك.
    
    

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

تعرض الصورة التالية مثالاً على ScrollView يحتوي على LinearLayout يتضمّن عدة طرق عرض أخرى.

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

الخطوة 1: إضافة ScrollView يحتوي على TextView

1. افتح ملف activity_main.xml في علامة التبويب تصميم.
2. اسحب طريقة عرض قابلة للتمرير إلى التصميم عن طريق سحبها إلى "محرّر التصميم" أو إلى شجرة المكوّنات. ضَع طريقة العرض القابلة للتمرير أسفل صورة النجمة.
3. انتقِل إلى علامة التبويب نص لفحص الرمز الذي تم إنشاؤه.

// Auto generated code
<ScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical" />
</ScrollView>

يتطابق ارتفاع وعرض ScrollView مع العنصر الأصل. بعد أن يستخدم كلّ من عرض النص name_text وعرض الصورة star_image مساحة عمودية كافية لعرض محتواهما، يرتّب نظام التشغيل Android العنصر ScrollView لملء المساحة المتبقية المتاحة على الشاشة.

4. أضِف id إلى ScrollView وأطلِق عليه اسم bio_scroll. تؤدي إضافة id إلى ScrollView إلى منح نظام التشغيل Android مقبضًا للعرض، وبالتالي عندما يدير المستخدم الجهاز، يحتفظ النظام بموضع التمرير.
5. داخل ScrollView، أزِل الرمز LinearLayout، لأنّ تطبيقك سيحتوي على طريقة عرض واحدة فقط يمكن التمرير فيها، وهي TextView.
6. اسحب TextView من لوحة الألوان إلى شجرة المكوّنات. ضَع TextView تحت bio_scroll، كعنصر فرعي من bio_scroll.
   
   
7. اضبط id لعرض النص الجديد على bio_text.
8. بعد ذلك، أضِف نمطًا لعرض النص الجديد. في لوحة السمات، انقر على علامات الحذف الثلاث ... بجانب السمة النمط لفتح مربّع الحوار الموارد.
9. في مربّع الحوار المراجع، ابحث عن NameStyle. اختَر NameStyle من القائمة، ثم انقر على حسنًا. يستخدم عرض النص الآن النمط NameStyle الذي أنشأته في مهمة سابقة.
   
   

الخطوة 2: إضافة السيرة الذاتية إلى TextView الجديد

1. افتح strings.xml، وأنشئ مورد سلسلة باسم bio، وأدخِل بعض النصوص الطويلة عن نفسك أو عن أي شيء تريده.
   

ملاحظة:

• استخدِم \n للإشارة إلى فاصل أسطر.
• إذا كنت تستخدم علامة اقتباس مفردة، يجب وضع شرطة مائلة للخلف قبلها. على سبيل المثال:
  "You mustn\'t forget the backslash."
• استخدِم <b>...</b> للنص الغامق، و<i>...</i> للنص المائل. على سبيل المثال:
  "This text is <b>bold</b> and this text is <i>italics</i>."

في ما يلي عيّنة من سيرة ذاتية:

<string name="bio">Hi, my name is Aleks.
\n\nI love fish.
\n\nThe kind that is alive and swims around in an aquarium or river, or a lake, and definitely the ocean.
\nFun fact is that I have several aquariums and also a river.
\n\nI like eating fish, too. Raw fish. Grilled fish. Smoked fish. Poached fish - not so much.
\nAnd sometimes I even go fishing.
\nAnd even less sometimes, I actually catch something.
\n\nOnce, when I was camping in Canada, and very hungry, I even caught a large salmon with my hands.
\n\nI\'ll be happy to teach you how to make your own aquarium.
\nYou should ask someone else about fishing, though.\n\n</string>

2. في طريقة عرض النص bio_text، اضبط قيمة السمة text على مورد السلسلة bio الذي يحتوي على سيرتك الذاتية.
3. لتسهيل قراءة النص bio_text، أضِف مسافة بين الأسطر. استخدِم السمة lineSpacingMultiplier وأدخِل القيمة 1.2.
   
   
   
   لاحظ كيف يمتد النص bio في "محرّر التصميم" إلى الحواف الجانبية للشاشة. لحلّ هذه المشكلة، يمكنك إضافة سمات الحشو الأيسر والبداية والأيمن والنهاية إلى العنصر الجذر LinearLayout. لا تحتاج إلى إضافة مساحة متروكة في الأسفل، لأنّ النص الذي يظهر مباشرةً في الأسفل يشير إلى المستخدم بأنّه يمكنه التمرير.
4. أضِف مساحة بادئة ومساحة لاحقة بقيمة 16dp إلى العنصر الجذر LinearLayout.
5. انتقِل إلى علامة التبويب نص، واستخرِج مورد السمة، وأطلِق عليه الاسم layout_padding.
   
   

ملاحظة: اعتبارًا من مستوى واجهة برمجة التطبيقات 17، استخدِم "start" و "end" بدلاً من "left" و "right" للحشو والهامش من أجل تكييف تطبيقك مع اللغات التي تُكتب من اليمين إلى اليسار، مثل العربية.

6. شغِّل تطبيقك وتصفَّح النص.
   
   

تهانينا!

لقد أنشأت تطبيقًا كاملاً من البداية، ويبدو رائعًا.

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

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

داخل ScrollView، أضِف ImageView فوق TextView. عند تشغيل التطبيق، يتم تمرير هذه الصورة بعيدًا عن منطقة المشاهدة، على عكس النجمة، أثناء تمرير النص للأعلى.

ملاحظة: يمكن أن يحتوي عرض التمرير على عرض فرعي واحد فقط. عليك تضمين العرضَين القابلَين للتمرير، ImageView وTextView، في LinearLayout.

• ViewGroup هي طريقة عرض يمكن أن تحتوي على طرق عرض أخرى. ‫LinearLayout وScrollView هما مجموعتا عرض.
• LinearLayout هي مجموعة عرض ترتّب طرق العرض الثانوية أفقيًا أو رأسيًا.
• استخدِم ScrollView عندما تحتاج إلى عرض محتوى على الشاشة، مثل نص طويل أو مجموعة من الصور. يمكن أن يحتوي عرض التمرير على عرض فرعي واحد فقط. إذا كنت تريد تمرير أكثر من طريقة عرض واحدة، أضِف ViewGroup مثل LinearLayout إلى ScrollView، وضَع طرق العرض التي سيتم تمريرها داخل ViewGroup.
• أداة تعديل التصميم هي أداة تعديل مرئية للتصميم داخل "استوديو Android". يمكنك استخدام "أداة تعديل التصميم" لإنشاء تصميم تطبيقك عن طريق سحب عناصر واجهة المستخدم إلى التصميم.
• نمط هو مجموعة من السمات التي تحدّد مظهر طريقة العرض. على سبيل المثال، يمكن أن يحدّد النمط لون الخط وحجمه ولون الخلفية والمسافة المتروكة والحافة.
• يمكنك استخراج جميع تنسيقات طريقة العرض وجمعها في نمط. لإضفاء مظهر متسق على تطبيقك، أعِد استخدام النمط مع طرق العرض الأخرى.

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

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

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

• التنسيقات
• ViewGroup
• View
• التصميم الخطي
• ScrollView
• إتاحة كثافات بكسل مختلفة (dp)
• إنشاء واجهة مستخدم باستخدام "أداة تعديل التصميم"
• مستندات "استوديو Android"
• الأنماط والمظاهر

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

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

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

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

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

السؤال 1

أي مما يلي يندرج ضمن مجموعة طرق العرض؟

▢ EditText

▢ LinearLayout

▢ TextView

▢ Button

السؤال 2

أيّ من تسلسلات عرض العناصر التالية غير صالح؟

▢ LinearLayout > TextView، TextView، ImageView

▢ ScrollView > LinearLayout > TextView، Button، Button، ScrollView > TextView

▢ TextView > TextView، ImageView، ScrollView

السؤال 3

الأنماط هي موارد محدّدة في styles.xml. باستخدام الأنماط، يمكنك تحديد الألوان والخطوط وحجم النص والعديد من خصائص العرض الأخرى. صواب أم خطأ؟

▢ صواب

▢ غَيْرُ صَحِيح

السؤال 4

ScrollView هي مجموعة عرض يمكن أن تحتوي على أي عدد من طرق العرض أو مجموعات العرض كعناصر ثانوية لها. صواب أم خطأ؟

▢ صواب

▢ غَيْرُ صَحِيح

السؤال 5

ما هو عنصر واجهة المستخدِم الذي يمكن استخدامه لعرض الصور في تطبيقك؟

▢ TextView

▢ ImageView

▢ Button

▢ ScrollView

ابدأ الدرس التالي: 2.2: إضافة تفاعلية المستخدم

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