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 في "استوديو Android".

1. افتح "استوديو Android" إذا لم يكن مفتوحًا.
2. إذا كان هناك مشروع مفتوح في "استوديو Android"، اختَر ملف &gt؛ جديد &gt؛ مشروع جديد.
   
   
   
3. إذا لم يكن المشروع مفتوحًا، انقر على + بدء مشروع جديد في "استوديو Android" في مربّع الحوار مرحبًا بك في "استوديو Android".
   
   
   
4. في مربع حوار إنشاء مشروع جديد، في علامة تبويب الهاتف والجهاز اللوحي، اختَر نموذج نشاط فارغ. انقر على Next (التالي).
   
   
   
5. في مربّع الحوار التالي Create New Project (إنشاء مشروع جديد)، اضبط المعلمات التالية وانقر على Finish (إنهاء).
   

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

سيستغرق Android Studio لحظة لإنشاء ملفات المشاريع.

6. شغِّل تطبيقك. ستظهر لك السلسلة "مرحبًا بالعالم&quot على الشاشة الفارغة.
   

يُنشئ نموذج النشاط الفارغ نشاطًا فارغًا واحدًا، 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>

محرّر التصميم هو أداة للتصميم المرئي في 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
إرسال رسالة نصية	مُمْكِنْ ضَبْطِهْ عَلَى الْاسْمْ. (يعرض أحد حقول text رمز مفتاح الربط للإشارة إلى أنّه على مساحة الاسم tools. واحد بدون مفتاح الربط هو مساحة الاسم android، وهذا هو الحقل النص الذي تريده.)
textالمظهر > textSize	20sp
textالمظهر > textColor	@android:color/black
textالمظهر > textمحاذاة	الوسط

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

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

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

1. في لوحة السمات، انقر على النقاط الثلاث بجانب السمة text التي حدّدتها لاسمك. يتم فتح محرِّر الموارد.
   
   
   
2. في مربّع الحوار الموارد، اختَر إضافة مورد جديد؛gt؛ قيمة سلسلة جديدة.
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 المساحة المتروكة لحافة &quot؛ البدء&;;;;;; طريقة العرض.
• تحدّد android:paddingEnd المساحة المتروكة لحافة &;end";العرض.
• يحدِّد تطبيق android:paddingLeft المساحة المتروكة الحافة اليمنى.
• يحدِّد تطبيق android:paddingRight المساحة المتروكة للحافة اليمنى.

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

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

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

دائمًا ما تشير هذه العبارة إلى "الجانب الأيمن والأيسر" أو "التنقّل من اليمين إلى اليسار" أو الإشارة إلى الجزء الأيمن والأيسر. دائمًا ما تشير هذه العبارة إلى نقطة البداية والنهاية:

• بالنسبة إلى تدفق LTR، ابدأ = اليسار و النهاية=اليمين.
• بالنسبة إلى مسار العرض في الوقت الفعلي، ابدأ=إلى اليسار ثم إلى النهاية=.

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

• استخدام & كيفيّة & نقطة البداية
• على سبيل المثال، يجب أن android:layout_marginLeft يصبح android:layout_marginStart متوافقًا مع لغات RTL.

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

• إضافة &علامتا بدء &اقتباس &إنهاء&;&&;;&&;&&;;&&;;right"
• على سبيل المثال، يمكنك استخدام كل من android:paddingLeft وandroid:paddingStart.

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

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

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

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

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

1. في جزء السمات، ابحث عن " هامش&quot؛ للعثور على التنسيق_الأدنى.
2. وسِّع Layout_Margin، وانقر على رمز النقاط الثلاث ... بجانب السمة top.
3. إنشاء مورد dimen جديد باسم layout_margin وجعله 16dp. انقر على حسنًا.

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

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

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

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

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

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

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

1. انقر بزر الماوس الأيمن على TextView في شجرة العناصر واختر ReACTOR > Extract Style.
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. يمكنك عرض ملف التنسيق في علامة التبويب تصميم، ثم سحب عرض الصورة من لوحة لوحة الألوان إلى أسفل name_text في شجرة المكوّنات. سيظهر مربّع الحوار الموارد.
2. اختَر قابل للرسم إذا لم يكن محددًا.
3. وسِّع android وانتقِل واختَر _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" واختر إعادة بناء &gt؛ إعادة تسمية.
7. في مربع الحوار إعادة تسمية، اضبط id على @+id/star_image. انقر على إعادة بناء.
   
   
   

ملاحظة: إعادة بناء الملف &gt إعادة التسمية تعيد تسمية جميع مواضع ورود السمة أو اسم المتغير في مشروع التطبيق.

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

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

توضح الصورة التالية مثالاً على ScrollView الذي يحتوي على LinearLayout يحتوي على العديد من الملفات الشخصية الأخرى.

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

الخطوة 1: إضافة الانتقال إلى صفحة العرض التي تشتمل على نص عرض

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. بعد ذلك، تضيف نمطًا لعرض النص الجديد. في لوحة السمات، انقر على رمز النقاط الثلاث ... بجانب السمة style لفتح مربّع الحوار الموارد.
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. بدِّل إلى علامة التبويب Text (النص)، واستخرِج مورد المكوّن، وأدخِل اسمه layout_padding.
   
   

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

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

تهانينا.

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

مشروع "استوديو Android": نبذة عني

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

داخل 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 &gt؛ TextView، TextView، ImageView

▢ ScrollView &gt؛ LinearLayout &gt؛ TextView وButton وButton وScrollView &gt؛ TextView

▢ TextView &gt؛ TextView، ImageView، ScrollView

السؤال 3

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

▢ صواب

▢ خطأ

السؤال 4

ScrollView هي مجموعة ملفات شخصية يمكن أن تتضمن أي عدد من الملفات الشخصية أو مجموعات الملفات الفرعية. صحيح أم خطأ؟

▢ صواب

▢ خطأ

السؤال 5

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

▢ TextView

▢ ImageView

▢ Button

▢ ScrollView

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

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