مشروع انشاء تطبيق لموبايل
بيئة تطوير أندرويد
التعريف - ماذا يعني Android Studio ؟
Android Studio هو بيئة التطوير المتكاملة لمنصة Android في Google. تتوافق إصدارات Android Studio مع بعض أنظمة تشغيل Apple و Windows و Linux. مع دعم Google Cloud Platform وتكامل تطبيقات Google ، يوفر Android Studio للمطورين مجموعة أدوات جيدة التجهيز لإنشاء تطبيقات Android أو مشاريع أخرى ، وكان جزءًا لا يتجزأ من تطوير Android منذ عام 2013.
تيكوبيديا تشرح Android Studio
بمعنى ما ، يعتبر Android Studio وسيلة للمهندسين الذين يرغبون في إنشاء عروض لمنصة Android ، على غرار الطريقة التي يدعم بها Apple Developer (والأدوات المساعدة مثل XCode IDE) مجتمع مطوري Apple. تمتلك كل من Apple و Android "متاجر تطبيقات" خاصة بها لتوفر خيارات للمستخدمين. تعد سمعة Android Studio ومتجر تطبيقات Android بمثابة "مصدر مفتوح" وأقل منصة موجهة من قبل البائع. تعكس بيئة Android Studio ، إلى جانب أدواتها ومنهجيتها ، هذا النهج.
إنشاء مشروع أندرويد جديد
تتمثل الخطوة الأولى في عملية تطوير التطبيق في إنشاء مشروع جديد داخل بيئة Android Studio. لذا ، ابدأ بتشغيل Android Studio بحيث تظهر شاشة "Welcome to Android Studio" كما هو موضح في الشكل 3-1:
الشكل 3-1
بمجرد ظهور هذه النافذة ، يصبح Android Studio جاهزًا لإنشاء مشروع جديد. لإنشاء المشروع الجديد ، ما عليك سوى النقر فوق خيار بدء مشروع Android Studio جديد لعرض الشاشة الأولى لمعالج مشروع جديد كما هو موضح في الشكل 3-2:
الشكل 3-2
تحديد إعدادات المشروع و SDK
في نافذة مشروع جديد ، اضبط حقل اسم التطبيق على AndroidSample. اسم التطبيق هو الاسم الذي سيتم بموجبه الرجوع إلى التطبيق وتحديده في Android Studio وهو أيضًا الاسم الذي سيتم استخدامه عند عرض التطبيق المكتمل للبيع في متجر Google Play.
يتم استخدام Package Name لتحديد التطبيق بشكل فريد ضمن النظام البيئي لتطبيق Android. يجب أن يستند إلى عنوان URL المعكس لاسم المجال الخاص بك متبوعًا باسم التطبيق. على سبيل المثال ، إذا كان نطاقك هو www.mycompany.com ، وتم تسمية التطبيق باسم AndroidSample ، فقد يتم تحديد اسم الحزمة على النحو التالي:
com.mycompany.androidsample
إذا لم يكن لديك اسم مجال ، فيمكنك أيضًا استخدام ebookfrenzy.com لأغراض الاختبار ، على الرغم من ذلك ، يجب تغيير ذلك قبل نشر التطبيق:
com.ebookfrenzy.androidsample
سيتم إعداد موقع Project افتراضيًا على موقع في المجلد المسمى AndroidStudioProjects الموجود في الدليل الرئيسي الخاص بك ويمكن تغييره بالنقر فوق الزر الموجود على يمين حقل النص الذي يحتوي على إعداد المسار الحالي.
انقر فوق التالي للمتابعة. في شاشة عوامل النموذج ، قم بتمكين خيار الهاتف والكمبيوتر اللوحي وقم بتعيين الحد الأدنى من إعداد SDK على API 8: Android 2.2 (Froyo). سبب اختيار إصدار أقدم من SDK هو أن هذا يضمن أن التطبيق النهائي سيكون قادرًا على العمل على أوسع مجموعة ممكنة من أجهزة Android. كلما ارتفع الحد الأدنى لاختيار SDK ، زاد تقييد التطبيق على أجهزة Android الأحدث. يمكن عرض مخطط مفيد (الشكل 3 3) من خلال النقر على الرابط مساعدتي في الاختيار. يوضح ذلك إصدارات SDK المختلفة ومستويات واجهة برمجة التطبيقات المتاحة للاستخدام والنسبة المئوية لأجهزة Android في السوق التي سيتم تشغيل التطبيق عليها إذا تم استخدام SDK كحد أدنى. بشكل عام ، يجب أن يكون من الضروري تحديد SDK أحدث عندما يحتوي هذا الإصدار على ميزة معينة مطلوبة للتطبيق الخاص بك. للمساعدة في عملية اتخاذ القرار ، سيؤدي تحديد مستوى واجهة برمجة التطبيقات من المخطط إلى عرض الميزات المدعومة في هذا المستوى.
الشكل 3-3
نظرًا لأن المشروع ليس مخصصًا لـ Google TV أو Google Glass أو الأجهزة القابلة للارتداء ، فاترك الخيارات المتبقية معطلة قبل النقر فوق "التالي".
خلق نشاط
الخطوة التالية هي تحديد نوع النشاط الأولي المراد إنشاؤه للتطبيق. تتوفر مجموعة من أنواع الأنشطة المختلفة عند تطوير تطبيقات Android. سيتم تغطية خيار Master / Detail Flow في فصل لاحق. لأغراض هذا المثال ، مع ذلك ، حدد ببساطة خيار إنشاء نشاط فارغ.
الشكل 3-4
مع تحديد خيار النشاط الفارغ ، انقر فوق التالي. في الشاشة النهائية (الشكل 3-5) ، اسم النشاط والعنوان AndroidSampleActivity. سيتألف النشاط من تخطيط شاشة واجهة مستخدم واحد ، لأغراض هذا المثال ، يجب تسمية نشاط_الروبوت_العين كما هو مبين في الشكل 3-5 ومع مصدر قائمة اسمه menu_android_sample:
أخيرًا ، انقر فوق "إنهاء" لبدء عملية إنشاء المشروع.
تعديل تطبيق المثال
في هذه المرحلة ، أنشأ Android Studio مشروع تطبيق بسيط للغاية وفتح المشروع الرئيسي.
يتم سرد المشروع الذي تم إنشاؤه حديثًا والمراجع إلى الملفات المرتبطة في نافذة أداة المشروع الموجودة على الجانب الأيسر من نافذة المشروع الرئيسية. تحتوي نافذة أداة Project على عدد من الأوضاع التي يمكن من خلالها عرض المعلومات. بشكل افتراضي ، ستكون هذه اللوحة في وضع Android. يتم التحكم في هذا الإعداد من خلال القائمة المنسدلة أعلى اللوحة كما هو موضح في الشكل 3-6. إذا لم تكن اللوحة في وضع Android حاليًا ، فانقر فوق هذه القائمة وانتقل إلى وضع Android:
الشكل 3-6
يتألف مشروع المثال الذي تم إنشاؤه لنا عندما حددنا خيار إنشاء نشاط من واجهة مستخدم تحتوي على ملصق يقرأ "Hello World" عند تنفيذ التطبيق.
تتمثل الخطوة التالية في هذا البرنامج التعليمي في تعديل واجهة المستخدم الخاصة بالتطبيق الخاص بنا بحيث يعرض كائنًا أكبر لعرض النص مع رسالة مختلفة عن الرسالة التي قدمها لنا Android Studio.
يتم تخزين تصميم واجهة المستخدم لنشاطنا في ملف باسم activity_android_sample.xml والذي يقع بدوره تحت تخطيط التطبيق -> الدقة -> في التسلسل الهرمي لملف المشروع. باستخدام لوحة Project ، حدد موقع هذا الملف كما هو موضح في الشكل 3-7:
الشكل 3-7
بمجرد تحديد موقعه ، انقر نقرًا مزدوجًا على الملف لتحميله في أداة User Interface Designer التي ستظهر في اللوحة المركزية لإطار Android Studio الرئيسي:
الشكل 3-8
في شريط الأدوات أعلى لوحة محرر التخطيط ، هناك قائمة تم ضبطها حاليًا على Nexus 4 والتي تنعكس في التمثيل المرئي للجهاز داخل لوحة Designer. تتوفر مجموعة واسعة من خيارات الأجهزة الأخرى للاختيار من خلال النقر على هذه القائمة.
لتغيير اتجاه تمثيل الجهاز بين الوضع الأفقي والعمودي ، ما عليك سوى استخدام القائمة المنسدلة على يمين قائمة تحديد الجهاز التي تظهر الرمز.
كما يمكن رؤيته في شاشة الجهاز ، يتضمن التخطيط بالفعل تسمية تعرض Hello World! رسالة. الركض على الجانب الأيسر من اللوحة عبارة عن لوحة تحتوي على فئات مختلفة من مكونات واجهة المستخدم التي يمكن استخدامها لإنشاء واجهة مستخدم ، مثل الأزرار والملصقات وحقول النص. ومع ذلك ، تجدر الإشارة إلى أنه ليس كل مكونات واجهة المستخدم مرئية بوضوح للمستخدم. واحدة من هذه الفئة تتكون من تخطيطات. يدعم Android مجموعة متنوعة من التخطيطات المختلفة التي توفر مستويات مختلفة من التحكم في كيفية وضع مكونات واجهة المستخدم المرئية وإدارتها على الشاشة. على الرغم من صعوبة التعرف على النظر إلى التمثيل المرئي لواجهة المستخدم ، فقد تم إنشاء التصميم الحالي باستخدام RelativeLayout.
الشكل 3-9
كما نرى من التسلسل الهرمي لشجرة المكون ، تتكون واجهة المستخدم من أحد الوالدين RelativeLayout مع طفل واحد في شكل كائن TextView.
الخطوة الأولى في تعديل التطبيق هي حذف مكون TextView من التصميم. ابدأ بالنقر فوق كائن TextView داخل عرض واجهة المستخدم بحيث يظهر بحد أزرق حوله. بمجرد تحديد ، اضغط على مفتاح الحذف على لوحة المفاتيح لإزالة الكائن من التخطيط.
في لوحة Palette ، حدد موقع الفئة Widgets. انقر واسحب كائن Large Text واسقطه في منتصف تصميم واجهة المستخدم عندما تظهر خطوط العلامة الخضراء للإشارة إلى مركز الشاشة:
الشكل 3-10
توفر أداة Android Studio Designer أيضًا بديلاً لسحب وإسقاط المكونات من اللوحة إلى تصميم التصميم. يمكن أيضًا إضافة المكونات عن طريق تحديد الكائن المطلوب من اللوحة ثم النقر ببساطة على التخطيط في الموقع الذي سيتم وضع المكون فيه.
الخطوة التالية هي تغيير النص المعروض حاليًا بواسطة مكون TextView. انقر نقرًا مزدوجًا فوق الكائن في تخطيط التصميم لعرض لوحة تحرير النص والمعرف كما هو موضح في الشكل 3-11. داخل اللوحة ، قم بتغيير خاصية النص من "نص كبير" إلى "مرحبًا بك في Android Studio".
الشكل 3-11
في هذه المرحلة ، من المهم شرح المصباح الموجود بجوار كائن TextView في التخطيط. هذا يشير إلى وجود مشكلة محتملة ويوفر بعض الحلول الموصى بها. النقر فوق الرمز في هذه الحالة يعلمنا أن المشكلة كما يلي:
[I18N] يجب استخدام السلسلة ذات السلسلة الصلبة "مرحبًا بك في Android Studio" ، المورد @ string
تُبلغنا رسالة I18N هذه بوجود مشكلة محتملة فيما يتعلق بالتدويل المستقبلي للمشروع ("I18N" تأتي من حقيقة أن كلمة "التدويل" تبدأ بحرف "I" وتنتهي بـ "N" وتتضمن 18 الحروف بين). يذكرنا هذا التحذير بأنه عند تطوير تطبيقات Android ، يجب تخزين السمات والقيم مثل سلاسل النصوص في شكل موارد كلما كان ذلك ممكنًا. يؤدي القيام بذلك إلى تمكين التغييرات التي يتم إجراؤها على مظهر التطبيق عن طريق تعديل ملفات الموارد بدلاً من تغيير التعليمات البرمجية المصدر للتطبيق. هذا يمكن أن يكون ذا قيمة خاصة عند ترجمة واجهة المستخدم إلى لغة منطوقة مختلفة. إذا كان كل النص الموجود في واجهة المستخدم موجودًا في ملف مورد واحد ، على سبيل المثال ، يمكن إعطاء هذا الملف إلى مترجم يقوم بعد ذلك بعمل الترجمة وإرجاع الملف المترجم لإدراجه في التطبيق. يتيح ذلك استهداف لغات متعددة دون الحاجة إلى إجراء تغييرات على شفرة المصدر. في هذه الحالة ، سننشئ موردًا جديدًا يدعى Welcomeestring وسنخصص لها السلسلة "Welcome to Android Studio".
انقر على السهم الموجود على يمين رسالة التحذير لعرض قائمة الحلول الممكنة (الشكل 3-12).
الشكل 3-12
من القائمة ، حدد خيار مورد استخراج السلسلة لعرض مربع حوار استخراج الموارد. في مربع الحوار هذا ، أدخل كلمة ترحيب في حقل اسم المورد: قبل النقر فوق "موافق". يتم الآن تخزين السلسلة كمورد في التطبيق -> الدقة -> القيم -> ملف strings.xml.
مراجعة ملفات التخطيط والمورد
قبل الانتقال إلى الفصل التالي ، سننظر في بعض الجوانب الداخلية لتصميم واجهة المستخدم ومعالجة الموارد. في القسم السابق ، أجرينا بعض التغييرات على واجهة المستخدم من خلال تعديل ملف activity_android_sample.xml باستخدام أداة مصمم واجهة المستخدم. في الواقع ، كل ما كان يقوم به المصمم هو توفير طريقة سهلة الاستخدام لتحرير محتوى XML الأساسي للملف. في الممارسة العملية ، لا يوجد سبب يمنعك من تعديل XML مباشرة من أجل إجراء تغييرات في واجهة المستخدم ، وفي بعض الحالات ، قد يكون هذا في الواقع أسرع من استخدام أداة Designer. في أسفل لوحة Designer توجد علامتا تبويب تحملان التصميم والنص على التوالي. للتبديل إلى عرض XML ، ما عليك سوى تحديد علامة التبويب "نص" كما هو موضح بالشكل 3-13:
الشكل 3-13
كما يتضح من بنية ملف XML ، تتكون واجهة المستخدم من مكون RelativeLayout ، والذي بدوره هو أصل كائن TextView. يمكننا أيضًا أن نرى أن خاصية النص في TextView قد تم ضبطها على موارد الوديعة الخاصة بنا. على الرغم من اختلافها في التعقيد والمحتوى ، إلا أن جميع تصميمات واجهة المستخدم يتم تنظيمها بهذه الطريقة الهرمية القائمة على XML.
يمكن العثور على واحدة من الميزات الأكثر قوة في Android Studio على الجانب الأيمن من لوحة تحرير XML. هذه هي لوحة المعاينة وتُظهر الحالة المرئية الحالية للتخطيط. عند إجراء تغييرات على تخطيط XML ، ستنعكس هذه التغييرات في لوحة المعاينة. لرؤية هذا قيد التنفيذ ، قم بتعديل تخطيط XML لتغيير لون خلفية RelativeLayout إلى ظل أحمر كما يلي:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".AndroidSampleActivity"
android:background="#ff2438">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="@string/welcomestring"
android:id="@+id/textView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
كعرض توضيحي للموارد قيد التنفيذ ، قم بتغيير قيمة السلسلة المعينة حاليًا لمورد الترحيب ثم قم بالعودة إلى "المصمم" عن طريق تحديد علامة التبويب لملف التخطيط في لوحة المحرر. لاحظ أن التخطيط قد التقط قيمة المورد الجديدة لسلسلة الترحيب.
هناك أيضًا طريقة سريعة للوصول إلى قيمة المورد المشار إليه في ملف XML. باستخدام أداة "المصمم" في وضع "النص" ، انقر فوق إعداد خاصية "@ string / welcome" لتمييزها ثم اضغط على Ctrl + B على لوحة المفاتيح. سيفتح Android Studio فيما بعد ملف strings.xml وينقلك إلى السطر الموجود في ذلك الملف حيث يتم الإعلان عن هذا المورد. استغل هذه الفرصة للعودة بمورد السلسلة إلى النص الأصلي "مرحبًا بك في Android Studio".
معاينة التخطيط
حتى الآن في هذا الفصل ، تمت معاينة التنسيق فقط على تمثيل لجهاز Nexus 4. كما تمت مناقشته سابقًا ، يمكن اختبار التصميم للأجهزة الأخرى عن طريق تحديد اختيارات من قائمة الجهاز في شريط الأدوات عبر الحافة العلوية من لوحة Designer. هناك خيار آخر مفيد توفره هذه القائمة هو معاينة جميع أحجام الشاشة والتي ، عند تحديدها ، تُظهر التنسيق في جميع تكوينات الأجهزة التي تم تكوينها حاليًا كما هو موضح في الشكل 3-14:
الشكل 3-14
للعودة إلى تخطيط معاينة واحد ، حدد قائمة الجهاز مرة أخرى ، وهذه المرة اختيار خيار إزالة المعاينات.
ملخص
على الرغم من عدم التعقيد المفرط ، فإن هناك عددًا من الخطوات المتضمنة في تهيئة بيئة تطوير Android. بعد القيام بهذه الخطوات ، يجدر العمل من خلال مثال بسيط للتأكد من تثبيت البيئة وتهيئتها بشكل صحيح. في هذا الفصل ، أنشأنا تطبيقًا بسيطًا ، ثم استخدم مصمم Android Studio UI لتعديل تخطيط واجهة المستخدم. من خلال القيام بذلك ، استكشفنا أهمية استخدام الموارد كلما كان ذلك ممكنًا ، لا سيما في حالة قيم السلسلة ، وتطرقنا لفترة وجيزة إلى موضوع التخطيطات. أخيرًا ، نظرنا إلى XML الأساسي المستخدم لتخزين تصميمات واجهة المستخدم لتطبيقات Android.
في حين أنه من المفيد أن تكون قادرًا على معاينة تخطيط من داخل أداة Android Studio Designer ، لا يوجد بديل لاختبار تطبيق عن طريق تجميعه وتشغيله. في فصل لاحق بعنوان " إنشاء جهاز Android الظاهري (AVD) في Android Studio" ، سيتم تغطية الخطوات اللازمة لإعداد محاكي لأغراض الاختبار بالتفصيل. قبل تشغيل التطبيق ، ومع ذلك ، سوف يستغرق الفصل التالي منعطفًا صغيرًا لتوفير جولة إرشادية لواجهة مستخدم Android Studio.
التعريف - ماذا يعني Android Studio ؟
Android Studio هو بيئة التطوير المتكاملة لمنصة Android في Google. تتوافق إصدارات Android Studio مع بعض أنظمة تشغيل Apple و Windows و Linux. مع دعم Google Cloud Platform وتكامل تطبيقات Google ، يوفر Android Studio للمطورين مجموعة أدوات جيدة التجهيز لإنشاء تطبيقات Android أو مشاريع أخرى ، وكان جزءًا لا يتجزأ من تطوير Android منذ عام 2013.
تيكوبيديا تشرح Android Studio
بمعنى ما ، يعتبر Android Studio وسيلة للمهندسين الذين يرغبون في إنشاء عروض لمنصة Android ، على غرار الطريقة التي يدعم بها Apple Developer (والأدوات المساعدة مثل XCode IDE) مجتمع مطوري Apple. تمتلك كل من Apple و Android "متاجر تطبيقات" خاصة بها لتوفر خيارات للمستخدمين. تعد سمعة Android Studio ومتجر تطبيقات Android بمثابة "مصدر مفتوح" وأقل منصة موجهة من قبل البائع. تعكس بيئة Android Studio ، إلى جانب أدواتها ومنهجيتها ، هذا النهج.
إنشاء مشروع أندرويد جديد
تتمثل الخطوة الأولى في عملية تطوير التطبيق في إنشاء مشروع جديد داخل بيئة Android Studio. لذا ، ابدأ بتشغيل Android Studio بحيث تظهر شاشة "Welcome to Android Studio" كما هو موضح في الشكل 3-1:
الشكل 3-1
بمجرد ظهور هذه النافذة ، يصبح Android Studio جاهزًا لإنشاء مشروع جديد. لإنشاء المشروع الجديد ، ما عليك سوى النقر فوق خيار بدء مشروع Android Studio جديد لعرض الشاشة الأولى لمعالج مشروع جديد كما هو موضح في الشكل 3-2:
الشكل 3-2
تحديد إعدادات المشروع و SDK
في نافذة مشروع جديد ، اضبط حقل اسم التطبيق على AndroidSample. اسم التطبيق هو الاسم الذي سيتم بموجبه الرجوع إلى التطبيق وتحديده في Android Studio وهو أيضًا الاسم الذي سيتم استخدامه عند عرض التطبيق المكتمل للبيع في متجر Google Play.
يتم استخدام Package Name لتحديد التطبيق بشكل فريد ضمن النظام البيئي لتطبيق Android. يجب أن يستند إلى عنوان URL المعكس لاسم المجال الخاص بك متبوعًا باسم التطبيق. على سبيل المثال ، إذا كان نطاقك هو www.mycompany.com ، وتم تسمية التطبيق باسم AndroidSample ، فقد يتم تحديد اسم الحزمة على النحو التالي:
com.mycompany.androidsample
إذا لم يكن لديك اسم مجال ، فيمكنك أيضًا استخدام ebookfrenzy.com لأغراض الاختبار ، على الرغم من ذلك ، يجب تغيير ذلك قبل نشر التطبيق:
com.ebookfrenzy.androidsample
سيتم إعداد موقع Project افتراضيًا على موقع في المجلد المسمى AndroidStudioProjects الموجود في الدليل الرئيسي الخاص بك ويمكن تغييره بالنقر فوق الزر الموجود على يمين حقل النص الذي يحتوي على إعداد المسار الحالي.
انقر فوق التالي للمتابعة. في شاشة عوامل النموذج ، قم بتمكين خيار الهاتف والكمبيوتر اللوحي وقم بتعيين الحد الأدنى من إعداد SDK على API 8: Android 2.2 (Froyo). سبب اختيار إصدار أقدم من SDK هو أن هذا يضمن أن التطبيق النهائي سيكون قادرًا على العمل على أوسع مجموعة ممكنة من أجهزة Android. كلما ارتفع الحد الأدنى لاختيار SDK ، زاد تقييد التطبيق على أجهزة Android الأحدث. يمكن عرض مخطط مفيد (الشكل 3 3) من خلال النقر على الرابط مساعدتي في الاختيار. يوضح ذلك إصدارات SDK المختلفة ومستويات واجهة برمجة التطبيقات المتاحة للاستخدام والنسبة المئوية لأجهزة Android في السوق التي سيتم تشغيل التطبيق عليها إذا تم استخدام SDK كحد أدنى. بشكل عام ، يجب أن يكون من الضروري تحديد SDK أحدث عندما يحتوي هذا الإصدار على ميزة معينة مطلوبة للتطبيق الخاص بك. للمساعدة في عملية اتخاذ القرار ، سيؤدي تحديد مستوى واجهة برمجة التطبيقات من المخطط إلى عرض الميزات المدعومة في هذا المستوى.
الشكل 3-3
نظرًا لأن المشروع ليس مخصصًا لـ Google TV أو Google Glass أو الأجهزة القابلة للارتداء ، فاترك الخيارات المتبقية معطلة قبل النقر فوق "التالي".
خلق نشاط
الخطوة التالية هي تحديد نوع النشاط الأولي المراد إنشاؤه للتطبيق. تتوفر مجموعة من أنواع الأنشطة المختلفة عند تطوير تطبيقات Android. سيتم تغطية خيار Master / Detail Flow في فصل لاحق. لأغراض هذا المثال ، مع ذلك ، حدد ببساطة خيار إنشاء نشاط فارغ.
الشكل 3-4
مع تحديد خيار النشاط الفارغ ، انقر فوق التالي. في الشاشة النهائية (الشكل 3-5) ، اسم النشاط والعنوان AndroidSampleActivity. سيتألف النشاط من تخطيط شاشة واجهة مستخدم واحد ، لأغراض هذا المثال ، يجب تسمية نشاط_الروبوت_العين كما هو مبين في الشكل 3-5 ومع مصدر قائمة اسمه menu_android_sample:
أخيرًا ، انقر فوق "إنهاء" لبدء عملية إنشاء المشروع.
تعديل تطبيق المثال
في هذه المرحلة ، أنشأ Android Studio مشروع تطبيق بسيط للغاية وفتح المشروع الرئيسي.
يتم سرد المشروع الذي تم إنشاؤه حديثًا والمراجع إلى الملفات المرتبطة في نافذة أداة المشروع الموجودة على الجانب الأيسر من نافذة المشروع الرئيسية. تحتوي نافذة أداة Project على عدد من الأوضاع التي يمكن من خلالها عرض المعلومات. بشكل افتراضي ، ستكون هذه اللوحة في وضع Android. يتم التحكم في هذا الإعداد من خلال القائمة المنسدلة أعلى اللوحة كما هو موضح في الشكل 3-6. إذا لم تكن اللوحة في وضع Android حاليًا ، فانقر فوق هذه القائمة وانتقل إلى وضع Android:
الشكل 3-6
يتألف مشروع المثال الذي تم إنشاؤه لنا عندما حددنا خيار إنشاء نشاط من واجهة مستخدم تحتوي على ملصق يقرأ "Hello World" عند تنفيذ التطبيق.
تتمثل الخطوة التالية في هذا البرنامج التعليمي في تعديل واجهة المستخدم الخاصة بالتطبيق الخاص بنا بحيث يعرض كائنًا أكبر لعرض النص مع رسالة مختلفة عن الرسالة التي قدمها لنا Android Studio.
يتم تخزين تصميم واجهة المستخدم لنشاطنا في ملف باسم activity_android_sample.xml والذي يقع بدوره تحت تخطيط التطبيق -> الدقة -> في التسلسل الهرمي لملف المشروع. باستخدام لوحة Project ، حدد موقع هذا الملف كما هو موضح في الشكل 3-7:
الشكل 3-7
بمجرد تحديد موقعه ، انقر نقرًا مزدوجًا على الملف لتحميله في أداة User Interface Designer التي ستظهر في اللوحة المركزية لإطار Android Studio الرئيسي:
الشكل 3-8
في شريط الأدوات أعلى لوحة محرر التخطيط ، هناك قائمة تم ضبطها حاليًا على Nexus 4 والتي تنعكس في التمثيل المرئي للجهاز داخل لوحة Designer. تتوفر مجموعة واسعة من خيارات الأجهزة الأخرى للاختيار من خلال النقر على هذه القائمة.
لتغيير اتجاه تمثيل الجهاز بين الوضع الأفقي والعمودي ، ما عليك سوى استخدام القائمة المنسدلة على يمين قائمة تحديد الجهاز التي تظهر الرمز.
كما يمكن رؤيته في شاشة الجهاز ، يتضمن التخطيط بالفعل تسمية تعرض Hello World! رسالة. الركض على الجانب الأيسر من اللوحة عبارة عن لوحة تحتوي على فئات مختلفة من مكونات واجهة المستخدم التي يمكن استخدامها لإنشاء واجهة مستخدم ، مثل الأزرار والملصقات وحقول النص. ومع ذلك ، تجدر الإشارة إلى أنه ليس كل مكونات واجهة المستخدم مرئية بوضوح للمستخدم. واحدة من هذه الفئة تتكون من تخطيطات. يدعم Android مجموعة متنوعة من التخطيطات المختلفة التي توفر مستويات مختلفة من التحكم في كيفية وضع مكونات واجهة المستخدم المرئية وإدارتها على الشاشة. على الرغم من صعوبة التعرف على النظر إلى التمثيل المرئي لواجهة المستخدم ، فقد تم إنشاء التصميم الحالي باستخدام RelativeLayout.
الشكل 3-9
كما نرى من التسلسل الهرمي لشجرة المكون ، تتكون واجهة المستخدم من أحد الوالدين RelativeLayout مع طفل واحد في شكل كائن TextView.
الخطوة الأولى في تعديل التطبيق هي حذف مكون TextView من التصميم. ابدأ بالنقر فوق كائن TextView داخل عرض واجهة المستخدم بحيث يظهر بحد أزرق حوله. بمجرد تحديد ، اضغط على مفتاح الحذف على لوحة المفاتيح لإزالة الكائن من التخطيط.
في لوحة Palette ، حدد موقع الفئة Widgets. انقر واسحب كائن Large Text واسقطه في منتصف تصميم واجهة المستخدم عندما تظهر خطوط العلامة الخضراء للإشارة إلى مركز الشاشة:
الشكل 3-10
توفر أداة Android Studio Designer أيضًا بديلاً لسحب وإسقاط المكونات من اللوحة إلى تصميم التصميم. يمكن أيضًا إضافة المكونات عن طريق تحديد الكائن المطلوب من اللوحة ثم النقر ببساطة على التخطيط في الموقع الذي سيتم وضع المكون فيه.
الخطوة التالية هي تغيير النص المعروض حاليًا بواسطة مكون TextView. انقر نقرًا مزدوجًا فوق الكائن في تخطيط التصميم لعرض لوحة تحرير النص والمعرف كما هو موضح في الشكل 3-11. داخل اللوحة ، قم بتغيير خاصية النص من "نص كبير" إلى "مرحبًا بك في Android Studio".
الشكل 3-11
في هذه المرحلة ، من المهم شرح المصباح الموجود بجوار كائن TextView في التخطيط. هذا يشير إلى وجود مشكلة محتملة ويوفر بعض الحلول الموصى بها. النقر فوق الرمز في هذه الحالة يعلمنا أن المشكلة كما يلي:
[I18N] يجب استخدام السلسلة ذات السلسلة الصلبة "مرحبًا بك في Android Studio" ، المورد @ string
تُبلغنا رسالة I18N هذه بوجود مشكلة محتملة فيما يتعلق بالتدويل المستقبلي للمشروع ("I18N" تأتي من حقيقة أن كلمة "التدويل" تبدأ بحرف "I" وتنتهي بـ "N" وتتضمن 18 الحروف بين). يذكرنا هذا التحذير بأنه عند تطوير تطبيقات Android ، يجب تخزين السمات والقيم مثل سلاسل النصوص في شكل موارد كلما كان ذلك ممكنًا. يؤدي القيام بذلك إلى تمكين التغييرات التي يتم إجراؤها على مظهر التطبيق عن طريق تعديل ملفات الموارد بدلاً من تغيير التعليمات البرمجية المصدر للتطبيق. هذا يمكن أن يكون ذا قيمة خاصة عند ترجمة واجهة المستخدم إلى لغة منطوقة مختلفة. إذا كان كل النص الموجود في واجهة المستخدم موجودًا في ملف مورد واحد ، على سبيل المثال ، يمكن إعطاء هذا الملف إلى مترجم يقوم بعد ذلك بعمل الترجمة وإرجاع الملف المترجم لإدراجه في التطبيق. يتيح ذلك استهداف لغات متعددة دون الحاجة إلى إجراء تغييرات على شفرة المصدر. في هذه الحالة ، سننشئ موردًا جديدًا يدعى Welcomeestring وسنخصص لها السلسلة "Welcome to Android Studio".
انقر على السهم الموجود على يمين رسالة التحذير لعرض قائمة الحلول الممكنة (الشكل 3-12).
الشكل 3-12
من القائمة ، حدد خيار مورد استخراج السلسلة لعرض مربع حوار استخراج الموارد. في مربع الحوار هذا ، أدخل كلمة ترحيب في حقل اسم المورد: قبل النقر فوق "موافق". يتم الآن تخزين السلسلة كمورد في التطبيق -> الدقة -> القيم -> ملف strings.xml.
مراجعة ملفات التخطيط والمورد
قبل الانتقال إلى الفصل التالي ، سننظر في بعض الجوانب الداخلية لتصميم واجهة المستخدم ومعالجة الموارد. في القسم السابق ، أجرينا بعض التغييرات على واجهة المستخدم من خلال تعديل ملف activity_android_sample.xml باستخدام أداة مصمم واجهة المستخدم. في الواقع ، كل ما كان يقوم به المصمم هو توفير طريقة سهلة الاستخدام لتحرير محتوى XML الأساسي للملف. في الممارسة العملية ، لا يوجد سبب يمنعك من تعديل XML مباشرة من أجل إجراء تغييرات في واجهة المستخدم ، وفي بعض الحالات ، قد يكون هذا في الواقع أسرع من استخدام أداة Designer. في أسفل لوحة Designer توجد علامتا تبويب تحملان التصميم والنص على التوالي. للتبديل إلى عرض XML ، ما عليك سوى تحديد علامة التبويب "نص" كما هو موضح بالشكل 3-13:
الشكل 3-13
كما يتضح من بنية ملف XML ، تتكون واجهة المستخدم من مكون RelativeLayout ، والذي بدوره هو أصل كائن TextView. يمكننا أيضًا أن نرى أن خاصية النص في TextView قد تم ضبطها على موارد الوديعة الخاصة بنا. على الرغم من اختلافها في التعقيد والمحتوى ، إلا أن جميع تصميمات واجهة المستخدم يتم تنظيمها بهذه الطريقة الهرمية القائمة على XML.
يمكن العثور على واحدة من الميزات الأكثر قوة في Android Studio على الجانب الأيمن من لوحة تحرير XML. هذه هي لوحة المعاينة وتُظهر الحالة المرئية الحالية للتخطيط. عند إجراء تغييرات على تخطيط XML ، ستنعكس هذه التغييرات في لوحة المعاينة. لرؤية هذا قيد التنفيذ ، قم بتعديل تخطيط XML لتغيير لون خلفية RelativeLayout إلى ظل أحمر كما يلي:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".AndroidSampleActivity"
android:background="#ff2438">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="@string/welcomestring"
android:id="@+id/textView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
كعرض توضيحي للموارد قيد التنفيذ ، قم بتغيير قيمة السلسلة المعينة حاليًا لمورد الترحيب ثم قم بالعودة إلى "المصمم" عن طريق تحديد علامة التبويب لملف التخطيط في لوحة المحرر. لاحظ أن التخطيط قد التقط قيمة المورد الجديدة لسلسلة الترحيب.
هناك أيضًا طريقة سريعة للوصول إلى قيمة المورد المشار إليه في ملف XML. باستخدام أداة "المصمم" في وضع "النص" ، انقر فوق إعداد خاصية "@ string / welcome" لتمييزها ثم اضغط على Ctrl + B على لوحة المفاتيح. سيفتح Android Studio فيما بعد ملف strings.xml وينقلك إلى السطر الموجود في ذلك الملف حيث يتم الإعلان عن هذا المورد. استغل هذه الفرصة للعودة بمورد السلسلة إلى النص الأصلي "مرحبًا بك في Android Studio".
معاينة التخطيط
حتى الآن في هذا الفصل ، تمت معاينة التنسيق فقط على تمثيل لجهاز Nexus 4. كما تمت مناقشته سابقًا ، يمكن اختبار التصميم للأجهزة الأخرى عن طريق تحديد اختيارات من قائمة الجهاز في شريط الأدوات عبر الحافة العلوية من لوحة Designer. هناك خيار آخر مفيد توفره هذه القائمة هو معاينة جميع أحجام الشاشة والتي ، عند تحديدها ، تُظهر التنسيق في جميع تكوينات الأجهزة التي تم تكوينها حاليًا كما هو موضح في الشكل 3-14:
الشكل 3-14
للعودة إلى تخطيط معاينة واحد ، حدد قائمة الجهاز مرة أخرى ، وهذه المرة اختيار خيار إزالة المعاينات.
ملخص
على الرغم من عدم التعقيد المفرط ، فإن هناك عددًا من الخطوات المتضمنة في تهيئة بيئة تطوير Android. بعد القيام بهذه الخطوات ، يجدر العمل من خلال مثال بسيط للتأكد من تثبيت البيئة وتهيئتها بشكل صحيح. في هذا الفصل ، أنشأنا تطبيقًا بسيطًا ، ثم استخدم مصمم Android Studio UI لتعديل تخطيط واجهة المستخدم. من خلال القيام بذلك ، استكشفنا أهمية استخدام الموارد كلما كان ذلك ممكنًا ، لا سيما في حالة قيم السلسلة ، وتطرقنا لفترة وجيزة إلى موضوع التخطيطات. أخيرًا ، نظرنا إلى XML الأساسي المستخدم لتخزين تصميمات واجهة المستخدم لتطبيقات Android.
في حين أنه من المفيد أن تكون قادرًا على معاينة تخطيط من داخل أداة Android Studio Designer ، لا يوجد بديل لاختبار تطبيق عن طريق تجميعه وتشغيله. في فصل لاحق بعنوان " إنشاء جهاز Android الظاهري (AVD) في Android Studio" ، سيتم تغطية الخطوات اللازمة لإعداد محاكي لأغراض الاختبار بالتفصيل. قبل تشغيل التطبيق ، ومع ذلك ، سوف يستغرق الفصل التالي منعطفًا صغيرًا لتوفير جولة إرشادية لواجهة مستخدم Android Studio.
مشروع انشاء تطبيق لموبايل
![مشروع انشاء تطبيق لموبايل]()
بواسطة Ely Tech
في
3:19 ص
تقييم:
ليست هناك تعليقات: