9 – تنسيقات واجهة المستخدم ضمن اندرويد UI Layouts

ملاحظة : الموضوع عبارة عن حلقة من حلقات سلسلة برمجة وتطوير اندرويد Android Development

التنسيقات ضمن اندرويد  Layouts

السلام عليكم ورحمة الله وبركاته 

سوف نتحدث ضمن الحلقات القليلة القادمة عن التنسيقات layout ضمن اندرويد , وكيف بإمكاننا ان نتحكم بشكل وتصميم واجهة المستخدم UI عبر اختيار التنسيق (او التنسيقات )المناسب ,واختيار الخاصيات المناسبة له

سنتحدث في البداية عن التنسيقات الشائع استخدامها باندرويد, ومن ثم في الحلقات القادمة سوف نتحدث بالتفصيل مع الأمثلة عن كل تنسيق من التنسيقات الاساسية التي يدعمها اندرويد.

تتضمن هذه السلسلة حول التنسيقات layouts مايلي :301862_477875605591490_421820774_n

  1. التنسيق Layouts
  2. التنسيق الخطي Linear Layout
  3. التنسيق النسبي Relative Layout
  4. العرض بشكل قائمة List View
  5. العرض على شكل شبكة Grid View

التنسيقات الشائعة Comment layouts

يزودنا كل صف فرعي من الصف ViewGroup بطريقة فريدة لاستعراض ال views المتوضعه ضمنه.

فيما يلي بعض أنواع التنسيقات الشائعة التي يؤمنها لنا اطار عمل اندرويد.

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

التنسيق الخطي Linear Layout

linearlayout-small

يقوم هذا النوع من التنسيق بتنظيم ابنائه (ال views الموجودين ضمنه ) ضمن سطر وحيد افقي او عمودي. ويقوم هذا التنسيق بإنشاء شريط تمرير scrollbar وذلك في حال كان طول النافذة يتجاوز طول الشاشة.

التنسيق النسبي Relative Layout

relativelayout-small

يمكنك التنسيق النسبي من تحديد مواضع الأغراض الابناء child objects نسبة إلى بعضهم البعض(مثلا : الابن(view) A على يسار الابن(view) B) او نسبة إلى الوالد  ( مثلا : المحاذاة للأعلى بالنسبة للوالد ( وليكن مثلا تاغ التنسيق النسبي)).

 العرض بإسلوب الانترنت Web View

webview-small

يستخدم لعرض صفحات الانترنت.

بناء تنسيق باستخدام المحول Adapter

عندما تكون محتويات تنسيقك عبارة عن محتويات ديناميكية – اي متغيرة- او ليست محددة مسبقا, عندها يتوجب عليك استخدام نوع جديد من انواع التنسيق التي ذكرناها من قبل , وهو عبارة عن صف فرعي من الصف AdapterView, ويستخدم هذا النوع من انواع التنسيق لملأ التنسيق بال views اثناء زمن التنفيذ runtime.

إن كل صف فرعي من الصف AdapterView يستخدم ما يسمى ب “المحول” Adapter الذي يستخدم لربط المعطيات مع التنسيق.

يتصرف “المحول” Adapter كوسيط بين مصدر المعطيات وبين التنسيق من نمط AdapterView. حيث يسترجع “المحول” Adapter المعطيات (من مصدر المعطيات على سبيل المثال: من مصفوفة او عبر استعلام من قاعدة المعطيات) ويقوم بتحويل كل مدخل إلى view والذي بدوره يمكن إضافته إلى تنسيق AdapterView.

فيما يلي عدد من التنسيقات الشائعة والمدعومة من قبل المحول Adapter :

العرض بشكل قائمة List View

listview-small

ويعرض هذا النوع من التنسيق قائمة على شكل عمود مفرد– مع شريط تمرير إن لزم الأمر.

العرض على شكل شبكة Grid View

gridview-small

ويعرض هذا النوع من التنسيق  شبكة من السطور والأعمدة – مع شريط تمرير إن لزم الأمر.

ملأ adapter view بالمعطيات Filling an adapter view with data

بإمكانك ملأ AdapterView  ( على سبيل المثال ListView أو GridView) عبر ربط مستنسخ من AdapterView مع المحول Adapter , والذي بدوره يسترجع المعطيات من مصدر خارجي وينشأ ال views التي تمثل بدورها مداخل ال AdapterView  .

يزودنا اندرويد بعدة صفوف فرعية من المحول Adapter, والتي تعتبر مفيدة في استعادة انواع مختلفة من المعطيات وبناء ال views من اجل  AdapterView.

هنالك نوعان شائعان جدا من انواع المحولات adapters:

1 : ArrayAdapter

يستخدم هذا النوع من المحولات عندما يكون مصدر المعطيات عبارة عن مصفوفة array. وبشكل افتراضي تقوم ArrayAdapter بإنشاء view لكل عنصر من عناصر المصفوفة عبر استدعاء التابع toString() لكل عنصر من عناصر المصفوفة وتضع محتوى كل عنصر بدوره ضمن TextView.

أما في حال كنت ترغب بوضع مصفوفة من السلاسل المحرفية strings ضمن ListView, عندها يتوجب عليك في البداية ان تقوم بتهيئة ArrayAdapter باستخدام الباني وذلك لتحدد التنسيق الخاص بكل سلسلة محرفية:

ArrayAdapter adapter = new ArrayAdapter<String>(this, 
        android.R.layout.simple_list_item_1, myStringArray);

فيما يلي شرح المعاملات التي يتم تمريرها للباني:

  • ال Context الخاص بتطبيقك
  • التنسيق الذي يحوي ال TextView لكل سلسلة محرفية ضمن المصفوفة.
  • مصفوفة السلاسل المحرفية the string array.

ومن ثم ببساطة نستدعي التابع setAdapter() للغرض ListView كما يلي :

ListView listView = (ListView) findViewById(R.id.listview);
listView.setAdapter(adapter);

لكي نتحكم بشكل الاظهار لكل عنصر من العناصر بإمكاننا القيام ب override للتابعtoString() لنتحكم بذلك باسلوب عرض اغرض المصفوفة.

                أما في حال كنتم ترغبون في انشاء اسلوب عرض مختلف لكل عنصر غير TextView ( للتوضيح, اذا كانت عناصركم ليست سلاسل محرفية – صور على سبيل المثال- وكنتم ترغبون باسلوب استعراض ImageView لكل عنصر من عناصر المصفوفة), عندها يتوجب عليك وراثة صف ArrayAdapter والقيام ب override للتابع  getView()وذلك لكي يعيد نوع ال view الذي ترغبون به لكل عنصر من عناصر المصفوفة.

2:SimpleCursorAdapter

يتم استخدام هذا النوع من المحولات adapter عندما يكون مصدر المعطيات عبارة عن Cursor.

عند استخدام SimpleCursorAdapter يجب عليك تحديد نوع التنسيق الذي ترغب باستخدامه لكل سطر ضمن ال Cursor, وتحديد اماكن  توضع الأعمدة – التي ينبغي ادراجها- ضمن ال views الخاصة بالتنسيق.

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

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

String[] fromColumns = {ContactsContract.Data.DISPLAY_NAME, 
                        ContactsContract.CommonDataKinds.Phone.NUMBER};
int[] toViews = {R.id.display_name, R.id.phone_number};

عند استنساخ SimpleCursorAdapter سنقوم بتمرير التنسيق الذي نريد استخدامه لكل نتيجة من النتائج, بالاضافة إلى تمرير ال Cursor التي تحوي على النتائج, بالاضافة إلى مصفوفتين.

SimpleCursorAdapter adapter = new SimpleCursorAdapter(this, 
        R.layout.person_name_and_number, cursor, fromColumns, toViews, 0);
ListView listView = getListView();
listView.setAdapter(adapter);

ومنه ثم ينشأ غرض SimpleCursorAdapter الview لكل سطر ضمن ال Cursor وذلك باستخدام التنسيق الذي تم تزويده به, وذلك عبر ادراج كل عنصر من fromColumns ضمن المكان المناسب له ( المحدد بواسطة toViews) ضمن ال view.

في حال تغيرت وتعدل المعطيات المخزنة ضمن المحول , عندها يتوجب عليك ان تخبر المحول بذلك ليقوم بتحميل المعطيات من جديد , ويتم ذلك عبر استدعاء التابع notifyDataSetChanged(). يقوم هذا التابع بتنبيه ال view المرتبط بالمعطيات بأن المعطيات قد تغيرت وبأنه يتوجب عليه ان تحديث البيانات.

التعامل مع احداث النقر Handling click events

بإمكاننا ايضا ضمن AdapterView  الاستجابة للأحداث الناتجة عن النقر على العناصر وذلك عبر تنجيز (كتابة الرماز البرمجي اللازم لها) واجهة  AdapterView.OnItemClickListener.
على سبيل المثال:

// Create a message handling object as an anonymous class.
private OnItemClickListener mMessageClickedHandler = new OnItemClickListener() {
    public void onItemClick(AdapterView parent, View v, int position, long id) {
        // Do something in response to the click
    }
};

listView.setOnItemClickListener(mMessageClickedHandler);

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

وإلى ذلك الحين استودعكم الله والسلام عليكم ورحمة الله وبركاته.

المصطلح

الترجمة

widget

widget

Layout

التنسيق

vocabulary

مفردات

root

جذر

Element

عنصر

scrollbar

شريط تمرير

Adapter

محول

تحوي سلسلة اندرويد المواضيع التالية :

  1. التعريف باندرويد What is Android
  2. مكونات واجهة المستخدم الاساسية في اندرويد Basic Andorid User Interface Components
  3. خطوات تثبيت اندرويد Android Install Steps
  4. بناء مشروع اندرويد
  5. تشغيل تطبيقك على اندرويد Running Your Application  
  6. بناء واجهة مستخدم بسيطة UI 
  7. تشغيل فعالية أخرى Starting another Activity
  8. بناء مشروع اندرويد – التحويل بين درجات الحرارة Android Temperature Converter
  9. تنسيقات واجهة المستخدم ضمن اندرويد  UI Layouts

, , , , , , , , , , , , , , , , , , , , , , , ,

  1. أضف تعليق

اترك رد

Please log in using one of these methods to post your comment:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s

%d مدونون معجبون بهذه: