دوره تکمیلی آموزش iOS: سفارشی سازی UITableView

دوره تکمیلی آموزش برنامه نویسی iOS: سفارشی سازی UITableView و پس زمینه UITableViewcell با استفاده از Storyboard

در آخرین جلسه از دوره تکمیلی برنامه نویسی iOS ، ما نحوه سفارشی سازی navigation bar و کلیدها را با استفاده از تصاویر پس زمینه ، نشان دادیم. در این جلسه ، قصد داریم نگاهی به سفارشی سازی و سبک بندی UITableView و UITableViewCell بیاندازیم.

اگر از ابتدا ، آموزش های ما را در دروه برنامه نویسی iOS دنبال کرده باشید ، می دانید که ما ، یک جلسه تحت عنوان سفارشی سازی سلول table view با استفاده از Interface Builder داریم. در این آموزش ، ما می خواهیم کارهای متفاوتی انجام دهیم. به جای استفاده از Interface Builder برای تغییر UITableViewCell ، قصد داریم نحوه استفاده از Storyboard ها جهت سبک بندی سلول را به شما نشان دهیم. Storyboard ها ، عملیات سفارشی سازی سلول های جدول را با معرفی سلول prototype ، بسیار ساده تر نموده است. به طور خلاصه ، شما می توانید موارد زیر را در این آموزش ، یاد بگیرید:

1. سفارشی سازی UITableViewCell با استفاده از Storyboard.
2. سبک بندی UITableViewCell و UITableView با تصاویر پس زمینه.

برای انجام سفارشی سازی ، یک table view ساده را کمی تغییر داده و آن را سبک بندی نموده و جذاب تر خواهیم کرد. برای کمک به شما ، جهت داشتن تمرکز بیشتر بر نحوه انجام سفارشی سازی ، ما پروژه Xcode را برای شما آماده کرده ایم ، تا کار را با آن شروع کنید. قبل از اقدام ، ابتدا پروژه Xcode را از اینجا  download the Xcode project دانلود کنید ( توجه: پروژه با استفاده از Xcode 4.5 ایجاد شده است).

طراحی سلول های Prototype در Storyboard

از زمان انتشار iOS 5 ، شرکت اپل ، Storyboard را جهت ساده کردن روش های طراحی رابط کاربری اپ ها ، معرفی نموده است. برای سفارشی سازی یک سلول جدول ، دیگر نیازی به ایجاد یک سلول جداگانه در Interface Builder نداریم. می توانیم سلول را در داخل ویرایشگر Storyboard طراحی کنیم.

پروژه Xcode را که دانلود کرده اید ، باز کنید. به Storyboard رفته و باید چیزی شبیه به تصویر زیر را مشاهده نمایید:

وقتی که یک UITableViewController  در Story اضافه می کنیم ، به طور پیش فرض ، باید یک سلول prototype را ببینیم. اکنون می توانیم عناصر کنترل UI دیگری (مانند UILabel ، UIImageView) به سلول prototype اضافه کنیم. بیایید ابتدا ارتفاع سلول را تغییر بدهیم. Prototype Cells را انتخاب کرده و بر روی inspector  مربوط به “size” کلیک کرده و row height را از 44 به 71 تغییر می دهیم.

در ادامه ، Image View را از object library به سلول prototype درگ می کنیم. دوباره ، image view را انتخاب کرده و در inspector مربوط به “Size” کلیک کرده و صفت های “X” ، “Y” ، “Width” و “Height”  را مطابق تصویر زیر تغییر می دهیم:

به inspector مربوط به “Attributes” سوئیچ می کنیم ، “Tag” را به 100 تنظیم می کنیم.  شما می توانید tag را به عنوان یک شناسه یکتا از UI control در نظر بگیرید. بعداً در داخل کدها ، ما از این tag برای تعیین image view استفاده خواهیم کرد.

سپس یک برچسب ، به سلول درگ کرده و نام آن را “RecipeName” قرار می دهیم. این برچسب برای نمایش نام دستور پخت ، مورد استفاده قرار می گیرد. در inspector مربوط به “Size” گزینه های “X” را به 92 ، “Y” را به 7 ، “Width” را به 186 و “Height” را به 21 تنظیم می کنیم. در inspector مربوط به “Attributes” گزینه font type را به “Helvetica Neue Condensed Bold” تغییر داده و اندازه فونت را به 21 points تنظیم می کنیم. در آخر ، مقدار “Tag” را به 101 تنظیم می کنیم.

برچسب دیگری را به سلول اضافه کرده و نام آن را “Details” قرار می دهیم. در inspector مربوط به “Size” ، مقدار “X” را به 92 ، “Y” را به 32 ، “Width” را به 186 و “Height” را به 33 تنظیم می کنیم. به inspector مربوط به “Attributes” سوئیچ می کنیم ، مقدار “Tag” را به 102 تنظیم می کنیم.

کدنویسی Table View Controller

با در اختیار داشتن رابط کاربری طراحی شده ، بیایید به سراغ بخش کدنویسی برویم. فایل “RecipeViewController.m” را که متناظر با Table View Controller است ، باز می کنیم ، متد “cellForRowAtIndexPath:” را مطابق کدهای زیر را تغییر می دهیم:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    
    // Configure the cell...
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }
    
    // Display recipe in the table cell
    Recipe *recipe = [recipes objectAtIndex:indexPath.row];
    UIImageView *recipeImageView = (UIImageView *)[cell viewWithTag:100];
    recipeImageView.image = [UIImage imageNamed:recipe.imageFile];
    
    UILabel *recipeNameLabel = (UILabel *)[cell viewWithTag:101];
    recipeNameLabel.text = recipe.name;
    
    UILabel *recipeDetailLabel = (UILabel *)[cell viewWithTag:102];
    recipeDetailLabel.text = recipe.detail;
 
    return cell;
}

کدی که ما اضافه کرده ایم (از خط 12 تا 20) برای نمایش دادن برچسب های سلول و image view می باشد. همان طور که در کدها مشاهده می شود ، ما متد “viewWithTag:” را با مقدار tag برای شناسایی مؤلفه UI فراخوانی کرده ایم.

اپ را کامپایل کرده و اجرا می نماییم. اپ باید مطابق تصویر زیر باشد:

سبک بندی UITableCell با تصویر پس زمینه

تاکنون ، ما نحوه ایجاد سلول جدول با استفاده از Storyboard را آموزش داده ایم ، اما ، سلول table view هنوز سبک ساده دارد. ما می خواهیم ظاهر و سلول های جدول را تغییر داده و آنها را زیباتر کنیم. در پروژه Xcode ، سه تصویر پس زمینه برای سلول جدول قرار داده ایم. تصاویر ، برای استفاده در انواع مختلف سلول ها طراحی شده اند.

کلاس UITableViewCell  به توسعه دهندگان امکان می دهد که یک background view را با استفاده از متد “backgroundView:” طراحی کنند. برای تخصیص تصویر پس زمینه سفارشی ، ما می توانیم یک شیء UIImageView  با تصویر پس زمینه ایجاد کرده و آن را به عنوان background view مربوط به سلول تنظیم نماییم . کد زیر را به متد “cellForRowAtIndexPath:” اضافه می کنیم:

    // Assign our own background image for the cell
    UIImage *background = [self cellBackgroundForRowAtIndexPath:indexPath];
    
    UIImageView *cellBackgroundView = [[UIImageView alloc] initWithImage:background];
    cellBackgroundView.image = background;
    cell.backgroundView = cellBackgroundView;

هنوز یک کار مانده است که فراموش کرده ایم. ما متد “cellBackgroundForRowAtIndexPath:” را پیاده سازی نکرده ایم. همان طور که قبلاً توضیح داده ایم ، ما سه نوع تصویر پس زمینه داریم. سلول های بالا و پایین با تصاویر پس زمینه متفاوت طراحی شده اند ، که با این کار از سایر سلول ها تفکیک می شوند. از این رو ، ما متد “cellBackgroundForRowAtIndexPath:” را برای تعیین تصویر پس زمینه جهت اختصاص آن به سلول ها ، ایجاد می کنیم. کد زیر را قبل از متد “cellForRowAtIndexPath:” اضافه می کنیم:

- (UIImage *)cellBackgroundForRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSInteger rowCount = [self tableView:[self tableView] numberOfRowsInSection:0];
    NSInteger rowIndex = indexPath.row;
    UIImage *background = nil;
    
    if (rowIndex == 0) {
        background = [UIImage imageNamed:@"cell_top.png"];
    } else if (rowIndex == rowCount - 1) {
        background = [UIImage imageNamed:@"cell_bottom.png"];
    } else {
        background = [UIImage imageNamed:@"cell_middle.png"];
    }
    
    return background;
}

برای اولین ردیف از سلول (یعنی rowIndex == 0) ، این متد ، تصویر سلول بالایی را باز می گرداند. اگر سلول ، آخرین سلول جدول (یعنی rowIndex == rowCount – 1) باشد ، متد ، تصویر سلول پایینی را باز می گرداند. برای مابقی سلول ها ، متد به سادگی تصویر سلول میانی را باز می گرداند.

در نهایت ، خط کد زیر را در متد “viewDidLoad” از فایل RecipeViewController.m اضافه می کنیم. این خط ، به سلول جدول می گوید که جداکننده را نشان ندهد ، زیرا تصاویر سلول ها ، قبلاً با جداکننده همراه شده اند.

    [self.tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];

اپ را کامپایل و اجرا می نماییم. کار این بخش ، با اپی مانند تصویر زیر تمام می شود:

سبک بندی پس زمینه Table View

اکنون ، ظاهر اپ خیلی بهتر به نظر می آید ، موافق هستید؟ بیایید آن را با تخصیص یک تصویر پس زمینه برای بخش view بهتر نماییم. کد زیر را به متد “viewDidLoad” از فایل RecipeViewController.m اضافه می کنیم.

    self.parentViewController.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"common_bg"]];
    self.tableView.backgroundColor = [UIColor clearColor];

از آن جایی که RecipeViewController  یک زیرکلاس از UITableViewController می باشد ، ما از “self.parentViewController” برای دسترسی به view والد آن ، پس از اختصاص دادن تصویر پس زمینه ، استفاده می کنیم. به طور پیش فرض ، table view به صورت رنگ سفید نمایش داده می شود. ما رنگ آن را به شفاف تنظیم می کنیم ؛ تا پس زمینه view والد را مسدود نکند.

قبل از این که اپ را اجرا کنیم ، می خواهیم یک تغییر دیگر نیز اعمال کنیم. table view اکنون بسیار نزدیک به navigation bar است. می توانیم یک فاصله (padding) در بالای Table view اضافه کنیم. برای افزودن فاصله ، می توانیم از خصیصه contentInset  ، برای تعیین یک ناحیه بافر اطراف محتوای بخش view استفاده کنیم. خصیصه contentInset  ، یک ساختار UIEdgeInsets با فیلدهای top ، bottom ، left و right می باشد. بیایید کد زیر را به “viewDidLoad” اضافه کنیم:

    UIEdgeInsets inset = UIEdgeInsetsMake(5, 0, 0, 0);
    self.tableView.contentInset = inset;

از طریق کد بالا ، یک ناحیه بافر اضافی حاصل می شود که اندازه آن 5 پیکسل در بالای table view می باشد. اپ را کامپایل کرده و دوباره اجرا می کنیم. اپ باید اکنون با padding اضافه شده و تصویر پس زمینه ، سفارشی شده باشد.

موضوع جلسه بعد چیست؟

امیدواریم که از این آموزش لذت برده باشید و برای شما مفید واقع شود. در جلسات قبل ، ما نحوه سفارشی سازی tab bar و navigation bar را نشان داده ایم. در ترکیب با این آموزش ، شما باید قادر باشید ، اپ مبتنی بر جدول خود را بیشتر جذاب تر نمایید. در جلسات بعد ، ما به شما نحوه سبک بندی سایر مؤلفه های UI را نشان خواهیم داد. با ما همراه باشید.