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

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

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

در بخش یازدهم کار خود را با صحنه News به پایان بردیم و کدی را نوشتیم که ارتفاع سلول‌ها را به صورت خودکار تنظیم می‌کرد. اگر از بخش‌های قبلی با ما همراه بوده‌اید، پس همه موارد لازم را هم‌اینک آماده دارید و می‌توانید این بخش را مطالعه کنید، در غیر این صورت اگر می‌خواهید از این بخش مطالعه مقاله را شروع کنید باید پروژه را با طی مراحل زیر دانلود کنید:

• اپلیکیشن ترمینال را از پوشه Applications خود باز کنید.
• در ترمینال دستور cd ~/Documents را وارد کرده و Return را بزنید.
• کد زیر را در ترمینال وارد کرده و Return را بزنید.

  git clone --recurse-submodules --branch Start-Tutorial-12 https://bitbucket.org/barefeetware/lego-tutorial-social.git

• فرایند دانلود را در ترمینال پیگیری کنید و منتظر بمانید تا تمام شود.
• در پوشه Documents folder، پوشه lego-tutorial-social را باز کنید.
• فایل Social.xcode.proj را باز کنید.

در این راهنما فرض کرده‌ایم که شما با وظایفی که قبلاً در این سری مقالات مطرح کرده‌ایم آشنایی دارید. اگر در این مورد مطمئن نیستید می‌توانید به بخش‌های قبلی این راهنما مراجعه کنید.

حذف فایل‌ها

پیش از آن که فایل‌های بیشتری به پروژه خود اضافه کنیم باید چند فایل را که دیگر مورد نیاز نیستند حذف کنیم. فایل‌های FirstViewController.swift و SecondViewController.swift به عنوان بخشی از قالب اپلیکیشن برگه‌ای ما در زمان ایجاد اولیه پروژه ایجاد شده‌اند. ما قبلاً صحنه‌هایی که از این فایل‌ها استفاده می‌کردند از استوری‌بورد حذف کرده‌ایم و از این رو می‌توانیم این فایل‌های سوئیفت را نیز پاک کنیم.

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

کلیک کنید

یک بار روی فایل FirstViewController.swift در پنل ناوبری پروژه کلیک کنید. دکمه delete را روی کیبورد بزید. Xcode از شما تأیید می‌خواهد و با کلیک روی دکمه Move to Trash این فایل‌ها حذف خواهند شد.

به طور مشابه روی فایل SecondViewController.swift نیز کلیک کرده و آن را حذف کنید. اکنون پنل ناوبری پروژه نشان می‌دهد که این فایل‌ها پاک شده‌اند.

به طور جایگزین می‌توانید روی فایل نخست کلیک کرده و با نگه داشتن دکمه Shift روی فایل دوم نیز کلیک کرده و هر دو را با هم با زدن کلید delete پاک کنید.

سلول Product

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

روی گروه پوشه Social راست-کلیک کنید. در منوی بازشدنی که ظاهر می‌شود گزینه New File را انتخاب کنید.

در ادامه iOS را انتخاب کرده و Cocoa Touch Class کلیک کنید. سپس Next را بزنید.

در منوی بازشدنی Subclass of گزینه UITableViewCell را انتخاب کنید. در مورد Class مقدار ProductTableViewCell وارد کنید.

نکته: باید از Product و نه Products استفاده کنید.

گزینه Also create XIB file را فعال کنید و زبان را نیز روی Swift قرار دهید.

زمانی که فرم به صورت صحیحی پر شد، روی دکمه Next کلیک کنید. کادر محاوره‌ای Save مکان پیش‌فرض ذخیره فایل‌های دیگر پروژه را نمایش می‌دهد.

روی دکمه Create کلیک کنید. اینک باید فایل جدید را که به پروژه اضافه شده است ببینید.

یک بار روی فایل ProductTableViewCell.xib کلیک کنید. بدین ترتیب یک سلول نمای جدولی خالی می‌بینید.

یک نمای تصویر اضافه کنید

لبه تحتانی سلول را به سمت پایین بکشید تا ارتفاع آن به حدود 170 پوینت برسد.

روی دکمه Library در نوار ابزار کلیک کنید. عبارت Image را در فیلد جستجو وارد کنید.

در این زمان Image View را از لیست به درون سلول خالی و تقریباً مرکز آن بکشید.

همزمان که نمای تصویر انتخاب شده است، در پنل Attributes Inspector مقدار Image را روی placeholder قرار دهید. ما می‌خواهیم این تصویر نسبت ابعادش را حفظ کند و درون نمای تصویر جای بگیرد، بنابراین باید Content Mode را روی Aspect Fit تنظیم کنیم.

روی دکمه Add Constraints در انتهای بوم کلیک کنید. مقدار Height و Width را برابر با 80 وارد کرده و روی Add 2 Constraints کلیک کنید.

محدوده‌ها به رنگ قرمز ظاهر می‌شوند و چون هنوز کار خود را تمام نکرده‌ایم، مشکلی وجود ندارد.

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

افزودن برچسب‌ها

روی دکمه Library کلیک کنید. عبارت Label را در فیلد جستجو وارد کنید.

Label را از لیست کتابخانه شیء به سلول بکشید و در سمت راست نمای تصویر قرار دهید.

این فرایند را برای افزودن برچسب دوم به سلول تکرار کنید و آن را درست زیر برچسب اول قرار دهید. همین کار را در مورد برچسب سوم نیز تکرار کنید.

متن برچسب‌های متناظر را به ترتیب به [Text] ،[Detail Text] و [Tertiary Text] تغییر دهد.

برچسب Text را انتخاب کنید.

در پنل Attributes Inspector، موارد زیر را تنظیم کنید:

1. Text Style را روی Headline قرار دهید.
2. تعداد Lines را روی 2 قرار دهید.

برچسب Detail Text را انتخاب کرده و موارد زیر را تنظیم کنید:

1. Text Style را روی Caption 1 قرار دهید.
2. Color را روی Dark Gray Color قرار دهید.
3. تعداد Lines را روی 5 تنظیم کنید.

برچسب Tertiary Text را انتخاب کرده و موارد زیر را تنظیم کنید:

1. Text Style را روی Body قرار دهید.
2. Color را روی Dark Gray Color قرار دهید.

افزودن یک دکمه

توجه کنید که ما در حال طراحی سلول Product خود هستیم که می‌خواهیم به وسیله آن امکان خرید محصول را به کاربر بدهیم. به همین منظور یک دکمه Buy نیز اضافه می‌کنیم.

روی دکمه Library کلیک کرده و عبارت bu را در فیلد جستجو وارد کنید.

شیء button را در کتابخانه به درون سلول و سمت راست برچسب Tertiary Text بکشید.

همزمان که button در حالت انتخاب قرار دارد، در پنل Attributes Inspector عنوان را از Button به Buy تغییر داده و Return را روی کیبورد بزنید.

نماهای پشته‌ای

همزمان که دکمه Buy در حالت انتخاب قرار دارد، روی برچسب Tertiary Text شیفت+کلیک کنید تا هر دو انتخاب شوند. روی دکمه Embed In در انتهای بوم کلیک کنید و گزینه Stack View را از منوی بازشدنی انتخاب نمایید.

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

روی دو برچسب دیگر Shift+Click کنید تا همراه با نمای پشته‌ای افقی انتخاب شوند.

روی دکمه Embed In در انتهای بوم کلیک کرده و گزینه Stack View را از منوی بازشدنی انتخاب کنید.

همزمان با انتخاب نمای پشته‌ای بررسی کنید که خصوصیت‌ها با تصویر زیر مطابقت داشته باشند و هر گونه تغییر مورد نیاز را در این راستا اعمال کنید.

همزمان که نمای پشته‌ای عمودی و برچسب‌ها در حالت انتخاب هستند، روی نمای تصویر شیفت+کلیک کنید. در ادامه روی دکمه Embed In کلیک کرده و دوباره گزینه Stack View را انتخاب کنید.

هر گونه تغییری که لازم است بدهید تا همه خصوصیت‌ها مطابق تنظیمات زیر باشند:

محدودسازی به حاشیه‌ها

همزمان که نمای پشته‌ای بیرونی در حالت انتخاب قرار دارد روی دکمه Add New Constraints زیر بوم کلیک کنید. در پنجره باز شده گزینه Constrain to margins را انتخاب کرده و مقدار 0 را برای هر چهار محدوده در بخش فوقانی وارد کنید.

روی دکمه Add 4 Constraints کلیک کنید.

کلاس‌های فرعی NibTableViewCell

فایل ProductTableViewCell.swift را در پنل ناوبری پروژه انتخاب کنید. فایل ProductTableViewCell.swift را طوری ویرایش کنید که با موارد زیر مطابقت داشته باشند:

فیلم آموزش برنامه نویسی اپل واچ Apple Watch با زبان سوئیفت SWIFT در فرادرس

کلیک کنید

1. کد func را حذف کنید.
2. import BFWControls را اضافه کنید.
3. سوپرکلاس را به NibTableViewCell تغییر دهید.
4. پیش از class عبارت IBDesignable@ را اضافه کنید.

1import UIKit
2import BFWControls
3
4@IBDesignable class ProductTableViewCell: NibTableViewCell {
5    
6}

خروجی‌های اتصال

در این مرحله به فایل ProductTableViewCell.xib بازگردید، نمای بیرونی را در پنل Connections Inspector انتخاب کنید و خروجی‌ها را به نماهایشان برای textLabel ،detailTextLabel ،tertiaryTextLabel و imageView وصل کنید.

به‌ روز رسانی سلول‌ها در استوری‌بورد

Main.storyboard را در پنل ناوبری پروژه انتخاب کنید. به صحنه Products بروید. دو سلول را انتخاب کنید. پنل Identity Inspector را انتخاب کنید.

روی منوی بازشدنی Class کلیک کرده و گزینه ProductTableViewCell را انتخاب کنید.

پنل Size Inspector را انتخاب کنید. مقدار Row Height سلول‌های انتخاب شده را از Default به 190 یا هر مقداری که در پیش‌نمایش مناسب به نظر می‌رسد تغییر دهید.

همچنین می‌توانید ارتفاع سلول‌ها را به صورت مستقل از هم تغییر دهید، چون این صرفاً پیش‌نمایش است و در زمان اجرا ارتفاع سلول از سوی کنترلر نما تعیین خواهد شد. یک بار روی سلول اول کلیک کنید. در پنل Attributes Inspector مقدار Tertiary Text را برابر با 98$ وارد کنید. به طور مشابه، در سلول دوم، مقدار Tertiary Text را برابر با 75$ وارد کنید.

ارتفاع سلول‌های کنترلر نما

کنترلر نمای جدولی را با کلیک کردن روی آیکون زرد رنگ در نوار عنوان انتخاب کنید. در پنل Identity Inspector در فیلد Class عبارت Adj را وارد کرده و گزینه AdjustingTableViewController را از منوی بازشدنی انتخاب کنید. دکمه Return یا Tab را روی کیبورد بزنید. Xcode به صورت خودکار مقدار Module را برای BFWControls وارد می‌کند چون این همان کلاسی است که در آن قرار دارد.

به پنل Attributes Inspector بروید. در بخش Adjusting Table View Controller section مقدار Intrinsic Height Cells از Default به On تغییر دهید.

اپلیکیشن را اجرا کنید. به برگه Products بازگردد. تأیید کنید که ارتفاع سلول‌ها برابر با دو خط از عنوان و پنج خط از متن جزییات تفصیلی است.

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

همانند بخش‌های قبلی در انتهای این بخش نیز تغییراتی را که روی پروژه خود ایجاد کردیم کامیت می‌کنیم. به این منظور:

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

   Products: custom cell and auto adjusting heights

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

سخن پایانی

سلول Products ما اینک استایل های متنی دارد، اندازه فونت‌های آن متفاوت است و یک دکمه Buy نیز ارائه شده است. همچنین ارتفاع سلول‌های آن به صورت خودکار تنظیم می‌شوند. در بخش بعدی، سلول‌های سفارشی برای صحنه Chat ایجاد خواهیم کرد. برای مطالعه بخش بعدی روی لینک زیر کلیک کنید:

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

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

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

==