07-11-2017, 12:23 AM
تمهيد :
اذا كنت قد استخدمت برامج تصميم من قبل مثلا برامج شركة ادوبي فهي تعمل بنظام الطبقات كثيرا ولدينا برامج مثل برامج عمل تصميم تجربة المستخدم و واجهة المستخدم كلها تشترك في شيء و هو ان تقسيم الواجهة الى عدة اقسام هو أمر مهم جدا و ليس فقط شيء استثنائي و يمكن ان نرى هذا في بيئات تطوير مثل اندرويد ستوديو الذي يستخدم نظام التخطيطات Layouts بشكل أساسي في كل عمل و لهذا السبب نجد ان دلفي توفر لنا مكونات عديدة و أنواع عديدة من التخطيطات و التي سنلقي نظرة عليها اليوم و التي كلها موجودة على فايرمونكي فقط
من باب المزاح : الإصدار 3 من أندرويد ستوديو و الذي هو اخر اصدار صدر قبل أسبوع فقط بعد ان كان متاح بشكل عرض فقط هو أول إصدار جلب تخطيط جديد يسمى Constraint Layout حيث أصبح الان بإمكانهم وضع المكونات في النموذج بحرية . بالنسبة لنا نحن مبرمجي الدلفي منذ متى و هذا الأمر موجود ....
ماهو التخطيط Layout
التخطيط Layout هو حاوية لمكونات رسومية أخرى نستخدمها لتقسيم الواجهة الرسومية للمشروع لكي تكون اكثر تنظيما بالنسبة للمبرمج و أكثر راحة بالنسبة للمستخدم و هي فعالة جدا في حال اردت عمل واجهات مستخدم معقدة و هي مشتقة من Tcontrol الخاصة بالفايرمونكي و بالتالي توفر لك أهم الخصائص مثل الأبعاد والحجم و توفر لنا خاصية التحكم في مجموعة مكونات ككيان واحد
أنواع التخطيطات في الفايرمونكي :
![[صورة: image.png]](https://image.ibb.co/ft1xdG/image.png)
Tlayout :
حاوية بسيطة غير ظاهرة اثناء التشغيل ليس لديها شكل فعليا بل هي مثل الطبقة الشفافة تستطيع ان تضع فيها المكونات و التحكم فيها على شكل كيان واحد و لقد قمت بهذا المثال يشرح كيفية استخدام تخطيط داخل تخطيط و داخلهم مكونات لعمل دائرة مكونات بدون كتابة سطر واحد و العديد من الأفكار الأخرى مثلا التحكم في خاصية ظهور مجموعة مكونات و اخفائها مرة واحدة بدل إخفائها واحد بواحد
![[صورة: image.png]](https://preview.ibb.co/jV1Ksb/image.png)
TscaledLayout :
هذا التخطيط يعطيك إمكانية اعاة تحجيم مجموعة المكونات داخله و كما يوفر لك إمكانية العودة الى الحجم الأصلي عن طرق خاصية original width و Original Height وستلاحظ قريبا انه مع استخدام التخطيط البسيط عند تغير تحجيم التخطيط فان المكونات داخله لا تتاثر
TscrollBox :
هذا التخطيط يوفر لك ميزة رائعة وهي إمكانية نقل المكونات الأبناء أي التي بداخله في مساحة غير محددة الى الأسفل و إلى اليمين و اذا اردت الانتقال في جهة واحدة فقط اما افقيا او عموديا يوجد مكونات آخران هما TvertScrollBox و thorzScrollBox و لكن انتبه عندما تريد المحاذاة مثلا الى الأسفل او اليمين فكر قليلا بما ان المساحة غير محدودة و يمكنك نقل المكونات بحرية فهل تظن انه يمكن القيام بهذا بطريقة صحيحة ؟ لا, حيث اذا جربت المحاذاة سيتم حساب الاحداثيات اثناء التصميم و ليس اثناء التشغيل
![[صورة: image.png]](https://image.ibb.co/bY5ZQw/image.png)
ملاحظة : في حال اردت ان تكون مساحة التحجيم محدودة أي نقل المكونات ليس بحرية استخدم مكون TFramedScrollBox و هو ما ينصح به أيضا خاصة ان الهواتف ذات حجم شاشة صغير لذلك يجب ان تعتاد على استخدام هذه المكونات الان
تخطيطات بترتيبات محددة: أسف أصبحت الجمل قليلا مزعجة خاصة الترجمة الحرفية لكن لا بأس في هذا الجزء سنتحدث عن تخطيطات ذات قيم محددة مسبقا و هذا القيم يمكن اعتبارها شروط لوضع المكونات في مكانها الصحيح
TflowLayout :
هذا التخطيط يفرض عليك ان كل المكونات الأبناء تكون مثل الفقرة فلو نعتبر ان عرض هذا التخطيط هو 20 و قمت بوضع أول مكون وعرضه 10 سيكون في السطر الأول و اذا اضفت مكون عرضه هو 5 سيبقى موازيا له في السطر الأول و اذا اضفت مكون ثالث بعرض 6 مثلا فسيذهب للسطر الثاني و هكذا و اذا لم تفهم جرب مثلا مكون ثالث عرضه هو 2 فقط و سترى انه سيبقى في السطر الأول . على العموم هذه فكرة هذا التخطيط إلى انه يوفر خصائص أخرى كثيرة و هذه الصورة كفيلة بشرح الخاصية الأساسية للمكون
![[صورة: Flozlqyout.png]](https://image.ibb.co/fyGkXb/Flozlqyout.png)
و يوجد مكون تحته مباشرة في القائمة و هو FlowLayoutBreak و هو يقوم بإعطاء قيم جديدة او قواعد جديدة لعملية ترتيب المكونات حيث عندما تقوم بوضعه أي مكون يأتي بعده سيخضع فقط للقواعد الجديدة
TGridLayout :
هذا التخطيط يقوم بترتيب العناصر داخل شبكة حيث ان كل مكون ابن سيخضع لرقابة صارمة و لا استثناءات فهنا كل الأبناء سواسية و لديهم نفس العرض و نفس الارتفاع و الذي يمكن تغييره بالطبع و توجد خاصية إضافية و هي الاتجاه اما عمودي او افقي لكن يمكنك تجاوز تلك القواعد و الحصول على استثناء بطريقة غير شرعية و هذا عن طريق استخدام خاصية margin للمكون الابن
TGridPanelLayout :
هذا اخر تخطيط معنا اليوم و اذا كنت من متسخدمي دلفي لسطح المكتب ربما تعرفت على الاسم ) أقصد مكون TGridPanel ( و هو هنا يقوم بنفس الشيء أيضا حيث يقوم هذا المكون بترتيب العناصر داخل شبكة و هنا تعود لنا إمكانية التحكم في حجم المكون الابن على عكس المكون السابق وتستطيع أيضا ان تجعل مكون واحد يأخذ مساحة خلية واحدة او عدة خلايا
اذا كنت قد استخدمت برامج تصميم من قبل مثلا برامج شركة ادوبي فهي تعمل بنظام الطبقات كثيرا ولدينا برامج مثل برامج عمل تصميم تجربة المستخدم و واجهة المستخدم كلها تشترك في شيء و هو ان تقسيم الواجهة الى عدة اقسام هو أمر مهم جدا و ليس فقط شيء استثنائي و يمكن ان نرى هذا في بيئات تطوير مثل اندرويد ستوديو الذي يستخدم نظام التخطيطات Layouts بشكل أساسي في كل عمل و لهذا السبب نجد ان دلفي توفر لنا مكونات عديدة و أنواع عديدة من التخطيطات و التي سنلقي نظرة عليها اليوم و التي كلها موجودة على فايرمونكي فقط
من باب المزاح : الإصدار 3 من أندرويد ستوديو و الذي هو اخر اصدار صدر قبل أسبوع فقط بعد ان كان متاح بشكل عرض فقط هو أول إصدار جلب تخطيط جديد يسمى Constraint Layout حيث أصبح الان بإمكانهم وضع المكونات في النموذج بحرية . بالنسبة لنا نحن مبرمجي الدلفي منذ متى و هذا الأمر موجود ....
ماهو التخطيط Layout
التخطيط Layout هو حاوية لمكونات رسومية أخرى نستخدمها لتقسيم الواجهة الرسومية للمشروع لكي تكون اكثر تنظيما بالنسبة للمبرمج و أكثر راحة بالنسبة للمستخدم و هي فعالة جدا في حال اردت عمل واجهات مستخدم معقدة و هي مشتقة من Tcontrol الخاصة بالفايرمونكي و بالتالي توفر لك أهم الخصائص مثل الأبعاد والحجم و توفر لنا خاصية التحكم في مجموعة مكونات ككيان واحد
أنواع التخطيطات في الفايرمونكي :
![[صورة: image.png]](https://image.ibb.co/ft1xdG/image.png)
Tlayout :
حاوية بسيطة غير ظاهرة اثناء التشغيل ليس لديها شكل فعليا بل هي مثل الطبقة الشفافة تستطيع ان تضع فيها المكونات و التحكم فيها على شكل كيان واحد و لقد قمت بهذا المثال يشرح كيفية استخدام تخطيط داخل تخطيط و داخلهم مكونات لعمل دائرة مكونات بدون كتابة سطر واحد و العديد من الأفكار الأخرى مثلا التحكم في خاصية ظهور مجموعة مكونات و اخفائها مرة واحدة بدل إخفائها واحد بواحد
![[صورة: image.png]](https://preview.ibb.co/jV1Ksb/image.png)
TscaledLayout :
هذا التخطيط يعطيك إمكانية اعاة تحجيم مجموعة المكونات داخله و كما يوفر لك إمكانية العودة الى الحجم الأصلي عن طرق خاصية original width و Original Height وستلاحظ قريبا انه مع استخدام التخطيط البسيط عند تغير تحجيم التخطيط فان المكونات داخله لا تتاثر
TscrollBox :
هذا التخطيط يوفر لك ميزة رائعة وهي إمكانية نقل المكونات الأبناء أي التي بداخله في مساحة غير محددة الى الأسفل و إلى اليمين و اذا اردت الانتقال في جهة واحدة فقط اما افقيا او عموديا يوجد مكونات آخران هما TvertScrollBox و thorzScrollBox و لكن انتبه عندما تريد المحاذاة مثلا الى الأسفل او اليمين فكر قليلا بما ان المساحة غير محدودة و يمكنك نقل المكونات بحرية فهل تظن انه يمكن القيام بهذا بطريقة صحيحة ؟ لا, حيث اذا جربت المحاذاة سيتم حساب الاحداثيات اثناء التصميم و ليس اثناء التشغيل
![[صورة: image.png]](https://image.ibb.co/bY5ZQw/image.png)
ملاحظة : في حال اردت ان تكون مساحة التحجيم محدودة أي نقل المكونات ليس بحرية استخدم مكون TFramedScrollBox و هو ما ينصح به أيضا خاصة ان الهواتف ذات حجم شاشة صغير لذلك يجب ان تعتاد على استخدام هذه المكونات الان
تخطيطات بترتيبات محددة: أسف أصبحت الجمل قليلا مزعجة خاصة الترجمة الحرفية لكن لا بأس في هذا الجزء سنتحدث عن تخطيطات ذات قيم محددة مسبقا و هذا القيم يمكن اعتبارها شروط لوضع المكونات في مكانها الصحيح
TflowLayout :
هذا التخطيط يفرض عليك ان كل المكونات الأبناء تكون مثل الفقرة فلو نعتبر ان عرض هذا التخطيط هو 20 و قمت بوضع أول مكون وعرضه 10 سيكون في السطر الأول و اذا اضفت مكون عرضه هو 5 سيبقى موازيا له في السطر الأول و اذا اضفت مكون ثالث بعرض 6 مثلا فسيذهب للسطر الثاني و هكذا و اذا لم تفهم جرب مثلا مكون ثالث عرضه هو 2 فقط و سترى انه سيبقى في السطر الأول . على العموم هذه فكرة هذا التخطيط إلى انه يوفر خصائص أخرى كثيرة و هذه الصورة كفيلة بشرح الخاصية الأساسية للمكون
![[صورة: Flozlqyout.png]](https://image.ibb.co/fyGkXb/Flozlqyout.png)
و يوجد مكون تحته مباشرة في القائمة و هو FlowLayoutBreak و هو يقوم بإعطاء قيم جديدة او قواعد جديدة لعملية ترتيب المكونات حيث عندما تقوم بوضعه أي مكون يأتي بعده سيخضع فقط للقواعد الجديدة
TGridLayout :
هذا التخطيط يقوم بترتيب العناصر داخل شبكة حيث ان كل مكون ابن سيخضع لرقابة صارمة و لا استثناءات فهنا كل الأبناء سواسية و لديهم نفس العرض و نفس الارتفاع و الذي يمكن تغييره بالطبع و توجد خاصية إضافية و هي الاتجاه اما عمودي او افقي لكن يمكنك تجاوز تلك القواعد و الحصول على استثناء بطريقة غير شرعية و هذا عن طريق استخدام خاصية margin للمكون الابن
TGridPanelLayout :
هذا اخر تخطيط معنا اليوم و اذا كنت من متسخدمي دلفي لسطح المكتب ربما تعرفت على الاسم ) أقصد مكون TGridPanel ( و هو هنا يقوم بنفس الشيء أيضا حيث يقوم هذا المكون بترتيب العناصر داخل شبكة و هنا تعود لنا إمكانية التحكم في حجم المكون الابن على عكس المكون السابق وتستطيع أيضا ان تجعل مكون واحد يأخذ مساحة خلية واحدة او عدة خلايا


![[-]](https://delphi4arab.net/forum/D4A2020/collapse.png)