الأربعاء، 25 أكتوبر 2017

إحترف Android Studio من الصفر و حتى الإحتراف الجزء الخامس

من طرف Adnan Al dien  |  نشر في :  7:30 م

إحترف Android Studio من الصفر و حتى الإحتراف
الجزء الخامس : إدراج العناصر


بعد ان قمنا بعمل تعريفات عديدة للبرنامج سنبدأ من هذا الجزء الخامس العمل التطبيقى لبناء التطبيقات و كيف يتم بناءها


نفتح الاندرويد ستوديو لبدء العمل
إحترف Android Studio من الصفر و حتى الإحتراف  الجزء الخامس
واجهة البرنامج بعد ان قام تلقائياً بفتح المشروع الخاص بنا الان امامنا خياران للبدء فى عمل التطبيقات إما العمل من داخل خيار Design او العمل من خيار Text يُفضل العمل بشكل اوسع و إحترافية اكثر للتفاصيل من خلال وضع Text
إحترف Android Studio من الصفر و حتى الإحتراف  الجزء الخامس
الان نرى هذه الواجهة سنحللها قليلاً هذه تسمى Activity_Home.xml وهى واجهة التطبيق او المشروع الرئيسية بلغة xml وهى المسئولة عن القوائم و الازرار او ما تسمى بالـ Views مثلما سبق و شرحنا الان سنقوم بوضع الـ Views التى يمكن وضعها داخل المشروع
إحترف Android Studio من الصفر و حتى الإحتراف  الجزء الخامس
الان قد عرفنا ما يمكن إضافته الى المشروع من عناصر
دعونا نقوم بإضافة اكثر من عنصر او اكثر من view و تجربة المشروع
إحترف Android Studio من الصفر و حتى الإحتراف  الجزء الخامس
الان قمت بوضع صورة فى الاعلى و قمت بإختيار مكانها بمجرد عمل سحب و افلات للعنصر داخل المشروع , و اسفلة قمت بإدراج زر و اسفلة يوجد النص القديم و اسفل النص يوجد عنصر يسمى ToggleButton و هو زر ثنائى بمعنى نعم \ لا , او بمعنى اَخر ايقاف \ تشغيل و اسفلة يوجد عنصر اَخر و ايضاً من فصيلة الازرار يسمى RadioButton ومثل ما موضح امامك هو للإختيار اذ يكفى فقط النقر عليه ليتم تفعيله
الان نوضح التفاصيل من خلال عرض خيار Text
إحترف Android Studio من الصفر و حتى الإحتراف  الجزء الخامس
و الان مرحلة شرح تلك الاكواد بصورة تفصيلية اكثر

................................................................................................................................................................

<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" />                        محاذاة العنصر من الاسفل

   <Button
       android:id="@+id/button"                   الرمز التعريفى للعنصر وهو رمز مميز لكل عنصر يتيح لك إجراء امر معين من اكواد الجافا للرمز المُحدد
       android:layout_width="wrap_content"                               خاصية العرض للزر
       android:layout_height="wrap_content"                               خاصية الطول للزر
       android:text="Button"                              النص الذى سيظهر على الزر
       tools:layout_editor_absoluteX="147dp"                             ابعاد الزر فى الواجهة و هنا سيبعد 147 نقطة عن اليسار
       tools:layout_editor_absoluteY="175dp" />                        ابعاد الزر من جهة الطول و هنا سيبعد عن الاعلى بمقدار 175 نقطة

   <ToggleButton
       android:id="@+id/toggleButton"      الرمز التعريفى للعنصر وهو رمز مميز لكل عنصر يتيح لك إجراء امر معين من اكواد الجافا للرمز المُحدد
       android:layout_width="wrap_content"                               خاصية العرض للزر
       android:layout_height="wrap_content"                               خاصية الطول للزر
       android:text="ToggleButton"                               النص الذى سيظهر
       tools:layout_editor_absoluteX="147dp"                             ابعاد الزر فى الواجهة و هنا سيبعد 147 نقطة عن اليسار و ستجد البعد متماثل تماماً مع الزر السابق نظراً لتعامدمهما
       tools:layout_editor_absoluteY="290dp" />                                  ابعاد الزر فى الواجهة و هنا سيبعد 290 نقطة عن الاعلى

   <RadioButton
       android:id="@+id/radioButton"                                     نفس الخصائص الموجودة بالأعلى
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="RadioButton"
       tools:layout_editor_absoluteX="137dp"
       tools:layout_editor_absoluteY="380dp" />

   <ImageView
       android:id="@+id/imageView"                                       نفس الخصائص الموجودة بالأعلى                
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       app:srcCompat="@mipmap/ic_launcher"        هنا مسار الصور التى ستظهر فى الواجهة و ستحددها حين تقوم بإدراج عنصر ImagView
       tools:layout_editor_absoluteX="175dp"
       tools:layout_editor_absoluteY="90dp" />


..........................................................................................................................................................................


الان نستطيع إدراج ما يحلو لنا و التحكم ايضاً بكل الخصائص لكل عنصر مُدرج


1 التعليقات:

الثلاثاء، 24 أكتوبر 2017

إحترف Android Studio من الصفر و حتى الإحتراف الجزء الرابع

من طرف Adnan Al dien  |  نشر في :  7:30 م

إحترف Android Studio من الصفر و حتى الإحتراف
الجزء الرابع : اول مشروع و الاساسيات


بنية ملف الجافا الاساسى للمشروع و فهمه

..........................................................................................



اسم الباكدج او المعرف للتطبيق //

package com.maki.firstapp;

المكاتب التى يتم إدراجها بالمشروع

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

الكلاس و اسمه المُشتق من الاب كومبات اكتيفيتى

public class Home extends AppCompatActivity {

دالة يتم فيها تنفيذ بداية تشغيل المشروع

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_home);
  }
}

.........................................................................................

الان فهمنا البنية الاساسية لملف الجافا الاساسى للتطبيق , الان هناك اساسيات يجب ان تعرفها قبل البدء فى العمل .
  • البرمجة ستتم بلغة جافا لذا يجب عليك ان تفهمها قليلاً حتى تساير هذا الشرح
  • الاكواد البرمجية التى ستكتب بلغة جافا ستكتب داخل ملفات .java و التى يطلق عليها كلاسات و لها انواع عدة و يطلق عليها الاكتفيتى او النشاط و ترتبط بالواجهة التى يتفاعل معها المستخدم للتطبيق
  • اللاى اَوت وهى الواجهة التى تظهر للمستخدم و هى تختلف عن الاكتيفيتى حيث ان الاكتيفيتى مبنية على الجافا و هى تفاعلية اما اللاى اَوت مبنية على xml و غير تفاعلية فقط تقوم بعرض ادوات و كائنات المشروع و هى للتنسيق
  • كل عنصر او اداة تقوم بإضافته له خصائصه المُحددة من طول و عرض وحجم
  • كل عنصر نريد ان نستخدمه برمجياً لعمل امر معين يجب ان نعطيه id مميز له و مختلف عن باقى العناصر لربطه داخل ملف الجافا و من ثم عمل الامر البرمجى
  • تذكر ان كل لاى اَوت تريد إظهاره للمستخدم يجب ان يكون له اكتيفيتى خاص به

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

الان نقوم بإنشاء AVD لتجربة التطبيقات التى سنقوم ببناءها
إحترف Android Studio من الصفر و حتى الإحتراف  الجزء الرابع
نقوم بالضغط على الايقونة المُحددة
إحترف Android Studio من الصفر و حتى الإحتراف  الجزء الرابع
بعد ذلك نضغط على Create Virtual Device
إحترف Android Studio من الصفر و حتى الإحتراف  الجزء الرابع
نختار بعد ذلك الجهاز الذى نريده و الابعاد التى تتناسب معنا و نضغط على Next
إحترف Android Studio من الصفر و حتى الإحتراف  الجزء الرابع
بعد ذلك نقوم بتحديد إصدار الاندرويد , فى اَخر اصدارات الاندرويد ستوديو ستجد اَخر نسخه من الاندرويد جاهزة للإستخدام او قم بتحميل الإصدار الذى تريده بالضغط على download بعد ذلك next
إحترف Android Studio من الصفر و حتى الإحتراف  الجزء الرابع
نقوم بكتابة اسم الجهاز و الضغط على Finish لبناء المحاكى
الان قمنا بعمل المحاكى و فهم كل الاساسيات فى الاجزاء القادمة سنتمكن من بناء اول تطبيق لنا و فهم بعض الاشياء الاَخرى .

0 التعليقات:

الاثنين، 23 أكتوبر 2017

إحترف Android Studio من الصفر و حتى الإحتراف الجزء الثالث

من طرف Adnan Al dien  |  نشر في :  7:30 م

إحترف Android Studio من الصفر و حتى الإحتراف
الجزء الثالث : واجهة البرنامج و اول مشروع


القسم الثانى
1.PNG
هذا القسم يحتوى على كل الادوات و الكائنات التى تستطيع ان تدرجها داخل مشروعك
و بالطبع مُقسمة الى عدة اقسام و هى
All > حيث يحتوى على كل الادوات
Widgets > يحتوى هذا القسم على الادوات الشائعة الاستخدام
Text > يحتوى على جميع ادوات ادخال الحروف و الارقام و الايميل
Layout > يحوى هذا القسم على ادوات تقوم بعمل تقسيم للأدوات داخل المشروع اى تقوم بعمل عزل لبعض الادوات عن بعضها
Containers يحتوى هذا القسم على جميع الادوات الحاوية بمعنى الادوات التى تحوى خصائص و مميزات مُحددة بداخلها
Images يظهر من اسمه ان يحوى على الصور و اتباعها
Date يحوى على ادوات التاريخ و التوقيتات
Transition يحوى على الانيميشن و المؤثرات الإنتقالية للكائنات داخل التطبيق
Advanced بعض الخيارات و الادوات المُتقدمة للعمل
Google و بهما خياران الخرائط او الاعلانات لإضافتهما الى التطبيق
Design قسم مُخصص للمُصممين
Appcompat بعض الخصائص الإضافية و التى تحتاج الى مكتبات خاصة لإضافتها
و الان قمنا بشرح الادوات اقسام الادوات شرحاً تفصيلياً ننتقل الى مرحلة القسم رقم 4 , بالطبع القسم رقم 3 لا يحتوى على شروحات بإستثناء شرح بعض الاشياء التى سنتطرق اليها مستقبلاً .
2.PNG
مثلما تحدثنا سابقاً ان القسم رقم 4 موجه لخيارات كل اداة تقوم بإدراجها داخل المشروع الان فى مشروعنا التجريبى مُدرجة اداة تحمل اسم Hello World نقوم بالضغط عليها و عند الضغط عليها تظهر الخصائص الخاصة بها وسنذكر الاهم منها
Id و هو المعرف الخاص بالاداة نتركه فارغاً الان
Layout_width عرض الاداة و يمكن تحديد العرض بالنسبة المئوية بالنسبة للمشروع او تحديداً رقميا بالبيكسل
Layout_height إرتفاع الاداة و ايضاً يمكن تحديدها رقمياً او بالنسبة المئوية
Text و هذا ما تحوية الاداة لا ننسى ان الاداة المُختارة هى Text View اى ان لكل اداة خصائص مُعينة و الان نحن نشرح على تلك الاداة فقط
الان نقوم بالرجوع الى القسم 2 و شرح خيار Text بعد ان شرحنا خيار Design
3.PNG
فى خيار Text سترى الكود البرمجى لملف xml لواجهة التطبيق حيث يحوى على الاداة المُدرجة و هى TextView بخصائصها المُحددة لإظهارها داخل المشروع و سبق و تطرقنا لشرحها
الان كيف بإمكاننا ان نقوم بإدراج اداة , نذهب الى خيار Design مرة اَخرى و نقوم بعمل سحب و إسقاط لأداة Plain Text مثلاً
4.PNG

ستظهر الخصائص التالية و ستظهر الاداة داخل مشروعنا فـلها عدة خصائص كتغير الكلمة الموجودة بداخلها وهى Name الى اى شئ اَخر يمكنك إضافة الكثير و الكثير من الادوات و فى الدروس القادمة سنتطرق لأدراج الادوات بشكل منتظم و شرح بيئة و ملف JAVA

0 التعليقات:

الأحد، 22 أكتوبر 2017

إحترف Android Studio من الصفر و حتى الإحتراف الجزء الثانى

من طرف Adnan Al dien  |  نشر في :  7:30 م

إحترف Android Studio من الصفر و حتى الإحتراف
الجزء الثانى : واجهة البرنامج و اول مشروع


فى هذا الجزء سنتعرف معاً على واجهة اندرويد ستوديو و سنقوم بالإبحار داخل مشروعنا الاول بعد ان قمنا بإعدادات مشروعنا الاول ننتظر حتى فتح النافذه الرئيسية
إحترف Android Studio من الصفر و حتى الإحتراف  الجزء الثانى
سوف نقوم بتقسيم النافذة الرئيسية الى عدة اقسام حتى يُسهل علينا شرح كل قسم و كل جزء فى البرنامج بطريقة سلسة و مُبسطة
إحترف Android Studio من الصفر و حتى الإحتراف  الجزء الثانى
1 - هذا الجزء مُخصص لتفكيك ملف APK الخاص بالتطبيق بمعنى ان هذا الجزء او القسم سيقودك الى الابحار داخل كل تفاصيل التطبيق من صور او صفحات او صفحات برمجية او رؤية الكلاسات المفتوحة و يعتبر مستكشف لما يحويه ملف APK للتطبيق
2 - من شكله يتضح و انه الجزء الخاص بـ Objects او الادوات التى يمكن إضافتها للمشروع من ازرار كلمات صور و لا ننسى ان الجزء الاول مُخصص لعرض الصور التى قمنا بإدراجها من خلال هذا القسم بمعنى إن قمنا بإدراج صورة مثلاً فيجب علينا اختيار الاداة Image View او Image Button و عند إختيار إحداهما ستقوم بإختيار مكان الصورة المراد استيرادها للمشروع و من ثم ستجدها فى مجلد res فى القسم الاول و المقصود به بالطبع resource بمعنى المصدر , اى انك لن تجد الصورة داخل مجلد res الا و ان قمت بإدراجها من الادوات التى سبق و ذكرناها , و فى الاسفل يوجد خيارين Text و Design
Design :-
وهو رؤية كل التغيرات التى تقوم بها مباشرة فى المحاكى الذى تراه فى القسم رقم 3
Text:-
وهو خيار رؤية الكود البرمجى فقط مع عدك رؤية التغيرات الا بعد الإنتقال الى وضع Design
3 - وهو المحاكى البسيط  ويقوم فوراً بعمل كل تغير تغيره فى الاكواد و يقصد بالبسيط لأنه ليس بخيارات المحاكى المتقدم المُرفق مع البرنامج الذى يعمل على بيئة اندرويد كاملة حيث بإمكانك تشغيل التطبيق داخله سنتطرق الى تلك المرحلة
4 - الخصائص الخاصة بكل اداة من ادوات القسم 2
5 - يتم تقسيم القسم 5 الى اثنين الاعلى و الاسفل ففى الاعلى شريط الادوات ويحتوى على بناء مشروع جديد و اغلاق المشروع الحالى و فتح مشروع اخر و اضافة كلاس او نافذه للمشروع الحالى و خيار تحليل المشروع الحالى و خيارات اظهار النوافذ داخل البرنامج و إخفاءها
الان تم كتابة كل قسم مع شرحه المُبسط و لكن يجب ان نتوسع و ان نبحر فى كل قسم حتى نقوم بالفهم الكامل لكل قسم , سنقوم بتشريح القسم الاول
إحترف Android Studio من الصفر و حتى الإحتراف  الجزء الثانى
Manifests
وهو يحتوى على ملف واحد يسمى androidmanifest.xml و هذا الملف يحوى على تعريفات جميع مكوّنات التطبيق components و يعمل كواجهة بين نظام تشغيل آندرويد Android OS والتطبيق الخاص بك فإذا لم تقم بتعريف وإعلان المكوّن الخاص بك في هذا الملف فلن يكون بمقدور نظام التشغيل رؤيته
Java
يحتوى هذا المجلد على الملف المصدرى المُكود بلغة جافا للتطبيق حيث يقوم البرنامج بحفظ ملف الجافا المصدرى داخل هذا المجلد
Res
يحتوى على جميع ملحقات التطبيق من صور و الوان و ايقونات و ستايل للتطبيق حيث يعتبر هو البيت المصدرى للخامات الموجودة داخل التطبيق و المقصود من كلمة خامات مواد الميديا و الصور
فى الجزء القادم سننتقل الى باقى الاقسام

0 التعليقات:

السبت، 21 أكتوبر 2017

إحترف Android Studio من الصفر و حتى الإحتراف

من طرف Adnan Al dien  |  نشر في :  10:38 ص

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

مميزاته :-
-     يعمل على عدة منصات (مايكروسوفت ويندوز, أو إس 10, جنو/لينكس).
  • سهولة في الاستخدام.
  • يعطي معاينة فورية لمختلف أنواع الأجهزة اللوحية أو المحمولة.
  • مُخصص للبرمجة لمنصة أندرويد.
  • إمكانية استيراد المشاريع المبرمجة ببيئة التطوير Eclipse.

التحميل :-
يتم تحميل البرنامج عبر الرابط الرسمى من جوجل من هنا و قد يصل حجم البرنامج الى 2 جيجا بعد إضافة التطويرات الجديدة , وبعد تحميل اندرويد ستوديو يلزمك تحميل بيئة JDK و التى تقوم بمحاكاة لغة الجافا مع البرنامج و يمكنك تحميلها من هنا و بعد تحميل البرنامجين يتم تثبيتهم يدوياً , التثبيت سهل و لن يستغرق اكثر من ربع ساعة بعد التثبيت نقوم بفتح اندرويد ستوديو , قد يقوم البرنامج بتنزيل بعض التحديثات او الإضافات و لن يقوم بالفتح الا بتنزيل تلك الإضافات دعه يقوم بتنزيل كل شئ حتى تستطيع الولوج الى البرنامج بالشكل الصحيح و بأخر التحديثات
الولوج داخل اندرويد ستوديو , بعد إنتهاء التثبيت و إنتهاء تنزيل جميع الإضافات نقوم بفتح البرنامج
إحترف Android Studio من الصفر و حتى الإحتراف
ستظهر لنا الشاشة الترحيبية للبرنامج و بها 5 خيارات
1 - فتح مشروع جديد
2 - فتح مشروع موجود مُسبقاً
3 - جلب مشاريع من مواقع مُحددة
4 - إستيراد مشروع تم بنائه على بيئة إكليبس
5 - إستيراد نماذج جاهزة لأكواد اندرويد

سأقوم بعمل مشروع جديد لأننا فى بداية الامر و لم نقم ببناء اى مشروع حتى الان و فى الدروس القادمة سنتعامل مع الكود سورس بإذن الله تعالى
إحترف Android Studio من الصفر و حتى الإحتراف
بعد الضغط على إنشاء مشروع جديد ستظهر لنا هذه القائمة و بها 3 اشياء
1 - اسم التطبيق
2 - دومين الشركة (يمكنك فقط كتابة esmak.com بمعنى اسمك.كوم)
3 - مسار المشروع المُراد إنشاءه
إحترف Android Studio من الصفر و حتى الإحتراف
بعد كتابة اسم المشروع الذى اريده و تغير الإعدادات الباقية نضغط على Next
إحترف Android Studio من الصفر و حتى الإحتراف
بعد الضغط على التالى تظهر لنا هذه النافذه و بها عدة خيارات مُهمة
اول خيار لتفعيل تشغيل و توافق المشروع على الهواتف و التابلت اما Wear فهى للساعات الذكية و لن نقوم بتفعيلها لأن مشروعنا سنقوم ببناءه على الهواتف و التابلت و خيار TV لتفعيل و توافق التطبيق مع الشاشات الذكية يمكنك تفعيله و لكن مثلما ذكرنا سيكون عملنا فقط على الهواتف الذكية و التابلت اما بخصوص Minimun SDK فهذا لإختيار اقل إصدار اندرويد يعمل عليه المشروع , نختار IceCreamSandwich
لأن معظم الهواتف الان تعمل على إصدار اندرويد 4 و ما فوق فسنختار الإصدار 4 حتى نتمكن من تشغيل المشروع على مُعظم الهواتف بعد ذلك نضغط على Next
إحترف Android Studio من الصفر و حتى الإحتراف
تظهر لنا الان نماذج جاهزة للعمل عليها , يمكنك إختيار النموذج الذى تريده و من ثم البدء و لكننا فى مرحلة اولى لذا سنختار النموذج الخالى Empty Activity و سنضغط على Next
إحترف Android Studio من الصفر و حتى الإحتراف
الان ظهرت لنا تلك النافذه و بها خياران
الاول الاكتيفيتى نيم : يٌقصد به اسم الواجهة الرئيسية للتطبيق لأن التطبيقات تحتوى على عدة واجهات او بالأحرى صفحات فأسم الصفحة الاولى عدله كما شئت و لنفترض قد كتبته Home بمعنى الرئيسية
الثانى اللاى اوت نيم : هو اسم اللاى اوت و هى مرتبطة بالأكتفيتى سنقوم بشرحها فى الدروس القادمة و عند تغير الاكتيفيتى نيم تتغير تلقائياً نقوم بالتغير و بعد ذلك نضغط على Finish
ننتظر حتى يقوم البرنامج بإنشاء المشروع الجديد , سيستغرق عدة دقائق لا تقلق
إنتهى اول جزء فى الجزء التالى سنتعرف على البرنامج من الداخل و التعامل مع المشروع الجديد





0 التعليقات:

اشتراك
الحصول على كل المشاركات لدينا مباشرة في صندوق البريد الإلكتروني

المشاركات الشائعة

RSS

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

تدعمه Blogger.
back to top