HƯỚNG dẫn sử DỤNG COLLECTION VIEW TRONG IOS

HƯỚNG DẪN SỬ DỤNG COLLECTION VIEW TRONG IOS Bạn nhớ ứng dụng hiển thị loại Quả Các trước ? Chúng ta sử UITableView làm để hiển thị danh sách loại Sẽ thật tuyệt vời hiển thị các loại xem dạng lưới ? Từ IOS SDK trở lên ,giới thiệu lớp gọi UICollectionView cho phép nhà phát triển để tạo bố trí theo dạng lưới … Nếu bạn ý tưởng việc bố trí theo dạng lưới, cần có nhìn ứng dụng Photos… Dạng lưới không đơn giản hoá cách để xếp yếu tố thị giác cách bố trí lưới, chí cho phép nhà phát triển tùy chỉnh bố cục (ví dụ hình tròn, bìa dòng chảy phong cách bố trí) mà không thay đổi liệu Trong hướng dẫn này, xây dựng ứng dụng đơn giản để hiển thị sưu tập hình ảnh công thức cách bố trí lưới Dưới bạn học: Giới thiệu UICollectionView Làm để sử dụng UICollectionView để xây dựng bố trí lưới đơn giản dựa Tùy biến Bộ sưu tập di động Xem thêm: Trường đào tạo khóa học lập trình android tốt Khái niệm UICollectionView : UICollectionView hoạt động tương tự UITableView khác cách bố trí kiểu xem.Trong UITableView quản lý tập hợp mục liệu hiển thị chúng hình bố cục đơn,bảng lớp UICollectionView cung cấp phát triển linh hoạt để trình bày mặt hàng sử dụng bố trí tùy chỉnh theo dạng lưới UICollectionView kết hợp với UICollectionViewFlowLayout tổ chức mục vào mạng lưới với quan điểm header footer tùy chọn cho phần Các UICollectionView bao gồm nhiều thành phần: -Tế bào UICollectionViewCell Giống UITableViewCell, tế bào đại diện cho mặt hàng sưu tập liệu… -Quan điểm bổ sung – Tùy chọn Nó thường sử dụng để thực quan điểm đầu cuối phần thể FOOTER or HEADER học sau -Quan điểm Tương tác : check , tương tác trang trí… học sau BẮT ĐẦU: TẠO APP DẠNG LƯỚI ĐƠN GIẢN QUẢN LÝ CÁC CÔNG THỨC NẤU ĂN: KHỞI TẠO PROJECT MỚI NHƯ CÁC BÀI TRƯỚC! BƯỚC1: Thiết kế giao diện : Tới Storyboard Thêm Collection View từ thư viện đối tượng Kéo vào, thêm Color cho để dễ phân biệt Collection View thêm mặc định cho CollectionViewCell Chúng ta chỉnh kích thước cho Ô vuông CollectionViewCell hợp lý cho thị dạng ô kích thước thường 85 pixel X 85 pixel Để hiển thị danh sách ảnh ăn ta thêm imageView vào CollectionViewCell sau: Kéo thả vào! lưu ý: imageView phải đặt UICollectionViewCell Thêm color cho background UICollectionViewCell thêm để phân biệt khung viềm Tương tự UITableView, UICollectionView sử dụng AppDelegete để quản lý nối AppDelegate: Tạo Identifine cho UICollectionViewCell dùng để định danh cho cell !!! Như Vậy thiết kế xong giao diện! Bước2 Code Collection : NEW FILE tạo class quản lý View vừa xây dựng! đặt tên class sau chọn nơi lưu trữ vào khởi tạo Để Class quản lý view xây dựng , ta cần kết nối class -tiếp theo khởi tạo liệu : chuẩn bị tập tin hình ảnh ! link tải: https://dl.dropbox.com/u/2857188/RecipePhotoImagePack.zip Giải nén kéo vào App tập tin hình ảnh: Trong file CollectionViewController.h kết nối AppDelegate : @interface CollectionViewController : UIViewController Tương tự TableView: UICollectionViewDataSource: dùng để hứng liệu tương tác Cell UICollectionViewDelegate: dùng để tạo khuôn mẫu cho cell -Chúng ta cần tạo class collectionViewcellImage để quản lý cell UICollectionViewCell 1 @interface collectionViewcellImage : UICollectionViewCell @end Tạo Đối tượng để thêm ảnh vào.chúng ta cần kết nối imageView với class collectionViewcellImage đặt tên *image @interface collectionViewcellImage : UICollectionViewCell @property (weak, nonatomic) IBOutlet UIImageView *image; @end Trong CollectionViewController.m, khai báo mảng lưu tên ảnh ,cho tập tin hình ảnh: @property(nonatomic,strong) NSArray *urlImage; Trong – (void)viewDidLoad khởi tạo giá trị cho mảng hình ảnh! - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view self.urlImage = [NSArray arrayWithObjects:@"angry_birds_cake.jpg", @"creme_brelee.jpg", @"egg_benedict.jpg", @"full_breakfast.jpg", @"green_tea.jpg", @"ham_and_cheese_panini.jpg", @"ham_and_egg_sandwich.jpg", @"hamburger.jpg", @"instant_noodle_with_egg.jpg", @"japanese_noodle_with_pork.jpg", @"noodle_with_bbq_pork.jpg", @"thai_shrimp_cake.jpg", @"white_chocolate_donut.jpg", nil]; } @"mushroom_risotto.jpg", @"starbucks_coffee.jpg", @"vegetable_curry.jpg", Tương tự TableView ,Collection có phương thức bắt buộc : Đưa số lượng Ô vuông phần-tạo khuôn mẫu -(NSInteger) collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{ } Đưa data vào Collection-Hứng liệu -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{ } =>Trả số lượng ô vuông phần : trả số lượng ô số ảnh mảng -(NSInteger) collectionView:(UICollectionView numberOfItemsInSection:(NSInteger)section{ return [self.urlImage count]; } =>Hứng liệu *)collectionView -lấy Identifine UICollectioViewCell -Khai Báo cell với Identifine lần gọi indexPath -Xét ảnh cho image trongUICollectioViewCell -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{ static NSString *identifier = @"Cell"; collectionViewcellImage *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath]; cell.image.image=[UIImage imageNamed:self.urlImage[indexPath.row]]; 10 return cell; 11 12 } Các bạn làm chi tiết minh hoạ chạy thử xem kết Chúng ta kết hình dưới: Bước 3, Tùy biến Bộ sưu tập di động nền: Như nói ban đầu tạo:Thêm color cho background UICollectionViewCell thêm để phân biệt khung viềm.Khung Viềm có màu vàng nhạt Kết phía trên!!!  Bối cảnh View – xem tế bào  Chọn View – image với tế bào  Xem nội dung – rõ ràng, nội dung ảnh bây chúng tạo viềm không dùng màu mà thêm khung image tuỳ biến sau Trong : -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{ } Ta thêm đoạn mã : cell.backgroundView = [[UIImageView initWithImage:[UIImage imageNamed:@"photo-frame.png"]]; ok ! alloc] Bây biên dịch chạy ứng dụng lần Ứng dụng bạn trông này: [...]... UIViewController Tương tự trong TableView: UICollectionViewDataSource: dùng để hứng dữ liệu tương tác trên Cell UICollectionViewDelegate: dùng để tạo khuôn mẫu cho cell -Chúng ta cần tạo một class collectionViewcellImage để quản lý cell trong UICollectionViewCell 1 @interface collectionViewcellImage : UICollectionViewCell 2 3 @end Tạo Đối tượng để thêm ảnh vào.chúng ta cần kết nối imageView... @"vegetable_curry.jpg", Tương tự như TableView ,Collection có 2 phương thức bắt buộc : Đưa ra số lượng Ô vuông trong một phần-tạo khuôn mẫu 1 -(NSInteger) collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{ 2 3 } Đưa data vào Collection- Hứng dữ liệu 1 -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath... class collectionViewcellImage đặt tên *image 1 @interface collectionViewcellImage : UICollectionViewCell 2 @property (weak, nonatomic) IBOutlet UIImageView *image; 3 @end Trong CollectionViewController.m, khai báo một mảng lưu tên ảnh ,cho tập tin hình ảnh: 1 @property(nonatomic,strong) NSArray *urlImage; Trong – (void)viewDidLoad khởi tạo giá trị cho mảng hình ảnh! 1 - (void)viewDidLoad { 2 3 [super viewDidLoad];... vuông trong một phần : trả về số lượng ô bằng số ảnh trong mảng 1 -(NSInteger) collectionView:(UICollectionView numberOfItemsInSection:(NSInteger)section{ 2 3 return [self.urlImage count]; 4 5 } =>Hứng dữ liệu *)collectionView -lấy Identifine của UICollectioViewCell -Khai Báo cell với Identifine và mỗi lần gọi indexPath của nó -Xét ảnh cho image trongUICollectioViewCell 1 -(UICollectionViewCell *)collectionView:(UICollectionView... UICollectionViewCell chúng ta thêm để phân biệt khung viềm.Khung Viềm có màu vàng nhạt như Kết quả phía trên!!!  Bối cảnh View – xem nền của tế bào  Chọn nền View – giữa image với nền tế bào  Xem nội dung – rõ ràng, đó là nội dung ảnh của bài bây giờ chúng sẽ tạo viềm không dùng màu nữa mà sẽ thêm khung bằng image tuỳ biến như sau Trong : 1 -(UICollectionViewCell *)collectionView:(UICollectionView... mỗi lần gọi indexPath của nó -Xét ảnh cho image trongUICollectioViewCell 1 -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{ 2 3 static NSString *identifier = @"Cell"; 4 5 collectionViewcellImage *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath]; 6 7 cell.image.image=[UIImage imageNamed:self.urlImage[indexPath.row]];... lý được view chúng ta đã xây dựng , ta cần kết nối class -tiếp theo chúng ta khởi tạo dữ liệu : chuẩn bị tập tin hình ảnh ! link tải: 1 https://dl.dropbox.com/u/2857188/RecipePhotoImagePack.zip Giải nén ra và kéo vào App như vậy chúng ta đã được tập tin hình ảnh: Trong file CollectionViewController.h kết nối AppDelegate : 1 @interface CollectionViewController : UIViewController