افزودن بخش و لیست ایندکس در UITableView در iOS

افزودن بخش و لیست ایندکس در UITableView

یک table view ایندکس شده ، کم و بیش شبیه یک table view با سبک ساده می باشد که ما آن را در جلسات ابتدایی از دوره آموزش برنامه نویسی iOS آموزش داده ایم. تنها تفاوت آنها در این است که در table view ایندکس شده ، لیستی از ایندکس ها ، در سمت راست table view نمایش داده می شود. استفاده از جدول ایندکس گذاری شده ، در اپ های iOS بسیار متداول می باشد. شناخته شده ترین مثال از کاربرد این جدول ها ، اپ داخلی Contacts در آیفون می باشد. با ایجاد یک index scrolling ، کاربران قادر خواهند بود به بخش خاصی از جدول ، بدون این که از تک تک بخش های آن عبور کنند ، دسترسی یابند.

اگر آموزش های ما در جلسات قبل را دنبال کرده باشید ، اکنون باید با نحوه پیاده سازی UITableView آشنایی داشته باشید. اساساً ، برای افزودن section (بخش) ها و index list (لیست ایندکس) در UITableView ، نیاز به کار با این متدها داریم که در پروتکل UITableViewDataSource  تعریف شده است:

• متد numberOfSectionsInTableView:  - تعداد کل بخش های یک table view را باز می گرداند. معمولاً شماره بخش ها از یک شروع می شوند. اگر بخواهیم بخش های چندتایی داشته باشیم ، این مقدار را به عدد بزرگ تری تنظیم می کنیم.
• متد titleForHeaderInSection: - عناوین هدر مربوط به بخش های مختلف را باز می گرداند. استفاده از این متد اختیاری است. اگر نخواهیم که به بخش ها ، عنوان اختصاص دهیم ، از این متد استفاده نمی کنیم.
• متد numberOfRowsInSection: - تعداد کل ردیف ها در یک بخش خاص را باز می گرداند.
• متد cellForRowAtIndexPath: - اگر با نحوه نمایش داده در UITableView آشنایی داشته باشید ، این متد نباید برای شما تازگی داشته باشد. این متد داده های جدول مربوط به یک بخش خاص را باز می گرداند.
• متد sectionIndexTitlesForTableView:  - عنوان ایندکس ها را باز می گرداند که در index list در سمت راست از table view ظاهر می شود. برای مثال ، می توانیم یک آرایه از رشته ها را که شامل حروف “A” تا “Z” می باشد ، برگردانیم.
• متد sectionForSectionIndexTitle:  - ایندکس بخشی را باز می گرداند که table view در هنگام ضربه زدن کاربر به ایندکس خاصی ، به آنجا پرش می کند.

راه بهتری از شرح پیاده سازی از طریق نشان دادن یک مثال ، وجود ندارد. طبق روال ، ما یک اپ ساده را با هم خواهیم ساخت و درک بهتری نسبت به index list را در عرض چند دقیقه به شما انتقال خواهیم داد.

نگاه سریعی بر اپ Demo

ابتدا ، بیایید ببینیم اپی که قصد داریم بسازیم ، چگونه کار می کند. این اپ بسیار ساده است و یک لیست از حیوانات را در table view استاندارد نشان می دهد. اما این بار ، اپ ، حیوانات را در داخل بخش های مختلفی گروه بندی می کند و یک index list  برای دسترسی سریع به بخش های جدول را فراهم می آورد. تصویر زیر ، اپ Demo نهایی را نشان می دهد.

برای این که بتوانید با این آموزش کار کنید ، انتظار می رود که دانش پایه ای از UITableView را داشته باشید. در غیر این صورت می توانید آموزش کار با UITableView در Xcode 5 با استفاده از Storyboard مراجعه نمایید.

دانلود نمودن تمپلت پروژه Xcode

تمرکز این جلسه آموزشی بر روی پیاده سازی بخش ها و index list می باشد. بنابراین ، به جای ساخت پروژه Xcode از ابتدا ، می توانید تمپلت پروژه را از اینجا  download the Xcode project template دانلود نمایید. این تمپلت حاوی هر چیزی می باشد که شما برای شروع کار نیاز دارید. اگر تمپلت را بسازید ، شما اپی خواهید داشت که لیستی از حیوانات را به حالت جدول ، مطابق تصویر زیر نشان می دهد.

در ادامه ، ما اپ را اصلاح خواهیم کرد و داده ها را در داخل بخش هایی تقسیم کرده و یک index list به جدول اضافه خواهیم نمود.

نمایش دادن بخش ها در UITableView

بسیار خوب! بیایید کار را شروع کنیم و بخش ها را به table view اضافه نماییم. در اصل ، اطلاعات حیوانات در یک آرایه ذخیره شده اند:

animals = @[@"Bear", @"Black Swan", @"Buffalo", @"Camel", @"Cockatoo", @"Dog", @"Donkey", @"Emu", @"Giraffe", @"Greater Rhea", @"Hippopotamus", @"Horse", @"Koala", @"Lion", @"Llama", @"Manatus", @"Meerkat", @"Panda", @"Peacock", @"Pig", @"Platypus", @"Polar Bear", @"Rhinoceros", @"Seagull", @"Tasmania Devil", @"Whale", @"Whale Shark", @"Wombat"];

خوب ، ما قصد داریم اطلاعات را در داخل بخش ها بر اساس حرف اول نام حیوان مرتب نماییم. روش های زیادی برای انجام این کار وجود دارد. اما ، از آن جایی که این اپ آزمایشی می باشد ، ما آرایه animals را با یک NSDictionary جایگزین خواهیم کرد. ابتدا ، متغیر animals را اعلام می کنیم و آرایه دیگری را برای عنوان بخش ها در فایل AnimalTableTableViewController.m اضافه می کنیم:

@interface AnimalTableTableViewController () {
    NSDictionary *animals;
    NSArray *animalSectionTitles;
}

در متد viewDidLoad: ، کد را به صورت زیر تغییر می دهیم:

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    animals = @{@"B" : @[@"Bear", @"Black Swan", @"Buffalo"],
                @"C" : @[@"Camel", @"Cockatoo"],
                @"D" : @[@"Dog", @"Donkey"],
                @"E" : @[@"Emu"],
                @"G" : @[@"Giraffe", @"Greater Rhea"],
                @"H" : @[@"Hippopotamus", @"Horse"],
                @"K" : @[@"Koala"],
                @"L" : @[@"Lion", @"Llama"],
                @"M" : @[@"Manatus", @"Meerkat"],
                @"P" : @[@"Panda", @"Peacock", @"Pig", @"Platypus", @"Polar Bear"],
                @"R" : @[@"Rhinoceros"],
                @"S" : @[@"Seagull"],
                @"T" : @[@"Tasmania Devil"],
                @"W" : @[@"Whale", @"Whale Shark", @"Wombat"]};
    
    animalSectionTitles = [[animals allKeys] sortedArrayUsingSelector:@selector(localizedCaseInsensitiveCompare:)];
}

در کد فوق ، ما یک NSDictionary برای متغیر animal ایجاد می کنیم. حرف اول از نام حیوان را به عنوان کلید استفاده می کنیم. مقداری که با کلید متناظر مرتبط است یک آرایه از نام حیوانات می باشد.

علاوه بر این ، ما آرایه animalSectionTitles  را برای ذخیره سازی عناوین بخش ها اعلام می کنیم. برای راحتی ، از کلیدهای دیکشنری animals به عنوان title بخش ها استفاده می کنیم. برای به دست آوردن کلیدهای یک NSDictionary ، می توانیم به سادگی متد allKeys: را فراخوانی نماییم. قبل از آن ، title ها را به ترتیب حروف الفبا ذخیره می کنیم.

در ادامه ، متد  numberOfSectionsInTableView:  را تغییر داده و تعداد کل بخش ها را باز می گردانیم:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    // Return the number of sections.
    return [animalSectionTitles count];
}

برای نمایش دادن عنوان هدر برای هر بخش ، نیاز داریم که متد titleForHeaderInSection:  را پیاده سازی نماییم. به سادگی عنوان بخش را بر اساس ایندکس بخش باز می گردانیم.

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
    return [animalSectionTitles objectAtIndex:section];
}

کار راحتی هست ، موافق هستید؟ در ادامه ، باید به table view ، تعداد ردیف های یک بخش خاص را اعلام کنیم. متد numberOfRowsInSection: را در فایل AnimalTableTableViewController.m اضافه می کنیم:

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    // Return the number of rows in the section.
    NSString *sectionTitle = [animalSectionTitles objectAtIndex:section];
    NSArray *sectionAnimals = [animals objectForKey:sectionTitle];
    return [sectionAnimals count];
}

هنگامی که اپ شروع به رندر کردن اطلاعات در table view می کند ، متد numberOfRowsInSection: زمانی که یک بخش جدید نمایش داده می شود ، فراخوانی خواهد شد. در اینجا ، بر اساس ایندکس بخش ، ما title بخش را به دست آورده و آن را به عنوان یک کلید برای بازیابی نام حیوانات مربوط به آن بخش استفاده می کنیم ، در ادامه تعداد کل نام حیوانات برای بخش ها را باز می گردانیم.

تقریباً کار را انجام دادیم. در نهایت ، متد cellForRowAtIndexPath:  را مطابق کد زیر اصلاح می کنیم:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell" forIndexPath:indexPath];
    
    // Configure the cell...
    NSString *sectionTitle = [animalSectionTitles objectAtIndex:indexPath.section];
    NSArray *sectionAnimals = [animals objectForKey:sectionTitle];
    NSString *animal = [sectionAnimals objectAtIndex:indexPath.row];
    cell.textLabel.text = animal;
    cell.imageView.image = [UIImage imageNamed:[self getImageFilename:animal]];
    
    return cell;
}

indexPath حاوی شماره ردیف جاری و هم چنین ، ایندکس بخش جاری می باشد. دوباره ، بر اساس ایندکس بخش ، ما title بخش (به عنوان مثال “B”) را بازیابی می کنیم و از آن به عنوان کلید برای بازیابی نام حیوانات از بخش استفاده می کنیم. مابقی کد بسیار ساده است. ما به سادگی نام حیوان را می گیریم و آن را به عنوان برچسب سلول تنظیم می کنیم. متد getImageFilename: یک متد کمکی موجود در تمپلت پروژه است که برای بازیابی نام فایل تصویر استفاده می شود.

بسیار خوب! آماده ایم که اپ را تست نماییم. روی کلید Run کلیک می کنیم و اپ باید مطابق تصویر زیر کار کند.

افزودن Index List به UITableView

چگونه می توانیم Index list را به table view اضافه نماییم؟ این کار نیز راحت تر از چیزی هست که تصور می شود و می توان با چند خط کد این کار را انجام داد. فقط کافی است که متد sectionIndexTitlesForTableView:  را اضافه کنیم و یک آرایه ای از ایندکس های بخش را بازگردانیم. در اینجا  ما از title های بخش ها به عنوان ایندکس ها استفاده می کنیم:

- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView
{
    return animalSectionTitles;
}

تمام شد! اپ را دوباره کامپایل و اجرا می نماییم. باید ایندکس ها را در سمت راست جدول ببینیم. جالب است ، به هیچ کار پیاده سازی و ایندکس گذاری نیاز نداریم! روی یکی از ایندکس ها ضربه می زنیم ، اپ ما را به بخش خاصی از جدول هدایت می کند.

افزودن لیست ایندکس A-Z

به نظر می رسد که ما همه کارها را انجام داده ایم. خوب پس متد sectionForSectionIndexTitle:  برای چه منظوری است؟ در حال حاضر ، Index list حاوی تمام حروف الفبا نمی باشد. اپ فقط آن حروفی را نشان می دهد که به عنوان کلید در دیکشنری animals تعریف شده اند. به چند دلیل ، ما می خواهیم که حروف الفبای A-Z را در index list نمایش دهیم. بیایید ، یک متغیر جدید به نام animalIndexTitles اعلام کنیم. اعلان@interface  مطابق کد زیر است:

@interface AnimalTableTableViewController () {
    NSDictionary *animals;
    NSArray *animalSectionTitles;
    NSArray *animalIndexTitles;
}

در متد viewDidLoad:  ، کد زیر را برای مقداردهی اولیه ایندکس بخش به صورت “A-Z” اضافه می کنیم:

    animalIndexTitles = @[@"A", @"B", @"C", @"D", @"E", @"F", @"G", @"H", @"I", @"J", @"K", @"L", @"M", @"N", @"O", @"P", @"Q", @"R", @"S", @"T", @"U", @"V", @"W", @"X", @"Y", @"Z"];

در ادامه ، متد sectionIndexTitlesForTableView:  را تغییر می دهیم و آرایه animalIndexTitles را به جای آرایه animalSectionTitles  باز می گردانیم.

- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView
{
    return animalIndexTitles;
}

اکنون ، اپ را دوباره کامپایل و اجرا می نماییم. بسیار عالی! اپ ایندکس ها را از A تا Z نمایش می دهد. اما چند لحظه صبر کنید. ایندکس گذاری به درستی کار نمی کند. سعی می کنیم روی ایندکس “C” ضربه بزنیم و اپ به بخش “D” جهش می کند.

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

- (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index
{
    return [animalSectionTitles indexOfObject:title];
}

بر اساس نام ایندکس انتخاب شده (یعنی title) ، ما ایندکس بخش جاری از animalSectionTitles قرار می دهیم.

خلاصه

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