آموزش ساخت یک اپلیکیشن آیفون (بخش چهارم) — به زبان ساده

در این بخش از سری مقالات راهنمای عملی ساخت اپلیکیشن‌های آیفون قصد داریم به بررسی مشخصه‌های آیتم‌های ناوبری اپلیکیشن خود بپردازیم. در بخش قبلی ما صحنه News را وارد کنترلر ناوبری خودش کردیم. در این زمان می‌توان نوار ناوبری را مشاهده کرد، اما از آنجا که آیتم ناوبری صحنه News هیچ عنوانی ندارد، نوار ناوبری خالی است.

برای مطالعه قسمت قبلی این مجموعه مطلب آموزشی می‌توانید روی این لینک کلیک کنید.

عنوان آیتم ناوبری

به Xcode بروید و گزینه Main.storyboard را اگر انتخاب نشده است، انتخاب کنید. طوری اسکرول کنید که صحنه News پدیدار باشد. روی آیتم ناوبری در صحنه News کلیک کنید تا انتخاب شود. اگر پنل Document Outline نیز در حالت نمایش است در این زمان خواهید دید که Navigation Item در آنجا نیز انتخاب شده است. در روی بوم نیز چنین وضعیتی وجود دارد.

فیلم آموزش برنامه نویسی سوئیفت – برنامه نویسی iOS با Swift در فرادرس

کلیک کنید

اگر پنل Inspector در سمت راست فعال نباشد، روی دکمه انتهای سمت راست نوار ابزار کلیک کنید تا پدیدار شود. اینک می‌توانید Attributes Inspector را ببینید. اگر چنین نیست روی آیکون چهارم بالای پنل Inspector کلیک کنید تا به آن سوییچ شود.

پنل Attributes Inspector همه خصوصیت‌های موجود (گاهی مشخصه نیز نامیده می‌شود) را برای شیء انتخاب شده کنونی نمایش می‌دهد. شما می‌توانید اغلب این موارد را تغییر دهید. در این مورد باید یک عنوان برای آیتم ناوبری انتخاب شده وارد کنیم.

در فیلد title در پنل Attributes Inspector عبارت News را وارد کرده و روی Return کلیک کنید. آیتم ناوبری روی بوم و همچنین بخش «دورنمای سند» اینک باید عنوانی به صورت News داشته باشد.

نوار ناوبری

برای این که به اهداف طراحی خود که در بخش اول این سری مقالات راهنما مطرح کرده‌ایم، برسیم باید رنگ نوار ناوبری را به صورت قرمز تعیین کنیم. شاید متوجه شده باشید که خصوصیت‌های آیتم ناوبری شامل تنظیمات رنگ نیست. دلیل این امر چنان که در بخش سوم توضیح دادیم، آن است که آیتم ناوبری که از سوی کنترلر ناوبری برای هر صحنه طراحی می‌شود، منحصر به فرد است؛ اما نوار ناوبری خودش ثابت است و تحت مالکیت کنترلر ناوبری قرار دارد. این همان جایی است که باید نوار ناوبری را تغییر دهیم.

در کنترلر ناوبری برای صحنه News یک بار روی نوار ناوبری کلیک کنید تا انتخاب شود.

همان طور که می‌بینید خصوصیت‌های زیادی برای نوار ناوبری وجود دارد. در حال حاضر ما تنها چند مورد از آن‌ها را بررسی می‌کنیم. روی منوی بازشدنی کنار Bar Text کلیک و گزینه custom را انتخاب کنید.

تغییر رنگ نوار ناوبری

Xcode گزینه «انتخاب رنگ» (Color Picker) را نمایش می‌دهد.

در نوار ابزار این بخش انتخاب رنگ، برگه Color Sliders که دارای آیکون اسلایدر و گزینه دوم از سمت چپ است را انتخاب کنید. در منوی بازشونده گزینه RGB Sliders را انتخاب کنید. مقدار رنگ را به صورت مقادیر زیر تعیین کنید:

• red = 208
• green = 16
• blue = 18

میزان «مات بودن» (Opacity) را نیز برابر با 100% تنظیم کنید. اینک می‌بینید که رنگ پس‌زمینه نوار ناوبری روی بوم تغییر یافته است.

در این مرحله بخش انتخاب کننده رنگ را ببندید. اکنون که نوار ناوبری تیره داریم، متن تیره‌رنگ عنوان آیتم ناوبری و متن «نوار وضعیت» (Status Bar) کنتراست مناسبی ندارند. ما باید از Xcode بخواهیم که با نوار ناوبری به صورت یک شیء تیره رفتار کند تا رنگ این عناوین به صورت سفید درآید.

به این منظور منوی بازشدنی Style را برای نوار ناوبری به صورت Black تنظیم کنید. همزمان سبک عناوین بزرگ را انتخاب کنید تا با ظاهر تصویر ابتدای مقاله اول این سری که می‌خواهیم ایجاد کنیم مطابقت داشته باشد. در ادامه کادر انتخاب Prefers Large Titles را فعال کنید.

اگر اپلیکیشن خود را به مثابه یک لِگو تصور کنیم، تنها کاری که انجام داده‌ایم این است که رنگ و ارتفاع نوار ناوبری را تغییر داده‌ایم. ساختار بلوک‌ها و لایه‌ها همچنان همان است. نوار ناوبری Large Titles باعث می‌شود که عناوین آیتم‌های ناوبری به جای مرکز در سمت چپ قرار بگیرند.

سلول نمای جدولی

در صحنه News می‌توان یک سلول خالی منفرد را زیر هدر بخش Prototype Cells مشاهده کرد. در ادامه می‌خواهیم محتوایی برای این بخش تعیین کنیم.

یک بار روی سلول کلیک کنید تا انتخاب شود. دقت کنید که نباید دو بار کلیک صورت بگیرد، چون در این صورت دیگر سلول انتخاب نمی‌شود و به نمای محتوای داخل آن منتقل می‌شویم. اگر شیء نادرستی را انتخاب کرده‌اید، کافی است با کلیک روی بخش خالی بوم (یعنی غیر از فضای صحنه)، همه چیز را از حالت انتخاب خارج کنید و سپس دوباره اقدام به انتخاب بخش مورد نظر خود بکنید.

زمانی که سلول را به طرز صحیحی انتخاب کردید، همانند تصویر زیر باید عبارت Table View Cell را در بخش فوقانی Attributes Inspector ببینید.

ما می‌خواهیم کاربر بتواند روی این سلول در صحنه News کلیک کند تا مقاله خبری مرتبط را در صحنه‌ای دیگر با جزییات بیشتر مشاهده کند. کاربر مورد نظر برای انجام این کار به نوعی راهنمایی نیاز دارد که به وی اشاره کنیم امکان تپ کردن روی سلول را دارد. استاندارد این کار «disclosure indicator» است که یک پیکان خاکستری با نوک اشاره کننده به سمت راست در سمت راست سلول است.

بدین ترتیب به سادگی می‌توان به سلول اعلام کرد که یک نشانگر disclosure را نمایش دهد و سلول می‌داند که باید یک «نمای فرعی» (subview) به نام accessory view در سمت راست سلول اضافه کند.

در بخش Attributes Inspector منوی بازشدنی Accessory را از مقدار None به Disclosure Indicator تغییر دهید.

نشانگر Disclosure

این سلول هم اینک یک نشانگر Disclosure دارد که همان پیکان خاکستری است که به سمت راست اشاره می‌کند. به طور مشابه سلول نمای جدولی، چهار گزینه style دارد که به صورت خودکار نماهای فرعی برچسب را در سلول اضافه می‌کنند. سبک subtitle دو برچسب را به عنوان نمای فرعی در سمت چپ اضافه می‌کند.

در این زمان باید منوی بازشدنی Style را به صورت Subtitle تنظیم کنید. بدین ترتیب خواهید دید که برچسب‌های متنی خالی در سلول ظاهر می‌شوند. در صورتی که Content View را باز کنید، می‌بینید که در بخش دورنمای سند نیز این موارد قابل مشاهده هستند.

روی برچسب Title در سلول دو بار کلیک کنید. اینک می‌بینید که برچسب با نوشته Label به صورت عنوان در پنل نمایش می‌یابد.

اینک باید متن برچسب را تغییر دهیم. به این منظور می‌توانیم هم در بوم روی آن کلیک کنیم و هم در پنل Attributes inspector این کار را انجام دهیم. متن برچسب را از Title به Lego Block Chain تغییر دهید. این تیتر در واقع عنوان مقاله خبری خیالی ما است.

به طور مشابه، متن برچسب Subtitle را انتخاب کرده و برخی جزییات را برای مقاله خبری اضافه کنید.

نمای جدولی استاتیک

اگر اپلیکیشن خودمان را در این مرحله اجرا کنیم، سلول‌ها علی‌رغم این که عناوین و تیترهای مختلفی را در آن‌ها وارد کرده‌ایم، همچنان خالی مشاهده می‌شوند. دلیل این امر آن است که نمای جدولی هم اینک روی حالت «پروتوتایپ‌های دینامیک» (dynamic prototypes) تنظیم شده است. این بدان معنی است که نمای جدولی انتظار دارد مقادیر هر سلول به صورت دینامیک و احتمالاً از طریق ارتباط با یک سرور خبری پر شوند. ما در حال حاضر هیچ کد یا حتی سروری در این زمینه نداریم و از این رو قصد داریم جدول را به صورت محتوای استاتیک تنظیم کنیم.

به این منظور در صحنه News یک بار روی ناحیه خاکستری Table View —Prototype Content پایین سلول کلیک کنید. اینک پنل Attributes Inspector باید عنوان Table View را نمایش دهد. منوی بازشدنی Content را از Dynamic Prototypes به Static Cells تغییر دهید.

هنگامی که سلول را از حالت دینامیک به استاتیک تغییر می‌دهید، توجه داشته باشید که Xcode سه سلول ایجاد می‌کند که در واقع یک کپی از همه سلول‌های اولیه ما هستند. متن سلول دوم باید یک مقاله خبری خیالی دیگر باشد.

یک بار روی سلول سوم کلیک کنید. با بررسی این که دستگیره انتخاب در لبه انتهایی سلول سوم مشاهده می‌شود و این که عنوان پنل Attributes Inspector به صورت Table View Cell درآمده است، مطمئن شوید که این سلول انتخاب شده است.

این سلول را با فشردن کلید Delete کیبورد، حذف کنید.

نتیجه نهایی

اپلیکیشن را اجرا کنید تا آنچه را تا به اینجا طراحی کرده‌ایم، مشاهده کنید.

همان طور که می‌بینید، نوار ناوبری و سلول‌ها همگی خصوصیت‌ها و محتواهایی که طراحی کرده‌ایم را نمایش می‌دهند. سلول‌ها هنوز هیچ تصویر یا قالب‌بندی متن ندارند و از این رو بخشی از متن را نمایش می‌دهند. این وضعیت را در بخش بعدی این سری مقالات اصلاح خواهیم کرد.

کامیت کردن تغییرات

برای کامیت کردن تغییرات همانند دفعات قبل مراحل زیر را اجرا می‌کنیم:

1. از منوی Source Control گزینه Commit Changes را انتخاب کنید.
2. یک توضیح مانند آنچه در ادامه آمده است، برای کامیت وارد کنید:

News: customised attributes in navigation bar، navigation item، table view and cells.

3. روی دکمه Commit کلیک کنید.

جمع‌بندی

در این بخش از سری مقالات راهنمای ساخت اپلیکیشن آیفون که قسمت چهارم آن است از پنل Attributes Inspector برای سفارشی‌سازی نوار ناوبری، آیتم ناوبری، نمای جدولی و سلول‌های آن استفاده کردیم. هر گونه سؤال یا دیدگاه مرتبط با این نوشته را می‌توانید در بخش نظرات با ما در میان بگذارید. در بخش بعدی بحث ناوبری اپلیکیشن خود را تکمیل می‌کنیم. برای مطالعه بخش بعدی روی لینک زیر کلیک کنید:

• آموزش ساخت یک اپلیکیشن آیفون (بخش پنجم) — به زبان ساده

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش برنامه نویسی Swift (سوئیفت) برای برنامه نویسی iOS
• مجموعه آموزش‌های پروژه محور برنامه‌نویسی
• آموزش برنامه‌نویسی سوئیفت (Swift): متغیر، ثابت و انواع داده – بخش اول
• الگوریتم‌های مرتب‌سازی در سوئیفت (Swift) — به زبان ساده

==