THÊM HEADER và FOOTER TRONG UICOLLECTIONVIEW

THÊM HEADER VÀ FOOTER TRONG UICOLLECTIONVIEW Trước đây, tìm hiểu vấn đề CollectionView cho bạn làm để trình bày mục bố trí lưới Sẽ không tuyệt vời công thức nấu ăn tràn lan sang nước uống , đồ ăn nhẹ… Mục tiêu chúng ta, phần thể công thức nấu ăn cho bữa ăn , phần khác thể công thức nấu ăn cho đồ uống tráng miệng.Như bạn biết, sưu tập phải có đối tượng nguồn liệu cung cấp nội dung để theo mục để hiển thị liệu Mục tiêu thể hiển theo mục, nội dung cụ thể mục.Cụ thể làm rõ vấn đề sau:    Số phần sưu tập Số lượng mục phần Các tế bào xem cho mục liệu cụ thể Rõ ràng, công thức nấu ăn đơn giản phát triển hướng dẫn trước chứa phần Trong hướng dẫn này, tiếp tục khám phá xem sưu tập cho bạn thấy làm để nhóm mặt hàng thành phần khác Bạn tìm hiểu làm để thêm tiêu đề cuối trang cho phần tỏng sưu tập Chúng ta bắt đầu : bước 1: chia liệu công thức nấu ăn thành thành phần : Chúng ta dùng mảng lồng mảng minh hoa cho bạn hình urlAllImages(recipeImages hình vẽ ): chứa tất công thức nấu ăn đồ uống -Đối tướng thứ “0” mảng chứa mảng –urlFoodImages-chứa công thức nấu ăn(Items) -Đối tướng thứ “1” mảng chứa mảng-urlDrinkImages chứa đồ uống (Items) Xem thêm: Bộ tài liệu lập trình game unity chuyên sâu Quay trở lại mã nguồn : -Ta Khai Báo: @property(nonatomic,strong) NSArray *urlAllImages; @property(nonatomic,strong) NSArray *urlFoodImages; @property(nonatomic,strong) NSArray *urlDrinkImages; – TrongviewDidLoad ta chia sưu tập tập sau self.urlFoodImages = [NSArray arrayWithObjects:@"egg_benedict.jpg", @"full_breakfast.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", @"thai_shrimp_cake.jpg", @"vegetable_curry.jpg", nil]; self.urlDrinkImages = [NSArray arrayWithObjects:@"angry_birds_cake.jpg", @"creme_brelee.jpg", @"green_tea.jpg", @"starbucks_coffee.jpg", @"white_chocolate_donut.jpg", nil]; self.urlAllImages = [NSArray arrayWithObjects:self.urlFoodImages, self.urlDrinkImages, nil]; – Đoạn mã chia tách hình ảnh công thức thành hai nhóm – Chúng ta thực trả số lượng phần sưu tập 1 -(NSInteger) collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{ return [self.urlAllImages[section] count]; } – Mỗi lần hàm gọi trả section hàm gọi count lần – Tiếp theo, sửa đổi “numberOfItemsInSection:” phương pháp để trả lại số mục phần: - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{ return [self.urlAllImages count]; } – Như ta tạo khuôn mẫu chung cho cell Tiếp theo đưa liệu vào cho mục => Sửa đổi mã nguồn sau : -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{ static NSString *identifier = @"Cell"; collectionViewcellImage *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath]; 10 cell.image.image=[UIImage imageNamed:self.urlAllImages[indexPath.section][indexPath.row]]; // backgroundView khong the xet den image nen phai khoi tao cell.backgroundView=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"photo-frame.png"]]; return cell; 11 } Biên dịch chạy thử ,bây bạn có hình tương tự sau: Các ứng dụng hoạt động xem không đẹp Hàng cuối hình ảnh phần gần với hàng phần thứ hai Nhiệm vụ để tinh chỉnh khoảng cách cho hợp lý Bước Tiếp theo cần tinh chỉnh Margin: Xem thêm: Bộ tài liệu tu hoc lap trinh ios Chúng ta cần tạo hình chữ nhật bao quanh phần chỉnh top right bottom left – sử dụng mã lệnh để tao hình chữ nhật bao quanh: UIEdgeInsetsMake(top, right, bottom, left); -Ở cần chỉnh màu tỷ lệ bao quanh section , lấy đối tượng collection để gọi đến section UICollectionViewFlowLayout *collectionLayout=(UICollectionViewFlowLayout*) self.colectionImage.collectionViewLayout; – collectionImage đại diện collectionView mà tạo property cho – set section vào khung hình chữ nhật chỉnh kích thước theo pixel 1 collectionLayout.sectionInset=UIEdgeInsetsMake(20, 2, 20, 2); sau làm ta chạy kết sau: Như phần tách thể chủ để phần Tuy nhiên người dùng chưa hiểu cụ Bước Thêm header Footer cho section: Chuẩn bị thêm file ảnh Header Footer link tải: https://dl.dropbox.com/u/2857188/UICollectionView2_Image.zip header Footer quan điểm trang trí cho tưng phần Giúp người dùng dễ đọc nội dung theo chủ để Để làm thêm header footer cần thực hiện: Bật chế độ xem phần header / footer Storyboard ! Thiết kế giao diện header footer: Kéo image vào Header,kết nối ảnh “header_banner.png” vào image.tạo tĩnh cho header mục đích hiển thị cho đẹp – Kéo label vào header để thị text – tên chủ đề phần – Thêm image vào footer kết nối ảnh footer.png vào image Tuy kết nối ảnh chạy thử ảnh chưa tương tự UICollectionViewCell chưa có class quản lý nó, khởi tạo mà chưa thực Chúng ta tạo Identifine, class quản lý cho header footer : -New file tạo file class – kết nối class ,tạo identifine: header: footer: Đã thực xong giao diện kết nối Identifine Class quản lý ! Kết nối property cho label Code mã nguồn: – Tạo mảng lưu CHỦ ĐỀ cho phần @property(nonatomic,strong) NSArray *header; Viewdidload : self.header=@[@"Đồ ăn" ,@"Đồ uống"]; -(UICollectionReusableView*)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{ UICollectionReusableView *ReusableView=nil; if(kind==UICollectionElementKindSectionHeader){ CollectionReusableView *header=[collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header" forIndexPath:indexPath]; header.labelHeader.text=self.header[indexPath.section]; ReusableView=header; } if (kind==UICollectionElementKindSectionFooter) { CollectionReusableView *footer=[collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer" forIndexPath:indexPath]; 10 ReusableView=footer; 11 } 12 return ReusableView; 13 } Giải thích dòng code: sử dụng hàm viewForSupplementaryElementOfKind để lựa chọn header, footer thực hiển thị Mỗi lần gọi section ,kind trả giá trị xét header footer.Nếu xét header or footer trả UICollectionElementKindSectionHeader or UICollectionElementKindSectionFooter Tương tự collctionViewcell gọi định danh cho xem làm việc cho collectionViewcell ,truyền IndexPath lựa chọn vị trí ta kéo xuống xét text cho label or xét ảnh cho image.Image kết nối nên không cần xét image Bây biên dịch chạy thử kết hình [...]... if(kind==UICollectionElementKindSectionHeader){ 4 CollectionReusableView *header= [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@ "header" forIndexPath:indexPath]; 5 header. labelHeader.text=self .header[ indexPath.section]; 6 ReusableView =header; 7 } 8 if (kind==UICollectionElementKindSectionFooter) { 9 CollectionReusableView *footer= [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter... dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@ "footer" forIndexPath:indexPath]; 10 ReusableView =footer; 11 } 12 return ReusableView; 13 } Giải thích dòng code: sử dụng hàm viewForSupplementaryElementOfKind để lựa chọn header, footer thực hiện hiển thị Mỗi lần gọi section ,kind trả về giá trị đang xét là header hoặc footer. Nếu đang xét header or footer trả về UICollectionElementKindSectionHeader or UICollectionElementKindSectionFooter.. .footer: Đã thực hiện xong giao diện và kết nối các Identifine Class quản lý ! Kết nối property cho label Code mã nguồn: – Tạo mảng lưu CHỦ ĐỀ cho từng phần 1 @property(nonatomic,strong) NSArray *header; trong Viewdidload : 1 self .header= @[@"Đồ ăn" ,@"Đồ uống"]; 1 -(UICollectionReusableView*)collectionView: (UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString... UICollectionElementKindSectionHeader or UICollectionElementKindSectionFooter Tương tự như collctionViewcell gọi định danh cho nó xem đang làm việc cho collectionViewcell nào ,truyền IndexPath lựa chọn vị trí khi ta kéo xuống xét text cho label or xét ảnh cho image.Image chúng ta đã kết nối nên không cần xét image nữa Bây giờ biên dịch và chạy thử kết quả sẽ được như hình