قوانين الـ AutoLayout - أمور إضافية
أمور إضافية :
وصولك لهذه النقطة انجاز ! ، تعلمت الكثير وتستطيع انجاز الكثير ! ولكن هناك أمور إضافية وسوف تساعدك بشكل كبير ! افترض بأنك تريد عمل صفحة Profile
الصفحة دي عباره عن Popup (صفحة تظهر في منتصف صفحة أخرى) هذه الصفحة بما انها صفحة Profile سوف تحتوي على صورة المستخدم
الان ماذا تريد ؟
تريد أن تجعل صفحة الـ Profile تظهر بشكل صحيح في جميع الأجهزة وأيضا حجم الصورة تظهر بشكل مناسب اعتماداً على حجم الشاشة قد يبدو الامر معقداً ولكن الامر اسهل بما تتصور !
سوف نستفيد من ميزة Multiplier ميزة ضمن الـ Auto Layout الفكرة هيا جعل حجم الصورة المستخدم ٣٠٪ من حجم الـ Popup بمعنى حجم الصورة جزء من حجم صفحة الـ Profile
قمت بمحاكات شكل صفحة الـ Profile او ان صح التعبير الـ Popup
بعمل مستطيل طويل باللون الأحمر في منتصف الصفحة واضفت مربع صغير في اعلى الصفحة باللون الأخضر دلاله على صورة المستخدم
الان سوف اضيف القيود للمستطيل الأحمر
شاهد المقطع :
شاهد الصورة المتحركة - انتظر التحميل للمشاهدة
ومن ثم سوف أقوم بإضافة القيود للمستطيل الأخضرلاحظ كيف اضفت قيود العرض والارتفاع وكيف ربطته بالمربع الأحمر ! ومن ثم قمت بتغير القيمة الـ Multiplier من 1الى 0.3 وتمثل الـ 30%
ملاحظة : علقت على زر shift في الكيبورد لإضافة اكثر من قيد الذي اضفتهم هم
- Top
- Equal Height
- Equal Width
- وأخيرا ضغط على Add Missing Constraint
لانه باقي قيد واحد وحقيقة لم يضبط معي الا باستخدام الخيار هذا القيد الناقص وهو Center Vertcally
شاهد المقطع :
شاهد الصورة المتحركة - انتظر التحميل للمشاهدة
اعتقدت وضحت الفكرة الان ، جعلت المربع الأخضر بنفس الارتفاع وبنفس العرض ولكن بنسبة مختلفة وهيا ٣٠٪ من حجمه ! بما يعني اذا صغر حجم المربع الأحمر سوف يصغر المربع الأخضر بنسبة ٣٠٪
ونفس الشي اذا كبر راح يكبر بنسبة ٣٠٪
الخطوة السابقة سببت مشكلة !
وهيا تغيير حجم المربع الاخضر بسبب جعله مساوي لحجم المستطيل الأحمر تغير شكله من مربع الى مستطيل ! الحل هو تغيير نسبة الارتفاع من 30% الى 20% لجعل بشكل مربع بدلاً من المستطيل فكل الذي نحتاجه هو تعديل نسبة الارتفاع وعمل Update Frame
شاهد المقطع :
شاهد الصورة المتحركة - انتظر التحميل للمشاهدة
الان تستطيع مشاهدة النتيجة في جميع الاجهزة وسوف تجدها تظهر بشكل مناسب !
ولكن عند تشغيله في الـ iPhone X سوف تلاحظ وجود مشكلة
هل تستطيع معرفتها وحلها ؟
فقط تحتاج تعدل بعض القيود لجعلها تعمل
سوف اجعل هذه الخطوة تحدي لك لتحلها =)
محتوى الدورة
الكلمات الدليلية
عن الدرس
1 إعجاب |
1 متابع |
0 مشاركة |
1624 مشاهدات |
منذ 5 سنوات |
التعليقات (0)
عرض المزيد.. جديد مقالاتي
لايوجد لديك حساب في عالم البرمجة؟
تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !