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

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

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

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

همچنین مفهوم جدید بلوک‌های لگو (یعنی نماها) با شکل‌های دارای گوشه گِرد را معرفی می‌کنیم که در تصویر زیر مشاهده می‌کنید.

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

• اپلیکیشن ترمینال را از پوشه برنامه‌ها باز کنید.
• در ترمینال دستور زیر را وارد کرده و Return را بزنید:

  cd ~/Documents

• سپس دستور زیر را در ترمینال وارد کرده و Return را بزنید:

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

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

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

ایجاد سلول Chat

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

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

کلیک کنید

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

گزینه iOS و Cocoa Touch Class را انتخاب کنید. سپس گزینه Subclass of UITableViewCell را انتخاب کنید. نام این کلاس فرعی جدید را RightChatTableViewCell بگذارید. گزینه Also create XIB file را نیز فعال کرده و آن را در مکان پیش‌فرض فایل‌های دیگر پروژه ذخیره کنید.

افزودن نمای تصویر و برچسب‌ها

فایل RightChatTableViewCell.xib را انتخاب کنید. نما را در بوم آن قدر بزرگ کنید که ارتفاعش به 130 پوینت برسد.

روی دکمه Library کلیک کنید و یک Image View روی صفحه و در نزدیکی سمت چپ و انتهای آن بکشید. تصویر آن را روی placeholder قرار داده و Content Mode را نیز روی Aspect Fit تنظیم کنید. اندازه آن را در حدود اندازه 44 در 44 پیکسل تعیین نمایید. روی دکمه Add New Constraints کلیک کنید و Width را به مقدار 44 و Height را به میزان 44 وارد کنید. درنهایت روی Add 2 Constraints کلیک کنید.

سه Label از Library روی بوم بکشید. آن‌ها را در سمت راست تصویر قرار دهید، اما آن‌ها را طوری تنظیم کنید که لبه سمت چپ آن‌ها با همدیگر تراز شود. متن آن‌ها را به ترتیب روی [Text] ،[Detail Text] و [Tertiary Text] تنظیم کنید.

در پنل Attributes Inspector رنگ برچسب Text و برچسب Tertiary Text را روی Dark Gray Color و فونت را روی Text Style Caption 1 تنظیم کنید. فونت Detail Text را روی و Lines را روی 0 تنظیم کنید.

جاسازی نمای پشته‌ای

برچسب‌های Text و Detail Text را انتخاب کنید. آن‌ها را در یک نمای پشته‌ای جاسازی کنید و مقادیر زیر را تنظیم کنید:

• Alignment = Leading
• Distribution = Fill
• Spacing = Standard

جاسازی در یک نما

اکنون با مفهوم جدید کار می‌کنیم. برای تطبیق طراحی سلول گفتگو با آنچه که در ابتدای بخش اول این سری مقالات دیدیم، باید دو برچسب فوقانی را در نمای با پس‌زمینه خاکستری جاسازی کنیم. روی دکمه Embed In کلیک کنید. از منوی بازشدنی View را انتخاب کنید.

Xcode یک نما (از لحاظ فنی UIView) ایجاد می‌کند و نمای پشته‌ای را درون آن جاسازی می‌کند. همزمان که نمای جدید در حال انتخاب است، در پنل Attributes Inspector روی منوی بازشدنی Background Color کلیک کرده و Custom را انتخاب کنید. در بخش انتخاب رنگ روی زبانه Pencils کلیک کرده و سپس مداد Mercury را انتخاب نمایید که خاکستری با 90 درصد روشنایی است.

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

روی دکمه Add 4 Constraints کلیک کنید. Xcode برخی خطوط محدوده قرمز رنگ را به شما نشان می‌دهد زیرا هنوز کار ما با آن‌ها پایان نیافته است و این مسئله مشکل حادی محسوب نمی‌شود.

جاسازی در نماهای پشته‌ای

نمای با پس‌زمینه خاکستری و برچسب Tertiary Text را انتخاب کنید. آن‌ها را در یک نمای پشته‌ای جدید جاسازی کنید.

خصوصیت‌های نمای پشته‌ای را به صورت زیر تنظیم کنید:

• Alignment = Fill
• Distribution = Fill
• Spacing = Standard

روی نمای تصویر شیفت+کلیک کنید تا آن و نمای پشته‌ای را انتخاب کنید. آن‌ها را در یک نمای پشته‌ای جاسازی و خصوصیت‌های زیر را تنظیم کنید:

• Axis = Horizontal
• Alignment = Bottom
• Distribution = Fill and
• Spacing = Standard

مقید کردن به لبه‌ها

روی دکمه Add New Constraints کلیک کنید. گزینه Constrain to margins را فعال کرده و مقدار 0 را برای هر یک از محدوده‌های لبه وارد کنید. در ادامه روی دکمه Add 4 Constraints کلیک کنید.

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

گوشه‌های گرد

ما در طراحی خود از گوشه‌های گرد در پس‌زمینه خاکستری استفاده کرده‌ایم. تصویری که آواتار گفتگو در آن ظاهر می‌شود نیز از گوشه‌های گرد پشتیبانی می‌کند. نمای تصویر را انتخاب کنید. در پنل Identity Inspector، کلاس را از UIImageView به RoundedImageView عوض کنید. Return را بزنید. اگر آن را به درستی وارد کنید، Xocde به صورت خودکار مقدار BFWControls را به عنوان Module وارد می‌کند و نمای تصویر اینک باید لبه دایره‌ای داشته باشد.

نمای پس‌زمینه خاکستری را انتخاب کنید. در پنل Identity Inspector مقدار Class را به DesignableView عوض کنید و Return را بزنید. به پنل Attributes Inspector بروید. در بخش Designable View در بالا مقدار Corner Radius را روی 12 تنظیم کرده و return را بزنید.

کلاس فرعی NibTableViewCell

در پنل ناوبری پروژه، فایل RightChatTableViewCell.swift را انتخاب کنید. همانند روشی که قبلاً در سری‌های پیشین انجام دادیم، کد آن را طوری ویرایش کنید که:

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

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

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

فایل RightChatTableViewCell.xib را انتخاب کنید. در خارج از سلول و در بوم خالی کلیک کنید تا همه چیز از حالت انتخاب خارج شود. سلول را با یک بار کلیک کردن روی لبه آن انتخاب کنید. در پنل Connections Inspector اقدام به متصل کردن imageView ،textLabel ،detailTextLabel و tertiaryTextLabel به اشیای نمای صحیح در سلول روی بوم بکنید.

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

Main.storyboard را در پنل Project Navigator انتخاب کنید. به صحنه Chat اسکرول کنید. سه سلول را انتخاب کنید. پنل Identity Inspector را انتخاب کنید. گزینه Class را به RightChatTableViewCell تغییر داده و Return را بزنید.

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

ما می‌خواهیم اگر کاربر روی این سلول‌ها تپ کرد، آن‌ها هایلایت شوند. به این منظور به پنل Attributes Inspector بروید. همزمان با انتخاب کردن هر سه سلول مقدار Selection را از Default به None تغییر دهید.

یک بار روی سلول نخست کلیک کنید. در پنل Attributes Inspector مقدار tertiary Text را به صورت 2:34pm وارد کنید. به طور مشابه مقادیر Tertiary Text را برای سلول‌های دوم و سوم به ترتیب برابر با 2:39pm و 2:45pm وارد کنید.

ارتفاع سلول کنترل نما

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

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

اپلیکیشن را اجرا کنید. به زبانه Chat بروید. تأیید کنید که ارتفاع‌های سلول باید برای تطبیق با محتوا متناسب شوند و لبه‌ها درست به نظر می‌رسند.

کپی گرفتن از یک طرح‌بندی Xib

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

به صورت ایده‌آل یک توسعه‌دهنده صرفاً کد کلاس را برای گنجاندن قابلیت چپ به راست مورد استفاده قرار می‌دهد. در این مرحله صرفاً قصد داریم از سلول گفتگوی کنونی کپی گرفته و آن را تغییر دهیم.

روی پوشه Social زردرنگ در پنل ناوبری پروژه کنترل+کلیک یا راست+کلیک کنید. در منوی بازشدنی، New File را انتخاب کنید. گزینه iOS و Cocoa Touch Class را انتخاب کنید. آن را به صورت Subclass از UITableViewCell در آورید. نام این کلاس را LeftChatTableViewCell بگذارید. گزینه Also create XIB file را فعال کنید. آن را در مکان پیش‌فرض فایل‌های دیگر پروژه ذخیره کنید.

فایل RightChatTableViewCell.xib را در پنل ناوبری پروژه انتخاب کنید. یک بار در فضای خالی روی بوم کلیک کنید تا همه چیز از انتخاب خارج شود. یک‌بار روی لبه سلول کلیک کنید تا انتخاب شود. در منوی Edit گزینه Copy را انتخاب کنید.

فایل LeftChatTableViewCell.xib را در پنل ناوبری پروژه انتخاب کنید. این فایل شامل یک سلول خالی است. روی لبه آن سلول خالی کلیک کنید و کلید delete را روی کیبورد بزنید تا حذف شود. گزینه Paste را از منوی Edit انتخاب کنید تا سلول گفتگوی صحیح را در جای خود قرار دهید.

کلاس نما را در Xib عوض کنید

چنان که می‌بینید ما یک نمای RightChatTableViewCell در فایل LeftChatTableViewCell.xib خود داریم. این فایل معنایی ندارد و کار نیز نمی‌کند. بنابراین باید کلاس آن نما را تغییر دهیم. زمانی که نمای سلول در حالت انتخاب قرار دارد در پنل Identity Inspector مقدار class را از RightChatTableViewCell به LeftChatTableViewCell تغییر دهید.

تغییر ترتیب، درون یک نمای پشته‌ای

برای پیاده‌سازی طراحی مطلوب برای حباب پیام گفتگوی سمت چپ، کافی است ترتیب آیتم‌های درون نمای پشته‌ای را عوض کرده و تراز برچسب متنی را تغییر دهیم. در پنل Document Outline عناصر را با کلیک کردن روی مثلث کناری باز کنید تا بتوانید آیتم‌های درون نمای پشته‌ای اول را ببینید.

در پنل Document Outline، تلاش کنید Image View را به پایین و پس از Stack View دوم و البته نه درون آن بکشید.

تغییر تراز یک برچسب

یک بار روی برچسب Tertiary Text کلیک کنید تا انتخاب شود. در پنل Attributes Inspector تراز را از Natural به Right تغییر دهید.

کلاس فرعی NibTableViewCell

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

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

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

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

فایل LeftChatTableViewCell.xib را انتخاب کنید. بیرون از سلول در فضای خالی بوم کلیک کنید تا همه چیز از حالت انتخاب خارج شود. سلول را به وسیله یک بار کلیک روی لبه آن انتخاب کنید. در پنل Connections Inspector می‌توانید ببینید که imageView ،textLabel ،detailTextLabel و tertiaryTextLabel از قبل اتصال یافته‌اند. آن‌ها به عنوان بخش از فرایند کپی و چسباندن از RightChatTableViewCell.xib درج شده‌اند. بنابراین در این بخش کار دیگری برای انجام دادن نداریم.

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

فایل Main.storyboard را در پنل Project Navigator انتخاب کنید. به صحنه Cells اسکرول کنید. روی سلول اول کلیک کنید تا انتخاب شود. روی سلول سوم شیفت+کلیک کنید تا هر دو سلول اول و دوم انتخاب شوند.

در پنل Identity Inspector مقدار Class را به LeftChatTableViewCell تغییر دهید و Return را نیز بزنید.

اپلیکیشن را اجرا کنید. روی زبانه Chat کلیک کنید. تأیید کنید که حباب‌های چپ و راست Chat مطابق انتظار ما نمایش یافته‌اند.

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

همانند همه بخش‌های قبلی این سری مطالب آموزشی، برای ذخیره تغییرات پروژه به روش زیر عمل می‌کنیم:

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

  Chat: Added cells with left and right message bubbles

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

جمع‌بندی

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

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

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

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

==