[دوره برمجه تطبيقات الاندرويد] الدرس الرابع - اللياوت | Layout

بسم الله الرحمن الرحيم 

سنتعرف اليوم على بعض اهم العناصر داخل ال layout , والتي تتكرر كثيرا وتقريبا لا يخلو منها اى تطبيق , ومهم جدا أن تحفظ اسمائها برمجيا . 



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

فى هذه الصوره نستطيع فهم العناصر بشكل اوضح : 








خصائص العناصر : 



تظهر فى شاشة ال TEXT أسفل وسم البداية للعنصر جميع الخصائص المستخدمة له, اما فى شاشة ال DESIGN تظهر لك جميع الخصائص ونستخدم ما نحتاج منها. وتتغير بعض الخصائص على حسب العنصر الذي تم تحديده.
الخصائص المشتركة لجميع العناصر ولا نستطيع الاستغناء عنا هي :
عرض العنصر android:layout_width=""
ارتفاع العنصر android:layout_height=""

و يوجد لبعض العناصر خصائص خاصة بها كذلك اجبارية له. تختلف حسب العنصر.
و الخاصية التي يجب استخدامها لكل عنصر تريد التحكم به برمجيا هي خاصية المعرف. معرف للعنصر android:id=""



قبل إن ابدأ بشرح أهم الخصائص, أغلب الخصائص بهذا الشكل android:layout_gravity="center"
تبدأ بـ layout, ولكن بعضها تستطيع استخدامها بدون layout مثلا android:gravity = "center"
والفرق هو, إن لكل عنصر حد, مثل حدود ال TextView فكلمة layout نقصد العنصر بالكامل, وبدون layout نقصد ما داخل العنصر وغالبا ما بداخل العنصر نص. كما فى الصورة :



خاصيتا العرض والارتفاع :

كود:

""=android:layout_width
""=android:layout_height

هاتان الخاصياتان كما قلت, أساسيتان لجميع العناصر دون استثناء, وهي تأخذ قيم ثابته او اعداد مقاسه بوحدات قياس خاصه ,بالنسبة للاعداد لن أتطرق إلى الوحدات فى هذا الدرس و ساتناول الفرق بين الوحدات فى موضوع مستقل , ولن أذكرها هنا لانها ليست مهمة كثيرا ما يهم أن نعرفه فقط عند وضع قيمة عددية لعنصر استخدم بعد العدد الوحدة dp وإن كانت الوحدة من أجل حجم النص استخدم sp .

بالنسبه للقيم الثابته هى : fill_parent ,match_parent ,wrap_content , وتوضع القيمة هذه بداخل "".
بالنسبة لقيمة fill_parent تم إهمالها بعد المستوى 8 API و أصبحت هي match_parent.
match_parent : يأخذ العنصر العرض أو الارتفاع حسب العنصر الاب Parent له.
wrap_content : يأخذ العنصر العرض أو الارتفاع الذي يحتاجه فقط.
هذه الصور توضح الفرق : 





خاصية الاتجاه | Orientation :

كود:

android:orientation=""

وهي الخاصية التي تعتبر اجبارية لـ LinearLayout اي النمط أو الترتيب الخطي, القيمة الفتراضية له هي horizontal وجميع الخصائص الاخرى لها قيم افتراضية واقصد بهذا ان جميع الخصائص مفعلة او موجودة للعنصر ولكن غير ظاهرة لانها تأخذ القيمة الفتراضية فلو استخدمتها إذا أنت تريد تغيير القيمة الفتراضية لها ,و خاصيه الاتجاه غير مهمه إذا كانت اللياوت LinearLayout تحتوى على عنصر واحد فقط, لانها سوف تأخذ كما ذكرت االترتيب الافقي, ولكن لو كان يحتوى على اكثر من عنصر يجب استخدامها ويجب تحديد أحد القيمتين : horizontal أو vertical

horizontal : الترتيب الافقي للعناصر اى بجانب بعضها 
vertical : الترتيب العمودي للعناصر اي فوق بعضها. وهذه صورة للتوضيح والفرق بينها :



خاصية الهامش | Margin :

كود:

android:layout_margin=""

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



خاصية الحشو | Padding:

كود:

android:padding=""

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



خاصية الوزن | Weight:

كود:

android:layout_weight=""

نستطيع تسميتها بخاصية التقسيم, لتقسيم الشاشة أو ال layout للعناصر, كل منها يأخذ نصيبه. والصور هي فقط تستطيع أن تشرح ما هذه الخاصية .

مثال على ذلك:



خاصية المعرف | ID :

كود:

android:id=""

خاصية المعرف للعنصر, لكي تعطيه إسم يميزه للتعامل معه برمجيا , سواء كان صورة أو نص او غيرهما من العناصر. عن طريق هذا المعرف نستطيع إعطاء الاوامر أو التحكم بهذا العنصر برمجيا , ويكتب بالشكل التالي : 

كود:

android:id="@+id/button"

استبدل button بالذي تريده, ومعنى +id إي اضف هذا المعرف للموارد R, كما إن بدون + يصبح المعنى استخدم المعرف الموجود فعليا, وسوف نتعرف عليها اكثر من خلال الاستخدام.

اغلب الخصائص الاخرى واضحة المعنى مثلا text للنص المكتوب text size لحجم النص و text color للون النص إلخ.
بالنسبة لـلون النص, تستطيع استخدام الوان معرفة في ملف الالوان بال values او الاختيار من الالوان فى واجهة ال design 



الان انتهينا من التعرف على بعض العناصر واهم خصائصها وادعوكم للتعرف على باقى العناصر من خلال التجربه لن تجدو صعوبه باذن الله 

فى الدرس القادم ان شاء الله سنتطرق الى كيفية التعامل مع العناصر برمجيا من خلال الكود بلغة الجافا 

[دوره برمجه تطبيقات الاندرويد] الدرس الثالث - محاكى الاندرويد الوهمى | AVD

بسم الله الرحمن الرحيم

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

في البداية نقوم بفتح حزمة SDK ونذهب أعلى API لديك, وتقوم بتحميل Image System v7a EABI ARM APIs Google 



فى الصوره قمت بتحديد Android 5.1 API 22 لانه اعلى اصدار يمكن ان يشتغل عليه التطبيق وهذا يتغير حسب الاعدادات التى قمت بظبطها عند انشاء التطبيق 

بعد الانتهاء من التحميل توجه إلى AVD من خلال الايقونة الخاصة به في الاندرويد ستوديو 
أو من خلال التوجه إلى : < Tools Android > AVD Manager

سوف تظهر لك نافذة جديدة كما في الصورة



اضغط على : Create Virtual Device

ستظهر لك هذه النافذه, اختار منها الشاشة أو الحجم الذي يناسبك



بعد الاختيار اضغط next ستظهر هذه الشاشه 



قم باختيار الاصدار التى تود ان يعمل عليه المحاكى ثم اضغط next 



اترك الخيارات كما هي, واضغط على finish
سوف تظهر لك النافذة وفيها جميع الاجهزة التي تم إنشائها, تستطيع إنشاء أكثر من محاكي لتحربة تطبيقك على مختلف الاجهزة وأحجام الشاشات المختلفة 



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



و الان لتشغيل المشروع الاول الذى انشأناه في الدروس الماضية, فقط نضغط على علامة التشغيل من شريط الادوات, مثلث أخضر اللون. بعد الضغط عليه تظهر لك النافذة التالية

 

ننتظر قليلا .. بعد انتهاء المحاكى من الاقلاع نجد انه تم تشغيل التطبيق الخاص بنا بشكل تلقائى ونستطيع الان اختبار ومعاينة تطبيقاتنا من خلال المحاكى 



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




فى الدرس القادم ان شاء الله سنتكلم بالتفصيل عن ال Layout وبعض العناصر التى ستتكرر معنا مثل (TextView - Button - ImageView) واهم خصائصها مثل (الطول - العرض الخ)

[دوره برمجه تطبيقات الاندرويد] الدرس الثانى - اندرويد استوديو | Android studio

بسم الله الرحمن الرحيم 

كما ذكرت سابقا سنستحدم برنامج Android studio فى انشاء تطبيقاتنا ,وهو ال IDE الوحيد الذى نستطيع العمل عليه 
بعد ان ازالت شركه جوجل الدعم عن Eclipse 

نبدأ , قم بتشغيل البرنامج , ستظهر هذه النافذة في حاله عدم وجود مشاريع مفتوحة, وفى حالة وجود مشاريع مفتوحه مسبقا يجب إغلاقها لتظهر هذه النافذة



الارقام توضح الاتى : 

1- البدأ بإنشاء مشروع جديد.
2 - فتح مشروع موجود مسبقا , مبنى على الاندرويد ستوديو.
3 - جلب مشاريع من عدة مواقع مباشره للبرنامج سيتم شرح هذه الطريقه فى موضوع مستقل .
4 - استيراد مشاريع اندرويد مبنية على eclipse .
5 - استيراد نماذج مشاريع اندرويد بسيطة أو قصيرة جاهزة.
6 - الاعدادات, الـ SDK والاضافات وغيرها .
7 - تعليمات لكيفية استخدام بيئة IntelliJ وهي التي يعمل عليها البرنامج .
8 - الاصدار الحالي لديك, و للتحقق من وجود اي تحديثات للبرنامج.
9 - المشاريع التي تم فتحها مؤخرا .

نقوم باختيار ( انشاء مشروع جديد ) ونقوم باتباع خطوات انشاء مشروع جديد , التى ذكرتها فى الدرس السابق .
بعد الانتهاء ستظهر لنا الشاشه الرئيسيه للبرنامج 




1 - القائمة الرئيسية :
القائمة الرئيسية للبرنامج, وتحتوي على عدة أوامر مختلفة, منها فتح وحفظ وإنشاء المشاريع, والاعدادات, وتنظيف المشروع وإعادة بنائه, وتصديره لملف .apk والادوات وتحديث البرنامج وغيرها الكثير..

2 - شريط الادوات :
شريط الادوات الرئيسي, ويحتوي على الازرار الاكثر استخداما , وهي مهمة جدا . منها حفظ المشروع, مع العلم إن الاندرويد ستوديو يحفظ الملفات بشكل تلقائي, و امر النسخ واللصق وتشغيل المشروع وبناء التطبيق وفتح الـ SDK إلخ .

3 - شريط التصفح :
شريط التصفح أو التنقل للوصول السريع لملفات المشروع والتنقل بينها لتحريرها.



أمور مهمه قبل البدأ بالبرمجه الفعليه :

1 - الاكواد البرمجية بلغة الجافا تكتب في ملفات .java ونطلق عليها كلاس, الكلاسات لها أنواع مختلفة, ومنها الاكتفتي | Activity الذي يرتبط بشاشة او واجهة يراها المستخدم ويتفاعل معها. إذا سوف نطلق على الملف البرمجي الذى يحتوى على اكواد الجافا ومرتبط باللياوت اسم – Activity .

2 - اللياوت Layout هي الواجهة التي تظهر للمستخدم, ومبنية بلغة xml إذا سوف نستخدم xml للتصميم والتنسيق و الجافا java للبرمجة إي اعطاء الوامر.

3 - كل عنصر أو كائن مثل الزر او الصورة او النص إلخ, له خصائص منها الطول والعرض والحجم إلخ.

4 - كل عنصر نريد استخدامه برمجيا واعطائه أوامر يجب إن نضع داخله خاصية id لنقوم بربطه بملف الجافا من خلل هذا المعرف.

5 -لا تضع معرف id متكرر لاكثر من عنصر فى نفس اللياوت.

6 - كل لياوت او واجهة تريد اظهارها للمستخدم يجب أن يكون لها اكتفتي مرتبط بها.

7 - كل اكتفتي في مشروعك يجب إضافته في ملف اسمه AndroidManifest سوف يتم شرح الملف ولماذا نضع فيه الاكتفتي في درس منفصل.

8 - الاسماء التي تضعها للعناصر او الملفات او الكتفتي او اللياوت إلخ, تجنب استخدام غير الحروف الانجليزية, كذلك لا تبدأ الاسماء بالارقام, ولا تستخدم الفراغات.

9 - تستطيع إثناء كتابة الكواد استخدام الاكمال التلقائي Auto complete ليظهر لك خيارات إكمال للكود الذي تحاول كتابته ولو كان كلمة واحدة , استخدم Space + Ctrl.

10 -لغة xml تتبع النظام الشجري آباء وأبناء, وتستخدم هنا مصطلح Parent للاشارة إلى الاب أو العنصر الكبير الذي يحتوي على العنصر المقصود او ال Child الابن.

11 - يوجد الكثير من المكتبات الجاهزة Libraries التي تضيفها لمشروعك لتستفيد منها في بعض المزايا.

12 - يوجد شركات او مواقع تقدم API أو SDK لتستفيد من خدمات الموقع في تطبيقاتك كالفيس بوك - جوجل الخ 




بعد إنشاء أول مشروع تطبيق اندرويد تظهر هذه النوافذ : 



نلاحظ إنه لدينا ملفات جاهزة مفتوحة وهي الاكتيفتي التي يتم تشغيلها في بداية تشغيل التطبيق والتي هي كذلك مرتبطة باللياوت أو الواجهة التي سوف تظهر للمستخدم

1 - MainActivity / الاكتفتي الرئيسيه 
كما ذكرنا سابقا يحتوي على أكواد بلغة الجافا, يتم تنفيذها في بداية تشغيل التطبيق.



الكود الافتراضي للاكتقتي :

كود:

package com.ganna.helloandroid;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;


    // دالة الون كريت وهي الدالة التي يتم تنفيذها في بداية تشغيل هذه الاكتفتي 
public class MainActivity extends AppCompatActivity {


    @Override

        // يتم ربط الاكتيفيتى باللياوت عن طريق هذه الداله
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);


}
        setContentView(R.layout.activity_main);


    }

2 - xml.main_activity / اللياوت

هو ملف التصميم او التنسيق للواجهة, وهذا اللياوت هو الواجهة الرئيسية التي سوف يتم استدعائها من قبل الاكتفتي اي ان هذه
الواجهة هي التي سوف تظهر للمستخدم عند بداية تشغيل التطبيق

الكود الموجود داخل الواجهة :

كود:

<RelativeLayout xmlns: android="http://schemas.android.com/apk/res/android-
 xmlns: tools="http://schemas.android.com/tools-

 android:paddingBottom="@dimen/activity_vertical_margin-
 android:layout_width="match_parent-
 android:layout_height="match_parent-

 android:paddingRight="@dimen/activity_horizontal_margin-
 android:paddingLeft="@dimen/activity_horizontal_margin-
 android:paddingTop="@dimen/activity_vertical_margin-

 android:text="Hello Android!" />
 tools:context=".MainActivity">

 <TextView
 android:layout_width="wrap_content-
 android:layout_height="wrap_content-


</RelativeLayout>

لغة XML تستخدم النمط الشجري في التنسيق, بمعنى عناصر تحتوي اسفلها او داخلها عناصر اخرى, بمعنى اب وابناء .. وكما هو ظاهر لنا في الكود وسم البداية ووسم النهاية للاب وهو اللياوت الرئيسي من نوع RelativeLayout ويوجد انواع اخرى وهذا النوع تستطيع وضع العناصر داخله بشكل حر في إي مكان على الشاشة. وبداخله عنصر من نوع TextView اى نص ومكتوب داخله عبارة Android Hello كما شاهدنا في صورة النتيجة السابقة لانشاء اول مشروع, وأما بالنسبة للخصائص الاخرى لكل العناصر سوف يتم شرحها بشكل مستقل





بعد إنشاء المشروع الاول على الاندرويد ستوديو ظهرت لنا الملفات والمجلدات التالية لمشروعنا كما في الصورة



بالنسبة لـ مجلد Values + ملف AndroidManifest سوف يتم شرح كل منها بشكل مستقل 

مجلد java :
يحتوي على ملفات الجافا, والكلاسات التى سنحتاجها فى التطبيق .
اهم كلاس لدينا هو الاكتفتي , هي التي سوف نتصل من خلالها باللياوت او بالواجهات والعناصر لنبدأ بإعطاء الاوامر البرمجية لها.

مجلد res :
بمعنى resources الموارد او المصادر التي تستخدمها في تطبيق, بمعنى آخر كل ما يراه المستخدم أمامه أثناء تصفح التطبيق, الواجهات, قائمة الخيارات, ايقونة التطبيق, الصور المستخدمة في التطبيق, الصوتيات, الحركات او التأثيرات, اللوان, النصوص, الثيم أو الستايل إلخ
وهو يحتوي على عدة مجلدات لتوزيع هذه الموارد, بالشكل التالي :

drawable :
المجلد الذي تضع فيه الصور التي تريد استخدامها في التطبيق + ملفات xml
للتنسيق, مثل تأثير الزر بعد الضغط عليه, أو خلفية للتطبيق متعددة الالوان إلخ.

layout :
المجلد الذي يحتوي على ملفات اللياوت أو الواجهات التي تظهر للمستخدم وهو
من أكثر المجلدات التي سوف تستخدمها . 

mipmap :
يتم تلقائيا وضع أيقونة التطبيق في هذا المجلد, كما تستطيع استخدامه لوضع
الايقونات التي تستخدمها مثل زر قائمة الخيارات زر البحث إلخ



Gradle scripts : 
ما يهمنا هو module app : والذي بداخله نضع قيم أساسية للمشروع يوضع داخله المعرف الخاص بالتطبيق + أقل وأعلى إصدار أندرويد يعمل عليه التطبيق و يجب الاشارة داخله لجميع المكتبات التي نستخدمها فى المشروع



هو مجلد يحتوي على القيم والمتغيرات .. يتم كتابه القيم على هذا الشكل النوع:الاسم:القيمة مثلا نضع داخله قيمة من نوع لون واسمها أحمر والقيمة هي كود اللون الحمر #ff0000 وهكذا .. 
يحتوي المجلد على ملفات xml لكل منها استخدام معين 

من أهم الملفات التي يحتويها مجلد ال values :
strings : ملف القيم أو النصوص , والفائدة منه مثلا لدينا قيمة داخله بإسم Ahmed والقيمة لها احمد , إذا تستطيع في المشروع استخدام نص سترنج Ahmed وسوف يتم طباعته على إنه احمد وهكذا.

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

colors : ملف لوضع قيم للالوان واستخدامها في مشروعك, مثلا نضع مجموعة الوان ونضع لها اسماء, من ثم نستخدم فقط الاسم في المشروع ويتم التعرف على القيمة التي وضعناها 

أهم ما يميز مجلد ال values, إنك عندما تضع فيه جميع ما تستخدم في مشروعك, تستطيع تكرار مجلد الفايلوس للغة اخرى, وتغيير القيم داخله وهكذا تستطيع برمجة تطبيق متعدداللغات, وسوف نشرح كيفية بناء تطبيق متعدد اللغات في موضوع مستقل



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

كود:

<activity android:name=".Activity" />

و كذلك في هذا الملف نضع الصلاحيات التي نريدها من مستحدم التطبيق, مثل الوصول للملفات, الوصول والاتصال بالانترنت, استخدام الكاميرا إلخ من الصلاحيات المختلفة.

مثال صلاحية الوصول لحالة الشبكة : 

كود:

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

من هذا الملف نستطيع أن نحدد ايضا ما هي الاكتفتي التي سوف تعمل في بداية تشغيل التطبيق , باختصار هذا الملف مهم جدا, نضع فيه كل ما لدينا من اكتفتيس وصلاحيات, ومعرف التطبيق كذلك, والسبب مثلا لو كان تطبيقك حجمه يتجاوز 50 ميغا, فقرائته بالمتجر سوف تصبح صعبة جدا, لذلك يتم قراءة هذا الملف فقط لنتعرف من داخله على ايقونة التطبيق وما اسمه وما هو المعرف الخاص به وما يوجد لديك من الاكتفتي وما هي الصلاحيات التي يحتاجها وهكذا بسهولة يتم التحقق من تطبيقك والموافقة على نشره بالمتجر



الان انتهينا من التعرف على الاندرويد ستوديو و المجلدات الاساسيه للمشروع واصبح لدينا فكره عامه عن الـ Activity وعلاقتها بالـ Layout 

فى الدرس القادم ان شاء الله سنتعرف على الـ AVD - Android virtual machine , محاكى جهاز الاندرويد 
لنستطيع تشغيل عليه تطبيقاتنا