جلسه 19 آموزش iOS - مدیریت کردن انتخاب های تکی و چندتایی

طی دو جلسه قبل ، آموزش مفاهیم اصولی UICollectionView  و header/footer customization را تحت پوشش قرار داده ایم. از این رو ، اکنون شما باید نحوه نمایش آیتم ها با استفاده از UICollectionView را بدانید. با این حال ، ما هنوز ، نحوه برقراری تعامل با ، سلول collection  view را آموزش نداده ایم.

همان طور که قبلاً اشاره کرده ایم ، Collection View ، بسیار شبیه به Table View ، عمل می کند. اما ، برای این که درک بهتری از نحوه عملکرد آن  به شما بدهیم ، چگونگی برقراری تعامل با آیتم های مجموعه (collection) را ، مانند روش های مدیریت انتخاب های تکی (single selection) و چندتایی (multiple selection) را ، نشان خواهیم داد. برای ارائه نمونه کار از نحوه انتخاب آیتم ها ، ما کار بر روی اپ Recipe را ادامه خواهیم داد. مواردی که می خواهیم پیاده سازی کنیم ، شامل موارد ذیل است:

1. برای نشان دادن این که چگونه می توانیم  انتخاب تکی را مدیریت نماییم ، اپ Recipe را بهبود خواهیم بخشید. هنگامی که کاربر ، بر روی یک عکس تصویر پخت ، ضربه می زند ، اپ ، model view را بالا آورده و تصویری در اندازه بزرگ تر ، نمایش می دهد.
2. هم چنین ، قابلیت به اشتراک گذاری در Facebook را نیز در اپ ، پیاده سازی خواهیم کرد ؛ تا نحوه انتخاب های چندتایی را به شما نشان دهیم. با این کار ، کاربران اپ ، می توانند  چندین عکس را انتخاب نموده و آنها را در Facebook ، به اشتراک بگذارند.

Interface اپ ، بسیار ساده است . با این حال ، اپ ، درک خوبی را از نحوه برقراری تعامل با collection view ، به شما می دهد. برای خلاص شدن از تنظیمات پروژه Xcode ، می توانید تمپلت Xcode را از  download this Xcode template ، دانلود نمایید. به خاطر داشته باشید ، پروژه Xcode ، با استفاده از Xcode 4.6  ایجاد شده و در iOS6  تست شده است. اگر در حین باز کردن/کامپایل کردن پروژه ، با هر مشکلی  مواجه شدید ، لطفاً Xcode خود را به آخرین ورژن ، upgrade ، نمایید.

ابتدا ، اپ Recipe را برای مدیریت کردن انتخاب تکی (Single Selection) ، بهبود خواهیم داد. زمانی که کاربر ، بر روی هر کدام از عکس های دستور پخت ها ضربه بزند ، اپ ، یک صفحه model view ، بارگذاری کرده و عکس را در وضوح بالاتر ، نمایش می دهد.

طراحی رابط کاربری

برای شروع ، بیایید view controller را ، برای نمایش دادن عکس دستور پخت ، طراحی نماییم. به Storyboard رفته و یک View Controller را ، از Object library ، درگ می کنیم. سپس ، یک Image View ، به آن اضافه می کنیم و طول و عرض آن را به ترتیب به 320 و 200 ، تنظیم می نماییم. در آخر ، یک navigation bar به بالای صفحه view ، اضافه کرده ، و یک آیتم Bar Button ، به آن تخصیص می دهیم. نام آیتم کلید را ، “Close” ، قرار می دهیم. View Controller ، باید شبیه تصویر زیر باشد:

از آن جایی که ، ما می خواهیم ، زمانی که کاربر روی هر عکس دستور پخت ، در collection view ، ضربه می زند ، view controller را نمایش دهیم ، باید ، با استفاده از segue ، بخش collection view را به view controller ، اتصال دهیم. کلید کنترل را فشار داده و نگه می داریم ، روی “Recipe View Cell” ، کلیک کرده و آن را به داخل View Controller ، درگ می کنیم. “Model” را برای بخش style انتخاب کرده و شناسه segue را به “showRecipePhoto” ، تنظیم می کنیم.

اگر اپ را کامپایل کرده و اجرا نماییم ، زمانی که هر یک از عکس های دستور پخت را انتخاب کنیم ، با یک view خالی مواجه خواهیم شد. از آن جایی که پیاده سازی کد را انجام نداده ایم ، model view controller ، هیچ درکی از عکس انتخاب شده دستور پخت ، نخواهد داشت. بنابراین ، یک کلاس جدید (به عنوان زیر کلاس UIViewControoler) ایجاد کرده ، و نام آن را “RecipeViewController” ، قرار می دهیم. در Storyboard ، بخش view controller را که ایجاد کرده ایم ، انتخاب نموده و custom class را روی RecipeViewController ، تنظیم می کنیم.

در ادامه ، یک اتصال بین image view و فایل RecipeViewController.h ، ایجاد خواهیم کرد. کلید کنترل را فشار داده و نگه می داریم ، روی image view کلیک کرده و آن را به داخل فایل “RecipeViewController.h” ، درگ می کنیم. نام متغیر را “recipeImageView” ، قرار می دهیم. روند مشابهی را تکرار کرده و یک اتصال با از نوع “action”  ، با کلید close ، برقرار می کنیم.

بخش کدنویسی

برای این که سایر کنترلرها ، نام عکس را پاس دهند ، یک خصیصه “recipeImageName”   نیز اضافه می کنیم. فایل RecipeViewController.h ، باید مطابق کد زیر باشد:

@interface RecipeViewController : UIViewController
 
@property (weak, nonatomic) IBOutlet UIImageView *recipeImageView;
@property (weak, nonatomic) NSString *recipeImageName;
 
- (IBAction)close:(id)sender;
 
@end

در زمان نمایش ، RecipeViewController  ، عکس دستور پخت مشخص شده را ، در image view ، بارگذاری خواهد کرد. بنابراین ، در فایل RecipeViewController.m ، متد viewDidLoad  را مطابق زیر تغییر می دهیم.

- (void)viewDidLoad
{
    [super viewDidLoad];
 self.recipeImageView.image = [UIImage imageNamed:self.recipeImageName];
}

بسیار خوب! ما پیاده سازی RecipeViewController را تکمیل کردیم. اما ، هنوز ، یک کار باقی مانده است. چگونه می توانیم آیتم انتخاب شده از collection view را شناسایی کرده ، و نام عکس آن را به RecipeViewController ، پاس دهیم؟ متد prepareForSegue:sender: را در RecipeCollectionViewController ، پیاده سازی خواهیم کرد ، که source view controller ، مربوط به segue  می باشد. فایل “RecipeBookViewController.m” را انتخاب کرده و کد زیر را اضافه می کنیم:

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    if ([segue.identifier isEqualToString:@"showRecipePhoto"]) {
        NSArray *indexPaths = [self.collectionView indexPathsForSelectedItems];
        RecipeViewController *destViewController = segue.destinationViewController;
        NSIndexPath *indexPath = [indexPaths objectAtIndex:0];
        destViewController.recipeImageName = [recipeImages[indexPath.section] objectAtIndex:indexPath.row];
        [self.collectionView deselectItemAtIndexPath:indexPath animated:NO];
    }
}

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

کلاس UICollectionView  ، متد indexPathsForSelectedItems را فراهم می آورد ، که مسیرهای index یا همان index paths را برای آیتم انتخاب شده  باز می گرداند. ممکن است تعجب کنید که چرا مسیرهای  index چندتایی بازگشتی ، وجود دارند. این اتفاق ، به دلیل است که UICollectionView  ، انتخاب های چندتایی (multiple selection) را پشتیبانی می کند ، که در بخش بعد به آن خواهیم پرداخت. هر index path ، متناظر است با یک آیتم انتخاب شده خاص. برای این مثال ، ما فقط یک آیتم واحد داریم و بنابراین ، اولین index path را برداشته و عکس انتخاب شده را از آن ، بازیابی می کنیم (خط 5-6).

در collection view ، هنگامی که کاربر ، روی یک سلول مجموعه ، ضربه می زند ، سلول به حالت برجسته (highlighted )، در آمده ، و سپس به حالت انتخاب شده (selected) ، تغییر می یابد. بنابراین ، یک خط کد برای لغو کردن آیتم انتخاب شده (deselect) ، زمانی که عکس در model view controller ، نمایش داده می شود ، اضافه می کنیم.

فراموش نکنید که عبارت import را در ابتدای فایل RecipeCollectionViewController.m ، قرار دهید، در غیر این صورت ، کد شما به درستی کامپایل نخواهد شد:

#import "RecipeViewController.h"

اکنون ، بیایید اپ را اجرا کنیم. بعد از این که اپ راه اندازی شد ، روی یکی از دستور پخت ها ضربه زده و باید یک model view را مشاهده کنیم که عکس دستور پخت انتخاب شده را نمایش می دهد.

اگر سعی کنیم که model view را ببندیم، اپ به درستی کار خواهد کرد. این اتفاق، بدیهی است ؛ زیرا پیاده سازی متد “close” را در RecipeViewController ، فراموش کرده ایم. به سادگی می توانیم  متد زیر را در فایل RecipeViewController.m ویرایش کرده و یک خط کد به آن اضافه نماییم:

- (IBAction)close:(id)sender {
    [self dismissViewControllerAnimated:YES completion:NULL];
}

متد dismissViewControllerAnimated ، به view controller می گوید که کار خود را متوقف سازد. اپ را دوباره کامپایل کرده و اجرا می نماییم. اکنون باید ، کلید close ، به درستی کار کند.

مدیریت کردن انتخاب چندتایی

UICollectionView  ، هر دو مورد انتخاب های تکی و چندتایی را پشتیبانی می کند. با این حال ، به طور پیش فرض ، کاربر مجاز به انتخاب آیتم تکی می باشد. خصیصه allowsMultipleSelection  از کلاس UICollectionView  ، کنترل می کند که آیا ، آیتم های چندتایی ، به طور هم زمان انتخاب شده اند یا خیر. برای فعال کردن انتخاب چندتایی ، ترفند این است که خصیصه allowsMultipleSelection  ، را به مقدار ، YES ، تنظیم نماییم.

برای داشتن درک بهتر ، از نحوه عملکرد انتخاب چندتایی ، اپ Recipe را اندکی تغییر خواهیم داد. به طوری که ، کاربر ، مجاز به انتخاب دستور پخت های چندتایی شده ، و بتواند آنها را در Facebook ، به روش های زیر  به اشتراک بگذارد:

1. کاربر ، کلید “Share” در navigation bar را برای شروع فرآیند به اشتراک گذاری ، ضربه می زند و عنوان کلید به طور خودکار به “Upload” ، تغییر می یابد.
2. کاربر ، عکس های دستور پخت ها را برای به اشتراک گذاری ، انتخاب می نماید.

بعد از انتخاب ، کاربر کلید “Upload” ، را ضربه می زند. اپ ، برای اشتراک گذاری عکس ها در Facebook ، صفحه دیالوگ Facebook را لود می نماید.

نکته: فرض ما بر این است که ، شما با پیاده سازی بخش اشتراک گذاری در Facebook ، آشنایی دارید. در غیر این صورت ، توصیه می کنیم که قبل از ادامه کار ، آموزش اشتراک گذاری در Facebook ، از دوره تکمیلی برنامه نویسی iOS، را مطالعه نمایید.

طراحی رابط کاربری

ابتدا ، ما کلید “Share” در navigation bar را اضافه خواهیم کرد. به Storyboard می رویم ، یک Bar Button Item ، از Object Library ، درگ کرده و آن را به navigation bar ، از Recipe Collection View Controller ، اضافه می کنیم.

همانند بخش قبل ، یک ارتباط بین کلید Share و فایل RecipeCollectionViewController.h ، ایجاد می کنیم. نام خصیصه را “shareButton” ، قرار می دهیم. هم چنین ، یک متد action ، اضافه می کنیم ؛ به طوری که ، وقتی به کلید Share ، ضربه زده می شود ، این متد فرخوانی شود.

کد فایل RecipeCollectionViewController.h ، باید شبیه به کد زیر باشد:

@interface RecipeCollectionViewController : UICollectionViewController
@property (weak, nonatomic) IBOutlet UIBarButtonItem *shareButton;
- (IBAction)shareButtonTouched:(id)sender;
 
@end

بخش کدنویسی

اپ Recipe ، اکنون دو حالت single selection و multiple selection را فراهم می نماید. هنگامی که کاربر کلید “Share” را ضربه می زند ، اپ ، به حالت multiple selection می رود ؛ به طوری که به کاربر اجازه می دهد ، عکس های چندتایی را برای به اشتراک گذاری آنها ، انتخاب نماید. برای پشتیبانی از حالت multiple selection ، ما دو متغیر را به فایل RecipeCollectionViewController.m ، اضافه خواهیم کرد:

• shareEnabled – این متغیر ، یک متغیر Boolean است که حالت انتخاب را نشان می دهد. اگر به وضعیت YES ، تنظیم شده باشد ، نشان می دهد که کلید “Share” ضربه زده شده و انتخاب چندتایی فعال شده است.
• selectedRecipes – یک آرایه ، برای ذخیره کردن دستور پخت های انتخاب شده می باشد.

کدهای این بخش ، باید مطابق زیر باشند:

@interface RecipeCollectionViewController () {
    NSArray *recipeImages;
    BOOL shareEnabled;
    NSMutableArray *selectedRecipes;
}

علاوه بر این ، کد زیر را ، در متد viewDidLoad ، برای مقداردهی اولیه آرایه ، اضافه می کنیم:

    selectedRecipes = [NSMutableArray array];

مدیریت کردن آیتم Selection و Deselection

پروتکل UICollectionViewDelegate  ، متدهایی را تعریف می نماید که به ما اجازه می دهند انتخاب و برجسته شدن آیتم ها ، در یک collection view را مدیریت نماییم. هنگامی که کاربر ، یک آیتم را انتخاب می نماید ، متد collectionView:didSelectItemAtIndexPath: ، فراخوانی می شود. ما این متد را پیاده سازی خواهیم کرد و آیتم انتخاب شده را به آرایه selectedRecipes  ، اضافه خواهیم نمود. کد زیر را قبل از عبارت “@end” ، اضافه می کنیم:

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    if (shareEnabled) {
        // Determine the selected items by using the indexPath
        NSString *selectedRecipe = [recipeImages[indexPath.section] objectAtIndex:indexPath.row];
        // Add the selected item into the array
        [selectedRecipes addObject:selectedRecipe];
    }
}

کلاس UICollectionViewCell  ، یک خصیصه (property) برای تنظیم background view ، از آیتم انتخاب شده  فراهم می نماید. برای نشان دادن آیتم انتخاب شده ، background image از collection cell را به تصویر دیگری (یعنی photo-frame-selected.png) ، تغییر خواهیم داد. به سادگی کد زیر را در متد indicate   قرار می دهیم:

cell.selectedBackgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"photo-frame-selected.png"]];

نه تنها ، ما باید انتخاب آیتم را مدیریت نماییم ، بلکه نیاز داریم که حالت لغو انتخاب (deselection) را نیز مدیریت کنیم. به هر دلیل ، کاربر ممکن است یک آیتم را از collection view ، لغو انتخاب نماید. هنگامی که یک آیتم ، لغو انتخاب می شود ، باید از آرایه selectedRecipes  نیز حذف شود. بنابراین کد زیر را بعد از متد بالا قرار می دهیم:

- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath
{
    if (shareEnabled) {
        NSString *deSelectedRecipe = [recipeImages[indexPath.section] objectAtIndex:indexPath.row];
        [selectedRecipes removeObject:deSelectedRecipe];
    }
}

اکنون ، به سراغ پیاده سازی متد  shareButtonTouched:  می رویم ، که در هنگامی که کاربر روی کلید Share ، ضربه می زند ، فراخوانی می شود. متد را با کد زیر ، ویرایش می نماییم:

- (IBAction)shareButtonTouched:(id)sender {
    if (shareEnabled) {
        
        // Post selected photos to Facebook
        if ([selectedRecipes count] > 0) {
            if([SLComposeViewController isAvailableForServiceType:SLServiceTypeFacebook]) {
                SLComposeViewController *controller = [SLComposeViewController composeViewControllerForServiceType:SLServiceTypeFacebook];
                
                [controller setInitialText:@"Check out my recipes!"];
                for (NSString *recipePhoto in selectedRecipes) {
                    [controller addImage:[UIImage imageNamed:recipePhoto]];
                }
                
                [self presentViewController:controller animated:YES completion:Nil];
            }
        }
        
        // Deselect all selected items
        for(NSIndexPath *indexPath in self.collectionView.indexPathsForSelectedItems) {
            [self.collectionView deselectItemAtIndexPath:indexPath animated:NO];
        }
        
        // Remove all items from selectedRecipes array
        [selectedRecipes removeAllObjects];
        
        // Change the sharing mode to NO
        shareEnabled = NO;
        self.collectionView.allowsMultipleSelection = NO;
        self.shareButton.title = @"Share";
        [self.shareButton setStyle:UIBarButtonItemStylePlain];
        
    } else {
        
        // Change shareEnabled to YES and change the button text to DONE
        shareEnabled = YES;
        self.collectionView.allowsMultipleSelection = YES;
        self.shareButton.title = @"Upload";
        [self.shareButton setStyle:UIBarButtonItemStyleDone];
        
    }
}

برای فهم بهتر کد بالا ، بیایید ، خط به خط ، نگاهی به کدها بیاندازیم:

• خط 35 38: اگر در اصل ، حالت به اشتراک گذاری ، غیر فعال باشد ، ما باید ، اپ را به حالت اشتراک گذاری ، تنظیم نموده و انتخاب چندتایی را فعال سازیم. در همان زمان ، عنوان کلید را به “Upload” ، تغییر می دهیم.
• خط 516: در حالت به اشتراک گذاری ، بعد از این که کاربر کلید “Upload” را ضربه می زند ، ما Facebook composer ، را بالا خواهیم آورد. SLComposeViewController با چندین متد داخلی همراه است که به ما اجازه می دهند ، به آسانی ، عکس های چندتایی را upload ، نماییم. به سادگی از متد “addImage” ، برای ضمیمه کردن (attach) عکس ها ، استفاده می نماییم.
• خط 1924: بعد از بارگذاری عکس ها در Facebook ، ما باید موارد انتخاب شده را به حالت لغو انتخاب ، تبدیل کرده و آنها را از آرایه selectedRecipes ، حذف نماییم.
• خط 2730: در نهایت ، ما به حالت انتخاب تکی ، سوئیچ می کنیم.

از آن جایی که “SLComposeViewController” ، یک کلاس ارائه شده توسط Social framework  می باشد ، به خاطر داشته باشید که فایل Social.h را در بالاترین بخش از فایل “RecipeCollectionViewController.m” ، باید import کنیم.

#import <Social/Social.h>

به طور پیش فرض ، Social framework ، شامل پروژه Xcode  نمی شود. برای کامپایل کردن درست اپ ، باید “Social.framework” را در پروژه اضافه نماییم. در Project Navigator ، پروژه “CollectionViewDemo” را انتخاب می کنیم. در Content Area ، گزینه “CollectionViewDemo”  در زیر بخش Targets را انتخاب کرده ، و  “Build Phases” را کلیک می کنیم. “Link Binary with Libraries” را بسط داده و روی کلید “+” ، برای افزودن “Social.framework” ، کلیک می کنیم.

تقریباً ، تمام کارها را انجام دادیم. با این حال ، اگر  اکنون اپ را اجرا کنیم ، با یک bug ، مواجه خواهیم شد. بعد از این که  به حالت sharing (به اشتراک گذاری)  سوئیچ  می کنیم ، هنگامی که هر یک از عکس های دستور پخت ها را انتخاب کنیم ؛ هنوز model view نمایان است. این چیزی نیست که ما انتظار داشتیم. دلیل این موضوع ، این است که segue ، هر بار که به collection cell ، ضربه زده می شود ، فراخوانی می شود. با انتشار iOS 6 ، ما می توانیم تعیین کنیم که آیا می خواهیم segue ، با استفاده از یک متد جدید به نام shouldPerformSegueWithIdentifier ، راه اندازی شود یا خیر. بدیهی است  ما فقط می خواهیم segue ، در زمانی که حالت تک انتخابی است ، راه اندازی شود. کد زیر را قبل از عبارت “@end” ، قرار می دهیم:

- (BOOL)shouldPerformSegueWithIdentifier:(NSString *)identifier sender:(id)sender
{
    if (shareEnabled) {
        return NO;
    } else {
        return YES;
    }
}

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

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

امیدواریم که از این جلسه ، لذت برده باشید. پس از ، پیگیری این سری از آموزش های Collection View ، شما باید نحوه مرتب سازی داده ها در grid view ، افزودن header/footer view و برقراری تعامل با سلول های مجموعه را یاد گرفته باشید.

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