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

HƯỚNG DẪN SỬ DỤNG COLLECTION VIEW TRONG IOS Bạn còn nhớ ứng dụng hiển thị các loại Quả trong Các bài trước?. Chúng ta đã sử UITableView làm thế nào để hiển thị danh sách các loại quả.. S

HƯỚNG DẪN SỬ DỤNG COLLECTION VIEW TRONG IOS

Bạn còn nhớ ứng dụng hiển thị các loại Quả trong Các bài trước ? Chúng ta đã

sử UITableView làm thế nào để hiển thị danh sách các loại quả Sẽ thật tuyệt vời nếu nó có thể hiển thị các các loại quả xem ở dạng lưới ?

Từ IOS 6 SDK trở lên ,giới thiệu một lớp mới gọi là UICollectionView cho phép các nhà phát triển để tạo ra bố trí theo dạng lưới …

Nếu bạn không có ý tưởng về việc bố trí theo dạng lưới, chỉ cần có một cái nhìn trong ứng dụng Photos… Dạng lưới không chỉ đơn giản hoá cách để sắp xếp các yếu tố thị giác trong cách bố trí lưới, nó thậm chí còn cho phép các nhà phát triển tùy chỉnh bố cục (ví dụ như hình tròn, bìa dòng chảy phong cách bố trí) mà không thay đổi dữ liệu

Trong hướng dẫn này, chúng ta sẽ xây dựng một ứng dụng đơn giản để hiển thị một bộ sưu tập các hình ảnh công thức trong cách bố trí lưới Dưới đây là những gì bạn sẽ được học:

1 Giới thiệu về UICollectionView

2 Làm thế nào để sử dụng UICollectionView để xây dựng một bố trí lưới đơn giản dựa trên

3 Tùy biến các Bộ sưu tập di động nền

Xem thêm: Trường đào tạo khóa học lập trình android tốt nhất

Khái niệm cơ bản UICollectionView :

UICollectionView hoạt động tương tự UITableView chỉ khác cách bố trí kiểu xem.Trong khi UITableView quản lý một tập hợp các mục dữ liệu và hiển thị chúng trên màn hình trong một bố cục đơn,bảng lớp UICollectionView cung cấp phát triển linh hoạt để trình bày các 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 các mục vào một mạng lưới với quan điểm header và footer tùy chọn cho từng phần

Các UICollectionView bao gồm nhiều thành phần:

-Tế bào UICollectionViewCell Giống như UITableViewCell, một tế bào đại diện cho một mặt hàng duy nhất trong bộ sưu tập dữ liệu…

-Quan điểm bổ sung – Tùy chọn Nó thường được sử dụng để thực hiện các quan điểm đầu hoặc cuối của phần thể hiện FOOTER or HEADER chúng ta sẽ học ở bài sau

-Quan điểm Tương tác : check , tương tác trang trí… chúng ta sẽ được học ở bài 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 một Collection View từ thư viện đối tượng

Kéo vào, thêm Color cho nó để chúng ta dễ phân biệt

ở đây Collection View đã thêm mặc định cho chúng ta CollectionViewCell

Chúng ta căn chỉnh kích thước cho Ô vuông CollectionViewCell hợp lý sao cho nó có thể hiện thị ở dạng 3 ô

kích thước thường 85 pixel X 85 pixel

Để hiển thị danh sách ảnh món ăn ta thêm imageView vào CollectionViewCell như sau:

Kéo thả vào! lưu ý: imageView phải đặt trong UICollectionViewCell

Thêm color cho background UICollectionViewCell chúng ta thêm để phân biệt khung viềm

Tương tự như UITableView, UICollectionView cùng sử dụng AppDelegete để quản lý

chúng ta nối AppDelegate:

Tạo Identifine cho UICollectionViewCell dùng để định danh cho cell nào !!!

Như Vậy chúng ta đã thiết kế xong giao diện!

Bước2 Code Collection :

NEW FILE tạo 2 class quản lý View chúng ta 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 có thể quản 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:

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

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!

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{

-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

Các bạn làm chi tiết như mình minh hoạ và chạy thử xem kết quả thế nào

Chúng ta sẽ được kết quả như hình dưới:

Bước 3, Tùy biến các Bộ sưu tập di động nền:

Như mình đã nói ban đầu tạo:Thêm color cho background 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

Bây giờ biên dịch và chạy các ứng dụng một lần nữa Ứng dụng của bạn sẽ

trông như thế này: