قدمت شركة Apple نظام التصميم الجديد في WatchKit في نوفمبر السابق ويعتبر فكرة جديدة تماماً حول تطوير أنظمة iOS و OS X. حيث أنها لا تعتمد على التصميم السريع لكنه أبسط بكير.
سأوضّح في هذا الدرس المزايا والخصائص الأساسية لهذا النظام الجديد كما سأوضّح محدودية هذا النظام أيضاً. طبعاً لن نكتب أيّ شيفرات برمجية في هذا الدرس لأننا سنركّز على آلية عمل هذا النظام. وفي النهاية ستكون قادراً على بناء واجهة تطبيق باستخدام نظام الإطار WatchKit.
ما هو WatchKit ؟
لا تستخدم WatchKit نفس نظام التصميم كما في تطبيقات iOS الطبيعية. لأنها أكثر ذكاء وبساطة. حيث يتوجب عليك في هذه الحالة استخدام storyboards لتصميم واجهات التطبيقات.
عندما كنا نستخدم تقنية storyboards لا تمتلك صلاحيات لتغيير مكان العناصر فقط يمكنك إنشاء تصميم واجهة ثابتة متضمنة المجموعة التي تحتوي على التطبيق. وأيضاً ستنسى موضوع الإحداثيات x و y والإطارات والحدود كل ذلك لأنك تعمل على storyboard . ولتوضيح ذلك سنقوم بإنشاء مثال لتوضيح الفكرة التي نتكلم عنها.
إنشاء أول تطبيق باستخدام WatchKit
الخطوة 1 : إنشاء مشروع
قم بفتح البرنامج Xcode 6.2+ ثم اضغط على create a new project. قم باختيار القالب Single View Application لتتمكن من بداية المشروع عليه. قم بتسميه المشروع WatchKitLayoutDemo ثم اضغط Next لكي تقوم بحفظ المشروع في أي مكان على حاسوبك.
الخطوة 2 : إضافة وجهة WatchKit
يمكنك الآن إضافة واجهة لمشروعك WatchKit من خلال الضغط على File > New > Target ثم اختر Apple Watch الموجودة على اليسارثم اختر WatchKit App ثم اضغط على التالي Next .
يمكنك الآن تشكيل واجهة WatchKit كما في الصورة التالية. ألغي الخيارات Include Notification Scene و Include Glance Scene لأننا سنركز في هذا الدرس على إنشاء تطبيق WatchKit بسيط. ثم اضغط Finish وذلك لإضافة التطبيق WatchKit إلى المشروع.
الخطوة 3: تصفّح واجهة WatchKit
يمكنك ملاحظة بأن برنامج Xcode أضاف وجهتان لمشروعك وذلك لتسهيل العملية لدينا قم برنامج Xcode بإنشاء مجموعة لكل واجهة وتحتوي الملفات الأصلية وملفات أنظمة لكل واجهة.
قم بتوسيع المجموعات في قائمة المشروع على اليسار. وكما في الصورة يمكنك مشاهدة المجموعة باللون الأزرق تحتوي على الملفات الأصلية وملفات أنظمة لإضافات WatchKit والتي ستعمل على iPhone. لا يقوم Apple Watch بتشغيل التطبيق حيث يقوم iPhone بعمل هذه المهمة.
أما المجموعة باللون الأحمر كما في الصورة تحتوي على مجموعة ملفات تطبيق WatchKit مثل ملف storyboard والذي سيتم تخزينه واستخدامه في منصة Apple Watch. تتم هذه العملية لأن الملفات ترسل بصعوبة في كل وقت يقوم المستخدم بفتح التطبيق كما سيتم استهلاك بطارية الهاتف بشكل أكبر.
يعني ذلك بأن واجهة التطبيق ثابتة ولا يمكن تغييرها مع الوقت. كما أنه غير ممكن إضافة وإزالة العناصر. حيث يمكنك فقط إخفاء العناصر من واجهة التطبيق فقط. فمثلاً في حال قمت بإخفاء مجموعة من العناصر من واجهة التطبيق فعندها سيتم تغيير الواجهة لجميع المستخدمين كما سيتم إعادة ترتيب العناصر من جديد.
في هذه الدورة ستتعلم استخدام أقوى التقنيات المستخدمة من WatchKit كما لن تحتاج لكتابة أي كود برمجي. سنركز الآن على استخدام مجموعة WatchKitLayoutDemo WatchKit App والموجودة في ملف storyboard.
استخدام Storyboard
افتح ملف Interface.storyboard. اذا كنت على علم مسبق بلغات Ios أو OS X فحتماً ستكون على معرفة بموضوع storyboards وكما ذكرنا سابقاً بأن الطريقة الوحيدة لإنشاء وتصميم تطبيق WatchKit من خلال استخدام storyboards.
طبعاً التعديل على النوافذ غير مسموح به عند استخدام منصة WatchKit .
كما أن الخاصية WKInterfaceController غير موجودة في WatchKit. وعوضاً عن ذلك فإن WatchKit تقدّم الخاصية WKInterfaceController تلقائياً. وكما تلاحظ بالصورة فإن برنامج Xcode قدم لنا واجهة تحكم مباشرة.
تعرّف منصة العمل WatchKit مدى عناصر واجهة المستخدم والتي يمكنك استخدامها لإنشاء واجهة تطبيق للمستخدم. هذه القائمة لجميع العناصر الذي يجب استخدامهم:
Group
Table
Image
Separator
Button
Switch
Slider
Label
Date
Timer
Map
Menu
Menu Item
لا تحتاج معظم هذه العناصر للشرح إلا أن هناك بعض العناصر يمكن شرحهم مثل group و separator و date و timer و menu. أهم تلك العناصر هي group.
إن قمت باستخدام HTML و CSS لإنشاء موقع ويب. حيث ستكون على معرفة بالوسم <div> حيث يعمل كالمجموعة بجمع عدة عناصر مع بعضها. تحتوي المجموعة على العديد من الخصائص والتي يمكنها التعديل مباشرة في منشىء الواجهة.
الخطوة الأولى: تحديد تصميم للتطبيق
من المهم جداً أن تختار تصميمك قبل البدء وبالتفصيل لأن ذلك سيوفر عليك الكثير من الجهد والوقت. وبنفس الوقت ستدرك بأنك تريد تطوير وبناء تطبيق ذو خصائص رائعة وبسهولة كبيرة.
في هذا الدرس سنقوم بإنشاء مثال وهو تطبيق لفندق حيث ستتمكن من إيجاد جميع الفنادق التي حول موقعك. لقد قمنا بتصميم الشاشة والأساسيات لذلك الفندق. وكما ذكرنا بالمقدمة بأننا لن نكتب أي كود برمجي لكن سنركّز على آلية مل نظام التصميم الجديد.
وطبعاً سأقوم برسم أولي ما يدور في ذهني حول كيفية شكل هذا التطبيق للفندق. سيكون اسم الفندق في أعلى الشاشة وأسفله سيكون عدد النجوم حيث تظهر التقييم لذلك الفندق. ثم سأضيف صورة على طول الشاشة تحتوي في أسفلها على العنوان والأزرار.
الخطوة الثانية: إضافة مجموعة
واجهة controller الآن خالية كما أنه لا يوجد أي مجموعات فيه. وإضافة عناصر جديدة يمكنك السحب والإفلات من Object Library من على يمين Interface Controller. وأيضاً يعتبر Scene Navigator الموجود على اليسار مفيد جداً لفحص العناصر الموضوعة حالياً. يجب عليك أولاً إضافة مجموعة جديدة والتي تسمح بمشاهدة المحتوى عمودياً اذا كان المحتوى لم يلائم الشاشة. اسحب مجموعة من مكتبة الكائنات Object Library وأفلتها في Interface Controller كما في الصورة التالية.
الآن لديك مجموعة في واجهة controller كما يمكنك مشاهدة اللواحق في Attributes Inspector على الجانب الأيمن. سنقوم بشرح هذه الأمور بالتفصيل:
· Layout: يحدد التصميم layout إذا كنت عناصر المجموعات تقع بشكل أفقي أو عمودي. عند إضافة العناصر سيتم تمركز العناصر كما التالي والسابق.
· Insets: تحدّد هذه اللاحقة مكان المجموعة في الجانب الأعلى والسفلي واليمين واليسار.
· Spacing: تحدّد هذه الخاصية المسافة بين العناصر ضمن المجموعة.
· Background: يمكنك إضافة صورة لخلفية المجموعة وأيضاً تحريكها من خلال اسم الصورة.
· Position: تحدّد هذه اللاحقة موضع المجموعة سواء أفقية (يمين ويسار و وسط) أو عمودية (أعلى وأسفل وأوسط).
· Size: تحدّد هذه اللاحقة طول وعرض العنصر. كما يمكنك استخدام ثلاثة قيم لهذه الخاصية وهم Size to Fit Content (مباشرة تقوم على ملائمة العناصر مع المحتوى) وأيضاً Relative to Containe ( تأخذ الحجم الكلي وتدمجه مع القيمة المعرّفة) وأيضاً Fixed .
لاحظ بأن Apple Watch يأتي في حجمين. لذلك يجب عليك استخدام التصميم في كلا الحالتين على الرغم من أن هناك بعض الاختلافات البسيطة. يمكنك أيضاً ضبط اللاحقة من خلال الضغط على إشارة + الموجودة على اليسار ولكن تعمل تلك اللاحقة في حال تشغيل التطبيق على جهاز معين.
لنتابع بناء التصميم الآن. قم بتغيير Group Layout إلى Vertical وذلك يعني بأن المحتوى سيصبح عمودياً عند إضافة المزيد من العناصر. يمكنك أيضاً ضبط التصميم إلى Horizontal ليصبح المحتوى في الوسط Center . وأخيراً سنقوم بتوسيع المجموعة لتلائم عرض الشاشة بالكامل.
الخطوة الثالثة: إضافة تصنيف Label
لقد قمنا بتحديد الخصائص الأساسية للمجموعة الأصلية. والآن سنقوم على إضافة تصنيف للمجموعة. يمكنك فعل ذلك من خلال Object Library حيث يمكنك إضافة تصنيف للمجموعة السابقة. عند اختيار التصنيف عندها ستشاهد بأن العرض لم يلائم الشاشة لذلك سنقوم بتغيير لاحقة العرض الى Relative to Container. ولجعل التصنيف في الوسط قم بتغيير اللاحقة Horizontal إلى Center وأيضاً قم بتغيير اللاحقة Text Alignment إلى Center.
ماذا سيحصل إذا كان اسم الفندق طويل؟ يجب أن نقوم بتوسيع المجموعة عمودياً. ولفعل ذلك يمكنك تغيير اللاحقة Lines إلى 0. وذلك يعني بأن اسم الفندق سيأخذ أكثر من سطراً اذا اضطر الأمر لذلك. يمكنك أيضاً تغيير نص التصنيف لمشاهدة النتيجة بنفسك. ستظهر النتيجة كما في الصورة التالية.
الخطوة الرابعة: إضافة النجوم
أيضاً نريد أن نظهر رتبة الفندق من خلال النجوم. والفكرة هي أن تظهر النجوم تحت اسم الفندق مع عدد النجوم الذي يستحقها. ولفعل ذلك قم بإضافة مجموعة جديدة ضمن المجموعة الأصلية.
أريد أن تظهر 5 نجوم في سطر واحد وأن تكون في المنتصف. وكما ذكرت سابقاً بأننا لا يمكننا إضافة أو إزالة العناصر فقط يمكننا إخفاء العناصر. سأقوم بإضافة خمس صور للنجوم للمجموعة. إذا كان الفندق يستحق أقل من خمس نجوم سيتم إخفاء باقي النجوم.
قم بسحب الصور المرتبّة في المجموعة وقم بضبط العرض لكل نجمة إلى Relative to Container. قم بتغيير multiplier من 1 إلى 0.2 . والسبب لاختيار الرقم 0.2 لأننا في حال أردنا استخدام الخمس صور عندها سنضطر إلى جعل الصور أصغر إلى 20% في عرض المجموعة. قم بتغيير أيضاً الموضع Horizontal إلى Center وستصبح صور النجوم دوماً في المنتصف بغض النظر عن عددهم.
الآن يتوجب علينا اختيار صورة جيدة ليتم وضعها في المجموعة. والآن قم بتغيير اللاحقة Image إلى اسم الصورة وامتدادها star.png كما يجب تغيير الطريقة mode إلى Aspect Fit وذلك للتأكد بأن عنصر ratio مقبول ومسموح.
ستظهر النتيجة مشابهة في الصورة التالية. يمكنك أيضاً تجربة الخاصية Hidden أي إخفاء لأحد الصور في Attributes Inspector ومشاهدة أن الصور دوماً في المنتصف.
الخطوة الخامسة: إضافة صورة الفندق
يمكنك تحميل صور للفنادق من خلال موقع freeimages . كما أنني أريد أن أضيف صورة الفندق لكي أظهر للمستخدم كيف يبدو شكل الفندق. قم بإضافة صورة جديدة من Object Library كما فعلنا مسبقاً مع صور النجوم. قم بتغيير اللاحقة Image إلى الصورة الجديدة التي قمت بتحميلها ثم قم بضبط الطريقة من Mode إلى Aspect Fit.
قم بتغيير الموضع الأفقي Horizontal إلى Center وأيضاً Width إلى Relative to Container. دائماً كن متأكداً بأن الصورة مرفقة ومرتبة ضمن العناصر الرئيسية في المجموعة وذلك من خلال ضبط تسلسل الطبقات في Scene Navigator في الجانب الأيسر. وأيضاً قم بتغيير Height إلى Size to Fit Content حيث سيتم تغيير حجمه بشكل تلقائي معتمداً على أبعاد الصورة.
الخطوة السادسة: إضافة عنوان
كما في الصورة التالية سنقوم بإضافة تصنيف وأيضاً نريد إضافة خريطة لكن أولاً سنضيف تصنيف. قم بسحب التصنيف من Object Library ثم ضعها تحت صورة الخلفية التي أضفناها سابقاً. قم بضبط Lines إلى 0 وأيضاً العرض Width إلى Relative to Container. وقم بتغير النص إلى أي عنوان تريد.
الخطوة السابعة: إضافة الأزرار
يجب أن يحتوي واجهة controller على زرين في الأسفل. أريد أن يكون الزر بنفس عرض الشاشة وبجانب الزر الثاني لأن المجموعة الرئيسية لديها تصميم عمودي وأيضاً نحتاج إضافة مجموعة مرفقة لتلك الأزرار وبموضع أفقي بدلاً من العمودي.
قم بإضافة مجموعة جديدة كما في الصورة التالية ثم قم بإضافة زرين داخل المجموعة. قم بضبط العرض Width إلى Relative to Container ثم قم بضبط multiplier إلى 0.5 ثم قم بتغيير موضع الأزرار إلى عمودي Vertical ثم قم بتغيير المحاذاة إلى Center.
قم بكتابة النص "From $99" داخل الزر الأول مع وضع لون لخلفية الزر باللون الأحمر. ثم قم بكتابة النص "View More" داخل الزر الثاني مع ضبط لون خلفية الزر إلى الأزرق. ستظهر كما بالصورة التالية:
كن متأكداً بأنك اخترت القانون الصحيح واضغط Command-R لأجل تشغيل تطبيق WatchKit .
تحتاج شيء آخر لفتح التطبيق iOS . اختر من iOS Simulator اختر Hardware > External Displays > Apple Watch 42 mm . سيظهر Apple Watch Simulator تالياً في هاتف iPhone .
سأوضّح في هذا الدرس المزايا والخصائص الأساسية لهذا النظام الجديد كما سأوضّح محدودية هذا النظام أيضاً. طبعاً لن نكتب أيّ شيفرات برمجية في هذا الدرس لأننا سنركّز على آلية عمل هذا النظام. وفي النهاية ستكون قادراً على بناء واجهة تطبيق باستخدام نظام الإطار WatchKit.
ما هو WatchKit ؟
لا تستخدم WatchKit نفس نظام التصميم كما في تطبيقات iOS الطبيعية. لأنها أكثر ذكاء وبساطة. حيث يتوجب عليك في هذه الحالة استخدام storyboards لتصميم واجهات التطبيقات.
عندما كنا نستخدم تقنية storyboards لا تمتلك صلاحيات لتغيير مكان العناصر فقط يمكنك إنشاء تصميم واجهة ثابتة متضمنة المجموعة التي تحتوي على التطبيق. وأيضاً ستنسى موضوع الإحداثيات x و y والإطارات والحدود كل ذلك لأنك تعمل على storyboard . ولتوضيح ذلك سنقوم بإنشاء مثال لتوضيح الفكرة التي نتكلم عنها.
إنشاء أول تطبيق باستخدام WatchKit
الخطوة 1 : إنشاء مشروع
قم بفتح البرنامج Xcode 6.2+ ثم اضغط على create a new project. قم باختيار القالب Single View Application لتتمكن من بداية المشروع عليه. قم بتسميه المشروع WatchKitLayoutDemo ثم اضغط Next لكي تقوم بحفظ المشروع في أي مكان على حاسوبك.
الخطوة 2 : إضافة وجهة WatchKit
يمكنك الآن إضافة واجهة لمشروعك WatchKit من خلال الضغط على File > New > Target ثم اختر Apple Watch الموجودة على اليسارثم اختر WatchKit App ثم اضغط على التالي Next .
 |
| التعرّف على نظام التصميم watchkit |
يمكنك الآن تشكيل واجهة WatchKit كما في الصورة التالية. ألغي الخيارات Include Notification Scene و Include Glance Scene لأننا سنركز في هذا الدرس على إنشاء تطبيق WatchKit بسيط. ثم اضغط Finish وذلك لإضافة التطبيق WatchKit إلى المشروع.
 |
| التعرّف على نظام التصميم watchkit |
الخطوة 3: تصفّح واجهة WatchKit
يمكنك ملاحظة بأن برنامج Xcode أضاف وجهتان لمشروعك وذلك لتسهيل العملية لدينا قم برنامج Xcode بإنشاء مجموعة لكل واجهة وتحتوي الملفات الأصلية وملفات أنظمة لكل واجهة.
قم بتوسيع المجموعات في قائمة المشروع على اليسار. وكما في الصورة يمكنك مشاهدة المجموعة باللون الأزرق تحتوي على الملفات الأصلية وملفات أنظمة لإضافات WatchKit والتي ستعمل على iPhone. لا يقوم Apple Watch بتشغيل التطبيق حيث يقوم iPhone بعمل هذه المهمة.
 |
| التعرّف على نظام التصميم watchkit |
أما المجموعة باللون الأحمر كما في الصورة تحتوي على مجموعة ملفات تطبيق WatchKit مثل ملف storyboard والذي سيتم تخزينه واستخدامه في منصة Apple Watch. تتم هذه العملية لأن الملفات ترسل بصعوبة في كل وقت يقوم المستخدم بفتح التطبيق كما سيتم استهلاك بطارية الهاتف بشكل أكبر.
يعني ذلك بأن واجهة التطبيق ثابتة ولا يمكن تغييرها مع الوقت. كما أنه غير ممكن إضافة وإزالة العناصر. حيث يمكنك فقط إخفاء العناصر من واجهة التطبيق فقط. فمثلاً في حال قمت بإخفاء مجموعة من العناصر من واجهة التطبيق فعندها سيتم تغيير الواجهة لجميع المستخدمين كما سيتم إعادة ترتيب العناصر من جديد.
في هذه الدورة ستتعلم استخدام أقوى التقنيات المستخدمة من WatchKit كما لن تحتاج لكتابة أي كود برمجي. سنركز الآن على استخدام مجموعة WatchKitLayoutDemo WatchKit App والموجودة في ملف storyboard.
استخدام Storyboard
افتح ملف Interface.storyboard. اذا كنت على علم مسبق بلغات Ios أو OS X فحتماً ستكون على معرفة بموضوع storyboards وكما ذكرنا سابقاً بأن الطريقة الوحيدة لإنشاء وتصميم تطبيق WatchKit من خلال استخدام storyboards.
طبعاً التعديل على النوافذ غير مسموح به عند استخدام منصة WatchKit .
كما أن الخاصية WKInterfaceController غير موجودة في WatchKit. وعوضاً عن ذلك فإن WatchKit تقدّم الخاصية WKInterfaceController تلقائياً. وكما تلاحظ بالصورة فإن برنامج Xcode قدم لنا واجهة تحكم مباشرة.
 |
| التعرّف على نظام التصميم watchkit |
تعرّف منصة العمل WatchKit مدى عناصر واجهة المستخدم والتي يمكنك استخدامها لإنشاء واجهة تطبيق للمستخدم. هذه القائمة لجميع العناصر الذي يجب استخدامهم:
Group
Table
Image
Separator
Button
Switch
Slider
Label
Date
Timer
Map
Menu
Menu Item
لا تحتاج معظم هذه العناصر للشرح إلا أن هناك بعض العناصر يمكن شرحهم مثل group و separator و date و timer و menu. أهم تلك العناصر هي group.
إن قمت باستخدام HTML و CSS لإنشاء موقع ويب. حيث ستكون على معرفة بالوسم <div> حيث يعمل كالمجموعة بجمع عدة عناصر مع بعضها. تحتوي المجموعة على العديد من الخصائص والتي يمكنها التعديل مباشرة في منشىء الواجهة.
الخطوة الأولى: تحديد تصميم للتطبيق
من المهم جداً أن تختار تصميمك قبل البدء وبالتفصيل لأن ذلك سيوفر عليك الكثير من الجهد والوقت. وبنفس الوقت ستدرك بأنك تريد تطوير وبناء تطبيق ذو خصائص رائعة وبسهولة كبيرة.
في هذا الدرس سنقوم بإنشاء مثال وهو تطبيق لفندق حيث ستتمكن من إيجاد جميع الفنادق التي حول موقعك. لقد قمنا بتصميم الشاشة والأساسيات لذلك الفندق. وكما ذكرنا بالمقدمة بأننا لن نكتب أي كود برمجي لكن سنركّز على آلية مل نظام التصميم الجديد.
وطبعاً سأقوم برسم أولي ما يدور في ذهني حول كيفية شكل هذا التطبيق للفندق. سيكون اسم الفندق في أعلى الشاشة وأسفله سيكون عدد النجوم حيث تظهر التقييم لذلك الفندق. ثم سأضيف صورة على طول الشاشة تحتوي في أسفلها على العنوان والأزرار.
 |
| التعرّف على نظام التصميم watchkit |
الخطوة الثانية: إضافة مجموعة
واجهة controller الآن خالية كما أنه لا يوجد أي مجموعات فيه. وإضافة عناصر جديدة يمكنك السحب والإفلات من Object Library من على يمين Interface Controller. وأيضاً يعتبر Scene Navigator الموجود على اليسار مفيد جداً لفحص العناصر الموضوعة حالياً. يجب عليك أولاً إضافة مجموعة جديدة والتي تسمح بمشاهدة المحتوى عمودياً اذا كان المحتوى لم يلائم الشاشة. اسحب مجموعة من مكتبة الكائنات Object Library وأفلتها في Interface Controller كما في الصورة التالية.
 |
| التعرّف على نظام التصميم watchkit |
الآن لديك مجموعة في واجهة controller كما يمكنك مشاهدة اللواحق في Attributes Inspector على الجانب الأيمن. سنقوم بشرح هذه الأمور بالتفصيل:
· Layout: يحدد التصميم layout إذا كنت عناصر المجموعات تقع بشكل أفقي أو عمودي. عند إضافة العناصر سيتم تمركز العناصر كما التالي والسابق.
· Insets: تحدّد هذه اللاحقة مكان المجموعة في الجانب الأعلى والسفلي واليمين واليسار.
· Spacing: تحدّد هذه الخاصية المسافة بين العناصر ضمن المجموعة.
· Background: يمكنك إضافة صورة لخلفية المجموعة وأيضاً تحريكها من خلال اسم الصورة.
· Position: تحدّد هذه اللاحقة موضع المجموعة سواء أفقية (يمين ويسار و وسط) أو عمودية (أعلى وأسفل وأوسط).
· Size: تحدّد هذه اللاحقة طول وعرض العنصر. كما يمكنك استخدام ثلاثة قيم لهذه الخاصية وهم Size to Fit Content (مباشرة تقوم على ملائمة العناصر مع المحتوى) وأيضاً Relative to Containe ( تأخذ الحجم الكلي وتدمجه مع القيمة المعرّفة) وأيضاً Fixed .
لاحظ بأن Apple Watch يأتي في حجمين. لذلك يجب عليك استخدام التصميم في كلا الحالتين على الرغم من أن هناك بعض الاختلافات البسيطة. يمكنك أيضاً ضبط اللاحقة من خلال الضغط على إشارة + الموجودة على اليسار ولكن تعمل تلك اللاحقة في حال تشغيل التطبيق على جهاز معين.
لنتابع بناء التصميم الآن. قم بتغيير Group Layout إلى Vertical وذلك يعني بأن المحتوى سيصبح عمودياً عند إضافة المزيد من العناصر. يمكنك أيضاً ضبط التصميم إلى Horizontal ليصبح المحتوى في الوسط Center . وأخيراً سنقوم بتوسيع المجموعة لتلائم عرض الشاشة بالكامل.
 |
| التعرّف على نظام التصميم watchkit |
الخطوة الثالثة: إضافة تصنيف Label
لقد قمنا بتحديد الخصائص الأساسية للمجموعة الأصلية. والآن سنقوم على إضافة تصنيف للمجموعة. يمكنك فعل ذلك من خلال Object Library حيث يمكنك إضافة تصنيف للمجموعة السابقة. عند اختيار التصنيف عندها ستشاهد بأن العرض لم يلائم الشاشة لذلك سنقوم بتغيير لاحقة العرض الى Relative to Container. ولجعل التصنيف في الوسط قم بتغيير اللاحقة Horizontal إلى Center وأيضاً قم بتغيير اللاحقة Text Alignment إلى Center.
ماذا سيحصل إذا كان اسم الفندق طويل؟ يجب أن نقوم بتوسيع المجموعة عمودياً. ولفعل ذلك يمكنك تغيير اللاحقة Lines إلى 0. وذلك يعني بأن اسم الفندق سيأخذ أكثر من سطراً اذا اضطر الأمر لذلك. يمكنك أيضاً تغيير نص التصنيف لمشاهدة النتيجة بنفسك. ستظهر النتيجة كما في الصورة التالية.
 |
| التعرّف على نظام التصميم watchkit |
الخطوة الرابعة: إضافة النجوم
أيضاً نريد أن نظهر رتبة الفندق من خلال النجوم. والفكرة هي أن تظهر النجوم تحت اسم الفندق مع عدد النجوم الذي يستحقها. ولفعل ذلك قم بإضافة مجموعة جديدة ضمن المجموعة الأصلية.
أريد أن تظهر 5 نجوم في سطر واحد وأن تكون في المنتصف. وكما ذكرت سابقاً بأننا لا يمكننا إضافة أو إزالة العناصر فقط يمكننا إخفاء العناصر. سأقوم بإضافة خمس صور للنجوم للمجموعة. إذا كان الفندق يستحق أقل من خمس نجوم سيتم إخفاء باقي النجوم.
قم بسحب الصور المرتبّة في المجموعة وقم بضبط العرض لكل نجمة إلى Relative to Container. قم بتغيير multiplier من 1 إلى 0.2 . والسبب لاختيار الرقم 0.2 لأننا في حال أردنا استخدام الخمس صور عندها سنضطر إلى جعل الصور أصغر إلى 20% في عرض المجموعة. قم بتغيير أيضاً الموضع Horizontal إلى Center وستصبح صور النجوم دوماً في المنتصف بغض النظر عن عددهم.
الآن يتوجب علينا اختيار صورة جيدة ليتم وضعها في المجموعة. والآن قم بتغيير اللاحقة Image إلى اسم الصورة وامتدادها star.png كما يجب تغيير الطريقة mode إلى Aspect Fit وذلك للتأكد بأن عنصر ratio مقبول ومسموح.
ستظهر النتيجة مشابهة في الصورة التالية. يمكنك أيضاً تجربة الخاصية Hidden أي إخفاء لأحد الصور في Attributes Inspector ومشاهدة أن الصور دوماً في المنتصف.
 |
| التعرّف على نظام التصميم watchkit |
الخطوة الخامسة: إضافة صورة الفندق
يمكنك تحميل صور للفنادق من خلال موقع freeimages . كما أنني أريد أن أضيف صورة الفندق لكي أظهر للمستخدم كيف يبدو شكل الفندق. قم بإضافة صورة جديدة من Object Library كما فعلنا مسبقاً مع صور النجوم. قم بتغيير اللاحقة Image إلى الصورة الجديدة التي قمت بتحميلها ثم قم بضبط الطريقة من Mode إلى Aspect Fit.
قم بتغيير الموضع الأفقي Horizontal إلى Center وأيضاً Width إلى Relative to Container. دائماً كن متأكداً بأن الصورة مرفقة ومرتبة ضمن العناصر الرئيسية في المجموعة وذلك من خلال ضبط تسلسل الطبقات في Scene Navigator في الجانب الأيسر. وأيضاً قم بتغيير Height إلى Size to Fit Content حيث سيتم تغيير حجمه بشكل تلقائي معتمداً على أبعاد الصورة.
 |
| التعرّف على نظام التصميم watchkit |
الخطوة السادسة: إضافة عنوان
كما في الصورة التالية سنقوم بإضافة تصنيف وأيضاً نريد إضافة خريطة لكن أولاً سنضيف تصنيف. قم بسحب التصنيف من Object Library ثم ضعها تحت صورة الخلفية التي أضفناها سابقاً. قم بضبط Lines إلى 0 وأيضاً العرض Width إلى Relative to Container. وقم بتغير النص إلى أي عنوان تريد.
 |
| التعرّف على نظام التصميم watchkit |
الخطوة السابعة: إضافة الأزرار
يجب أن يحتوي واجهة controller على زرين في الأسفل. أريد أن يكون الزر بنفس عرض الشاشة وبجانب الزر الثاني لأن المجموعة الرئيسية لديها تصميم عمودي وأيضاً نحتاج إضافة مجموعة مرفقة لتلك الأزرار وبموضع أفقي بدلاً من العمودي.
قم بإضافة مجموعة جديدة كما في الصورة التالية ثم قم بإضافة زرين داخل المجموعة. قم بضبط العرض Width إلى Relative to Container ثم قم بضبط multiplier إلى 0.5 ثم قم بتغيير موضع الأزرار إلى عمودي Vertical ثم قم بتغيير المحاذاة إلى Center.
قم بكتابة النص "From $99" داخل الزر الأول مع وضع لون لخلفية الزر باللون الأحمر. ثم قم بكتابة النص "View More" داخل الزر الثاني مع ضبط لون خلفية الزر إلى الأزرق. ستظهر كما بالصورة التالية:
 |
| التعرّف على نظام التصميم watchkit |
كن متأكداً بأنك اخترت القانون الصحيح واضغط Command-R لأجل تشغيل تطبيق WatchKit .
 |
| التعرّف على نظام التصميم watchkit |
تحتاج شيء آخر لفتح التطبيق iOS . اختر من iOS Simulator اختر Hardware > External Displays > Apple Watch 42 mm . سيظهر Apple Watch Simulator تالياً في هاتف iPhone .
ليست هناك تعليقات: