Eng Amr Adel
09-09-2014, 15:04
درس اليوم سيتطرق لشرح انواع العناصر objects الرئيسيه التي يمكن استعمالها لصنع التطبيقات
طبعا بعضها سيكون متشابه والذي يحدد ماذا نستخدم هو طبيعه عمل البرنامج مالوظيفه المطلوب تأديتها
بالاضافه لبرنامج بسيط في النهايه وظيفته جمع رقمين وعرض الناتج على الشاشه
https://www.rise.company/forum/clear.gif
TextView
هذا العنصر يمكنك من عرض نص معين للمستخدم دون ان يتمكن المستخدم من تعديله ويمكنك تعديله انت من خلال الكود اثناء تشغيل البرنامج وكذلك يمكن تعديله في وقت البرمجه
Button
كبسه زر، غنيه عن التعريف، يمكن ان تضع اي نص بها مثلا .. موافق .. الغاء .. خروج ... يمكن تعديل محتوى النص من البرنامج او وقت البرمجه
CheckBox
يستعمل هذا العنصر في حالات عرض خيارات للمستخدم .. وترغب بأن يحدد ما يريد .. نستعملها دائما.. يكون تفعيل الخيار من قبل المستخدم من خلال وضع اشاره صح على الخيار من خلال لمس العنصر، وتدعم الاختيار المتعدد ، مثلا في برنامج اوقات الصلا تخير المستخدم ... تنبيه على الصلوات : فجر ، ظهر ، عصر ، مغرب ، عشاء (هنا يمكنه اختيار كل الخيارات ولا شيء منطقي يمنع ذلك)
RadioButton
نفس العنصر السابق الا ان به فرق وهو انك يمكن ان تضع عدد من هذا العنصر .. مثلا اثنين منها في مجموعه افتراضيه عندها يستطيع المستخدم اختيار واحده فقط من بين الخيارين وتستعمل عاده للتخير بين اشياء لا يمكن جمعها منطقيا.. مثل انك تعمل تسأل المستخدم عن جنسه .. ذكر او انثى .. فليس منطقي ان يستطيع اختيار الاثنين معا.
---------
في المجموعه الثانيه :
TextFields
هي مربعات نصيه نوعها الرئيسي يسمى EditText تمكن المستخدم من كتابه ما يريد ويكون عباره عن مدخلات لبرنامجنا
ويتفرع عنها انواع متعدده تكون للتسهيل بالعمل ... مثلا حقل النص من نوع password يظهر الكلام المكتوب به على شكل نجوم او نقاط سوداء لكي لا يشاهدها احد...
اما نوع Number مثلا فهو يحدد نوع المدخلات بالارقام فقط وذلك من خلال عرض لوحه مفاتيح الارقام فقط وبهذا يمنع المستخدم من ادخال حرف بدلا من الرقم.
والبقيه اتوقع واضحه من خلال الاسم ومن يواجه صعوبه بنوع يتفضل بالسؤال.
---------
المجموعه الثالثه:
Layouts
وهي عباره عن مستوعبات Containers ان صح التعبير تحدد سلوك العناصر السابقه على الشاشه من ناحيه مكان وجودها وترتيبها واحتلالها للمساحات...صراحه لست متمكننا منها كلها لكن سأشرح ما اعرف منهم:
LinearLayout
هذا النوع يقوم بصف العناصر التي تضيفها على التصميم بشكل خطي ولحده بعد الاخرى .. وعند الوصول لاخر الشاشه ينزل سطر للاسف ويكمل باقي العناصر.
RelativeLayout
يقوم هذا النوع بوضع كل عنصر بشكل نسبي لعنصر اخر .. مثلا تضع TextView وتضع حقل password وتخبره ان حقل كلمه السر تحت مربع TextView
وهكذا تبني التصميم بشكل معتمد على بعضه.
TableLayout
اي الجدول وهو عباره عن تقسيم الشاشه لجدول، صفوف واعمده ومن ثم تعبئه هذه الخلايا (الناتجه عن الصفوف والاعمده) بالعناصر المطلوبه
يلزم للعمل به اضافه TableRow به بعدد الصفوف المطلوبه ومن ثم البدء بالتعبئه
اضافه العناصر تكون من خلال السحب اي انك تضغط العنصر المطلوب اضافته .. مثلا زر وتبقى ضاغط بالماور وتسحبه فوق المربع الاسود الذي هو التصميم ثم تفلته
سيأخذ مكانه حسب نوع ال Layout الذي تستعمله ويمكنك التعديل عليه من خلال مربع الخصائص Properties الموجود على اليمين.
كذلك عندما تسحبه فوق التصميم وقبل ان تفلته ستلاحظ ان المحرر يعطيك ظلال في الخلفيه عن مكان وقوع العنصر لكي يساعدك بتحديد مكانه.
بقيه المجموعات وعناصرها قد نتطرق لها لاحقا .. حسب الحاجه او اذا سأل احد عن نوع محدد.
نأتي للبرنامج الان...
سيكون كما قلت جمع رقمين وعرض الناتج.. اذا المطلوب من البرنامج ما يلي:
1- اخذ مدخلات من المستخدم (رقمين)
2- اجراء عمليه الجمع عليهم
3- اعطاء مخرجات للمستخدم من خلال عرض الناتج على الشاشه
5- قد نضيف زر اضافي لمسح الخانات.
نبدأ:
انشئ مشروع جديد كما تعلمنا وسميه مثلا SumTwoNumbers، لتجنب المشاكل لمن يرغب باستعمال الملفات التي سأضعها هنا
ضع في خانه Package Name عند انشاء المشروع القيمه : com.ce4arab.sumNum
والباقي عبئه كما تحب
التصميم سيكون مربعين من نوع Number لكل رقم سيدخله المستخدم
ثم زر للجمع مكتوب عليه Sum وبعدها TextView لعرض الناتج بها وسيكون واجبكم المنزلي عمل زر المسح الذي سيفرغ مربعين ال Number من القيم التي بهما.
هذا سيكون ملف ال main.xml وهو الملف الذي سيحوي التصميم، سنستعمل layout من نوع linear وهو النوع الذي يكون مستعمل عند انشاء المشروع.
سنضيف له العناصر السابقه مرتبه تحت بعضها ، بالنسبه لل TextView الذي سيعرض النتيجه وللزر بعد اضافتهم للتصميم،
نعمل كليك يمين على كل واحد ونختار layout_width - fill parent هذا يعني ان العرض لهم هو ملئ الاب والاب هو الشاشه الخلفيه ستلاحظون الفرق عند تنفيذ هذه الحركه.
وهذا ملف التصميم النهائي:
كود PHP:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android (http://bit.ly/HtpalV)="http://schemas.android (http://bit.ly/HtpalV).com/apk/res/android (http://bit.ly/HtpalV)"
android (http://bit.ly/HtpalV):orientation="vertical"
android (http://bit.ly/HtpalV):layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
<EditText android:layout_height="wrap_content" android:layout_width="fill_parent" android:inputType="number" android:id="@+id/txtN1">
<requestFocus></requestFocus>
</EditText>
<EditText android:layout_height="wrap_content" android:layout_width="fill_parent" android:inputType="number" android:id="@+id/txtN2"></EditText>
<Button android:layout_height="wrap_content" android:id="@+id/btnSum" android:text="Sum" android:layout_width="fill_parent"></Button>
<TextView android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:id="@+id/lblResult" android:text="0" android:layout_width="fill_parent"></TextView>
</LinearLayout>
الان نأتي للكود:
هذا هو الكلاس النهائي للفعاليه التي انشأها لنا ال ADT واسمها SumTwoNumbersActivit
كود PHP:
package com.ce4arab.sumNum;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
public class SumTwoNumbersActivity extends Activity {
//متغيرات لكي يتم ربطها بالعناصر على التصميم
Button btnSum;
EditText txtN1, txtN2;
TextView lblResult;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
//عمليه الربط بين المتغيرات والتصميم ... لنتمكن من كتابه الكود والتحكم بها
btnSum = (Button) findViewById(R.id.btnSum);
txtN1 = (EditText) findViewById(R.id.txtN1);
txtN2 = (EditText) findViewById(R.id.txtN2);
//تحديد معالج الحدث عند الضغط على الزر ... المعالج نفسه مكتوب بالاسفل
btnSum_actionListener btnSumLsnr = new btnSum_actionListener(this);
btnSum.setOnClickListener(btnSumLsnr);
}//onCreate()
}//CLASS
//معالج الحدث actionListeer
class btnSum_actionListener implements OnClickListener{
SumTwoNumbersActivity adaptee;
public btnSum_actionListener(SumTwoNumbersActivity a){
adaptee = a;
}
@Override
public void onClick(View v) {
//متغيراتلاخذ الارقام من المستخدم
int num1=0;
int num2=0;
//اخذ القيم من مربعين النص في التصميم txtN1 . txtN2 ووضعهم في متغيرات هنا مع تحويلهم لارقام
//لان المدخلات من المستخدم تكون نصيه دائما حتى لو كتب رقما لذا يجب تحويلها من خلال ()Integer.parseInt
num1 = Integer.parseInt(adaptee.txtN1.getText().toString( ));
num2 = Integer.parseInt(adaptee.txtN2.getText().toString( ));
//عمليه الجمع وتخزين الناتح بمتغير جديد result
int result = num1 + num2;
// وضع قيمه result داخل TextView في التصميم والذي اسمه lblResult
adaptee.lblResult.setText(""+result);
}
}//btnSum_actionListener
** استعمال الرمز // وكتابه كلام بعده يسمى تعليقات comments تكون لتوضيح الكود والمترجم compiler يتجاهلها
يفضل ازاله التعليقات العربيه من الكود اذا واجهت مشاكل الوضع الصيحي ان يتم تلوينها بالاخضر عند نقلها للمحرر eclipse
وهذا برنامجنا اصبح جاهز للعمل
يمكنكم التعديل عليه واضافه زر للطرح مثلا والقسمه والضرب ..
كان هناك خطأ بالكود: بالسطر الاخير من كلاس معالج الحدث
adaptee.lblResult.setText(result);
الصحيح
adaptee.lblResult.setText(""+result);
وهذا لان الوظيفه setText مهئيه لاستقبال نص String وليس قيمه رقميه int
ووضعنا ال ""+ لكي نحول القيمه الرقميه الى نص
وممكن استعمال
Integer.toString(result) كذلك
طبعا بعضها سيكون متشابه والذي يحدد ماذا نستخدم هو طبيعه عمل البرنامج مالوظيفه المطلوب تأديتها
بالاضافه لبرنامج بسيط في النهايه وظيفته جمع رقمين وعرض الناتج على الشاشه
https://www.rise.company/forum/clear.gif
TextView
هذا العنصر يمكنك من عرض نص معين للمستخدم دون ان يتمكن المستخدم من تعديله ويمكنك تعديله انت من خلال الكود اثناء تشغيل البرنامج وكذلك يمكن تعديله في وقت البرمجه
Button
كبسه زر، غنيه عن التعريف، يمكن ان تضع اي نص بها مثلا .. موافق .. الغاء .. خروج ... يمكن تعديل محتوى النص من البرنامج او وقت البرمجه
CheckBox
يستعمل هذا العنصر في حالات عرض خيارات للمستخدم .. وترغب بأن يحدد ما يريد .. نستعملها دائما.. يكون تفعيل الخيار من قبل المستخدم من خلال وضع اشاره صح على الخيار من خلال لمس العنصر، وتدعم الاختيار المتعدد ، مثلا في برنامج اوقات الصلا تخير المستخدم ... تنبيه على الصلوات : فجر ، ظهر ، عصر ، مغرب ، عشاء (هنا يمكنه اختيار كل الخيارات ولا شيء منطقي يمنع ذلك)
RadioButton
نفس العنصر السابق الا ان به فرق وهو انك يمكن ان تضع عدد من هذا العنصر .. مثلا اثنين منها في مجموعه افتراضيه عندها يستطيع المستخدم اختيار واحده فقط من بين الخيارين وتستعمل عاده للتخير بين اشياء لا يمكن جمعها منطقيا.. مثل انك تعمل تسأل المستخدم عن جنسه .. ذكر او انثى .. فليس منطقي ان يستطيع اختيار الاثنين معا.
---------
في المجموعه الثانيه :
TextFields
هي مربعات نصيه نوعها الرئيسي يسمى EditText تمكن المستخدم من كتابه ما يريد ويكون عباره عن مدخلات لبرنامجنا
ويتفرع عنها انواع متعدده تكون للتسهيل بالعمل ... مثلا حقل النص من نوع password يظهر الكلام المكتوب به على شكل نجوم او نقاط سوداء لكي لا يشاهدها احد...
اما نوع Number مثلا فهو يحدد نوع المدخلات بالارقام فقط وذلك من خلال عرض لوحه مفاتيح الارقام فقط وبهذا يمنع المستخدم من ادخال حرف بدلا من الرقم.
والبقيه اتوقع واضحه من خلال الاسم ومن يواجه صعوبه بنوع يتفضل بالسؤال.
---------
المجموعه الثالثه:
Layouts
وهي عباره عن مستوعبات Containers ان صح التعبير تحدد سلوك العناصر السابقه على الشاشه من ناحيه مكان وجودها وترتيبها واحتلالها للمساحات...صراحه لست متمكننا منها كلها لكن سأشرح ما اعرف منهم:
LinearLayout
هذا النوع يقوم بصف العناصر التي تضيفها على التصميم بشكل خطي ولحده بعد الاخرى .. وعند الوصول لاخر الشاشه ينزل سطر للاسف ويكمل باقي العناصر.
RelativeLayout
يقوم هذا النوع بوضع كل عنصر بشكل نسبي لعنصر اخر .. مثلا تضع TextView وتضع حقل password وتخبره ان حقل كلمه السر تحت مربع TextView
وهكذا تبني التصميم بشكل معتمد على بعضه.
TableLayout
اي الجدول وهو عباره عن تقسيم الشاشه لجدول، صفوف واعمده ومن ثم تعبئه هذه الخلايا (الناتجه عن الصفوف والاعمده) بالعناصر المطلوبه
يلزم للعمل به اضافه TableRow به بعدد الصفوف المطلوبه ومن ثم البدء بالتعبئه
اضافه العناصر تكون من خلال السحب اي انك تضغط العنصر المطلوب اضافته .. مثلا زر وتبقى ضاغط بالماور وتسحبه فوق المربع الاسود الذي هو التصميم ثم تفلته
سيأخذ مكانه حسب نوع ال Layout الذي تستعمله ويمكنك التعديل عليه من خلال مربع الخصائص Properties الموجود على اليمين.
كذلك عندما تسحبه فوق التصميم وقبل ان تفلته ستلاحظ ان المحرر يعطيك ظلال في الخلفيه عن مكان وقوع العنصر لكي يساعدك بتحديد مكانه.
بقيه المجموعات وعناصرها قد نتطرق لها لاحقا .. حسب الحاجه او اذا سأل احد عن نوع محدد.
نأتي للبرنامج الان...
سيكون كما قلت جمع رقمين وعرض الناتج.. اذا المطلوب من البرنامج ما يلي:
1- اخذ مدخلات من المستخدم (رقمين)
2- اجراء عمليه الجمع عليهم
3- اعطاء مخرجات للمستخدم من خلال عرض الناتج على الشاشه
5- قد نضيف زر اضافي لمسح الخانات.
نبدأ:
انشئ مشروع جديد كما تعلمنا وسميه مثلا SumTwoNumbers، لتجنب المشاكل لمن يرغب باستعمال الملفات التي سأضعها هنا
ضع في خانه Package Name عند انشاء المشروع القيمه : com.ce4arab.sumNum
والباقي عبئه كما تحب
التصميم سيكون مربعين من نوع Number لكل رقم سيدخله المستخدم
ثم زر للجمع مكتوب عليه Sum وبعدها TextView لعرض الناتج بها وسيكون واجبكم المنزلي عمل زر المسح الذي سيفرغ مربعين ال Number من القيم التي بهما.
هذا سيكون ملف ال main.xml وهو الملف الذي سيحوي التصميم، سنستعمل layout من نوع linear وهو النوع الذي يكون مستعمل عند انشاء المشروع.
سنضيف له العناصر السابقه مرتبه تحت بعضها ، بالنسبه لل TextView الذي سيعرض النتيجه وللزر بعد اضافتهم للتصميم،
نعمل كليك يمين على كل واحد ونختار layout_width - fill parent هذا يعني ان العرض لهم هو ملئ الاب والاب هو الشاشه الخلفيه ستلاحظون الفرق عند تنفيذ هذه الحركه.
وهذا ملف التصميم النهائي:
كود PHP:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android (http://bit.ly/HtpalV)="http://schemas.android (http://bit.ly/HtpalV).com/apk/res/android (http://bit.ly/HtpalV)"
android (http://bit.ly/HtpalV):orientation="vertical"
android (http://bit.ly/HtpalV):layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
<EditText android:layout_height="wrap_content" android:layout_width="fill_parent" android:inputType="number" android:id="@+id/txtN1">
<requestFocus></requestFocus>
</EditText>
<EditText android:layout_height="wrap_content" android:layout_width="fill_parent" android:inputType="number" android:id="@+id/txtN2"></EditText>
<Button android:layout_height="wrap_content" android:id="@+id/btnSum" android:text="Sum" android:layout_width="fill_parent"></Button>
<TextView android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:id="@+id/lblResult" android:text="0" android:layout_width="fill_parent"></TextView>
</LinearLayout>
الان نأتي للكود:
هذا هو الكلاس النهائي للفعاليه التي انشأها لنا ال ADT واسمها SumTwoNumbersActivit
كود PHP:
package com.ce4arab.sumNum;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
public class SumTwoNumbersActivity extends Activity {
//متغيرات لكي يتم ربطها بالعناصر على التصميم
Button btnSum;
EditText txtN1, txtN2;
TextView lblResult;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
//عمليه الربط بين المتغيرات والتصميم ... لنتمكن من كتابه الكود والتحكم بها
btnSum = (Button) findViewById(R.id.btnSum);
txtN1 = (EditText) findViewById(R.id.txtN1);
txtN2 = (EditText) findViewById(R.id.txtN2);
//تحديد معالج الحدث عند الضغط على الزر ... المعالج نفسه مكتوب بالاسفل
btnSum_actionListener btnSumLsnr = new btnSum_actionListener(this);
btnSum.setOnClickListener(btnSumLsnr);
}//onCreate()
}//CLASS
//معالج الحدث actionListeer
class btnSum_actionListener implements OnClickListener{
SumTwoNumbersActivity adaptee;
public btnSum_actionListener(SumTwoNumbersActivity a){
adaptee = a;
}
@Override
public void onClick(View v) {
//متغيراتلاخذ الارقام من المستخدم
int num1=0;
int num2=0;
//اخذ القيم من مربعين النص في التصميم txtN1 . txtN2 ووضعهم في متغيرات هنا مع تحويلهم لارقام
//لان المدخلات من المستخدم تكون نصيه دائما حتى لو كتب رقما لذا يجب تحويلها من خلال ()Integer.parseInt
num1 = Integer.parseInt(adaptee.txtN1.getText().toString( ));
num2 = Integer.parseInt(adaptee.txtN2.getText().toString( ));
//عمليه الجمع وتخزين الناتح بمتغير جديد result
int result = num1 + num2;
// وضع قيمه result داخل TextView في التصميم والذي اسمه lblResult
adaptee.lblResult.setText(""+result);
}
}//btnSum_actionListener
** استعمال الرمز // وكتابه كلام بعده يسمى تعليقات comments تكون لتوضيح الكود والمترجم compiler يتجاهلها
يفضل ازاله التعليقات العربيه من الكود اذا واجهت مشاكل الوضع الصيحي ان يتم تلوينها بالاخضر عند نقلها للمحرر eclipse
وهذا برنامجنا اصبح جاهز للعمل
يمكنكم التعديل عليه واضافه زر للطرح مثلا والقسمه والضرب ..
كان هناك خطأ بالكود: بالسطر الاخير من كلاس معالج الحدث
adaptee.lblResult.setText(result);
الصحيح
adaptee.lblResult.setText(""+result);
وهذا لان الوظيفه setText مهئيه لاستقبال نص String وليس قيمه رقميه int
ووضعنا ال ""+ لكي نحول القيمه الرقميه الى نص
وممكن استعمال
Integer.toString(result) كذلك