49 : اندرويد : امثلة هرمية التنسيقات optimizing Layout Hierarchies

 

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

اندرويد :   امثلى هرمية التنسيقات Optimizing Layout Hierarchies

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

 نتعلم في هذا الدرس مايلي:

  1. فحص تنسيقك Inspect Your Layout
  2. تنقيح تنسيقك Revise Your Layout

يجب ان تقرأ ايضا

يسود اعتقاد خاطىء بان استخدام بنى التنسيقات الاساسية تقود إلى افضل اداء فعال لهذه التنسيقات.

على كل الاحوال, إن كل تنسيق او widget تضيفه إلى تطبيقك يتطلب تهيئة initialization  , تنسيق layout, ورسم drawijng.

على سبيل المثال, ان الاستخدام المتعشش لمستنسخات من تنسيقات من نمط LinearLayout قد تقود إلى هرمية عميقة لل views بشكل مفرط.

علاوة على ذلك , إن تعشيش عدة مستنسخات من LinearLayout التي تستخدم معامل layout_weight قد تكون مكلفة وخصوصا لان كل ابن يحتاج لا، يتم قياسه مرتين. هذا الموضوع مهم جدا خصوصا عندما يكون من المتطلب ان يتم القيام ب inflated للتنسيق بشكل متكرر, على سبيل المثال عندما تستخدم ListView او GridView.

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

فحص تنسيقك Inspect Your Layout

 تتضمن ادوات android SDK اداة تدعى Hierarchy Viewerوهي بدورها تمكنك من تحليل تنسيقك اثناء عمل تطبيقك.يساعدك استخدام هذه الاداة على اكتشاف نقط الضعف في اداء تنسيقك.

يعمل Hierarchy Viewerعبرالسماح لك باختيار اجرائيات قيد العمل على جهاز موصول او على المحاكي, ومن ثم يعرض لك شجرة التنسيقlayout tree. الاشارات الضوئية على كل كتلة تمثل اداء قياساتها, تنسيقها ورسمها, وتساعدك في اكتشاف بعض نقاط الضعف المحتملة.

على سبيل المثال, الصورة رقم 1 عبارة عن تنسيق يستخدم بمثابة عنصر ضمن listView.يظهر هذا التنسيق صورة صغيرة على اليسار ووعنصرين متجاورين نصيين على اليمين.

من المهم جدا – فيما يخص التنسيقات التي يجري القيام ب inflated لها عدة مرات (كما في المثال التالي)- ان تتم امثلتها لان فوائد الاداء هنا سوف تتضاعف(نتيجة تكرار العملية).

الشكل 1 : شكل لتنسيق يشكل عنصر ضمن ListView

الشكل 1 : شكل لتنسيق يشكل عنصر ضمن ListView

تتوافر اداة hierarchyviewer  ضمن <sdk>/tools/.

عند فتح هذه الاداة, سوف تظهر Hierarchy Viewer لقائمة من الاجهزة المتاحة ومكوناتها التي تعمل.

انقر على Load View Hierarchy لتستعرض هرمية التنسيقات للعنصر الذي تم اختياره.

على سبيل المثال, الشكل 2 , يبين التنسيق الخاص بعنصر القائمة الذي تم توضيحه في الشكل 1.

الشكل 2 : هرمية التنسيق للعنصر في الشكل 1 , باستخدام مستنسخات متعششة من LinearLayout

الشكل 2 : هرمية التنسيق للعنصر في الشكل 1 , باستخدام مستنسخات متعششة من LinearLayout

الشكل3 : بالنقر على عقدة من الهرمية , سوف يظهر لنا ارقام تدل على  الاداء.

الشكل3 : بالنقر على عقدة من الهرمية , سوف يظهر لنا ارقام تدل على الاداء.

في الشكل 2, بإمكانك ان ترى 3 مستويات من الهرمية مع مشاكل في محاذاة وتنسيق العناصر النصية.

بالنقر على هذه العناصر تظهر لنا الاوقات التي استهلكتها في كل مرحلة من مراحل الاجرائية (الشكل 3).

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

الاوقات اللازمة للقيام ب rendering لكامل عنصر القائمة ضمن التنسيق هي التالي :

  • Measure: 0.977ms
  • Layout: 0.167ms
  • Draw: 2.717ms

تنقيح تنسيقك Revise Your Layout

بما ان اداء التنسيق اعلاه يبين لنا انحطاطا يعزى إلى التنسيقات LinearLayout المتعششة, قد يتحسن الاداء عبر القيام بتسطيح flattening التنسيق ( أي جعله سطحيا واقل عمقا واعرض , وهذا افضل من كونه ضيق واعمق).

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

وسيظهر استكشاف التنسيق عبر الاداة بالشكل ادناه.

الشكل 4 : التنسيق الهرمي للشكل 1 , باستخدام التنسيق النسبي.

الشكل 4 : التنسيق الهرمي للشكل 1 , باستخدام التنسيق النسبي.

اوقات الrendering  الجديدة هي التالية :

  • Measure: 0.598ms
  • Layout: 0.110ms
  • Draw: 2.146ms

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

تعزى هذه الفروقات في الوقت إلى استخدام layout_weight ضمن التنسيق الخطي LinearLayout, والتي بدورها تبطى من سرعة القياس.

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

وإلى لقاء قريب في درس لاحق

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

Advertisements

, , , , , , , ,

  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 مدونون معجبون بهذه: