کار با UITableView در Xcode 5 با استفاده از Storyboard

کار با UITableView در Xcode 5 با استفاده از Storyboard

زمانی که دوره آموزش برنامه نویسی iOS را شروع کردیم ، ما یک آموزش درباره UITableView (جلسه سوم) داشتیم و نشان دادیم که چگونه با استفاده از Storyboard یک اپ ساده table بسازیم. این جلسه آموزشی یکی از محبوب ترین جلسات آموزشی ما می باشد. با این حال ، ممکن است امکان انجام این کار از طریق Xcode 5 به شما داده نشود. آخرین نسخه Xcode ، اجازه استفاده از Storyboard را از طریق Interface Builder نمی دهد. Storyboard ها دیگر گزینه اختیاری در هنگام ایجاد یک پروژه Xcode جدید نمی باشند و به صورت پیش فرض در Xcode قرار دارند. یکی از دلایلی که نمی توانیم مراحل آموزش UITableView  در جلسه سوم را برای ایجاد اپ جدید در Xcode 5 دنبال نماییم ، همین موضوع است.

به هر حال ، تصمیم گرفتیم که آموزش جلسه سوم را به طور کامل برای Xcode 5 و iOS 7 به روز رسانی کنیم و الان اینجا هستیم.

وارد آموزش UITableView می شویم.

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

ایجاد یک پروژه SimpleTable

با داشتن درکی از table view ، بیایید دست به کار شویم و یک اپ ساده را ایجاد نماییم. اگر در یادگیری برنامه نویسی iOS جدی هستید ، فقط به خواندن دوره های آموزشی اکتفا نکنید. خواندن را متوقف سازید ، Xcode خود را باز کرده و کدنویسی کنید! این بهترین روش برای مطالعه برنامه نویسی می باشد.

بعد از این که Xcode راه اندازی شد ، یک پروژه جدید با استفاده از تمپلت “Single View application” ایجاد می کنیم.

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

• Product Name : نام پروژه را SimpleTable قرار می دهیم.
• Company Identifier : اگر شما یک نام دامنه دارید، می ­توانید از آن استفاده کنید؛ در غیر این صورت، از نام خود یا از عبارت  “edu.self” استفاده کنید.
• ClassPrefix: SimpleTable Xcode به طور خودکار از پیشوند (prefix) برای نام­گذاری کلاس استفاده می ­کند. در آینده ممکن است پسوند خود را انتخاب کرده یا حتی آن را خالی بگذارید. اما برای این آموزش، اجازه دهید آن را ساده نگه داریم و از “SimpleTable” استفاده کنیم.
• Device Family: iPhone برای این پروژه فقط عبارت “iPhone” را استفاده می کنیم.

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

طراحی View

ابتدا، ما رابط کاربری را ایجاد خواهیم نمود و سپس یک table view را به پروژه اضافه خواهیم کرد. برای سوئیچ به رابط Storyboard ، گزینه Main.storyboard را انتخاب می کنیم.

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

ارتفاع آن را کمی کاهش می دهیم ، تا status bar را نپوشاند. صفحه نمایش ما پس از افزودن table view ، باید شبیه تصویر زیر باشد.

اجرای اپ برای اولین بار

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

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

کار ساده ­ای هست! موافق هستید؟ تقریباً Table View را در اپ خود طراحی کردیم. الان هیچ داده ­ای روی صفحه نمی بینیم. در ادامه، برای اضافه کردن داده های جدول ، باید کمی کدنویسی کنیم.

افزودن داده های جدول

به Project Navigator بر گشته و فایل “SimpleTableViewController.h” را انتخاب می کنیم. بعد از “UIViewController” نماد “” را اضافه می کنیم . کد ما باید شبیه زیر باشد:

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

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

پیاده سازی UITableViewDelegate  و  UITableViewDataSource

پیش ­تر ، ما پروتکل ­های “UITableViewDelegate” و “UITableViewDataSource” را در فایل هدر اضافه کرده ایم. ممکن است این دو پروتکل برای شما گیج ­کننده باشند. این دو پروتکل چه چیزی هستند؟

UITableView ، کلاس واقعی پشت Table View است ، که برای ایجاد انعطاف ­پذیری در هندل نمودن انواع مختلف داده ­ها طراحی شده ­است. ممکن است بخواهید که لیستی از کشورها یا نام شماره تماس ­های خود را نمایش دهید. یا مانند این مثال ما ، table view را برای نمایش لیستی از دستور پخت­ ها استفاده نمایید. پس چگونه به UITableView بگوییم که لیستی از داده ­ها را نمایش دهد؟  UITableViewDataSource پاسخ سؤال است. این پروتکل موجب پیوند بین داده­ های ما و table view می­ شود. پروتکل UITableViewDataSource ، دو متد موردنیاز (tableView:cellForRowAtIndexPath  و tableView:numberOfRowsInSection) را که باید پیاده ­سازی نماییم، اعلام می کند. از طریق
پیاده­ سازی این متدها ، ما به Table view می­ گوییم که چه تعداد سطر را نمایش داده و داده ­های هر سطر را اعلام می ­کنیم.

از سوی دیگر ، UITableViewDelegate با ظاهر UITableView سروکار دارد. متد­های اختیاری از پروتکل­ ها به ما اجازه می­ دهند که ارتفاع ردیف جدول ، پیکربندی بخش ­های header و footer ، مرتب­ سازی مجدد سلول ­های جدول و غیره را مدیریت نماییم. ما در این مثال ، هیچ تغییری در این متدها ایجاد نمی ­کنیم. این کار را در آموزش­ های بعدی دنبال خواهیم نمود.

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

@implementation SimpleTableViewController
{
    NSArray *recipes;
}

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

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Initialize table data
    recipes = [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];
}

آرایه چیست؟

آرایه یک ساختار داده اصلی در برنامه ­نویسی کامپیوتری می­ باشد. می ­توانیم یک آرایه را به صورت مجموعه ­ای از المان­ های داده ­ای تصور کنیم. آرایه recipes در کد بالا را در نظر بگیرید، این آرایه ، مجموعه ­ای از المان ­های متنی را نشان می ­دهد. می ­توانیم آرایه را مانند شکل زیر تصویرسازی کنیم:

هر یک از المان ­های آرایه به وسیله یک ایندکس قابل شناسایی یا قابل دسترسی هستند. یک آرایه با 10 المان از 0 تا 9 ایندکس­ گذاری می­ شوند. به این معنی که، [recipes[0 ، اولین المان از آرایه “recipes” را بر می­ گرداند.

در Objective-C ، آرایه NSArray کلاسی برای ایجاد و مدیریت آرایه می­ باشد. می­ توانیم از NSArray برای ایجاد آرایه استاتیک که اندازه ثابتی دارد ، استفاده کنیم. اگر به یک آرایه پویا نیاز داشته باشیم ، از NSMutableArray استفاده می کنیم.

NSArray مجموعه ­ای از روش­ های factory برای ایجاد یک شیء آرایه را­ ارائه می ­نماید. در کدهای ما، از “arrayWithObjects” برای نمونه­ سازی یک شیء NSArray استفاده می ­کنیم و آن را با المان­ های خاصی (مانند Hamburger ) پیش ­بار گذاری می کنیم.

ما هم­ چنین می ­توانیم از متدهای دیگر built-in ، برای پرس­ و جو و مدیریت آرایه استفاده نماییم. بعداً ، ما متد “count” را برای پرس و جو تعداد المان های داده ای در آرایه فراخوانی خواهیم کرد. برای کسب اطلاعات بیشتر در مورد استفاده از NSArray شما می­ توانید به مستند  Apple’s official document مراجعه نمایید.

در نهایت ، ما باید دو متد datasource را اضافه نماییم: “tableView:numberOfRowsInSection” و “tableView:cellForRowAtIndexPath”. این دو متد بخشی از پروتکل UITableViewDataSource می ­باشند. پیاده سازی این متدها در هنگام پیکربندی یک UITableView ضروری است. اولین متد ، برای اطلاع table view از تعداد سطرها در هر بخش ، مورد استفاده قرار می گیرد. پس بیایید ، کد زیر را اضافه کنیم. متد “:count” به سادگی تعداد اقلام موجود در آرایه “recipes” را بر می ­گرداند.

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [recipes count];
}

در ادامه ، ما متدی مورد نیاز بعدی را پیاده سازی می کنیم.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *simpleTableIdentifier = @"SimpleTableCell";
 
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
 
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
    }
 
    cell.textLabel.text = [recipes objectAtIndex:indexPath.row];
    return cell;
}

متد “:cellForRowAtIndexPath” هر زمان که یک سطر جدول نمایش داده می ­شود، فراخوانی می ­شود. تصویر زیر درک بهتری از چگونگی عملکرد UITableView و UITableDataSource ارائه می ­دهد.

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

چرا هنوز اپ خالی می باشد؟ ما قبلاً ، کد موردنیاز را برای ایجاد داده های جدول را نوشته ایم و متدهای موردنیاز را پیاده سازی کرده ایم. اما چرا table view چیزی را که انتظار داریم ، هنوز نشان نمی دهد؟

هنوز یک کار هست که انجام نداده ایم.

متصل کردن DataSource و Delegate

مانند کلید “Hello World” در آموزش جلسه اول، ما باید اتصال بین Table View و دو متدی که ایجاد کرده ایم را باید برقرار نماییم.

به Main.Storyboard یاز می گردیم. Table view را انتخاب می کنیم. کلید Control از صفحه کلید را فشرده و نگه می داریم ، روی Table View کلیک کرده و  آن را به آیکون بارانداز “Simple Table View Controller” درگ می کنیم. صفحه نمایش باید همانند شکل زیر باشد:

هر دو کلید را رها می کنیم و یک پیام به صورت pop-up با دو مقدار “dataSource” و “delegate” نشان داده می شود. گزینه “dataSource” را برای ایجاد ارتباط بین  Table View و data source آن ، انتخاب می کنیم. مراحل بالا را تکرار کرده و یک ارتباط با delegate ایجاد می نماییم.

کار انجام شد. برای مطمئن شدن از برقراری درست اتصالات ، می­ توانیم دوباره Table View را انتخاب کنیم. در بخش بالایی از Utility area ، می ­توانیم ارتباطات موجود در  “Connection Inspector” (یعنی سمت راست ترین tab) را ببینیم.

تست اپ

در نهایت ، اپ ما ، برای تست آماده هست. به سادگی روی کلید “Run” کلیک کرده و اجازه می دهیم شبیه­ ساز اپ ما را بار گذاری نماید:

افزودن تصاویر بندانگشتی به Table View

Table view فعلی بسیار ساده هست. درسته؟ نظر شما درباره افزودن یک تصویر به هر ردیف چیست؟ iOS SDK باعث می ­شود این کار به آسانی انجام شود. ما فقط نیاز داریم که یک خط کد را برای قرار دادن یک تصویر کوچک برای هر ردیف اضافه کنیم.

ابتدا، یک تصویر ساده را از اینجا  download this sample image دانلود می کنیم. ممکن است تمایل داشته باشید از تصویر موردنظر خود استفاده نمایید ، باید مطمئن شوید نام تصویر “creme_brulee.jpg” باشد. در  Navigator پروژه ، روی پوشه “SimplyTable” کلیک راست کرده و گزینه “...Add Files to SimpleTable” را انتخاب می کنیم.

فایل تصویری را که دانلود کرده ایم ، انتخاب کرده و چک ­باکس  “Copy items to destination group’s folder” را انتخاب می کنیم. با انتخاب این گزینه ، تصاویر به پوشه پروژه ، کپی خواهد شد. برای افزودن فایل ، کلید “OK” را کلیک می کنیم.

اکنون فایل  “SimpleTableViewController.m” را ویرایش می کنیم و خط کد زیر را به متد “tableView:cellForRowAtIndexPath” اضافه کرده و آن را درست قبل از عبارت  “return cell” قرار می دهیم:

cell.imageView.image = [UIImage imageNamed:@"creme_brelee.jpg"];

کد ما ، باید بعد از ویرایش شبیه کد زیر باشد:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *simpleTableIdentifier = @"SimpleTableCell";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
    
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
    }
    
    cell.textLabel.text = [recipes objectAtIndex:indexPath.row];
    cell.imageView.image = [UIImage imageNamed:@"creme_brelee.jpg"];
    
    return cell;
}

سلول table view با یک خصیصه پیش فرض برای نشان دادن تصویر همراه است. این خط کد ، تصویر را به سادگی بار گذاری کرده و آن را در ناحیه تصویر سلول جدول نمایش می دهد. اکنون ، روی کلید “Run” دوباره کلیک می کنیم. اپ SimpleTable  ما باید تصویر را در هر ردیف نشان دهد:

خلاصه

ایجاد table view ساده هست ، موافق هستید؟ Table View یکی از رایج­ ترین المان­ های برنامه ­نویسی iOS است. اگر آموزش را به طور کامل دنبال کرده و اپ آزمایشی را ساخته باشید ، شما باید درک پای ه­ای از چگونگی ایجاد table view را به دست آورده باشید. ما سعی می­ کنیم همه چیز در اپ آزمایشی ساده باشد. در اصل، نباید داده­ های جدول به طور مستقیم در کدها نمایان شوند. معمولاً از فایل پایگاه داده یا جایی دیگر برای بارگذاری داده ­ها استفاده می­ شود. در جلسات آموزشی دوره برنامه نویسی iOS ، به این مباحث پرداخته شده است. می توانید برای اطلاع از نحوه انجام این کار به این جلسات آموزشی مراجعه نمایید. اما قبل از ادامه کار ، مطمئن شوید که به طور کامل نحوه عملکرد Table view را متوجه شده اید. در غیر این صورت ، دوباره این جلسه را مرور نمایید.