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

جلسه سوم:

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

آرایه چیست؟

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

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

اولین المان از آرایه “tableData” را بر می گرداند.
در Objective-C در حقیقت  NSArray ، کلاسی برای ایجاد و مدیریت آرایه می باشد. شما می توانید از NSArray برای ایجاد آرایه استاتیک برای مقادیر ثابت استفاده نمایید. اگر شما یک آرایه پویا نیاز دارید، از NSMutableArray استفاده نمایید.
NSArray مجموعه ای از روش های کارخانه ای برای ایجاد یک شیء آرایه ای پیشنهاد می نماید. در کد ما، از “arrayWithObjects” برای نمونه سازی یک شیء از NSArray استفاده می کنیم و آن را با المان های خاص (مانند همبرگر) پیش بارگزاری می کنیم.
شما هم چنین می توانید از روش های دیگر ساخته شده برای پرس و جو و مدیریت آرایه استفاده نمایید. بعدها، ما روش “count” را برای پرس و جوی المان های داده در آرایه معرفی خواهیم نمود. برای کسب اطلاعات بیشتر در مورد استفاده از NSArray شما می توانید به مستندات رسمی اپل مراجعه نمایید.
در نهایت، ما باید دو متد datasource را اضافه نماییم:
“tableView:numberOfRowsInSection” و “tableView:cellForRowAtIndexPath”.
این دو متد بخشی از پروتکل UITableViewDataSource می باشند. تنظیم UITableView برای پیاده سازی متدها ضروری است. اولین متد، برای اطلاع table view از تعداد سطرها مورد استفاده قرار می گیرد. پس اجازه دهید کد زیر را اضافه کنیم. متد “count” به سادگی تعداد اقلام موجود در آرایه “tableData” را برمی گرداند.
 

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

سپس، دیگر روش های مورد نیاز را پیاده سازی می کنیم.

- (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];
    return cell;
}

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

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


چرا هنوز صفحه خالی هست؟ ما قبلاً کد تولید داده های جدول را نوشته ایم و روش های موردنیاز را پیاده سازی کرده ایم. اما چرا Table View هنوز نمایش داده نمی شود؟
هنوز یک چیز باقی مانده هست.

متصل کردن DataSource و Delegate

مانند کلید “Hello World” در آموزش جلسه اول، ما باید اتصال بین Table View و دو متد ایجاد شده را برقرار نماییم.
به “SimpleTableViewController.xib” برگردید. کلید Control از صفحه کلید را فشرده و نگه دارید، Table View را انتخاب کرده و به داخل “File’s Owner” درگ کنید. صفحه نمایش شما باید مانند شکل زیر باشد:

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

دقیقاً همین کار را انجام دهید. برای اطمینان از این که اتصالات به درستی برقرار شده اند، شما می توانید دوباره Table View را انتخاب نمایید. در بخش بالایی از ناحیه Utility، می توانید ارتباطات موجود در  “Connection Inspector” را نشان دهید.

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

به Table View خود تصاویر بندانگشتی اضافه کنید

Table view بسیار ساده هست. درسته؟ نظر شما درباره افزودن یک تصویر به هر ردیف چیست؟ iOS SDK باعث می شود این کار به آسانی انجام شود. شما فقط نیاز دارید یک خط کد را برای قرار دادن یک تصویر کوچک برای هر ردیف اضافه کنید.
ابتدا، یک تصویر ساده را دانلود نمایید. ممکن است تمایل داشته باشید از تصویر خود استفاده نمایید، باید مطمئن شوید نام تصویر “creme_brulee.jpg” باشد. در  Navigator پروژه، روی پوشه “SimplyTable” کلیک راست کرده و “Add Files to SimpleTable…” را انتخاب نمایید.


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

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

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

کد شما باید بعد از ویرایش مطابق زیر باشد:

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

آموزش بعدی چیست؟

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