جلسه چهارم آموزش ios : سفارشی سازی Table View - کلیک سایت

جلسه چهارم:

سفارشی سازی سلول های Table View برای UITableView

در جلسه قبل از آموزش برنامه نویسی iOS ، ما یک اپ ساده Table View برای نشان دادن لیستی از دستور پخت ها با یک تصویر از پیش تعریف شده، ساختیم. در این آموزش ما کار بر روی اپ قبلی را ادامه داده و آن را بهتر خواهیم کرد:

• نمایش تصاویر متفاوت برای هر ردیف - در نسخه قبلی، ما برای همه ردیف های جدول یک تصویر بندانگشتی نمایش دادیم. نشان دادن تصویر واحد برای هر دستور پخت کار درستی نیست!
• سفارشی کردن سلول table view- به جای استفاده از سبک پیش فرض سلول table view، ما قصد داریم قالب خودمان را بسازیم.

نمایش تصاویر بندانگشتی متفاوت

قبل از این که اقدام به تغییر کد بکنیم، بیایید دوباره کد نمایش تصویر بند انگشتی در ردیف های جدول را مرور کنیم.

ما یک خط کد به ساختار UITableView برای نمایش تصویر “creme_brelee.jpg”  اضافه کردیم. بدیهی است برای نشان دادن تصاویر متفاوت، ما باید این خط کد را تغییر دهیم. همان طور که قبلاً توضیح داده شد، متد “cellForRowAtIndexPath” به صورت خودکار ، قبل از نمایش هر سطر جدول توسط iOS فراخوانی می شود.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

اگر به پارامتر متد نگاه کنید، خواهید دید که “indexPath” را زمانی که درخواست می شود، ارسال می کند. پارامتر indexPath حاوی شماره ردیف جدول (و هم چنین شماره بخش) ردیف جدول است. شما می توانید به سادگی از صفت “indexPath.row” برای پیدا کردن این که کدام ردیف در حال حاضر به آن اشاره شده است، استفاده کنید. مانند آرایه، شماره ردیف جدول از صفر شروع می شود. به عبارت دیگر، صفت  “indexPath.row” مقدار 0 را برای اولین ردیف از جدول برمی گرداند.
برای نشان دان تصاویر بندانگشتی متفاوت، یک آرایه جدید ( برای مثال thumbnails) اضافه می کنیم که نام فایل thumbnailها را ذخیره می کند.

@implementation SimpleTableViewController
{
    NSArray *tableData;
    NSArray *thumbnails;
}
 
- (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];
    
    // Initialize thumbnails
    thumbnails = [NSArray arrayWithObjects:@"egg_benedict.jpg", @"mushroom_risotto.jpg", @"full_breakfast.jpg", @"hamburger.jpg", @"ham_and_egg_sandwich.jpg", @"creme_brelee.jpg", @"white_chocolate_donut.jpg", @"starbucks_coffee.jpg", @"vegetable_curry.jpg", @"instant_noodle_with_egg.jpg", @"noodle_with_bbq_pork.jpg", @"japanese_noodle_with_pork.jpg", @"green_tea.jpg", @"thai_shrimp_cake.jpg", @"angry_birds_cake.jpg", @"ham_and_cheese_panini.jpg", nil];
}

همان طور که در کد بالا می بینید، یک آرایه thumblails را با لیستی از نام تصاویر تعریف کردیم. ترتیب تصاویر مطابق با “tableData” می باشد.
شما می توانید تصاویر مورنظر خود را دانلود کرده و آنها را به پروژه خود اضافه نمایید. مطمئن شوید که “Copy items into destination group’s folder” فعال شده باشد.

بعد از اضافه کردن فایل های تصویری، باید آنها را در Navigator پروژه پیدا کنید، مانند شکل زیر:

در آخر، خط کد در متد “cellForRowAtIndexPath” را تغییر دهید:

cell.imageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];

[thumbnails objectAtIndex:indexPath.row] چیست؟

این خط کد، نام تصویر را برای ردیف خاصی برمی گرداند. برای اولین ردیف، صفت indexPath.row ، مقدار صفر را برمی گرداند و ما اولین تصویر (برای مثال egg_benedict.jpg) را از آرایه ی thumbnails با استفاده از متد “objectAtIndex” می گیریم.
بعد از ذخیره کردن همه تغییرات، سعی کنید اپ خود را دوباره اجرا کنید. الان باید تصاویر بندانگشتی متفاوتی برای ردیف های جدول نشان دهد.


در ادامه آموزش مقدماتی برنامه نویسی iOS به نحوه سفارشی سازی سلول های جدول می پردازیم.

سفارشی سازی کردن سلول های Table View

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

طراحی کردن سلول

در این مورد، ما باید یک سلول جدول برای خودمان طراحی و ایجاد کنیم. بیایید به Xcode برگردیم. در Navigator پروژه، روی پوشه “SimpleTable” کلیک راست کرده و “New File…” را انتخاب کنید.

برای طراحی سلول جدول خود، ما نیاز داریم یک فایل جدید Interface Builder برای سلول ایجاد کنیم. برای این مورد، ما باید با یک رابط کاربری “Empty” شروع کنیم. برای ادامه روی کلید “Next” کلیک کنید.

زمانی که device family را انتخاب می کنید، “iPhone” را وارد کنید و برای ادامه روی کلید “Next” کلیک کنید. فایل را به عنوان “SimpleTableCell” ذخیره کنید.


هنگامی که فایل ایجاد شد، شما باید آن را در Navigator پروژه پیدا کنید. فایل “SimpleTableCell.xib” را برای تغییر به  Interface Builder انتخاب کنید.
در Object Library، گزینه “Table View Cell” را انتخاب کرده و آن را به ناحیه طراحی رابط، درگ کنید.

برای قرار دادن یک تصویر بندانگشتی بزرگ تر، ما باید ارتفاع سلول را تغییر دهیم. کافی است سمت بالا/پایین از سلول را گرفته و به مقیاس 78 تغییر دهیم.

هم چنین می توانید از “Size Inspector” برای تغییر ارتفاع استفاده کنید.

سپس، گزینه “Attributes Inspector” را در بالای بخش Utility area انتخاب کرده و “Identifier” از سلول سفارشی را به “SimpleTableCell” تنظیم کنید. این شناسه بعداً در کد ما استفاده خواهد شد.

بعد از پیکربندی شمای سلول جدول، می خواهیم المان های دیگر را در داخل آن قرار دهیم. “Image View” را انتخاب کرده و آن را به  Table View Cell درگ کنید.

این قسمت برای نمایش تصویر بندانگشتی استفاده خواهد شد. اندازه آن را متناسب با اندازه سلول تغییر دهید.
سپس، سه برچسب Name، Prep Time و Time را اضافه می کنیم. برچسب “Name” برای نشان دادن نام دستور پخت استفاده خواهد شد. “Prep Time” برچسب استاتیک هست که فقط برای نشان دادن متن “Prep Time” است. در آخر، برچسب “Time” داینامیک بوده و برای نشان دادن زمان پخت واقعی از دستور پخت خاص به کار می رود.
برای افزودن برچسب، “Lable” را در کتابخانه اشیاء انتخاب کرده و به داخل سلول درگ کنید. برای تغییر نام برچسب می توانید روی آن دوبار کلیک کنید.
ممکن است فونت و اندازه قلم شما از آن چه که در تصویر نشان داده شده است، متفاوت باشد. برای تغییر دادن سبک قلم، به سادگی Lable را انتخاب کرده و “Attribute Inspector” را انتخاب کنید. از این قسمت، شما می توانید تنظیمات “Font” و حداقل اندازه فونت را تغییر دهید. هم چنین می توانید رنگ متن را نیز تغییر دهید.

طرح نهایی شما باید شبیه شکل زیر باشد:

 

ایجاد یک کلاس برای سلول سفارشی شده

تاکنون در آموزش iOS، ما سلول جدول را طراحی کرده ایم. اما چگونه می توانیم مقادیر برچسب سلول سفارشی را تغییر دهیم؟ ما قصد داریم یک کلاس جدید برای سلول جدول سفارشی ایجاد کنیم. این کلاس نشان دهنده مدل داده قرار گرفته در سلول سفارشی است.
مانند قبل، روی پوشه “simpleTable” در Navigator پروژه کلیک راست کرده و  “New File…” را انتخاب کنید.

درست بعد از انتخاب این گزینه، Xcode از شما می خواهد تمپلت را انتخاب کنید. از آن جا که ما قصد ایجاد یک کلاس جدید برای شمای سلول جدول سفارشی داریم،  “Objective-C class” را در زیر “Cocoa Touch” انتخاب کرده و “next” را کلیک کنید.

برای نام کلاس مقدار  “SimpleTableCell” وارد کرده و برای گزینه “Subclass of” مقدار UITableViewCell را انتخاب کنید.

کلید “Next” را کلیک کنید. فایل را در پوشه SimpleTable project ذخیره کرده و برای ادامه کلید “Create” را کلیک کنید. Xcode باید دو فایل با نام های “SimpleTableCell.h” و “SimpleTableCell.m”  در Navigator پروژه ایجاد کند.
همان طور که قبلاً گفته شد، کلاس SimpleTableCell به عنوان مدل داده سلول سفارشی عمل می کند. داخل سلول، ما سه مقدار داریم که قابل تغییر هستند. نمایش تصویر بند انگشتی، برچسب نام و برچسب زمان. در کلاس، سه ویژگی برای نشان دادن این ارزش های پویا اضافه خواهیم کرد.
فایل “SimpleTableCell.h” را باز کرده و خصیصه های زیر را قبل از خط “@end” اضافه کنید.

@property (nonatomic, weak) IBOutlet UILabel *nameLabel;
@property (nonatomic, weak) IBOutlet UILabel *prepTimeLabel;
@property (nonatomic, weak) IBOutlet UIImageView *thumbnailImageView;

Property  و  Outletچه چیزی هستند؟

خطوط کدهای بالا سه متغیر نمونه را تعریف می کنند که بعداً برای شمای سلول جدول در Interface Builder اختصاص داده خواهند شد. کلمه کلیدی  “@property” برای اعلان یک خصیصه داخل کلاس در قالب زیر استفاده شده است.

@property (attributes) type name;

با اشاره به خطوط کد بالا، weak و nonatomic صفت های خصیصه property هستند. UILable و UIImageView نوع ها هستند، در حالی که “nameLabel” و “prepTimeLabel” و “thumbnailImageView” نام ها هستند.
پس IBOutlet چیست؟ شما می توانید IBOutlet را به عنوان یک شاخص تصور کنید. برای ارتباط برقرار کردن متغیرهای نمونه با المان ها در
Table View Cell (به طور مثال، SimpleTableCell.xib) ، از کلمه کلیدی “IBOutlet” استفاده می کنیم تا اجازه دهیم Interface Builder بداند که آنها مجاز به ایجاد ارتباط هستند. بعداً، خواهید دید چگونه می توان ارتباط بین این Outlet ها و اشیاء در Interface Builder ایجاد کرد.
اکنون، فایل “SimpleTableCell.m” را باز کرده و کد زیر درست زیر “@implementation SimpleTableCell” اضافه کنید:

@synthesize nameLabel = _nameLabel;
@synthesize prepTimeLabel = _prepTimeLabel;
@synthesize thumbnailImageView = _thumbnailImageView;

@synthesize Directive چیست؟

کلمه کلیدی “@synthesize” به کامپایلر می گوید که به طور خودکار کد را برای دسترسی به خواصی که قبلاً اعلام کردیم، ایجاد کند. اگر شما این اعلان را فراموش کنید، Xcode مانند شکل زیر اخطار خواهد داد:

ایجاد کردن ارتباطات

تغییرات را ذخیره کرده و فایل “SimpleTableCell.xib” را برای برگشت به Interface Builder انتخاب کنید. اکنون ما ارتباطات بین خصیصه های کلاس و Label/ImageView ایجاد شده در Interface را خواهیم ساخت.
ابتدا سلول را انتخاب کرده و در “Identity Inspector”، کلاس را به “SimpleTableCell” تغییر دهید. این کار شمای سلول را به کلاس سفارشی که قبلاً ایجاد شده، وابسته می کند.
اکنون، ارتباط با خصیصه ها را ایجاد خواهیم کرد. روی “SimpleTableCell”  که در زیر گزینه “Objects” قرار دارد، برای نشان دادن “Outlets” کلیک راست کنید. روی دایره مقابل “nameLabel” کلیک کرده و نگه دارید، سپس آن را به داخل شیء “Label – Name” درگ کنید. Xcode به طور خودکار ارتباط را ایجاد می کند.

رویه فوق را برای “prepTimeLabel” و “thumbnailImageView” تکرار کنید:

• اتصال “prepTimeLabel” با شیء “Label – Time”
• اتصال “thumbnailImageView” با شیء “ImageView”

بعد از این که تمام اتصالات را ایجاد کردید، باید شبیه شکل زیر باشد:

به روزرسانی SimpleTableViewController

تا این جا در آموزش برنامه نویسی iOS، ما طراحی و کدگذاری برای سلول سفارشی جدول را تکمیل کرده ایم. در نهایت، ما به بخش آخر تغییرات می رویم-
برای استفاده از سلول سفارشی در SimpleTableViewController.
بیایید دوباره کد فایل  “SimpleTableView.m” مرور کنیم که در حال حاضر برای ایجاد ردیف جدول استفاده شده است:

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

ما از شمای جدول پیش فرض (برای مثال UITableViewCell) برای نشان دادن اقلام جدول استفاده می کنیم. به منظور استفاده از سلول سفارشی جدول خود، باید در این بخش از کد، در فایل “SimpleTableView.m” مطابق زیر، تغییر ایجاد کنیم.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *simpleTableIdentifier = @"SimpleTableCell";
 
    SimpleTableCell *cell = (SimpleTableCell *)[tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
    if (cell == nil)
    {
        NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"SimpleTableCell" owner:self options:nil];
        cell = [nib objectAtIndex:0];
    }
    
    cell.nameLabel.text = [tableData objectAtIndex:indexPath.row];
    cell.thumbnailImageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];
    cell.prepTimeLabel.text = [prepTime objectAtIndex:indexPath.row];
    
    return cell;
}

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

مشکل چیست؟
کدی که ما تغییر داده ایم می گوید “SimpleTableViewController” از کلاس “SimpleTableCell” به عنوان سلول جدول استفاده نماید. “SimpleTableViewController” خودش در این موضوع هیچ ایده ای ندارد. برای همین هست که Xcode خطا نشان می دهد.

همان طور که در آموزش مقدماتی iOS- جلسه اول شرح دادیم، یک فایل هدر، interface یک کلاس را بیان می کند. برای اطلاع “SimpleTableViewController” از “SimpleTableCell”، ما باید فایل “SimpleTableCell.h” را به فایل “SimpleTableViewController.m” وارد نماییم.


با وارد کردن فایل “SimpleTableCell.h”،  “SimpleTableViewController” می داند که این فایل چیست و چگونه باید از آن استفاده نماید.
در آخر، با توجه به این که ارتفاع سلول 78 هست، کد زیر را در بالای @end اضافه نمایید.

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return 78;
}

حالا، کلید “Run” را کلیک کنید. اپ SimpleTable شما باید مانند تصویر زیر عمل کند:

تکلیف شما در آموزش برنامه نویسی iOS:
ممکن است دقت کرده باشید که اپ فقط “Time” و “Prep Time” را نشان می دهد. این مورد را به خود شما می سپاریم. سعی کنید برخی تغییرات را در کد خود ایجاد کرده و زمان آماده  سازی را خودتان آپدیت نمایید. در این صورت اپ شما شبیه تصویر زیر خواهد بود.

در جلسه بعدی آموزش برنامه نویسی iOS در مورد چه چیزی صحبت خواهیم کرد؟

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