مقدمة للتصميم التكيفي

Arabic (العربية/عربي) translation by osamagaradh (you can also view the original English article)

تدفع شركة Apple المطورين لإنشاء تطبيقات iOS عالمية لبعض الوقت الآن. في WWDC 12 ، تم إصدار Layout اتوماتيكي لنظام التشغيل iOS وتم إدخال التحسينات عليه في نظام التشغيل iOS 7. والآن مع نظام التشغيل iOS 8 ، تم تقديم تصميم تكيفي ، والذي يتضمن العديد من واجهات برمجة التطبيقات الجديدة وتعزيزات مصمم واجهة لتعزيز تطوير الثنائيات العالمية.

في هذا البرنامج التعليمي ، سننظر في ماذا يعني التصميم التكييفي بالضبط وكيفية استخدام بعض مفاهيمه. في نهاية البرنامج التعليمي ، ستتمكن من استخدام التصميم التكييفي لإنشاء تطبيقات عالمية باستخدام سير عمل بديهي. سنستخدم فصول الحجم الجديدة لإنشاء تطبيق خيالي لمتجر كمبيوتر يعمل على جميع الأجهزة.

1. ما هو التصميم التكيفي؟

يشمل التصميم التكيفي العديد من الأفكار والتقنيات الجديدة بدلاً من كونها واجهة برمجة تطبيقات فريدة. تشتمل بعض مكونات التصميم التكيفي على مجموعات السمة وفئات الحجم والخطوط التكيفية والتنسيق التلقائي وغير ذلك. في جوهرها ، يوجد تصميم تكيفي لمساعدة المطورين في إنشاء تطبيقات عالمية ومحددة بسهولة.

إذا كنت تقوم بتطوير تطبيقات iOS لعدد من السنوات ، فمن المحتمل أن تكون قد أدركت على الفور السبب وراء كون التصميم التكييفي مفيدًا. تتفكك أقنعة Autoresizing بسرعة ، ويمكن أن يكون تتبع التوجيهات أمرًا شاقًا ، كما أن تطوير مسارات شفرة مختلفة تعتمد على نوع الجهاز وليس قابلاً للتحجيم. يهدف التصميم التكيفي إلى معالجة كل هذه القضايا.

الآن بعد أن حددنا التصميم التكييفي ولماذا يجب أن نستخدمه ، قم بتنزيل نموذج المشروع للبدء.

2. فئات الحجم

فئات الحجم هي ميزة الشاشة الرئيسية للتصميم التكييفي. يسمح لك استخدامهم بإزالة التعليمة البرمجية والمنطق الذي تناول عدة أحجام للشاشات ,اتجاهات أو أجهزة محددة. كما أنه يجعل من السهل امتلاك واجهة واحدة فقط لجميع الأجهزة المتاحة.

هناك نوعان من فئات الحجم ، مدمجة ومنتظمة. يمكن تمثيل كل فئة من فئات الحجم أفقيًا وعموديًا ، ويتم تعيين فئة حجم لكل جهاز على كلا الاتجاهين. يمثل الحجم العادي كمية "كبيرة" من الممتلكات المعروضة على الشاشة ، مثل جهاز iPad. كما يتم تضمين نماذج الواجهة التي توفر وهم الفراغ الزائد ، مثل مشاهدات التمرير على جهاز iPhone.

من ناحية أخرى ، يشير حجم الشاشة "المضغوط" إلى مقدار أصغر من المساحة المتاحة. ستتناسب أجهزة iPhone أو iPod Touch بشكل عام مع هذه الفئة. ولكن هذا بالتأكيد ليس قاعدة. على سبيل المثال ، يدعم iPhone 6 Plus فئة الحجم العادي أفقيًا. يسرد الجدول التالي أجهزة iOS وفئة حجومها المعنية:

	عمودياً	أفقياً
صورة اي فون	منتظم	مدمج
اي فون افقي	مدمج	مدمج
اي فون 6+ افقي	مدمج	منتظم
صورة اي باد	منتظم	منتظم
المشهد لآي باد	منتظم	منتظم

الخطوة 1: اختيار فئة حجم في باني واجهة

افتح Main.storyboard داخل المشروع. ستلاحظ أن اللوحة على شكل مستطيل. في حين أن هذا التنافر في البداية ، هو في الواقع عرض مكون أساسي للتصميم التكيفي. بالنظر إلى الجزء السفلي من أداة إنشاء الواجهة ، ستلاحظ زرًا يقول wAny hAny.

هذا يعني أي عرض ، أي ارتفاع ، مما يشير إلى أن أي تغييرات على واجهة المستخدم هنا تنطبق على كل فئة من فئات الحجم. إذا قمت بالنقر فوق الزر ، تظهر شبكة تسمح لك بالتبديل بين فئات الحجم المختلفة:

في المثال أعلاه ، عرض مضغوط | يتم تحديد ارتفاع مضغوط وهناك نقطة خضراء في الشبكة الزرقاء. توضح النقطة الخضراء فئات الحجم التي يتم تمثيلها. في هذه الحالة ، لا تسري التغييرات إلا على أجهزة iPhones مقاس 3.5 و 4 و 4.7 بوصة في المناظر الطبيعية.

لاحظ أن هناك اختلافًا في الصياغة ، حيث يستخدم Interface Builder مصطلحات العرض والارتفاع بينما تستخدم فئات الحجم المصطلحات الأفقية والرأسية. العرض يتوافق مع الأفقي والطول يتوافق مع الرأسي.

إذا قمت بتغيير فئة الحجم المحددة حاليًا ، فتأكد من التبديل مرة أخرى إلى أي عرض | أي ارتفاع.

الخطوة 2: إضافة صورة

اسحب عرض صورة إلى لوحة تحكم شاشة العرض من مكتبة الاهداف. باستخدام Size Inspector ، قم بتعيين موضع X إلى 0 نقطة وموضعها Y إلى 72 نقطة. اضبط العرض على 600 نقطة والارتفاع إلى 218 نقطة. افتح سمات المراقب وقم بتغيير وضع العرض إلى مظهر مناسب وصورة إلى "Laptop". يجب أن تبدو لوحة الرسم كالصورة أدناه:

الخطوة 3: إضافة تسمية

افتح "مكتبة الاهداف" مرة أخرى واسحب تسمية إلى اللوحة القماشية. افتح "مراقب الحجم" وقم بتعيين موضع العلامة X إلى 16 نقطة وموقعها ال Y إلى 312 نقطة. بالنسبة للحجم ، حدد عرضه إلى 568 نقطة وارتفاعه إلى 242 نقطة.

في Attributes Inspector ، قم بإجراء التغييرات التالية:

ضبط النص على "كمبيوتر محمول فضي"
تغيير حجم الخط إلى نظام 100.0 نقطة
ضبط المحاذاة إلى المركز
اضبط الخطوط على 0

الخطوة 4: إضافة القيود

الآن سنضيف قيودًا على الملصق وعرض الصورة. في الجزء السفلي من أداة إنشاء الواجهة ، انقر على إعادة التعيين على القيود المقترحة ضمن القسم "جميع طرق العرض في عرض المراقب المالي". إذا كان الخيار غير نشط ، فتأكد من تحديد أحد طرق العرض في اللوحة.

نظرًا لأن عرض الصورة له نفس الخلفية البيضاء كعرضه المتضمن ، فسنعمل على تغيير لون خلفية العرض لتسهيل التمييز بين الاثنين. حدد عرض من مخطط المستند وتغيير لون الخلفية إلى لون خلفية عرض جدول المجموعة.

الخطوة 5: البناء والتشغيل

في الجزء العلوي من Xcode ، حدد iPad Retina لاستخدامه في iOS Simulator. إنشاء التطبيق وتشغيله عن طريق الضغط على Command + R. يبدو أن التطبيق يبدو جيدًا لجهاز iPad ، ولكننا نريد التأكد من عرضه بشكل صحيح على كل جهاز.

3. معاينة حية

قد يكون إنشاء تطبيقك وتشغيله لمجرد رؤية سلوك واجهة المستخدم بمثابة مهمة شاقة. لحسن الحظ ، أضاف Xcode 6 القدرة على الحصول على عرض مباشر لواجهة المستخدم الخاصة بك على أي جهاز في أي اتجاه. ويساعدنا ذلك في حل أي مشاكل في التخطيط التلقائي أسرع بكثير من تشغيل التطبيق في iOS Simulator في كل مرة.

الخطوة 1: تمكين مساعد المعاينة

في الجزء العلوي من Xcode ، انقر فوق زر محرر المساعد.

هذا ينقسم محرر Xcode ل جزأين. في الجزء الأيسر ، حدد تلقائي> معاينة> Main.storyboard في شريط الانتقال.

الخطوة 2: إضافة أجهزة للمعاينة

يعرض Interface Builder الآن معاينة مباشرة لواجهة المستخدم على iPhone 4 بوصة. كما هو متوقع ، تعد واجهة المستخدم أقل من مثالية على iPhone. إذا لم تكن ترى أي شيء في المعاينة ، فانقر على وحدة التحكم في العرض في الجزء الأيمن لتحديثه.

في الجزء الأيسر ، يتيح لك النقر على الزر + في الجزء السفلي إضافة المزيد من الأجهزة لمعاينتها. قم بالمضي قدما وقم بإضافة اي باد للمعاينة كذلك.

الخطوة 3: تبديل التوجهات

مرر الماوس فوق ال iPhone فيمحرر المساعد باتجاه الأسفل. على يسار اسم الجهاز ، يوجد زر يقوم بتبديل الاتجاه الحالي. انقر مرة واحدة لتحويل معاينة iPhone إلى الاتجاه الافقي.

مع الاتجاه الافقي ، تبدو واجهة المستخدم أسوأ. لا يتم عرض الصورة على الإطلاق ويكون نص التسمية كبيرًا جدًا.

4. تثبيت قيود فئة محددة الحجم

لإصلاح واجهة المستخدم ، سنضيف بعض القيود الخاصة بفئة حجم معينة. هذه هي ميزة أخرى للتصميم التكيفي. يمكننا أن نخبر واجهة المستخدم كيف يجب أن تضع وجهات نظرها لبعض فئات الحجم ، باستخدام لوحة العمل نفسها. قبل ذلك ، يتطلب هذا عادةً استخدام لوحتي قصص مختلفتين وتحميل الصورة الصحيحة في وقت التشغيل.

الخطوة 1: إضافة قيود قاعدة عرض الصور

سنضيف أولاً قيودًا يجب أن تعمل لمعظم الأجهزة وتنقيتها من هناك. ابدأ بإزالة القيود التي تمت إضافتها في وقت سابق عن طريق النقر فوق أي عرض في لوحة الرسم وتحديد محرر> حل مشاكل التخطيط التلقائي> كافة طرق العرض في متحكم العرض - قيود واضحة.

حدد طريقة عرض الصورة ، وانقر فوق زر Align ، واختر مركز افقي في حاوية ، وانقر فوق Add 1 Constraint.

افتح القيد الذي أضفناه للتو في Size Inspector على اليمين وانقر عليه نقرًا مزدوجًا لتحريره.

يحتوي القيد على مركز superview's يساوي مركز عرض الصورة ، لكننا نريد العكس. انقر فوق العنصر الثاني واختر عكس العنصر الأول والثاني لتصحيح المشكلة.

بعد ذلك ، اضغط على تحكم واسحب من عرض الصورة إلى عرض داخل مخطط المستند على اليسار ، وحدد ارتفاعات محددة. حدد القيد في مراقب الحجم وقم بتغيير مضاعف القيد إلى 0.4. هذا سيجبر ارتفاع عرض الصورة على أن يكون مساويا لارتفاع المنظر العلوي أو على الأقل 40 في المائة منه - أيهما ينتهي بكونه أقصر.

بعد ذلك ، انقر فوق الزر "دبوس" واختر التباعد العلوي والسفلي إلى أقرب جار. بالنسبة إلى التباعد السفلي ، أدخل 18 نقطة. يجب أن يتم تعيين المسافة العلوية مسبقا الى 0 نقطة. تأكد من عدم تحديد قيود للحدود نظرًا لأننا لا نريد الحشو حول العرض. انقر فوق إضافة 2 قيود في الأسفل لإضافة القيود.

انقر نقراً مزدوجاً فوق فراغ القاع في مراقب الحجم لتحريره. تغيير العلاقة إلى أكبر من أو يساوي. لإنهاء قيود عرض الصورة ، يمكنك التحكم والسحب من عرض الصورة إلى التسمية واختيار اطوال متساوية.

يجب أن تبدو قيود طريقة عرض الصورة بالشكل التالي:

الخطوة 2:إضافة قيود قاعدة التسمية

نظرًا للقيود التي تمت إضافتها إلى عرض الصورة ، فإن العلامة لها بالفعل طولها ومسافة رأسية من عرض الصورة المضافة حدد التصنيف وانقر فوق زر Pin لإضافة قيد تباعد رئيسي ، وملاحق ، وعمودي كما هو موضح في الصورة أدناه.

إذا قمت بمعاينة التطبيق الآن في محرر المساعد ، فإن القيود جعلت الأمور أفضل بكثير. ومع ذلك ، لا تزال هناك مشكلة عندما يستخدم التطبيق فئة الحجم الأفقي المدمج كما ترى أدناه (متوسط).

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

الخطوة 3: إضافة قيود أفقية مضغوطة

باستخدام زر تبديل فئة الحجم في الأسفل ، حدد عرض مدمج | ارتفاع مدمج. يتحول الشريط إلى ظل باللون الأزرق للإشارة إلى أنك تقوم حاليًا بتحرير واجهة المستخدم لفئة حجم محددة.

حدد طريقة عرض الصورة ، وافتح مراقب الحجم ، وقم بتحديث الإطار الخاص به كما هو موضح في الصورة أدناه.

بعد ذلك ، حدد التسمية وتحديث الإطار الخاص بها في مراقب الحجم كما هو موضح أدناه.

مع استمرار تحديد التسمية وفحص مراقب الحجم ، حدد قيود التسمية وأزلها بالضغط على Delete. يمكنك تحديد قيود متعددة من خلال الضغط باستمرار على مفتاح Shift. سيؤدي هذا إلى إزالة القيود التي أضفناها حتى الآن ، ولكن فقط لفئة الحجم هذه.

افعل نفس الشيء مع عرض الصورة بتحديدها ، وافتح مراقب الحجم ، وتحديد قيودها ، وضغط Delete. يمكننا الآن إضافة قيود لضمان عرض الصورة ووضع الملصق جنبًا إلى جنب.

لحسن الحظ ، يمكن أن تعرف Xcode هذه القيود بسهولة بالنسبة لنا. باستخدام إما عرض الصورة أو بتحديد التسمية، اختر محرر> حل مشكلات التنسيق التلقائي> جميع المشاهدات في وحدة التحكم في العرض - إعادة التعيين إلى القيود المقترحة.

الخطوة 5: معاينة القيود المحدثة

افتح مراقب الحجم لعرض الصورة. سترى أن هناك العديد من القيود المدرجة ، ولكن هناك بعض اللون الرمادي والبعض الآخر ليس كذلك. يشير هذا إلى القيود التي تنشط لفئة الحجم الحالية.

إذا قمت بالنقر المزدوج على أي منها ، فإن الجزء السفلي يوضح لنا فئات الحجم التي تنشط فيها القيود. توضح الصورة أدناه أنه تم تثبيت القيد على Compact Width | طول مضغوط ومعطل للعرض المنتظم الطول المنتظم. يؤدي النقر فوق الزر x أو + إلى تمكين أو تعطيل القيد لفئة الحجم المحدد.

افتح محرر مساعد المعاينة مرة أخرى وأضف iPhone 3.5 بوصة في الوضع الأفقي إذا لم يكن هناك واحد بالفعل. يمكننا أن نرى أننا حققنا تخطيطًا مختلفًا تمامًا لأجهزة معينة في الاتجاه الأفقي - كل ذلك في لوحة واحدة.

3. نص حي

آخر شيء يجب معالجته هو حجم الخط. في حين أن الإطارات الفعلية لعرض الصورة والتسمية تعمل بشكل جيد ، يمكن أن يصبح الخط مقتطعاً في بعض الأحيان. أضاف التصميم المتكيف خيارات جديدة لمطوري البرامج للتعامل مع هذا النوع من السيناريوهات.

الخطوة 1: تحرير مقياس الخط

حدد التسمية وافتح مراقب السمات على اليمين. تحت Autoshrink ، حدد مقياس الخط الاصغر وتعيينه إلى 0.4.

الخطوة 2: إضافة خطوط فئة محددة الحجم

سيكون تحرير مقياس الخط كافياً لمعظم الحالات. في تطبيقنا ، على الرغم من ذلك ، محتوياته قابلة للقراءة للعرض -فئة حجم الطول المدمج المضغوط صغير ، لكنه ليس مثاليًا. إذا فتحت محرر مساعد المعاينة ، فستلاحظ أن الكلمة "p" في الكلمة "كمبيوتر محمول" تكون على السطر الخاص بها.

مع تحديد التسمية ، انقر فوق الزر + الموجود بجوار الخط في مراقب السمات هذا يفتح قائمة لتحديد فئة حجم لتطبيق خط معين لها. اختر عرض مدمج | طول مدمج.

على غرار القيود النوعية لفئة الحجم ، تمت إضافة خط لفئة الحجم التي اخترناها. تغيير حجم الخط إلى 50 نقطة. الآن ، افتح محرر مساعد المعاينة مرة أخرى وتحقق من أن الخط يبدو مثاليًا على كل جهاز.

القدرة على إضافة خطوط تكيفية قوية بشكل لا يصدق. توطين التطبيقات تافه عندما تكون قادراً على التحكم في حجم الخط بشكل أكثر دقة مع النص الديناميكي.

6. غيرها من تقنيات تصميم التكيف

في حين أن فئات الحجم هي بالتأكيد ميزة رئيسية ، إلا أن هناك العديد من واجهات برمجة تطبيقات التصميم متكيفة وتطورات التي لم أقم بتغطيتها في هذا البرنامج التعليمي. على سبيل المثال ، وحدات تحكم العرض الآن تتوافق مع بروتوكول UITraitEnvironment. وهذا يعني أن وحدات التحكم في العرض لها خاصية traitCollection التي تقوم بتتبع فئة الحجم المعروض حاليًا.

إذا كنت تستمتع بإنشاء واجهات مستخدم في التعليمة البرمجية ، تعطيك خاصية traitCollection نفس الإمكانات مثل فئات الحجرة في "منشئ الواجهة". يمكن إعلامك عند تغير فئة الحجم وإجراء أي تحديثات ضرورية للقيود أو واجهة المستخدم الخاصة بك.

وهناك واجهة برمجة تطبيقات أخرى مفيدة هي UIPopoverController. إذا كنت قد طورت مسبقًا تطبيقًا عالميًا ، فأنا متأكد من أنك رأيت رمزًا كالتالي:

UIViewController *contentVC = //content

if([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad)
{
    UIPopoverController *popVC = [[UIPopoverController alloc]
initWithContentViewController:contentVC];

    [popVC presentPopoverFromBarButtonItem:item
permittedArrowDirections:UIPopoverArrowDirectionAny animated:YES];
}
else
{
    [self presentViewController:contentVC animated:YES completion:nil];
}

بدءًا من iOS 8 ، لم تعد هناك حاجة للتحقق من الجهاز الذي يتم تشغيل التطبيق عليه عند استخدام فئة UIPopoverController. تدعم فئة UIPopoverController الآن iPhone و iPod Touch.

بقدر ما تمتلك الصورة ، لاحظ أن هناك الآن حجم @ 3x. يرجع ذلك إلى شاشة Retina HD الموجودة على iPhone 6 Plus. إذا قمت بفتح ملف Images.xcassets في المشروع ، فستراه تحت أي من مجموعات الصور التي تم توفيرها.

الاستنتاج

من المحتمل أن يكون التصميم المتكيف هو أهم تغيير في تطوير نظام iOS في عدة سنوات. قبل التصميم التكييفي ، لم تكن التطبيقات العالمية قابلة للتطوير بسهولة وقد تكون قابلية التوسع في مثل هذه المشاريع مشكلة. نأمل أن تكون قد تعلمت ما يكفي من هذا البرنامج التعليمي لتفادي تلك المشاكل ودمج التصميم التكييفي في تطبيقاتك الخاصة.