عرض مشاركة واحدة
  #1  
قديم 05-28-2021, 03:30 AM
الصورة الرمزية الادارة كريم
الادارة كريم 
مشرف سابق
 
تاريخ التسجيل: May 2021
الدولة: مصر
المشاركات: 397
معدل تقييم المستوى: 24
الادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to behold


افتراضي تعرف على مكونات الـ Auto Layout

 

الان وبعد اخدنا لفكرة عامة عن الـ Auto Resizing

حان الوقت الانتقال لموضوع الـ Auto Layout كما ذكرت سابقا الـ Auto Layout تم اضافته منذ 2012 وتحديدا عند الإعلان عن الـ iphone 5 بحجم شاشة مختلف عن الـ iphone 4
الـ Auto Layout سبب في نقلة نوعيه كبيره وفي تسهيل على المطورين إضافة القيود بحيث اصبح بإمكانهم وضع قيود معقده وبسهولة قبل أن اتطرق لاهم قوانينه عند فهمها سوف تسهلك التعامل معاه سوف ابدا بشرح اهم النقاط
بدايتنا لنفهم معنى الرموز والخيارات
في الـ storyboard سوف تجد عدة ايقونات في اسفل الصفحة

الايقونة الأولى :


عباره عن خطين عاموديه وفي المنتصف علامة مثلث يطلق عليها resolve auto layout issues ومن اسمها وظيفتها حل مشاكل الـ Auto Layout
الخيارات الموجودة كما في الصورة التالية :


بداية سوف تلاحظ بأنه الخيارات مقسمه لقسمين
  • القسم الأول: selected views وتعني العناصر المحددة سوف يتم تنفيذ عليها أي امر تختاره من القائمة
  • القسم الثاني: All views in view controller ومعناها جميع العناصر الموجودة سوف يتم تطبيق عليها أي امر تختاره
الخيارات هيا :
Update constraints ومعناها تحديث القيود تستخدم عندما تقوم بوضع قيود على العنصر ومن ثم تغير من حجمه او موقعه سوف تجد بأن الخطوط تغيرت من الأزرق الى البرتقالي اذا اردت أن تحدث القيود تقوم بالضغط على هذا الخيار
في حال أردت أن تعيد العنصر للقيود السابقة تضغط على الايقونة الأخيرة الي عباره عن علامة سهم بشكل دائرة Update Frames او تقوم بالتراجع بالضغط على cmd + z
نعود للخيارات
سوف تجد خيارين
  • Add missing constraints
  • Reset to suggested constraints
كلاهما يقومان بإضافة قيود مقترحه الأول يضيف قيود الناقصة او يضيف جميع القيود في حال لم تضغط أي قيود والثاني يقوم بإضافة او تغير القيود الى قيود جديدة
وظيفتهم مشابهه بشكل كبير وكلهما لا يعتمد عليهم غالبا سوف يضيف قيود غير صحيحه او غير الذي تريده أحيانا تكون استخدام هذه الخيارات مفيدة وتسرع العمل
بشرط أن تقوم بتعديل القيود بشكل يدوي بمعنى تحذف القيد الخاطئ وتضيف قيد جديد في اغلب الأوقات لا يتم استخدامهم لانه من الأفضل أن تضيف القيود بنفسك وحسب رغبتك

الخيار الأخير هو Clear constraints
ووظيفته هو حذف جميع القيود يستخدم في حال لم تعلم ماهي المشكلة وتريد إعادة إضافة جميع القيود من جديد سوا للعنصر المحدد او لجميع العناصر
وأيضا يستخدم في حال اردت إضافة Auto Resizing لانه كما ذكرت سابقا يجب إزالة جميع القيود للعنصر لاستخدام الـ Auto Resizing
ولكن العكس غير صحيح في حال استخدمت الـ Auto Resizing تستطيع إضافة الـ Auto Layout وسوف يقوم بتجاهل الـ Auto Resizing

الايقونة الثانية :


عباره عن خطين عاموديه وبينهم مربع في المنتصف يطلق عليها Add New Constraints هذه اهم ايقونة ومنها تضيف القيود
الخيارات الموجودة كما في الصورة التالية :

  1. إضافة قيد لفوق Top
  2. إضافة قيد لليمين Trailing
  3. إضافة قيد للأسفل Bottom
  4. إضافة قيد لليسار Leading
  5. تثبيت العرض Width
  6. تثبيت الارتفاع Height
  7. جعل عنصرين محدده أو اكثر بنفس العرض Equal Widths
  8. جعل عنصرين محدده أو اكثر بنفس الإرتفاع Equal Heights
  9. جعل العنصر يكبر او يصغر بنسبه معينه Aspect Ratio
  10. إضافة القيود بالضغط على زر Add Constraints او تستطيع الضغط على زر الرجوع في الكيبورد لإضافتهم بدون الحاجة للضغط على هذا الزر

هل تلاحظ السهم عند الخيارات 1,2,3,4؟
هذا السهم سوف تحتاج الى استخدامه لتحديد هل تريد أن يكون القيد مرتبط بأي عنصر هل هو بالعنصر الأول او الثاني ؟
عند عدم وجود عناصر أخرى سوف يكون هناك خيارين الأول ربطه بالـ view والأخر Save Area في اغلب الاحول يتوجب عليك ربطه بالـ Save Area
لانه مثلا اذا كان هناك label لا تريد أنه يكون الـ label في فوق شريط الساعة او فوق النوتش في الـ iPhone X ولكن عند إضافة صورة او خريطة الأفضل
هو ربطه بالـ View بحيث تغطي جميع الشاشة
هذه صورة للخيارات الذي سوف تظهر اعتمادا على العناصر الموجودة في الصفحة
كما تلاحظ هناك عنصر Label محتواه hi there ظاهر ضمن الخيارت والسبب هو لانه العنصر الحالي اسفل عنصر الـ Lable

الايقونة الثالثه :


عبراه عن مستطيلين فوق بعض يطلق عليه Align وتعني اصطفاف
الخيارات الموجودة كما في الصورة التالية :

القسم هذا لا يستخدم بكثره فيه غير خيارين وهما
  • Horizontally in Container
  • Vertically in Container
تفعيلهم مع بعض سوف يجعل العنصر في منتصف الصفحة
بقية الخيارات لا تستخدم غالبا لكن فكرتها التالي يتوجب عليك تحديد عنصرين على الأقل عنصر واحد على الأقل يجب ان يحتوي على قيود مسبقا
العنصر الاخر يجب ان يكون هناك قد Top بينه وبين العنصر السابق (في حالة اردت استخدام Leading/ Trailing edge)
ومن ثم تستطيع اختيار أي خيار من الخيارات التي في الاعلى كمثال اذا اخترت Leading Edges سوف يجعل العنصرين محاذاتهم من اليسار لليمين

تبقى ٣ خيارات
  • Horizontal Center
  • Vertical Center
  • Frist Baselines
الخيارات هذه تستخدم لتوسيط عنصر فوق عنصر اخر
مثلا عندك label وأيضا view تريد جعل الـ label في منتصف الـ view فهنا سوف تفعل الخيارين
  • Horizontal Center
  • Vertical Center
ولكن اذا اردت جعل الـ label في بداية حافة الـ view بمعنى اخر جعله فوقه تماماً فهنا سوف تستخدم
  • Frist Baselines

الايقونة الرابعه :


عباره عن مربع وبداخلها سهم الى الأسفل يطلق عليها Embed In ووظيفتها إضافة العناصر المحددة الى عنصر اخر
الخيارات الموجودة كما في الصورة التالية :

اهم الخيارات هيا
  • View ( سيتم شرحه لاحقاً)
  • StackView ( سيتم شرحه لاحقاً)
  • وأيضا هناك الـ Scroll View ووظيفته إضافة شريط تمرير وعناصر مختلفة (لن أذكره في هذا الدرس)


الموضوع الأصلي : تعرف على مكونات الـ Auto Layout || الكاتب : الادارة كريم || المصدر : منتدى مجمع التطوير

 

رد مع اقتباس