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.

Screen Shot 2016-04-25 at 10.30.14Screen Shot 2016-04-25 at 10.30.20Screen Shot 2016-04-25 at 10.30.32

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.

Screen Shot 2016-04-25 at 10.36.15

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

Screen Shot 2016-04-25 at 10.42.28

 

Chúng ta thêm vào Navigation thêm title .Screen Shot 2016-04-25 at 10.38.39 Thêm một buttonBar để close View đang xem trở về view trước đó,

Screen Shot 2016-04-25 at 10.39.10

 

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.

Screen Shot 2016-04-25 at 10.49.14

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

Screen Shot 2016-04-25 at 10.57.59

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

vào newFile :

Screen Shot 2016-04-25 at 10.59.03

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

Screen Shot 2016-04-25 at 11.03.01

 

 

 

!!!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 !

@property(nonatomic,strong) NSString *urlImage;

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

Screen Shot 2016-04-25 at 11.08.30 Screen Shot 2016-04-25 at 11.08.49

@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 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.

Screen Shot 2016-04-25 at 10.30.14 Screen Shot 2016-04-25 at 10.30.20

 

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

Screen Shot 2016-04-25 at 10.30.32- (IBAction)close:(id)sender{
    [self dismissViewControllerAnimated:YES completion:NULL];
}

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.

Screen Shot 2016-04-25 at 11.51.00

 

Thêm buttonbar và đổi tên thành lựa chọn.

Nối Property cho buttonBar.

Screen Shot 2016-04-25 at 13.53.20

  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 .

@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 và 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 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.

- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath
{
    if (nhieuLuaChon) {
        NSString *deSelectedRecipe = [self.urlAllImages[indexPath.section] objectAtIndex:indexPath.row];
        [listLuaChon removeObject:deSelectedRecipe];
    }
}

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.

cell.selectedBackgroundView = [[UIImageView alloc] 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 :

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

– 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 chế độ đa lựa chọn , đăng ký đa lựa chọn –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.

- (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];
        
        // Change the sharing mode to NO
        nhieuLuaChon = NO;
        self.colectionImage.allowsMultipleSelection = NO;
        self.share.title = @"lựa chọn";
        [self.share setStyle:UIBarButtonItemStylePlain];
        
    } else
    {
        // Change shareEnabled to YES and change the button text to DONE
        nhieuLuaChon = YES;
        //self.colectionImage.allowsMultipleSelection = YES;
        self.share.title = @"Đa lựa chọn";
        [self.share setStyle: UIBarButtonItemStyleDone];
        
    }
}

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:

www.mediafire.com/download/nqnz7m29gt4acy7/collectionViewController+2.zip

Gợi ý xem thêm:

  • Nếu các bạn muốn biết thêm các kỹ thuật khác về ios, các bạn có thể tham khảo thêm các khóa học ios tại đây.

Add a Comment

Your email address will not be published. Required fields are marked *