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