جلسه هجدهم آموزش iOS : افزودن View های Header و Footer در اپ

در جلسه قبل ، در خصوص اصول مربوط به UICollectionView ، صحبت کردیم و نحوه نمایش آیتم ها ، در چیدمان grid را نشان دادیم. تقسیم دستور پخت ها ، به چند بخش مختلف ، می تواند کار جذابی باشد. بخش اول ، شامل دستور پخت های مربوط به ناهار/شام و بخش دیگر ، شامل دستور پخت هایی که مربوط به نوشیدنی ها و دسر ها می باشند.

همان طور که قبلاً  آموخته اید ، برای هر collection view  باید data source object ، داشته باشیم ، تا بتواند محتوای قابل نمایش در collection view ، را تأمین نماید. مسئولیت data source ، فراهم کردن موارد زیر برای collection view ، می باشد:

• تعداد بخش ها در collection view
• تعداد آیتم در هر بخش.
• Cell view برای یک داده ی خاص.

اپ دستور پخت ساده ای که در جلسه قبل  توسعه دادیم ، فقط یک بخش دارد. در این آموزش ، قصد داریم  کاوش در collection view را ادامه داده و نحوه گروه بندی آیتم ها ، در بخش های مختلف را به شما نشان دهیم. علاوه بر این ، یاد خواهید گرفت که چگونه view مربوط به Header و Footer را به collection view ، اضافه نمایید.

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

تقسیم دستور پخت ها به دو بخش در UICollectionView

در اپ ساده دستور پخت ، RecipeCollectionViewController ، در اصل  data source object مربوط به collection view می باشد. برای تقسیم نمودن دستور پخت به دو بخش ، چند مورد تغییرات وجود دارند ، که باید آنها را انجام دهیم.

آرایه recipeImages ، نام های مربوط به تصویر تمام دستور پخت ها را ذخیره می کند. از آن جایی که ما تمایل داریم ، دستور پخت ها را به دو گروه ، تقسیم نماییم ، باید کد خود را تغییر دهیم و از آرایه های تو در تو (nested arrays) ، برای ذخیره سازی گروه های مختلف دستور پخت ها ، استفاده نماییم. عبارت آرایه های تو در تو ، ممکن است برای برخی از افراد که تجربه زیادی در برنامه نویسی ندارند، تازگی داشته باشد. شکل زیر ، نحوه استفاده ما از  آرایه های تو در تو را برای ذخیره سازی داده ها ، نشان می دهد. گروه اول ، شامل تصاویری از غذاهای اصلی و گروه دیگر ، تصاویر مربوط به نوشیدنی ها و دسرها را نشان می دهد. آرایه سطح اول (یعنی recipeImages ) شامل دو آرایه است ، که نشان دهنده بخش ها می باشد. آرایه هر بخش ، حاوی آیتم های داده ای (یعنی نام تصویر دستور پخت) برای هر بخش خاص ، می باشد.

به بخش source code ، بر می گردیم. در فایل RecipeCollectionViewController.m ، مقداردهی آرایه “recipeImages” ، در داخل متد viewDidLoad ، را مطابق زیر ، تغییر می دهیم:

- (void)viewDidLoad
{
    [super viewDidLoad];
 
    // Initialize recipe image array
    NSArray *mainDishImages = [NSArray arrayWithObjects:@"egg_benedict.jpg", @"full_breakfast.jpg", @"ham_and_cheese_panini.jpg", @"ham_and_egg_sandwich.jpg", @"hamburger.jpg", @"instant_noodle_with_egg.jpg", @"japanese_noodle_with_pork.jpg", @"mushroom_risotto.jpg", @"noodle_with_bbq_pork.jpg", @"thai_shrimp_cake.jpg", @"vegetable_curry.jpg", nil];
    NSArray *drinkDessertImages = [NSArray arrayWithObjects:@"angry_birds_cake.jpg", @"creme_brelee.jpg", @"green_tea.jpg", @"starbucks_coffee.jpg", @"white_chocolate_donut.jpg", nil];
    recipeImages = [NSArray arrayWithObjects:mainDishImages, drinkDessertImages, nil];
 
}

کد بالا ، تصاویر دستور پخت ها را به دو گروه تقسیم می کند. در ادامه ، متد “numberOfItemsInSection:” را جهت برگرداندن تعداد آیتم های هر بخش ، تغییر می دهیم:

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return [[recipeImages objectAtIndex:section] count];
}

سپس ، متد “cellForItemAtIndexPath:” ، را مطابق کد زیر ، تغییر می دهیم:

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *identifier = @"Cell";
    
    RecipeViewCell *cell = (RecipeViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
    
    UIImageView *recipeImageView = (UIImageView *)[cell viewWithTag:100];
    recipeImageView.image = [UIImage imageNamed:[recipeImages[indexPath.section] objectAtIndex:indexPath.row]];
    cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"photo-frame-2.png"]];
    
    return cell;
}

اگر کد بالا را با کدی که قبلاً پیاده سازی کرده ایم ، مقایسه کنید ، خط 7 ، فقط تغییر کرده است. ابتدا آرایه را با استفاده از شماره بخش ، بازیابی می کنیم و سپس ، آیتم های خاص را از آن بخش ، دریافت می نماییم.

در آخر ، باید به collection view ، اعلام کنیم که ما دو بخش داریم. این کار ، می تواند با اجرای یک متد به نام ، numberOfSectionsInCollectionView: ، در داخل فایل RecipeCollectionViewController.m ، انجام شود ، که تعداد کل بخش ها در collection view را باز می گرداند.

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return [recipeImages count];

اکنون ؛ اپ را کامپایل کرده و اجرا می نماییم. صفحه نمایش اپ ، باید شبیه تصویر زیر باشد:

اعمال تغییرات اندک در Margin (حاشیه) محتوا ، با استفاده از Section Insets

اپ ما به درستی کار می کند ، اما ، ظاهر خوبی ندارد. ردیف آخر تصاویر بخش اول ، بسیار نزدیک به اولین ردیف از بخش دوم می باشند. می توانیم از section inset ها ، برای اضافه کردن فاصله اطراف محتوا ، استفاده نماییم. تصویر زیر ، نحوه تأثیر insetها در محتوا را نشان می دهد:

می توانیم از UIEdgeInsetsMake ، برای ایجاد inset ، استفاده نماییم.

inset = UIEdgeInsetsMake(top, left, bottom, right);

برای اپ دستور پخت ، ما فقط می خواهیم ، فاصله بین بخش ها را اضافه نماییم. در متد viewDidLoad ، از فایل  RecipeCollectionViewController.m ، کد زیر را اضافه می کنیم:

    UICollectionViewFlowLayout *collectionViewLayout = (UICollectionViewFlowLayout*)self.collectionView.collectionViewLayout;
    collectionViewLayout.sectionInset = UIEdgeInsetsMake(20, 0, 20, 0);

کد بالا ، inset ها را ایجاد کرده و آنها را به collection view ، اختصاص می دهد. اکنون اپ را کامپایل کرده و دوباره اجرا می نماییم. همان طور که در تصویر زیر مشاهده می نمایید ، توانستیم فاصله بین بخش ها را اضافه نماییم.

افزودن view های مربوط به Header و Footer

اکنون ، بیایید کمی در اپ تغییرات ایجاد نماییم و آن را جذاب تر نماییم. قصد داریم view های مربوط به Header و Footer را برای هر بخش از دستور پخت ها ، اضافه نماییم. چیدمان UICollectionViewFlowLayout ، که اپ ما از آن استفاده می نماید ، viewهای مربوط به Header و Footer را به صورت اختیاری برای هر بخش ، فراهم می کند. در اینجا ، می توان ، view های مربوط به Header و Footer را به عنوان supplementary views ، مورد ارجاع قرار داد. به طور پیش فرض ، این viewها ، در جریان چیدمان ، غیر فعال هستند. دو کار هست که برای پیکربندی header/footer view ، باید انجام شوند:

1. فعال کردن header/footer view در Storyboard (ما سعی می کنیم مطالب آموزش ، ساده باقی بمانند. نباید header/footer  را از بخش Storyboard ، فعال نمود. از طریق انجام برنامه نویسی ، ما می توانیم این کار را با پیاده سازی متدهای نماینده مناسب ، یا از طریق تخصیص مقادیر مناسب به خصیصه های ( headerReferenceSize  و footerReferenceSize ) انجام دهیم.
2. پیاده سازی متد collectionView:viewForSupplementaryElementOfKind ، از طریق پروتکل UICollectionViewDataSource موردنیاز است. با پیاده سازی این متد ، ما یک supplementary view ، برای نمایش در بخش collection view ، فراهم می کنیم.

طراحی بخش Header/Footer در Storyboard

ابتدا ، تصاویر مربوط به header/footer را از  download the header/footer background images ، دانلود کرده و آنها را به پروژه Xcode ، اضافه می نماییم.

به Storyboard ، بر می گردیم. “Collection View” را در بخش Collection View controller ، انتخاب می نماییم. در Attributes inspector ، گزینه های “Section Header” و  “Section Footer” را برای Accessories ، انتخاب می کنیم. زمانی که ، عملیات فعال سازی ، به اتمام رسید، باید بتوانیم viewهای مربوط به header و footer پدیدار شده در صفحه را ، مشاهده نماییم:

viewهای مربوط به header و footer ، به طور پیش فرض ، خالی می باشند. قصد داریم view ها را با استفاده از Storyboard ، طراحی نماییم.  header view ، برای نمایش بخش عنوان (title) طراحی می شود ؛ در حالی که ، footer view ، فقط یک تصویر استاتیک banner ، نشان می دهد. در Storyboard ما image view را از Object Library ، به header view ، درگ می کنیم و یک برچسب به بالای آن ، اضافه می کنیم. رنگ فوت برچسب را به سفید ، تنظیم می کنیم. برای بخش footer ، به سادگی یک image view ، اضافه می کنیم.

image view را از بخش footer view انتخاب کرده و  “footer_banner.png” را به عنوان تصویر پس زمینه ، در Attributes inspector ، تخصیص می دهیم.

از همه مهم تر ، ما باید یک شناسه برای view مربوط به header و footer ، تخصیص دهیم. شناسه ، می تواند در بخش کد ، برای شناسایی view ، استفاده شود. Collection Reusable View از header را انتخاب کرده و شناسه ای به عنوان “HeaderView” ، در Attributes inspector ، تنظیم می کنیم. برای Collection Reusable View از بخش footer ، شناسه ای به عنوان “FooterView” ، تنظیم می کنیم.

کلاس جدید برای Header View

به طور پیش فرض ، viewهای مربوط به header و footer ، به کلاس UICollectionReusableView  ، اختصاص یافته اند. برای نمایش تصویر پس زمینه و عنوان در header view ، ما باید یک کلاس سفارشی ایجاد نماییم ؛ که یک زیرکلاس ، از UICollectionReusableView ، می باشد. اجازه دهید نام کلاس را “RecipeCollectionHeaderView” ، قرار دهیم.

در Storyboard ما Collection Reusable View ، از header را انتخاب می کنیم. کلاس سفارشی را به عنوان “RecipeCollectionHeaderView” در Identify inspector ، تنظیم می کنیم. کلید کنترل را فشار داده و نگه می داریم ، روی Image view ، در بخش header کلیک کرده و آن را به فایل RecipeCollectionHeaderView.h برای اضافه کردن Outlet variable (متغییر پایه) ، درگ می کنیم. نام متغییر را “backgroundImage” ، قرار می دهیم. روند مشابهی را ، برای UILabel ، تکرار کرده و نام متغییر را “title” ، قرار می دهیم.

پیاده سازی متد viewForSupplementaryElementOfKind 

اگر اپ را اجرا نماییم ، از آن جایی که پیاده سازی متد “viewForSupplementaryElementOfKind:”  ، را انجام نداده ایم ، بخش های header و footer را نخواهیم دید. “RecipeCollectionViewController” را انتخاب کرده و عبارت import  ، را اضافه می کنیم:

#import "RecipeCollectionHeaderView.h"

سپس ، متد viewForSupplementaryElementOfKind: را از طریق کد زیر ، اجرا می نماییم:

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    UICollectionReusableView *reusableview = nil;
    
    if (kind == UICollectionElementKindSectionHeader) {
        RecipeCollectionHeaderView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"HeaderView" forIndexPath:indexPath];
        NSString *title = [[NSString alloc]initWithFormat:@"Recipe Group #%i", indexPath.section + 1];
        headerView.title.text = title;
        UIImage *headerImage = [UIImage imageNamed:@"header_banner.png"];
        headerView.backgroundImage.image = headerImage;
        
        reusableview = headerView;
    }
 
    if (kind == UICollectionElementKindSectionFooter) {
        UICollectionReusableView *footerview = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"FooterView" forIndexPath:indexPath];
 
        reusableview = footerview;
    }
        
    return reusableview;
}

کد بالا، به collection view می گوید که header/footer view در هر بخش ، استفاده می شود. ابتدا ، تعیین می کنیم که آیا collection view ، درخواست view مربوط به header یا footer ، را دارد یا خیر. این کار می تواند ، با استفاده از متغیر نوع (kind variable) ، انجام شود. برای بخش  header view ، ما header view را ( با استفاده از متد dequeueReusableSupplementaryViewOfKind: ) از صف خارج می کنیم و یک عنوان و تصویر مناسب برای آن ، تنظیم می کنیم. همان طور که در خط 6 تا 16 می بینید ، ما از شناسه ای استفاده می کنیم ، که پیش تر ، برای دریافت header/footer view ، تخصیص داده بودیم.

اکنون اپ را مجدداً کامپایل کرده و اجرا می نماییم. اپ باید بخش های header و footer را در هر بخش ، مطابق شکل زیر نشان دهد:

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

امیدواریم که از آموزش این جلسه ، لذت برده باشید. در این جلسه ، ما از میان مباحث اصولی supplementary view ، گذر کرده و نشان دادیم که چگونه header/footer را در collection view ، اضافه نماییم. در جلسه بعد ، کاوش در collection view را ادامه داده و نشان خواهیم داد ، که چگونه با collection cell ، تعامل برقرار نماییم.