Diendanraovataz.net - Diễn đàn rao vặt - Đăng tin mua bán - Quảng cáo miễn phí - Hiệu quả - 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: Giới thiệu về UICollectionView 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 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: 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 : @interface CollectionViewController : UIViewController<UICollectionViewDataSource,UICollectionViewDelegate> 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. @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ột 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", @"mushroom_risotto.jpg", @"noodle_with_bbq_pork.jpg", @"starbucks_coffee.jpg", @"thai_shrimp_cake.jpg", @"vegetable_curry.jpg", @"white_chocolate_donut.jpg", nil]; } 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. -(NSInteger) collectionViewUICollectionView *)collectionView numberOfItemsInSectionNSInteger)section{ } Đưa data vào Collection-Hứng dữ liệu -(UICollectionViewCell *)collectionViewUICollectionView *)collectionView cellForItemAtIndexPathNSIndexPath *)indexPath{ } =>Trả về số lượng ô vuông trong một phần : trả về số lượng ô bằng số ảnh trong mảng. -(NSInteger) collectionViewUICollectionView *)collectionView numberOfItemsInSectionNSInteger)section{ return [self.urlImage count]; } =>Hứng dữ liệu -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 . -(UICollectionViewCell *)collectionViewUICollectionView *)collectionView cellForItemAtIndexPathNSIndexPath *)indexPath{ static NSString *identifier = @"Cell"; collectionViewcellImage *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath]; cell.image.image=[UIImage imageNamed:self.urlImage[indexPath.row]]; return cell; } 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. Trong : -(UICollectionViewCell *)collectionViewUICollectionView *)collectionView cellForItemAtIndexPathNSIndexPath *)indexPath{ } Ta thêm đoạn mã : cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed"photo-frame.png"]]; ok ! 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: Có gì đến phần tiếp theo Tuyệt vời, phải không? Đó là lý do tại sao tôi nói UICollectionView là một bổ sung tuyệt vời trong iOS 6 SDK. Trong hướng dẫn này, chúng ta chỉ tìm hiểu những điều cơ bản của lớp và sử dụng cách bố trí mặc định dựa trên lưới điện (tức là UICollectionViewFlowLayout). Trong bài hướng dẫn sau, chúng tôi sẽ tiếp tục nói về những điểm trang trí, xem bổ sung và cho bạn thấy làm thế nào để tạo ra bố cục của riêng bạn. thanks All!!! Xem thêm các tài liêu khóa học khác: Nên học lập trình php ở đâu Hà Nội
