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 này sẽ giúp bạn lựa chọn duy nhất hoặc nhiều công thức nấu ăn … giúp cho việc lựa chọn để chia sẻ thuận tiện.. Ch

HƯỚNG DẪN TƯƠNG TÁC VỚI COLLECTIONVIEW

Như đã đề cập trước đó, hướng dẫn này sẽ giúp bạn lựa chọn duy nhất hoặc 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 bài này:

1 Để chứng minh làm thế nào bạn có thể xử lý lựa chọn duy nhất, chúng

ta sẽ cải thiện ứng dụng CollectionViewController của bài trước Khi người dùng chạm vào một bức ảnh công thức, ứng dụng sẽ hiển thị hình ảnh ở kích thước lớn hơn

2 Chúng tôi cũng sẽ thực hiện đa lựa chọn khi pick vào đa lựa chọn bạn

có thể lựa chọ nhiều công thức nấu ăn , Thêm Imagebackground khi lựa chọn

Bắt đầu nào:

Xử lý đơn lựa chọn và xem ảnh ở chế độ lớn hơn Bước1 Thiết kế giao diện:

Ta kết nối Navigation cho CollectionViewController

Kéo vào một ViewController mới dùng để View ảnh ở kích thước lớn hơn

Chúng ta thêm vào Navigation thêm title Thêm một buttonBar để close View đang xem trở về view trước đó,

Kéo một imageView dùng để hiển thị ảnh ở chế độ View lớn hơn

– Để liên hệ được CollectionViewController chúng ta thêm kết nối “Show detail” Khi lựa chọn 1 ảnh ở CollectionViewController chuyển sang view chúng ta vừa xây dựng

-Đặt identifine cho kết nối “show” phân biệt chúng ta trỏ đến view nào

-Chúng ta phải tao class quản lý View chúng ta vừa tạo ra

vào newFile :

-Kết nối class quản lý viewController của nó

!!!Như vậy chúng ta đã thiết kế xong giao diện và kết nối class

Xem thêm: Địa chỉ hoc lap trinh ios o dau để có việc làm

Bước2 mã nguồn:

Tại file showImageViewController.h

– Tạo ra một đối tượng “nhận tên ảnh” từ CollectionViewController !

1 @property(nonatomic,strong) NSString *urlImage;

– Tạo property cho image để set ảnh vào và action chobuttonBar close để đóng viewcontrolller đang view

1 @property (weak, nonatomic) IBOutlet UIImageView *imageView;

2 @property(nonatomic,strong) NSString *urlImage;

3 - (IBAction)close:(id)sender;

1 - (void)viewDidLoad {

2 [super viewDidLoad];

3 // Do any additional setup after loading the view

4 self.imageView.image=[UIImage imageNamed:self.urlImage];

5

6 }

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ã

sender:(id)sender{

2 if ([segue.identifier isEqualToString:@"show"]) {

indexPathsForSelectedItems];

4 NSIndexPath *indexPath=indexPaths[0];

5 showImageViewController*dest =segue.destinationViewController;

6 dest.urlImage=self.urlAllImages[indexPath.section][indexPath.row];

7 [self.colectionImage deselectItemAtIndexPath:indexPath animated:NO];

8 }

9 }

Hàm này cho phép chuyển dữ liệu qua segue

ban đầu kiểm tra xem có phải muốn gửi dữ liệu qua identifine “show” không collections cung cấp indexPathsForSelectedItems đưa ra section và item

mảng indexPath lưu lại giá trị section và item

segue.desttitaonViewController giúp điều hướng gửi value sang view mới Sau

đó chúng ta xét giá trị cho urlImage

Như vậy biên dịch và chạy chúng ta sẽ view được dữ liệu ảnh sang chế độ xem mới

thêm đoạn mã sau để đóng view đang xem

1 <a href="http://laptrinhios.vn/wp-content/uploads/2016/04/Screen-Shot-2016-04-25-at-10.30.321.png"><img class="alignnone size-medium wp-image-233"

content/uploads/2016/04/Screen-Shot-2016-04-25-at-10.30.321-196x300.png" alt="Screen Shot 2016-04-25 at 10.30.32" width="196"

srcset="http://laptrinhios.vn/wp-content/uploads/2016/04/Screen-Shot-2016-04-25-at-10.30.321-196x300.png 196w, http://laptrinhios.vn/wp-content/uploads/2016/04/Screen-Shot-2016-04-25-at-10.30.321.png 344w" sizes="(max-width: 196px) 100vw, 196px"></a>- (IBAction)close:(id)sender{

2 [self dismissViewControllerAnimated:YES 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

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 lựa và tiêu đề nút sẽ tự động thay đổi để “đa lựa chọn”

2 Sử dụng lựa chọn các bức ảnh công thức để 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 mảng listLuaChon

1 - (void)viewDidLoad

2 {

3 [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

self.urlAllImages[indexPath.section][indexPath.row];

6 // Add the selected item into the array

7 [listLuaChon addObject:luaChon];

8 }

9 }

Khi người dùng chọn công thức nấu ăn 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];

5 [listLuaChon removeObject:deSelectedRecipe];

6 }

7 }

Như vậy chúng ta đã thêm và loại bỏ được tên file ảnh vào trong listLuaChon

Để cho người dùng nhìn rõ ràng hơn trong hàm”cellForItemAtIndexPath” ta thêm đoạn mã:set ảnh khi người dùng lựa chọn

initWithImage:[UIImage imageNamed:@"images_select.jpeg"]];

tuy nhiên có 2 vấn đề xảy ra :

– một là khi ta click vào ảnh nó sẽ tự động chuyển sang view mới để xem không cho ta đa lựa chọn

-hai là chưa cho phép đồng thời lựa chọn

ok

thêm đoãn mã sau :

1 - (BOOL)shouldPerformSegueWithIdentifier:(NSString *)identifier sender:(id)sender

2 {

3 if (nhieuLuaChon) {

4 return NO;

5 } else {

6 return YES;

7 }

8 }

– nếu nhieuLuaChon == YES thì return no không cho phép chuyển sang view mới

– ngược lại chuyển sang chế độ xem ảnh

– khi ta click vào nút share nhieuLuaChon==YES Và chúng ta chuyển sang

self.colectionImage.allowsMultipleSelection = YES

đồng thời title gán bằng “Đã được chọn”.Sau đó chúng ta chọn được nhiều công thức cùng một lúc Click tiếp vào share nhieuLuaChon==YES sẽ thực hiện remove tất cả công thức trong mảng , xoá tất cả lựa chọn và chúng ta tắt chế độ đa lựa chọn để chuyển sang chế độ View

1 - (IBAction)share:(id)sender {

2 if (nhieuLuaChon) {

3 // // Deselect all selected items

self.colectionImage.indexPathsForSelectedItems) {

5 [self.colectionImage deselectItemAtIndexPath:indexPath animated:NO];

6 }

7

8 // Remove all items from selectedRecipes array

9 [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 chúng ta 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