مقالات طراحی اپ موبایل

به صورت پیش فرض ، 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 ، تعامل برقرار نماییم.

به صورت پیش فرض ، 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 ، تعامل برقرار نماییم.