جلسه سوم آموزش ios :ساخت اپ Table View - بخش اول

جلسه سوم:

ساخت یک اپ ساده Table View- بخش اول

به روز رسانی: اگر از Xcode 5 استفاده می کنید، لطفاً آموزش جدید درباره UITABLEView را مشاهده نمایید.

ساخت اپ HelloWorld برای شما جذابیت داشت؟ در این آموزش، ما به موارد پیچیده تر و ساخت یک اپ ساده با استفاده از Table View خواهیم پرداخت. اگر تا کنون آموزش های قبلی در مورد پایه برنامه نویسی iOS را نخوانده اید، قبل از این که این پست را بخوانید، به مطالب قبلی مراجعه نمایید.
اول بیایید به این سؤال پاسخ دهیم:  Table View در اپ آیفون چیست؟
 Table View یکی از المان های متداول UI در اپ های iOS می باشد. بیشتر اپ ها، از Table View برای نمایش لیستی از داده ها استفاده می کنند. بهترین مثال، برنامه Phone می باشد. مخاطبان شما در یک Table View نمایش داده می  شوند. مثال دیگر، اپ Mail است. این اپ از Table View برای نمایش نامه های الکترونیکی صندوق پستی شما استفاده می کند. Table View فقط برای نمایش داده های متنی استفاده نمی شود. Table View اجازه می دهد داده ها را در قالب تصویر نیز نشان دهید. اپ داخلی ویدئو و یوتیوب مثال های خوبی از این کاربرد می باشند.

ایجاد پروژه SimpleTable

بیایید دست به کار شویم و ایده table view را به صورت یک اپ ساده پیاده سازی نماییم. اگر در برنامه نویسی جدی هستید، نگاه گذرا به این مقاله نیاندازید، Xcode خود را باز کنید! این بهترین راه برای مطالعه برنامه نویسی می باشد.
پس از راه اندازی Xcode، پروژه جدید را برای “Single View application” ایجاد کنید.

برای ادامه، روی گزینه “Next” کلیک نمایید. دوباره گزینه های موردنیاز برای پروژه Xcode را تکمیل نمایید:

• Product Name: SimpleTable این نام پروژه شماست.
• Company Identifier: اگر شما یک نام دامنه دارید، می توانید از آن استفاده کنید؛ در غیر این صورت، از نام خود یا از عبارت  “edu.self” استفاده کنید.
• ClassPrefix: SimpleTable Xcode به طور خودکار از پیشوند (prefix) برای نام گذاری کلاس استفاده می کند. در آینده ممکن است پیشوند خود را انتخاب کرده یا حتی آن را خالی بگذارید. اما برای این آموزش، اجازه دهید آن را ساده نگه داریم و از “SimpleTable” استفاده کنیم.
• Device Family: iPhone برای این پروژه فقط عبارت “iPhone” را استفاده کنید.
• Use StoryBoards: برای این پروژه این گزینه را انتخاب نکنید. برای چنین پروژه ی ساده ای نیاز به انتخاب Storyboards نداریم.
• Use Automatic Reference Counting: این گزینه را انتخاب کنید. به صورت پیش فرض، این گزینه باید به صورت انتخاب شده باشد. همان طور که هست رهایش کنید.
• Include Unit Tests: این گزینه را انتخاب نکنید و به صورت انتخاب نشده رهایش کنید. الان شما نیازی به کلاس unit test ندارید.

برای ادامه، روی کلید “Next” کلیک نمایید. Xcode سپس از شما در خصوص محل ذخیره سازی پروژه “SimpleTable” می پرسد. یک پوشه (به طور مثال روی دسکتاپ) روی مک خود انتخاب نمایید. مانند پروژه قبل گزینه Source Control را انتخاب نکنید. برای ادامه کلید “Next” را کلیک نمایید.

Xcode به طور خودکار پروژه “SimpleTable” را بر اساس تمام گزینه هایی که شما وارد کرده اید، ایجاد می کند. صفحه نمایش به شکل زیر خواهد بود:

طراحی نمودن شمای پروژه

ابتدا، ما رابط کاربری را ایجاد خواهیم نمود و سپس یک table view به پروژه اضافه خواهیم کرد. برای تغییر به Interface Builder فایل “SimpleTableViewController.xib” را انتخاب نمایید.

در کتابخانه اشیاء، شیء  “TableView” را انتخاب کرده و آن را به داخل پنجره view درگ کنید.

صفحه نمایش شما باید بعد از افزودن “TableView” شبیه تصویر زیر باشد:

اپ خود را برای اولین بار اجرا نمایید.
قبل از این که کار را ادامه دهید، سعی کنید اپ خود را با استفاده از شبیه ساز اجرا نمایید. روی کلید “Run” کلیک کرده و اپ خود را بسازید و آن را تست نمایید.

صفحه شبیه ساز مطابق تصویر زیر خواهد بود:

کار ساده ای هست! موافق هستید؟ شما تقریباً Table View را در اپ خود طراحی کردید. الان هیچ داده ای روی صفحه نخواهید دید. در ادامه، برای اضافه کردن جدول داده، کدنویسی خواهیم کرد.
افزودن جدول داده
به Project Navigator برگردید و “SimpleTableViewController.h” را انتخاب کنید.
“<UITableViewDelegate, UITableViewDataSource>” را بعد از “UIViewController” اضافه کنید.
کد شما باید شبیه کدهای زیر باشد:

#import <UIKit/UIKit.h>
 
@interface SimpleTableViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>
 
@end

“UITableViewDelegate” و “UITableViewDataSource” در Objective-C به عنوان پروتکل برای نمایش Table View شناخته می شوند. ما باید از الزامات تعریف شده در پروتکل ها پیروی کرده و همه متدهای اجباری را پیاده سازی نماییم.

UITableViewDelegate  و UITableViewDataSource

پیش تر ما پروتکل های “UITableViewDelegate” و “UITableViewDataSource” در فایل هدر اضافه کردیم. شاید گیج کننده باشد. آنها چه چیزی هستند؟
UITableView کلاس واقعی پشت Table View است که برای انعطاف پذیری در اداره نمودن انواع مختلف داده ها طراحی شده اند. شما ممکن است بخواهید لیستی از کشورها یا نام شماره تماس های خود را نمایش دهید. یا مانند این مثال، ما table view را برای نمایش لیستی از دستور پخت ها استفاده می کنیم.
پس چگونه به UITableView بگوییم لیستی از داده ها را نمایش دهد؟
 UITableViewDataSource پاسخ سؤال است. این پروتکل موجب پیوند بین داده های شما و table view می شود.
پروتکل UITableViewDataSource دو متد موردنیاز (tableView:cellForRowAtIndexPath and tableView:numberOfRowsInSection) را که شما باید پیاده سازی نمایید، ارائه می دهد.
از طریق پیاده سازی این متدها، شما به Table view می گویید که چه تعداد سطر را نمایش داده و داده های هر سطر را اعلام می کنید.
از سوی دیگر، UITableViewDelegate با ظاهر UITableView سروکار دارد. روش های اختیاری از پروتکل ها به شما اجازه می دهند که ارتفاع ردیف جدول، بخش های header و footer، مرتب سازی مجدد سلول های جدول و غیره را مدیریت نمایید. ما هیچ تغییری در این متدها در این مثال ایجاد نمی کنیم. این کار را در آموزش های بعدی دنبال خواهیم نمود.

سپس “SimpleTableViewController.m” را انتخاب کرده و یک متغیر نمونه برای نگهداری داده جدول تعریف نمایید:

@implementation SimpleTableViewController
{
    NSArray *tableData;
}

در متد “viewDidLoad” کد زیر را برای مقداردهی آرایه “tableData” اضافه کنید. ما یک آرایه با لیستی از دستور پخت ها را مقداردهی می کنیم

- (void)viewDidLoad
{
    [super viewDidLoad];
 // Initialize table data
    tableData = [NSArray arrayWithObjects:@"Egg Benedict", @"Mushroom Risotto", @"Full Breakfast", @"Hamburger", @"Ham and Egg Sandwich", @"Creme Brelee", @"White Chocolate Donut", @"Starbucks Coffee", @"Vegetable Curry", @"Instant Noodle with Egg", @"Noodle with BBQ Pork", @"Japanese Noodle with Pork", @"Green Tea", @"Thai Shrimp Cake", @"Angry Birds Cake", @"Ham and Cheese Panini", nil];
}

در بخش دوم، ادامه مطالب را دنبال کنید.