HƯỚNG dẫn TƯƠNG tác với COLLECTIONVIEW

HƯỚNG DẪN TƯƠNG TÁC VỚI COLLECTIONVIEW Như đề cập trước đó, hướng dẫn giúp bạn lựa chọn nhiều công thức nấu ăn … giúp cho việc lựa chọn để chia sẻ thuận tiện Mục tiêu này: Để chứng minh làm bạn xử lý lựa chọn nhất, cải thiện ứng dụng CollectionViewController trước Khi người dùng chạm vào ảnh công thức, ứng dụng hiển thị hình ảnh kích thước lớn Chúng thực đa lựa chọn pick vào đa lựa chọn bạn lựa chọ nhiều công thức nấu ăn , Thêm Imagebackground lựa chọn Bắt đầu nào: Xử lý đơn lựa chọn xem ảnh chế độ lớn Bước1 Thiết kế giao diện: Ta kết nối Navigation cho CollectionViewController Kéo vào ViewController dùng để View ảnh kích thước lớn Chúng ta thêm vào Navigation thêm title Thêm buttonBar để close View xem trở view trước đó, Kéo imageView dùng để hiển thị ảnh chế độ View lớn – Để liên hệ CollectionViewController thêm kết nối “Show detail” Khi lựa chọn ảnh CollectionViewController chuyển sang view vừa xây dựng -Đặt identifine cho kết nối “show” phân biệt trỏ đến view -Chúng ta phải tao class quản lý View vừa tạo vào newFile : -Kết nối class quản lý viewController !!!Như thiết kế xong giao diện kết nối class Xem thêm: Địa hoc lap trinh ios o dau để có việc làm Bước2 mã nguồn: Tại file showImageViewController.h – Tạo đối tượng “nhận tên ảnh” từ CollectionViewController ! @property(nonatomic,strong) NSString *urlImage; – Tạo property cho image để set ảnh vào action chobuttonBar close để đóng viewcontrolller view @property (weak, nonatomic) IBOutlet UIImageView *imageView; @property(nonatomic,strong) NSString *urlImage; - (IBAction)close:(id)sender; - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view self.imageView.image=[UIImage imageNamed:self.urlImage]; } Cho phép khởi tạo ảnh theo urlImage- nhận từ CollectionViewController !!! Tại file CollectionViewController.h #import “showImageViewController.h” file CollectionViewController.m thêm dòng mã -(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{ if ([segue.identifier isEqualToString:@"show"]) { NSArray*indexPaths =[self.colectionImage indexPathsForSelectedItems]; NSIndexPath *indexPath=indexPaths[0]; showImageViewController*dest =segue.destinationViewController; dest.urlImage=self.urlAllImages[indexPath.section][indexPath.row]; [self.colectionImage deselectItemAtIndexPath:indexPath animated:NO]; } } Hàm cho phép chuyển liệu qua segue ban đầu kiểm tra xem có phải muốn gửi liệu qua identifine “show” không collections cung cấp indexPathsForSelectedItems đưa section item mảng indexPath lưu lại giá trị section item segue.desttitaonViewController giúp điều hướng gửi value sang view Sau xét giá trị cho urlImage Như biên dịch chạy view liệu ảnh sang chế độ xem thêm đoạn mã sau để đóng view xem - (IBAction)close:(id)sender{ [self dismissViewControllerAnimated:YES completion:NULL]; } Xử lý đa lựa chọn : UICollectionView hỗ trợ nhiều lựa chọn Tuy nhiên, người dùng phép chọn mục theo mặc định Các allowsMultipleSelection lớp UICollectionView nhiều công thức lựa chọn lúc Thêm buttonbar đổi tên thành lựa chọn Nối Property cho buttonBar Người dùng chạm vào nút “lựachọn” điều hướng để bắt đầu trình đa lựa tiêu đề nút tự động thay đổi để “đa lựa chọn” Sử dụng lựa chọn ảnh công thức để chia sẻ Khi người dùng click vào “đa lựa chọn” lần title đổi sang chế độ lựa chọn-> view Tại CollectionViewController.m Tạo biến nhieuLuaChon cho phép lựa chọn đa lựa chọn NSMutableArray *listLuaChon; để lưu lại tên image công thức nấu ăn lựa chọn @implementation CollectionViewController{ BOOL nhieuLuaChon; NSMutableArray *listLuaChon; } Cho phép tự khởi tạo cho mảng listLuaChon - (void)viewDidLoad { [super viewDidLoad]; listLuaChon =[NSMutableArray array]; } Appdelagate cung cấp hai hàm cho phép lựa chọn bỏ chọn DidSelectItemIndexPath cho phép lựa chọn hứng tương tác pick hay không - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath { if (nhieuLuaChon) { // Determine the selected items by using the indexPath NSString *luaChon self.urlAllImages[indexPath.section][indexPath.row]; // Add the selected item into the array [listLuaChon addObject:luaChon]; } } = Khi người dùng chọn công thức nấu ăn ta lấy IndexPath – trỏ đến tên ảnh Mỗi lần lưu chọn ta thêm tên ảnh vào listLuaChon DidDeSelectItemIndexPath dùng giá trị indexPath để loại bỏ công thức nấu ăn - (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath { if (nhieuLuaChon) { NSString *deSelectedRecipe = [self.urlAllImages[indexPath.section] objectAtIndex:indexPath.row]; [listLuaChon removeObject:deSelectedRecipe]; } } Như thêm loại bỏ tên file ảnh vào listLuaChon Để cho người dùng nhìn rõ ràng hàm”cellForItemAtIndexPath” ta thêm đoạn mã:set ảnh người dùng lựa chọn cell.selectedBackgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"images_select.jpeg"]]; nhiên có vấn đề xảy : – ta click vào ảnh tự động chuyển sang view để xem không cho ta đa lựa chọn -hai chưa cho phép đồng thời lựa chọn ok thêm đoãn mã sau : - (BOOL)shouldPerformSegueWithIdentifier:(NSString *)identifier sender:(id)sender { if (nhieuLuaChon) { return NO; } else { return YES; } } – nhieuLuaChon == YES return no không cho phép chuyển sang view – ngược lại chuyển sang chế độ xem ảnh – ta click vào nút share nhieuLuaChon==YES Và chuyển sang chế độ đa lựa chọn , đăng ký đa lựa chọn – self.colectionImage.allowsMultipleSelection = YES đồng thời title gán “Đã chọn”.Sau chọn nhiều công thức lúc Click tiếp vào share nhieuLuaChon==YES thực remove tất công thức mảng , xoá tất lựa chọn tắt chế độ đa lựa chọn để chuyển sang chế độ View 1 - (IBAction)share:(id)sender { if (nhieuLuaChon) { // // Deselect all selected items for(NSIndexPath *indexPath in self.colectionImage.indexPathsForSelectedItems) { [self.colectionImage deselectItemAtIndexPath:indexPath animated:NO]; } // Remove all items from selectedRecipes array [listLuaChon removeAllObjects]; 10 11 // Change the sharing mode to NO 12 nhieuLuaChon = NO; 13 self.colectionImage.allowsMultipleSelection = NO; 14 self.share.title = @"lựa chọn"; 15 [self.share setStyle:UIBarButtonItemStylePlain]; 16 17 } else 18 { 19 // Change shareEnabled to YES and change the button text to DONE 20 nhieuLuaChon = YES; 21 //self.colectionImage.allowsMultipleSelection = YES; 22 self.share.title = @"Đa lựa chọn"; 23 [self.share setStyle: UIBarButtonItemStyleDone]; 24 25 } 26 } ok biên dịch chạy kết hình : Có phần tiếp theo: Tiếp theo sau hướng dẫn bạn lựa chọn ảnh thư mục chung để view cho phép camera chụp ảnh view ảnh vừa chụp full mã nguồn collectionView link: www.mediafire.com/download/nqnz7m29gt4acy7/collectionViewCon troller+2.zip [...]... [super viewDidLoad]; 4 listLuaChon =[NSMutableArray array]; 5 } Appdelagate cung cấp hai hàm cho phép lựa chọn và bỏ chọn DidSelectItemIndexPath cho phép lựa chọn hứng tương tác pick hay không 1 - (void )collectionView: (UICollectionView * )collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath 2 { 3 if (nhieuLuaChon) { 4 // Determine the selected items by using the indexPath 5 NSString *luaChon... biên dịch và chạy sẽ được kết quả như hình : Có gì trong phần tiếp theo: Tiếp theo bài sau mình sẽ hướng dẫn các bạn lựa chọn các ảnh trong thư mục chung để view và cho phép camera chụp ảnh và view ảnh chúng ta vừa chụp full mã nguồn về collectionView link: 1 www.mediafire.com/download/nqnz7m29gt4acy7/collectionViewCon troller+2.zip ... nào ta lấy IndexPath của nó – trỏ đến tên ảnh Mỗi lần lưu chọn ta thêm tên ảnh vào listLuaChon DidDeSelectItemIndexPath dùng giá trị indexPath để loại bỏ các công thức nấu ăn 1 - (void )collectionView: (UICollectionView * )collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath 2 { 3 if (nhieuLuaChon) { 4 NSString *deSelectedRecipe = [self.urlAllImages[indexPath.section] objectAtIndex:indexPath.row];... completion:NULL]; 3 } Xử lý đa lựa chọn : UICollectionView hỗ trợ cả duy nhất và nhiều lựa chọn Tuy nhiên, người dùng được phép chọn mục duy nhất theo mặc định Các allowsMultipleSelection của lớp UICollectionView nhiều công thức có thể được lựa chọn cùng một lúc Thêm buttonbar và đổi tên thành lựa chọn Nối Property cho buttonBar 1 Người dùng chạm vào nút “lựachọn” trong thanh điều hướng để bắt đầu quá trình đa... để chia sẻ 3 Khi người dùng click vào “đa lựa chọn” lần nữa thì title đổi sang chế độ lựa chọn-> view Tại CollectionViewController.m Tạo biến nhieuLuaChon cho phép lựa chọn một hoặc đa lựa chọn NSMutableArray *listLuaChon; để lưu lại tên image các công thức nấu ăn được lựa chọn 1 @implementation CollectionViewController{ 2 BOOL nhieuLuaChon; 3 NSMutableArray *listLuaChon; 4 } Cho phép tự khởi tạo cho