من الامور الهامة التي يجب على أي مبرمج اندرويد الاهتمام بها هي تصميم التطبيق لابد أن يكون التصميم جذاب للمستخدم ، فإذا تصميمك لم يجذب المستخدم قد يقوم بحذف تطبيقك .
سنتعلم في هذا الجزء أساسيات تصميم الواجهات في الاندرويد حيث يتم ذلك بلغة التوصيف xml حيث يتم وضع العناصر وترتيبها على الشاشة كما ذكرنا في الدروس السابقة أنه يتم إضافة العناصر بطريقتين :
1- عن طريق السحب والافلات إلى الواجهة الرسومية.
2- عن طريق إضافة كود xml .
وسنركز في هذا الجزء على كيفية تصميم واجهات الاندرويد وكيفية وضع العناصر على الشاشة وطريقة ترتيبها.
وسنتعلم في هذا الجزء بعض المفاهيم وهي كمايلي:
1-ماهو الـ View وماهو الـ ViewGroup؟
وسنقوم
بشرح هذه الأنواع في الدروس القادمة بأذن الله.
2- عن طريق إضافة كود xml .
سنتعلم في هذا الجزء أساسيات تصميم الواجهات في الاندرويد حيث يتم ذلك بلغة التوصيف xml حيث يتم وضع العناصر وترتيبها على الشاشة كما ذكرنا في الدروس السابقة أنه يتم إضافة العناصر بطريقتين :
1- عن طريق السحب والافلات إلى الواجهة الرسومية.
2- عن طريق إضافة كود xml .
وسنركز في هذا الجزء على كيفية تصميم واجهات الاندرويد وكيفية وضع العناصر على الشاشة وطريقة ترتيبها.
وسنتعلم في هذا الجزء بعض المفاهيم وهي كمايلي:
1-ماهو الـ View وماهو الـ ViewGroup؟
2- تعرف على View structure In android.
1- ماهو الـ View وماهو الـ ViewGroup؟
الـ View :
هو عبارة عن أي شي يراه المستخدم على الشاشة
كمثال : زر Button , مربع نص EditText الخ.. أي انه عبارة عن اوبجكت يأخذ مساحة
مستطيلة في الشاشة ويقوم بالاستجابة
لاحداث تحدث بواسطة المستخدم على سبيل المثال:الزر Button هو عبارة عن View ويقوم بالاستجابة لاحداث تحث بواسطة المستخدم
كالضغط على الزر.
الـ View Group؟
وهو أيضا
عبارة عن اوبجكت يأخذ مساحة مستطيلة في الشاشة وهو الذي يقوم بالتحكم في كيفية عرض
الـ views على
الشاشة ولكنه مختلف قليلا عن الـ View ومن هذه الاختلافات:
1-غير
مرئي .. لايمكن للمستخدم أن يراه.
2-يمكن
أن يحتوي على بعض الـ Views بداخله كما يمكن أن يحتوي أيضا على viewGreoup بداخله.
وياتي
للـ ViewGroup
عدة أنواع منها :
1-Linear Layout: ويقوم بعرض العناصر بطريقة خطية أي على خط
واحد.
2-Relative Layout: ويقوم بعرض العناصر بطريقة علائقية.
3-Frame Layout: ويقوم بعرض عنصر واحد فقط على الشاشة
والتحكم في ظهور واخفاء العناصر المتبقية.
4-Tabel Layout : ويقوم بعرض العناصر في صفوف واعمدة.
5-Grid Layout: ويقوم بعرض العناصر بطريقة شبكية.
2- تعرف على View structure In ِAndroid.
كما درسنا في الدروس السابقة انه يتم إضافة العناصر الى الشاشة
بطريقيتين:
1- عن طريق السحب والافلات إلى الواجهة الرسومية.
كل ملف Xml يحتوى على ما يسمى root
Tag وهو
الوسم الذ يكون في اعلى ملف xml.
الشكل ادناه يوضح View Structure in android
من الشكل نستنج مايلي:
1-ViewGroup : يكون في اعلى ملف xml أي
يكون root tag .
2-بداخل viewGroup يكون view ويمكن أن يكون أيضا view
group آخر
كما توضحه الصورة أعلاه.
ولتوضيح
اكثر لمفهوم الـ View structure In android انظر إلى الصورة ادناه:
1-حيث يمثل المستطيل الأحمر ViewGroup وهو Linear Layout والذي قوم بعرض العناصر بطريقة خطية.
2- ويوجد بداخل الـ ViewGroup زر Button و
يوجد أيضا مربع نص EditText أي قام الـ view group بالتحكم في طريقة عرض العناصر بداخله وقام بعرضهم بطريقة عمودية كما في الشكل أعلاه.
ولننظر بشكل أعمق إلى الشكل أعلاه حيث سيكون ملف xml للتصميم أعلاه كما في الكود ادناه:
ولننظر بشكل أعمق إلى الشكل أعلاه حيث سيكون ملف xml للتصميم أعلاه كما في الكود ادناه:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:oriention="virtical"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="send"
/>
</LinearLayout>
يتضح من الكود أعلاه:
1-root Tag هو عبارة
linear Layout أي سيتم عرض العناصر بشكل خطي.
2-ثم يوجد بداخل Linear Layout مربع نص editText و زر Button
2-يتم تحديد الخصائص للـ View/ViewGroup
وكمثال على بعض الخصائص الأكثر استخداما:
-android:layout_width: وهو هذه الخاصية تقوم
بتحديد عرض الـ ViewGroup/view ويتم اسناد القيمة match_parent أي كل المساحة الممكنة
الافقية .
-android:layout_heigh: وهو هذه الخاصية تقوم
بتحديد طول الـ ViewGroup/View ويتم اسناد القيمة match_parent أي كل المساحة الممكنة
العمودية .
وتوجد هناك خصائص إضافية مثل:
-android:background-: وذلك لتحديد لون خلفية الـ
ViewGroup/View.
وبهذه الطريقة يتم عرض العناصر وترتيبها في واجهات أي تطبيق اندرويد.
في الجزاء الأول من الدرس كيفية وضع الـ views على الشاشة والتحكم في مواقعها على الشاشة , اما في هذا الجزاء سنتعلم كيفية التحكم في احجامها بالاعتماد على حجم شاشة الجهاز الذي يشتغل عليه التطبيق كما سنتعلم في هذا الدرس كيفية تصميم واحهة UI لتطبيق اندرويد تتلائم مع جميع احجام الشاشات المحتلفة .
كماهو معروف ان نظام الاندرويد مفتوح المصدر وهذا مايعني إن بإمكان الجميع استخدامه وتخصيصه وهكذا نجد الكثير من الشركات المصنعة للهواتف تتخذ من نظام الاندرويد كنظام تشغيل للهواتف التي تقوم بانتاجها كمثال على تلك الشركات Samsung و HTC و LG وغيرها من الشركات. وهذا يعني اننا سنجد احجام شاشات مختلفة ودقات مختلفة للشاشات .
ويبقى التحدي لمبرمج تطبيقات اندرويد كيف يقوم انتاج تطبيق يتلائم مع جميع مقاسات ودقات الشاشات وسنتعلم في هذا الدرس كيفية ذلك .
لكي نقوم بتصميم واجهة تتلائم مع جميع مقاسات واحجام الشاشات لابد ان تعرف بعض المفاهيم الاساسية وهو ما سنتعلمه في هذا الدرس :-
1- ماهو حجم الشاشة Screen Size ؟
2- ماهي كثافة الشاشة screen density ؟
3- ماهو دقة الشاشة screen resoiution ؟
4- وحدات قياس أحجام المكونات Views في الاندرويد
4- وحدات قياس أحجام المكونات Views في الاندرويد
5- ماهي الكثافة المعتمدة على البكسل density indenepdent pixle؟
6- ماهو scaled pixels ؟
ونبدأ بشرح بهذا المفاهيم
1- ماهو حجم الشاشة Screen Size؟
تاتي احجام الشاشات بأربع فئات وهي : small, normal, large, extra
Large كما في الصورة ادناه:
2- ماهي كثافة الشاشة screen density ؟
تأتي هناك اربع فئات لكثافات الشاشة وهي:-
1- xhdp.(الكثافة الاعلى)
2- hdpi.(كثافة عالية )
3- mdpi.(كثافة متوسطة)
4- ldpi.(كثافة منخفضة)
وهو ما ستلاحظه فعليا عند انشاء أي مشروع اندرويد يكون هناك مجلد خاص بالصور وايقونات التطبيق كمافي الصورة ادناه:
حيث يحتوي كل مجلد على الصور والايقونات الخاصة بكل نوع من أنواع كثافة الشاشة حيث كل جهاز اندرويد يحتوي على كثافة شاشة مختلفة من جهاز لاخر كما تبينه الصورة ادناه :
نلاحظ من الصورة ثلاث دوائرحيث تمثل كل دائرة مايلي:-
الدائرة 1 : تمثل الكثافة العالية حيث تحتوي النقطة الواحدة من الشاشة على 9 بكسل.
الدائرة 2 : تمثل الكثافة المتوسطة حيث تحتوي النقطة الواحدة من الشاشة على 4 بكسل.
الدائرة 1 : تمثل الكثافة العالية حيث تحتوي النقطة الواحدة من الشاشة على 9 بكسل.
الدائرة 2 : تمثل الكثافة المتوسطة حيث تحتوي النقطة الواحدة من الشاشة على 4 بكسل.
الدائرة 3 : تمثل الكثافة العالية حيث تحتوي النقطة الواحدة من الشاشة على1 بكسل.
ولهذا لاينصح باستخدام البكسل في قياس احجام المكونات views فانه فان البكسل الواحد لايحتوي على عدد نفس النقاط وذلك باختلاف كثافة شاشة الجهاز وهذا سيؤدي إلى ختلاف احجام المكونات views على الشاشة باختلاف احجام وكثافة الشاشة وهذا ما لانريده .. نريد
ان تظهر المكونات views بنفس الحجم مهما اختلفت كثافة وحجم الشاشة.
توجد هناك وحدات قياس للاندرويد كما في الصورة ادناه:
ويقصد بهذا المفهوم :- مثلا لو قمت بوضع عنصر على الشاشة وقمت بتحديد بعض الخواص كالطول والعرض الخ.. بالاعتماد على dpi فإنك لن تكون مهتما كيف سيظهر شكل هذا العنصر على الشاشات المختلفة فإن نظام الاندرويد سيقوم بهذه المهمة بالنيابة عنك لان النظام يقوم بتحويل dpi إلى بكسل عندما يكون تطبيقك شغال وذلك لاعطاء حجم مناسب للمكون على الشاشة وتتم عملية التحويل باستخدام المعادلة الاتية:
3- ماهو دقة الشاشة screen resoiution ؟
هو عدد البكسلات الموجودة في الشاشة ولاينصح باستخدامها في وضع احجام المكونات views على الشاشة ينصح فقط بالتعامل مع حجم الشاشة وكثافتها.
4- وحدات قياس أحجام المكونات Views في الاندرويد
وسنقوم الان بشرحها:
1- mm , in , pt :-وتعتمد اعتماد كليا على حجم الشاشة الفيزيائي ولاينصح باستخدامها.
2- dp :- وهي وحدة قياس الكثافة للشاشة وسيتم شرحها بالتفصيل في الفصل القادم من هذا الدرس.
3- sp :- وهي وحدة قياس تستخدم لقياس احجام النصوص والخطوط وسيتم شرحها بالتفصيل في هذا الدرس.
5- ماهي الكثافة المعتمدة على البكسل density indenepdent pixle
(Px=dp*(dots per inch in your device /160
حيث من المعادلة إعلاه تبين لك عدد البكسلات التي سيأخذها العنصر على الشاشة كما في الجدول التالي:-
حيث 1dpi يمثل 0.75 بكسل على الشاشة الخ..
ولتوضيح اكثر انظر إلى الصورة ادناه حيث تم وضع نفس العنصر على شاشتين مختلفتين في الكقافة dpi لاحظ الفرق بينهما:
حيث dpi بالنسبة للصورة العلوية =148
وال dpi بالنسبة للصورة الثانية= 208
نلاحظ من الصورتين انه تم وضع جميع العناصر بنفس الترتيب ونفس الحجم رغم اختلاف الكثافة dpi للشاشتين .
ولهذا ينصح باستخدام الـ dpi لقياس احجام العناصر views على الشاشة.
لكن ماذا يحدث إذا لم نقم باستخدام dpi لقياس احجام العناصر على الشاشة ؟؟
إذا لم نقوم باستخدام dpi ستظهر العناصر باحجام مختلفة عندما تختلف الكثافة للشاشات كما في الصورة ادناه:
نلاحظ من الصورة أعلاه اختلاف احجام العناصر باختلاف الشاشات عندما لم نقوم باستخدام الـ dpi والعكس.
6- ماهو scaled pixels
كما ذكرنا سبقا ان الـ dpi يستخدم لوضع احجام المكونات views على الشاشة.. لكن scaled pixles يستخدم لوضع احجام الخطوط ويتم تطبيقه على حجم النص في الشاشات المختلفة كما في الصورة ادناه:
لاحظ من الصورة أعلاه اختلاف النص باختلاف dpi للشاشة لهذه لابد إن يتم استخدام sp لقياس احجام الخطوط:
لهذا عندما يتم استخدام sp في احجام الخطوط سيظهر الخط بنفس الحجم مهما اختلفت احجام الشاشات والعكس صحيح.
خلاصة الدرس هي:
قم باستخدام الـ dp في قياس احجام المكونات مثل Button,TextView ,EditText الخ..
وقم باستخدام sp في قياس احجام الخطوط والنصوص..
ماهي UI Controls
يوفر لنا الاندرويد مكتبية كبيرة من الـ Ui Controls التي نقوم باضافتها في واجهات تطبيقات الاندرويد Ui android وذلك للسماح للمستخدم بالتعامل مع تطبيقك وادخال البيانات والقيام بالوضائف المختلفة . شرح مفصل لعمل بعض من تلك العناصر UI Controls.
و سنتعرف في هذا الجزاء مايلي:-
1- ماهي عناصر التحكم UI Controls؟
2- شرح وضائف بعض من عناصر التحكم UI Controls.
3- كيفية الوصول إلى UI Controls.
1- ماهي عناصر التحكم UI Controls
عناصر التحكم UI Contrls أو الـ Views هي عبارة عناصر تفاعلية يتم اضافتها إلى الواجهاتuser interface الخاصة بتطبيقك كالازرار , مربعات ادخال النص إلخ ... الغرض منها هو تفاعل المستخدم مع تطبيقك كإدخال بيانات , عرض بيانات , الخ ..
2- شرح وضائف بعض من عناصر التحكم UI Controls
سنشرح بعض وضائف عناصر التحكم في الاندرويد والتي تجدها في قائمة palette في بيئة اندرويد استديو android studio كما في الصورة ادناه :-
ونبدأـ بشرح وضائف تلك العناصر :-
1-TextView
ويستخدم لعرض النصوص للمستخدم.
2-EditText
ويستخدم مربع نص يستخدم لادخال البيانات .
3- AutoCompleteTextView
وهو نفس EditText عدا انه يعرض لك قائمة من اقتراحات الاكمال التلقائي عندما يقوم المستخدم بالكتابة.
4-Button
وهو عبارة عن الزر عندما يقوم المستخدم بالضغط عليه لتنفيذ شي ما .. مثلا تسجيل دخول أو حذف بيانات الخ..
5-CheckBox
صندوق الاختيار وهو يسمح للمستخدم بالاختيار من بين قائمة من الاختيارات على سبيل المثال:-عندما يتم عرض للمستخدم خصائص نص معين فبإمكانك جعل المستخدم يختار خصائص النص مثلا عريض , مائل , الخ . وذلك يكن باستخدم صندوق الاختيار .
5- ToggleButton
وهو عبارة عن زر يسمح لك بالتبديل بين حالتين off/on .
6-RadioButton
ويسمح لك بالاختيار بين حالتين .. اختيار او عدم اختيار .
7-ProgressBar
وهو عبارة عن view يخبر المستخدم بحدوث شي ما .. كمثال على ذلك عندما تقوم بتحميل ملف من الانترنت فإن عملية التحميل تتم في الخلفية دون علم المستخدم من الافضل إخبار المستخدم أن عملية التحميل جارية الان ويتم ذلك من خلال ProgressBar
8-Spinner
وهو عبارة عن قائمة drop-down تسمح للمستخدم باختيار قيمة من بين مجموعة من القيم .
9-TimePicker
وهو عبارة عن view يسمح لك باختيار الوقت .. كما يمكنك ايضا اختيار الوقت في وضع pm/am.
10-DatePicker
وهو عبارة عن view يسمح لك باختيار التاريخ.
3- كيفية الوصول إلى UI Controls
يتم الوصول إلى العنصر بتحديد الرقم الفريد له كمايلي:-
1- تحديد الرقم الفريد له ID في الملف الخاص بالتصميم
android:id="@+id/text_id"
2- الوصول إلى الرقم الفريد برمجيا وذلك باستخدام دالة findViewById كما في الكود ادناه:-
TextView myText = (TextView) findViewById(R.id.text_id);
من الكود اعلاه حصلنا على اوبجكت من نوع TextView ويمكننا الان التحكم في خصائصه.
تمرين عملي توضيح لما سبق
يتطرق هذا التمرين إلى عناصر واجهة متنوعة مثل زر اإلنتقاء (RadioButton ) , خانة الأختيار (CheckBox)
,القائمة المنسدلة (Spinner ) والشريط المنزلق (SeekBar)
وكيفية معالجة ألاحداث لهذه
العناصر برمجيا وانواع المستمعات (Listeners )المختلفة لهذا الغرض . الواجهة الخاصة بهذا التطبيق وأنواع ً العناصر المضافة موضحة في الشكل .
لتحديد مصفوفة النصوص (Array Stirng (التي يجب تعبئتها في القائمة المنزلقة (Spinner ,(أضف المصفوفة array_countries إلى ملف strings كما هو موضح باألسفل:
<resources> <string name="app_name">example_ul_control</string> <string name="action_settings">Settings</string> <!--هنا توضع المصفوفه --> <string-array name="countries_array"> <item>Palestine</item> <item>Egypt</item> <item>Algeria</item> <item>Syria</item> <item>Jordan</item> <item>Saudi Arabia</item> <item>Iraq</item> </string-array> </resources>
ملف تصميم الواجهة Layout الخاصة بهذا التمرين موضح باألسفل:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/LinearLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/studyTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:text="Where do you study?" /> <RadioGroup android:id="@+id/radioGroup" android:layout_width="wrap_content" android:layout_height="wrap_content" > <RadioButton android:id="@+id/ucasRadio" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="UCAS" /> <RadioButton android:id="@+id/iugRadio" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="IUGAZA" /> </RadioGroup> <TextView android:id="@+id/languageTextView" android:layout_marginTop="20dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="What languages can you speak?" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <CheckBox android:id="@+id/englishCheckBox" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="English" /> <CheckBox android:id="@+id/arabicCheckBox" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Arabic" /> </LinearLayout> <TextView android:id="@+id/CountryTextView" android:layout_marginTop="20dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Where are you from?" /> <Spinner android:id="@+id/countiresSpinner" android:layout_width="match_parent" android:layout_height="wrap_content" android:entries="@array/countries_array" /> <TextView android:id="@+id/happienessTextView" android:layout_marginTop="20dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Rate your level of happieness" /> <SeekBar android:id="@+id/happienessSeekBar" android:layout_width="match_parent" android:layout_height="wrap_content" /> <TextView android:id="@+id/HappienessValue" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="" /> </LinearLayout>
نلاحظ أن أزراء االنتقاء Buttons Radio تم جمعها في مجموعة واحدة RadioGroup وذلك حتى يتم اختيار القائمة في المصادر ً ً عنصر واحد منها فقط. الحظ أيضا spinner وكيف تم تعبئتها بالمصفوفة المحددة مسبقا يمكن )android:entries="@array/countries_array" الخاصية باستخدام وذلك ) strings.xml ملف) برمجيا Adapter في هذا الفصل(. في ً تعبئة القائمة spinner باستخدام المحولِ ً والذي سيتم الحديث عنه الحقا أسفل الواجهة تم استخدام عنصر عرض TextView وذلك لعرض القيمة الراجعة من العنصر SeekBar .بعد برمجيا )MainActivity )كما هو موضح: ً تجهيز الواجهة, سيتم اآلن معالجة أحداثها داخل الفعالية
//package com.alawirisaddam.example_ul_control;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.app.*;
import android.widget.*;
import android.widget.CompoundButton.*;
import android.widget.AdapterView.*;
import android.view.*;
import android.widget.SeekBar.*;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@Override
protected void onStart() {
super.onStart();
// RadioGroup radioGroup = (RadioGroup) this.findViewById(R.id.radioGroup);
RadioGroup radioGroup = (RadioGroup) findViewById(R.id.radioGroup);
radioGroup.setOnCheckedChangeListener(new android.widget.RadioGroup.OnCheckedChangeListener(){
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
if(checkedId == R.id.ucasRadio)
Toast.makeText(getApplicationContext(),
"Choice : UCAS", Toast.LENGTH_SHORT).show();
else if(checkedId == R.id.iugRadio)
Toast.makeText(getApplicationContext(),
"Choice : IUG", Toast.LENGTH_SHORT).show();
}
});
CheckBox englishCheckBox = (CheckBox) this.findViewById(R.id.englishCheckBox);
englishCheckBox.setOnCheckedChangeListener(new OnCheckedChangeListener(){
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
Toast.makeText(getApplicationContext(), buttonView.getText()+" is "+ isChecked, Toast.LENGTH_SHORT).show();
}
});
CheckBox arabicCheckBox = (CheckBox)this.findViewById(R.id.arabicCheckBox);
arabicCheckBox.setOnCheckedChangeListener(new
OnCheckedChangeListener(){
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
Toast.makeText(getApplicationContext(), buttonView.getText()+" is "+ isChecked, Toast.LENGTH_SHORT).show();
}
});
Spinner spinner = (Spinner) this.findViewById(R.id.countiresSpinner);
spinner.setOnItemSelectedListener(new OnItemSelectedListener(){
@Override
public void onItemSelected(AdapterView parent, View view, int position, long id) {
Toast.makeText(getApplicationContext(), parent.getItemAtPosition(position).toString(), Toast.LENGTH_SHORT).show();
}
@Override
public void onNothingSelected(AdapterView parent){}
});
final TextView happienessValue = (TextView) this.findViewById(R.id.HappienessValue);
SeekBar seekBar = (SeekBar) this.findViewById(R.id.happienessSeekBar); seekBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener(){
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
happienessValue.setText(String.valueOf(progress));
}
@Override
public void onStartTrackingTouch(SeekBar seekBar){}
@Override
public void onStopTrackingTouch(SeekBar seekBar){}
});
}
}
يتم معالجة الاحداث لكل عنصر كما يلي: Buttons Radio :لتحديد أي زر إنتقاء (Button Radio )تم اختياره, نقوم باستخدام المستمع OnCheckedChangeListener.RadioGroup وإضافته إلى مجموعة األزرار (RadioGroup) أنظر سطر رقم 14.)عند حصول الحدث يتم تنفيذ الدالة ()onCheckedChanged والتي يمرر إليها رقم المعرف ID الخاص بالزر الذي تم اختياره حيث يتم طباعة رسالة تبين اإلختيار )أنظر الكود من سطر 08 إلى 36.) Boxes Check :لالستماع لحدث اختيار مربع اإلختيار (CheckBox ) نستخدم المستمع OnCheckedChangeListener.CompoundButton( أنظر سطور رقم 21 و 42 ,)وعند حصول الحدث يتم تنفيذ الدالة ()onCheckedChanged والتي يمرر إليها الكائن الخاص بمربع اإلختيارباإلضافة إلى قيمته )false-true )حيث يتم طباعة اسم مربع االختيار وقيمته )أنظر الكود من سطر 22 إلى 28 ,ومن سطر 45 إلى 51.) Spinner :نستخدم مستمع من نوع OnItemSelectedListener.AdapterView لمعالجة الحدث الخاص بهذا العنصر )أنظر سطر رقم 56 .)عند حصول الحدث يتم تنفيذ الدالة ()onItemSelected والتي من ضمن ما يمرر لها موقع العنصر الذي تم اختياره من القائمة. بمعرفة موقع العنصر يمكن الوصول له من القائمة عن طريق الدالة ()getItemAtPosition( أنظر الكود من سطر 60 إلى 65.) Bar Seek :يتم معالجة الغيرات على الشريط المنزلق (SeekBar (عن طريق إضافة مستمع من نوع OnSeekBarChangeListener( أنظر سطر رقم 74 .)عند حصول الحدث يتم تنفيذ الدالة ()onProgressChanged والتي يمرر لها القيمة الحالية للشريط )1-011 مثالً( باإلضافة إلى القيمة المنطقية ً fromUser والتي تحدد ما إذا كان تغير الشريط تم من المستخدم )true=fromUser ( أو برمجيا )false=fromUser .)في المثال الموضح يتم طباعة قيمة الشريط الممررة في عنصر من نوع TextView أنظر الكود من سطر 77 إلى 81. قائمة العرض (ListView) عرض العناصر في قائمة هو أحد التصاميم الشائعة بكثرة في تطبيقات الهواتف النقالة. يشاهد المستخدم عدد من العناصر ويستطيع االنتقال ألعلى القائمة وأسفلها down/up scroll كما هو موضح بشكل 3-3 . عند إختيار أحد عناصر القائمة يتم عادة تنفيذ إجراء مثل فتح فعالية جديدة. إضافة بيانات للقائمة (ListView) إلضافة بيانات للقائمة (ListView ) يتم عادةً استخدام المحول (Adapter) وهو كائن وسيط بين عنصر العرض وهو القائمة )ListView ) أو أي عنصر واجهة يتفرع من الفئة (class AdaperView ) وبين البيانات المعروضة. يتحكم المحول (Adapter ) في الوصول لبيانات القائمة, كما أنه مسؤول عن تحويل الب يانات المدخلة يمكن تضمينه داخل القائمة. فمثالً (Array ) للقائمة إلى عنصر عرض (View) , عند إداخل مصفوفة من النصوص String (لعرضها في القائمة, يقوم المحول (Adapter ) بتحويل كل عبارة نصية في المصفوفة إلى كائن من نوع (TextView ) والذي يتم إدراجه في القائمة, أي أن مصفوفة النصوص تتحول باستخدام المحول (Adapter (إلى مجموعة من عناصر العرض (TextView) المجمعة في قائمة من نوع )ListView
نهايه