جلسه 23 آموزش iOS کار با UIImagePickerController دوربین

در جلسه قبل ، ما نحوه استفاده از API های داخلی را ، برای RSS feed و ساخت یک اپ ساده RSS Reader ، آموزش دادیم. در این جلسه ، قصد داریم ، نحوه استفاده از دوربین داخلی iPhone (یا iPod یا iPad ، هر کدام را که داشته باشید) را برای عکس برداری ، آموزش دهیم. هم چنین ، خواهیم دید که چگونه می توانیم به کتابخانه داخلی عکس (internal photo library) ، دسترسی داشته باشیم و به کاربر اجازه دهیم با استفاده از دوربین داخلی ، عکس برداری نماید. کتابخانه iOS ، کلاس UIImagePickerController ، را فراهم می آورد ، که رابط کاربری برای مدیریت تعامل کاربر با دوربین یا کتابخانه عکس است. به طور معمول ، UIImagePickerController ، نیاز دارد که از نماینده برای پاسخ به تعاملات  استفاده نماید.

برای کمک به فهم کاربرد UIImagePickerController ، یک اپ ساده camera (دوربین)  خواهیم ساخت. اپلیکیشن مثال ما بسیار ساده است: یک پنجره اصلی با یک UIImageView بزرگ خواهیم داشت ، که عکس انتخاب شده را نشان می دهد ، و دو کلید داریم که یکی برای گرفتن عکس جدید و دیگری برای انتخاب عکس از کتابخانه عکس استفاده می شوند.

ساخت یک اپلیکیشن Single View

Xcode را باز کرده و یک پروژه جدید ایجاد می کنیم. تمپلت Single View Application را مطابق تصویر زیر انتخاب می کنیم:

در صفحه بعد ، CameraApp ، را به عنوان product name  انتخاب کرده و فیلد company identifier را نیز تکمیل می نماییم. گزینه “Use Authomatic Reference Counting” ، را انتخاب می کنیم ، اما ، از آن جایی که قصد نداریم از Storyboard ، در این پروژه  استفاده کنیم ، گزینه “Use Storyboard” را از حالت انتخاب ، خارج می کنیم. کلید Next و Create را کلیک می نماییم.

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

فایل AppViewController.xib را از Navigator مربوط به Xcode ، برای نمایش View Controller  ، در Editor Pane ، انتخاب می کنیم. یک UIImageView  را از کتابخانه ، انتخاب کرده و آن را به بالای UIView ، درگ می کنیم. اندازه UIImageView را تغییر می دهیم تا عرض آن کل صفحه را گرفته و طول آن نیز بیش از نیمی از صفحه را بگیرد. سپس ، UIButton  را زیر UIImageView ، درگ می کنیم و در وسط صفحه قرار می دهیم ، عنوان آن را به “Take Photo” تغییر می دهیم. در آخر ، UIButton  دیگری را زیر کلید قبلی درگ کرده و در وسط صفحه قرار می دهیم و عنوان آن را به “Select Photo” ، تغییر می دهیم. View Controller حاصل شده باید شبیه تصویر زیر باشد:

دوباره ، UIImageView را انتخاب می کنیم. در Inspector ، ما tab مربوط به File را انتخاب می کنیم و گزینه Use Auto Layout را از حالت انتخاب خارج می کنیم ، زیرا نمی خواهیم که اندازه UIImageView ، به اندازه عکسی که از دوربین گرفته می شود ، تغییر یابد. زیرا در این صورت ، تقریباً هیچ فضای آزاد برای کلیدها نخواهیم داشت.

مرحله بعد ، ایجاد اتصالات است. برای انجام این کار ، Editor را به حالت Assistant تغییر می دهیم ، در این میان فایل AppViewController.xib ، انتخاب شده است. فایل AppViewController.h ، باید باز شود. کلید کنترل را فشار داده و نگه می داریم ، UIImageView را به فایل AppViewController.h ، درگ کرده و یک IBOutlet ایجاد می کنیم.

در فیلد connection ، باید Outlet ، را انتخاب نموده ، برای گزینه Name ، مقدار imageView ، برای گزینه Type ، مقدار UIImageView و در آخر ، برای گزینه Storage ، مقدار Strong را انتخاب می کنیم. این کار ، کد IBOutlet زیر را ایجاد می کند:

@property (strong, nonatomic) IBOutlet UIImageView *imageView;

به روش مشابهی ، کلید کنترل را فشار داده و نگه می داریم ، کلید “Take Photo” را درگ می کنیم. در این مورد ، در فیلد Connection ، مقدار Action را انتخاب می کنیم ، در گزینه Name ، مقدار takePhoto ، در گزینه type ، مقدار UIbutton ، گزینه Event ، که action ها را شروع می کند ، مقدار “Touch Up Inside” را انتخاب می کنیم. آرگومان پاس داده شده به متد ، Sender است. همین مراحل را برای کلید “Select Photo” ، دوباره تکرار می کنیم ، اما ، در این مورد نام action را selectPhoto قرار می دهیم.

اگر تمام مراحل به درستی انجام شوند ، در فایل  APPViewController.h ، باید کد زیر را داشته باشیم:

#import 
 
@interface APPViewController : UIViewController
 
@property (strong, nonatomic) IBOutlet UIImageView *imageView;
 
- (IBAction)takePhoto:  (UIButton *)sender;
- (IBAction)selectPhoto:(UIButton *)sender;
 
@end

پیاده سازی View Controller

همان طور که قبلاً گفتیم ، نیاز به یک نماینده داریم که با تعاملات کاربر با دوربین و کتابخانه عکس ، سر و کار داشته باشد. برای انجام این کار ، ما باید از پروتکل UIImagePickerControllerDelegate ، پیروی کنیم. هم چنین ، از آن جایی که قصد داریم دوربین (یا کتابخانه عکس) را به صورت modally ارائه دهیم ، باید پروتکل UINavigationControllerDelegate را نیز  پیاده سازی نماییم. دو پروتکل فوق را به فایل AppViewController.h ، اضافه می کنیم.

@interface APPViewController : UIViewController <UIImagePickerControllerDelegate, UINavigationControllerDelegate>

زمانی که کاربر روی کلید “Take Photo” ضربه می زند ، ما باید یک UIImagePickerController  ، ایجاد کنیم و نماینده آن را به کلاس AppViewController  ، تنظیم نماییم. هم چنین ، باید مشخص کنیم ، کدام نوع image picker را می خواهیم نشان دهیم ، دوربین را با UIImagePickerControllerSourceTypeCamera ، کتابخانه عکس را با UIImagePickerControllerSourceTypePhotoLibrary ، نشان می دهیم. در این مورد ، ما Camera را انتخاب می کنیم. پس از تعیین picker ، ما باید آن را به صورت modally ، با متد presentViewController ، ارائه دهیم.

متد action مربوط به takePhoto را مطابق کد زیر ، می نویسیم:

- (IBAction)takePhoto:(UIButton *)sender {
    
    UIImagePickerController *picker = [[UIImagePickerController alloc] init];
    picker.delegate = self;
    picker.allowsEditing = YES;
    picker.sourceType = UIImagePickerControllerSourceTypeCamera;
    
    [self presentViewController:picker animated:YES completion:NULL];
    
}

در نهایت ، مراحل مشابهی را برای متد action ، مربوط به selectPhoto ، انجام می دهیم ، اما ، sourceType را به UIImagePickerControllerSourceTypePhotoLibrary ، تغییر می دهیم.

- (IBAction)selectPhoto:(UIButton *)sender {
    
    UIImagePickerController *picker = [[UIImagePickerController alloc] init];
    picker.delegate = self;
    picker.allowsEditing = YES;
    picker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
    
    [self presentViewController:picker animated:YES completion:NULL];
 
    
}

پیاده سازی نماینده متدهای UIImagePickerController

هنگامی که ، کاربر یک عکس با دوریین می گیرد ، و اندازه عکس را تغییر می دهد (امکان تغییر اندازه عکس را ، در هنگام ایجاد image picker وقتی که allowsEditing = YES ، قرار دهیم ، فراهم می نماییم) ، متد didFinishPickingMediaWithInfo  ، فراخوانی می شود. به عنوان آرگومان اول ، ما picker را داریم که متد را فراخوانی می کند ، اگر بیش از یک image picker ، در اپ خود داشته باشیم ، این آرگومان می تواند ، بسیار مفید باشد ، اما ، در این مثال ، ما آن را نداریم ، لذا از این پارامتر چشم پوشی می کنیم. آرگومان دوم ، جالب تر است. این آرگومان یک NSDictionary است که شامل موارد دیگر ، مانند عکس اصلی و عکس ویرایش شده (قابل دسترسی از طریق تگ UIImagePickerControllerEditedImage ) است.

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {
    
    UIImage *chosenImage = info[UIImagePickerControllerEditedImage];
    self.imageView.image = chosenImage;
    
    [picker dismissViewControllerAnimated:YES completion:NULL];
    
}

ممکن است این حالت اتفاق بیافتد که کاربر ، عملیات را با لمس کردن کلید “Cancel” ، از image picker view ، متوقف سازد. در این مورد ، picker ، متد imagePickerControllerDidCancel  را فراخوانی می کند. پیاده سازی این متد بسیار ساده است ، چیزی که باید انجام دهیم ، فقط حذف picker controller می باشد.

- (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker {
 
    [picker dismissViewControllerAnimated:YES completion:NULL];
    
}

Crashبرنامه

بسیار خوب ! اپلیکیشن ما آماده است و می توانیم آن را بر روی یک دستگاه فیزیکی تست نماییم. با این حال ، اگر اپ را بر روی شبیه ساز اجرا کنیم ، اپلیکیشن crash خواهد کرد. اشتباه در کجاست؟ مشکل این جاست که شبیه ساز دوربین ندارد. اگر بخواهیم ، می توانیم صراحتاً این مورد را کنترل کنیم و به کاربر یک پیام خطا ، نشان دهیم (این کار ، راه حل بهتری نسبت به crash کردن اپ می باشد). از آن جایی که ممکن است  کاربر ، اپ ما را بر روی یک iPodTouch یا iPad قدیمی بدون دوربین اجرا کند ؛ انجام دادن آن ایده خوبی است. UIImagePickerController ، یک متد کلاس ، به نام isSourceTypeAvailable دارد که به ما اجازه می دهد ، بررسی کنیم که آیا ، دستگاه دوربین داخلی (constant UIImagePickerControllerSourceTypeCamera)، دارد یا خیر.

برای مثال ، کد زیر را به متد viewDidLoad  ، مربوط به کنترلر ، اضافه می کنیم:

    if (![UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera]) {
    
        UIAlertView *myAlertView = [[UIAlertView alloc] initWithTitle:@"Error"
                                                        message:@"Device has no camera"
                                                        delegate:nil
                                                        cancelButtonTitle:@"OK"
                                                        otherButtonTitles: nil];
        
        [myAlertView show];
        
    }

تست اپ با استفاده از یک دستگاه فیزیکی

بعد از تغییر کد ، اپ را دوباره در شبیه ساز iPhone  اجرا می کنیم. باید یک پیام خطا را ببینیم ، زیرا شبیه ساز ، از دوربین پشتیبانی نمی کند. برای تست اپ ، باید آن را بر روی یک دستگاه فیزیکی  iPhone (یا سایر دستگاه ها)، لود کرده و تست نماییم. اگر همه چیز ، درست باشد، باید کار را با یک اپ ساده به اتمام برسانیم ، که به ما اجازه می دهد ، عکس گرفته و به کتابخانه داخلی عکس دسترسی داشته باشیم.

کلاس UIImagePickerController ، یک روش عالی برای دسترسی به دوربین iPhone و کتابخانه عکس است. اپ نمونه ، یک اپ عالی نیست ، اما ، درک خوبی در خصوص نحوه عملکرد UIImagePickerController ، به شما ، ارائه می دهد. iOS SDK ، دسترسی به دوربین داخلی و کتابخانه عکس را ، بسیار ساده کرده است.