إضافة صورة إلى تطبيق بطاقة عيد الميلاد

في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية إضافة صور إلى تطبيقك باستخدام ImageView.

المتطلّبات الأساسية

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

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

• كيفية إضافة صورة إلى تطبيق Android
• كيفية عرض صورة في تطبيقك باستخدام ImageView.
• كيفية استخراج النص إلى مورد سلسلة لتسهيل ترجمة تطبيقك وإعادة استخدام السلاسل.
• كيفية جعل تطبيقك قابلاً للاستخدام لأكبر عدد من المستخدمين.

العناصر التي سيتم إنشاؤها

• يجب تمديد تطبيق عيد الميلاد لإضافة صورة.

ما تحتاج إليه

• جهاز كمبيوتر تم تثبيت Android Studio عليه.
• التطبيق من &علامة التبويب "إنشاء بطاقة عيد ميلاد"

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

إضافة صورة إلى مشروعك

في هذه المهمة، يمكنك تنزيل صورة من الإنترنت وإضافتها إلى تطبيق "عيد ميلاد سعيد".

1. انتقِل إلى هذا الموقع الإلكتروني للعثور على صورة لبطاقة عيد ميلادك.
2. انقر على الزر تنزيل على اليسار. ويؤدي هذا إلى عرض الصورة وحدها.
   
3. انقر بزر الماوس الأيمن على الصورة واحفظ الملف على جهاز الكمبيوتر باسم androidparty.jpg. دوِّن المكان الذي حفظته فيه (مثل مجلد عمليات التنزيل).
4. في "استوديو Android"، انقر على عرض &gt؛ أداة Windows &gt؛ مدير الموارد في القوائم أو انقر على علامة التبويب مدير الموارد على يمين نافذة المشروع.
5. انقر على + أسفل مدير الموارد، واختَر استيراد بيانات قابلة للرسم. سيؤدي هذا إلى فتح متصفِّح ملفات.
   
6. في متصفِّح الملفات، ابحث عن ملف الصورة الذي نزّلته وانقر على فتح.
7. انقر على التالي.
   يعرض لك "استوديو Android" معاينة للصورة.
8. انقر على استيراد.
9. في حال استيراد الصورة بنجاح، يضيف "استوديو Android" الصورة إلى قائمة قابلة للرسم. تضم هذه القائمة جميع صورك ورموزها للتطبيق. يمكنك الآن استخدام هذه الصورة في تطبيقك.
   
10. يمكنك التبديل مرة أخرى إلى عرض المشروع من خلال النقر على عرض &gt؛ أداة Windows &gt؛ المشروع في القوائم أو علامة التبويب المشروع في أقصى اليمين.
11. تأكَّد من أنّ الصورة موجودة في المجلد القابل للرسم في تطبيقك من خلال توسيع app > res > intableable.
    

لعرض صورة في تطبيقك، يجب عرضه في مكان ما. مثلما تستخدم TextView لعرض النص، يمكنك استخدام ImageView لعرض الصور.

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

إضافة ImageView وتحديد صورته

1. في نافذة المشروع، افتح activity_main.xml ( التطبيق > res > التنسيق &gt؛ activity_main.xml).

ملاحظة: إذا لم يظهر لك محرِّر التنسيق، انقر على زر وضع التصميم في أعلى يسار الصفحة.

2. في محرر التنسيق، انتقِل إلى لوحة الألوان واسحب ImageView إلى تطبيقك. وأفلِته بالقرب من الوسط ولا يتداخل مع أي نص.

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

3. في مربع الحوار اختيار مورد، ابحث عن صورة الكعكة في القائمة قابل للرسم.
4. انقر على الصورة، ثم انقر على OK (حسنًا).
   

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

موضع ImageView وحجمه

1. انقر على ImageView واسحبه في محرر التنسيق، ولاحظ أنه عند السحب، يظهر مستطيل وردي حول شاشة التطبيق في عرض التصميم. يشير المستطيل الوردي إلى حدود الشاشة لوضع ImageView.
2. أفلِت ImageView بحيث تتم محاذاة الحافة اليسرى واليمين مع المستطيل الوردي. سيعمل Android Studio على التقاط الصورة والحواف عند إغلاق المكان. (ستتولّى المهام الأعلى والأسفل بعد قليل.)
   

يجب أن يخضع Views في ConstraintLayout لقيود أفقية ورأسية لإخبار ConstraintLayout بكيفية تحديد موضعها. ستتمكّن من إضافة هذه الرسائل بعد ذلك.

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

1. ثبِّت المؤشر فوق الدائرة أعلى مخطط ImageView، حيث يتم تمييزه باستخدام دائرة أخرى.
2. واسحب الدائرة نحو أعلى شاشة التطبيق وسيربط سهم الدائرة بمؤشّر الماوس أثناء السحب. اسحب حتى يتم محاذاة إلى أعلى الشاشة. لقد أضفت قيودًا من أعلى ImageView إلى أعلى ConstraintLayout.
   
   
3. أضِف شرطًا من أسفل ImageView إلى أسفل ConstraintLayout.

ملاحظة: يمكن أن تكون إضافة قيود أكثر صعوبة عند إضافة المزيد من العناصر Views على الشاشة. إذا أضفت قيودًا على View غير الصحيح، يمكنك التراجع عن هذه الخطوة باستخدام Control+Z (Command+Z على جهاز Mac). أو انقر بزر الماوس الأيمن على View التي ستنبثق قائمة، واختَر محو قيود الاختيار، ما سيؤدي إلى إزالة جميع القيود على View.

4. في جزء السمات، استخدم أداة التقييد لإضافة هامش 0 إلى اليسار وجانب الجانب الأيمن. ويؤدي هذا تلقائيًا إلى فرض قيود على هذا الاتجاه.
   

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

1. أسفل أداة القيود في قسم الشروط، اضبط Layout_width على 0dp (قيود مطابقة).
   0dp هو اختصار لـ "استوديو Android" يستخدم قيود مطابقة لعرض ImageView. &قيود؛تطابق& المطابقة.... بسبب القيود التي أضفتها توًا، يصبح هذا النطاق عريضًا مثل ConstraintLayout، مع طرح أي هوامش.
   
2. اضبط Layout_height على 0dp (قيود المطابقة).
   بسبب القيود التي أضفتها، يصبح ImageView ImageView مثل ConstraintLayout، مطروحًا منه أي هوامش.
   
3. ImageView كبير وطويل مثل شاشة التطبيق، ولكن الصورة تتوسط الصورة في ImageView وهناك مجموعة من المسافات البيضاء فوق الصورة وأسفلها. وبما أن هذا لا يبدو جذابًا جدًا، يمكنك ضبط scaleType من ImageView، بحيث تعرف كيفية تغيير حجم الصورة ومحاذاةها. اقرأ المزيد عن ScaleType في الدليل المرجعي لمطوّري البرامج. من المفترض أن يظهر تطبيقك الآن على النحو الموضّح أدناه.
   
4. ابحث عن السمة scaleType. قد تحتاج إلى الانتقال إلى الأسفل أو البحث عن هذه السمة. جرِّب ضبط قيم مختلفة للسمة scaleType لمعرفة وظائفها.

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

5. عند الانتهاء، اضبط scaleType على centerCrop لأن ذلك يجعل الصورة تملأ الشاشة بدون تشويهها.

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

ولكن لا يمكنك الآن الاطّلاع على تحية عيد الميلاد وتوقيعه. سيتم إصلاح ذلك في الخطوة التالية.

نقل ImageView خلف النص

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

1. في شجرة المكوّنات، انقر على ImageView واسحبه فوق TextViews إلى أسفل ConstraintLayout مباشرةً. سيظهر خط أزرق يتضمن مثلثًا يوضح المكان الذي سيتم توجيه ImageView إليه. يمكنك إسقاط ImageView أسفل ConstraintLayout مباشرةً.
   
   

من المفترض أن يظهر ImageView الآن أولاً في القائمة أسفل ConstraintLayout، مع إضافة TextViews بعده. من المفترض أن يظهر كل من &quot؛عيد ميلاد سعيد، سام!&;;&;;;;Emma&&quot؛ النص مرئيًا، ولكن &قد؛ يصعب قراءتك لعيد الميلاد يا سامي&&;لأنها نصوص داكنة اللون في خلفية داكنة. (تجاهل التحذير بشأن وصف المحتوى المفقود في الوقت الحالي).

تغيير لون النص

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

1. اختَر أول TextView من خلال النقر عليه في شجرة المكوّنات.
2. في السمات، انقر على السمة textColor وابدأ الكتابة باللون الأبيض.
   لاحظ أنه أثناء الكتابة، يعرض "استوديو Android" قائمة بالألوان التي تحتوي على النص الذي كتبته حتى الآن.
   
3. اختَر @android:color/white من قائمة الألوان واضغط على Enter. يحدّد نظام التشغيل Android عددًا من الألوان حتى يمكنك استخدامها باستمرار في أجزاء مختلفة من التطبيق.
4. نفِّذ الإجراء نفسه مع TextView الأخرى.
5. شغِّل تطبيقك ولاحظ أن النص أصبح أسهل في القراءة.
   

تهانينا. لقد أضفت صورة إلى تطبيقك المتوافق مع Android ويبدو نصك رائعًا عليه.

عندما أضفت TextViews في الدرس التطبيقي السابق حول الترميز، رصده "استوديو Android" بمثلثات تحذيرية. في هذه الخطوة، ستعمل على إصلاح هذه التحذيرات وأيضًا إصلاح التحذير على ImageView.

جارٍ الترجمة.

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

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

1. انقر على المثلث البرتقالي بجانب أول TextView مع &على سبيل المثال: عيد ميلاد سعيد سامي!&
   يفتح "استوديو Android" نافذة تتضمّن المزيد من المعلومات وإصلاح مقترح. قد تحتاج إلى الانتقال للأسفل لرؤية الإصلاح المقترَح.
   
   
2. انقر على الزر إصلاح.
   يفتح "استوديو Android" مربع الحوار استخراج المورد. في مربع الحوار هذا، يمكنك تخصيص اسم مورد السلسلة، وبعض التفاصيل حول كيفية تخزينه. اسم المورد هو ما سيتم طلب السلسلة. وستكون قيمة المورد هي السلسلة الفعلية نفسها.
3. في مربع الحوار استخراج المورد، غيِّر اسم المورد إلى happy_birthday_text. يجب أن تحتوي موارد السلسلة على أسماء صغيرة، ويجب أن تكون الكلمات المتعددة منفصلة بشرطة سفلية. اترك الإعدادات الأخرى باستخدام الإعدادات التلقائية.
   
4. انقر على الزر OK (حسنًا).
5. في لوحة السمات، ابحث عن السمة text، ولاحظ أنّ "استوديو Android" قد ضبطها تلقائيًا على @string/happy_birthday_text لك.
   
6. افتح strings.xml (التطبيق > res > القيم > سلاسل.xml) ولاحظ أن "استوديو Android" أنشأ موردًا للسلسلة باسم happy_birthday_text.

<resources>
    <string name="app_name">Happy Birthday</string>
    <string name="happy_birthday_text">Happy Birthday, Sam!</string>
</resources>

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

7. اتبع الخطوات نفسها لاستخراج النص للتوقيع TextView، وتسمية مورد السلسلة signature_text.

ويجب أن يظهر الملف المنتهية كما يلي.

<resources>
    <string name="app_name">Happy Birthday</string>
    <string name="happy_birthday_text">Happy Birthday, Sam!</string>
    <string name="signature_text">From Emma.</string>
</resources>

التحقّق من إمكانية الوصول إلى تطبيقك

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

ملاحظة: يوفّر نظام التشغيل Android العديد من الأدوات للمستخدمين. على سبيل المثال، TalkBack هو قارئ شاشة Google المضمّن في أجهزة Android. تقدِّم ميزة TalkBack ملاحظات وآراء منطوقة بحيث يمكن للمستخدمين استخدام الجهاز بدون النظر إلى الشاشة. اقرأ المزيد عن تسهيل الاستخدام في الدليل المرجعي لمطوّري البرامج.

ويقدِّم "استوديو Android" تلميحات وتحذيرات لمساعدتك في تسهيل استخدام تطبيقك.

1. في شجرة المكوّنات، لاحظت مثلثًا برتقاليًا بجانب ImageView الذي أضفته سابقًا. إذا مرّرت مؤشر الماوس فوقها، سترى تلميحًا يحتوي على تحذير بشأن عدم توفّر سمة 'contentDescription' في الصورة. يمكن أن يساعد وصف المحتوى في جعل تطبيقك أكثر قابلية للاستخدام من خلال TalkBack من خلال تحديد الغرض من واجهة المستخدم.

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

2. في شجرة المكوّنات، اختَر ImageView.
3. في نافذة السمات، في قسم جميع السمات، ابحث عن importantForAccessibility واضبطها على no.
   

يختفي المثلث البرتقالي بجانب ImageView.

4. شغِّل تطبيقك مرة أخرى للتأكّد من أنه لا يزال يعمل.

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

تم تحميل رمز الحل الخاص بتطبيق عيد ميلاد سعيد إلى GitHub، في حال أردت الاطّلاع على الرمز الذي انتهت إلينا.

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

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

عنوان URL لرمز الحل: https://github.com/google-developer-training/android-basics-kotlin-<APPNAME>

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

الحصول على الرمز‏

1. انقر على عنوان URL لرمز الحل. يؤدي ذلك إلى فتح صفحة GitHub للمشروع في متصفِّح.
2. في صفحة GitHub للمشروع، انقر على الزر نسخ أو تنزيل الذي يظهر مربع حوار نسخة طبق الأصل.

3. في مربع الحوار، انقر على الزر تنزيل ملف ZIP لحفظ المشروع على جهاز الكمبيوتر. انتظر حتى يكتمل التنزيل.
4. حدّد موقع الملف في جهاز الكمبيوتر (على الأرجح في المجلد عمليات التنزيل).
5. انقر مرتين على ملف ZIP لفكه. يؤدي هذا إلى إنشاء مجلد جديد يحتوي على ملفات المشروع.

فتح المشروع في "استوديو Android"

1. ابدأ "استوديو Android".
2. في النافذة مرحبًا بك في "استوديو Android"، انقر على فتح مشروع حالي في "استوديو Android".

ملاحظة: إذا كان Android Studio مفتوحًا من قبل، حدِّد خيار القائمة ملف &gt؛ جديد &gt؛ استيراد مشروع.

3. في مربّع الحوار استيراد مشروع، انتقِل إلى مكان مجلد المشروع غير المضغوط (من المُحتمَل أن يظهر في مجلد عمليات التنزيل).
4. انقر مرّتين على مجلد المشروع هذا.
5. انتظر حتى يفتح "استوديو Android" المشروع.
6. انقر على الزر تشغيل لإنشاء التطبيق وتشغيله. تأكّد من أنه يعمل كما هو متوقع.
7. تصفَّح ملفات المشروع في نافذة أداة المشروع لمعرفة كيفية تنفيذ التطبيق.

المساعدة: راجِع دليل المساعدة وتحديد المشاكل وحلّها في حال لم يتم تحميل الرمز الذي تم تنزيله أو تشغيله بشكلٍ صحيح.

• يساعدك مدير الموارد في "استوديو Android" على إضافة صورك ومواردك وتنظيمها.
• ImageView هو عنصر واجهة مستخدم لعرض الصور في تطبيقك.
• يجب أن تتضمن ImageViews وصفًا للمحتوى للمساعدة في تسهيل الوصول إلى تطبيقك.
• يجب استخراج النص الذي يظهر للمستخدم مثل رسالة ترحيب عيد الميلاد في أحد موارد السلسلة لتسهيل ترجمة التطبيق إلى لغات أخرى.

• مدير الموارد في "استوديو Android"
• ImageView صف
• تسهيل الاستخدام
• إتاحة لغات مختلفة
• بدء استخدام GitHub

ملاحظة: الممارسات اختيارية. وهي تتيح لك فرصة ممارسة ما تعلمته في هذا الدرس التطبيقي حول الترميز.

يُرجى تنفيذ ما يلي:

1. أنشِئ تطبيق بطاقة عيد الميلاد استنادًا إلى تصميمك.
2. ننصحك بالتفكير في العناصر التي ستحتاج إليها في Views.
3. ما هو الترتيب الأسهل لك لإضافته؟
4. ما الصور التي تحتاج إلى إضافتها إلى المجلد القابل للرسم؟

هناك نوعان من صور الصور الرمزية التي يتم استخدامها عادةً مع التطبيقات المتوافقة مع Android وملفات JPEG وملفات PNG. يمكن أن تحتوي ملفات PNG على مناطق شفافة (فارغة). اقرأ المزيد عن تنسيقات الصور في مرجع مطوّر البرامج.

5. يُرجى تذكُّر وضع Views أولاً بقيود وهوامش، ثم تحديد أنماطها.
6. لجعل النص مميزًا بشكل أكبر على بعض الصور، جرِّب استخدام shadowColor وshadowDx وshadowDy وshadowRadius.
   

التحقق من عملك:

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