THÊM HEADER và FOOTER TRONG UICOLLECTIONVIEW

THÊM HEADER VÀ FOOTER TRONG UICOLLECTIONVIEW Trước đây, chúng ta đã tìm hiểu các vấn đề cơ bản của CollectionView và chỉ cho bạn làm thế nào để trình bày các mục trong bố trí lưới.. Sẽ

THÊM HEADER VÀ FOOTER TRONG

UICOLLECTIONVIEW

Trước đây, chúng ta đã tìm hiểu các vấn đề cơ bản của CollectionView và chỉ cho bạn làm thế nào để trình bày các mục trong bố trí lưới.

Sẽ không tuyệt vời nếu các 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 đầu tiên thể hiện công thức nấu ăn cho bữa ăn , trong khi các phần khác thể hiện công thức nấu ăn cho đồ uống và món tráng miệng.Như bạn đã biết, mỗi bộ sưu tập phải

có một đối tượng nguồn dữ liệu cung cấp nội dung để theo các mục để hiển thị dữ liệu Mục tiêu chúng ta là thể hiển nó theo từng mục, nội dung cụ thể trong các mục.Cụ thể bài này chúng

ta sẽ làm rõ các vấn đề sau:

Rõ ràng, các công thức nấu ăn đơn giản chúng tôi phát triển trong các hướng dẫn trước đây chỉ chứa một phần Trong hướng dẫn này, chúng tôi sẽ tiếp tục khám phá xem bộ sưu tập và cho bạn thấy làm thế nào để nhóm các mặt hàng thành các phần khác nhau Bạn cũng sẽ tìm hiểu làm thế nào để thêm tiêu đề hoặc cuối trang cho mỗi phần tỏng bộ sưu tập

Chúng ta bắt đầu nào :

bước 1: chia dữ liệu các công thức nấu ăn thành 2 thành phần :

Chúng ta sẽ dùng mảng lồng trong mảng mình sẽ minh hoa cho các bạn như hình dưới

urlAllImages(recipeImages như hình vẽ ): chứa tất cả các công thức nấu ăn cũng như

đồ uống

-Đối tướng thứ “0” trong mảng chứa mảng –urlFoodImages-chứa các công thức nấu ăn(Items)

-Đối tướng thứ “1” trong mảng chứa mảng-urlDrinkImages chứa các đồ 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:

1 @property( nonatomic,strong ) NSArray *urlAllImages;

2 @property( nonatomic,strong ) NSArray *urlFoodImages;

3 @property( nonatomic,strong ) NSArray *urlDrinkImages;

– TrongviewDidLoad ta chia bộ sưu tập tập như sau

1 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 ] ;

2 self.urlDrinkImages = [ NSArray arrayWithObjects:@ "angry_birds_cake.jpg" , @ "creme_brelee.jpg" , @ "green_tea.jpg" ,

@ "starbucks_coffee.jpg" , @ "white_chocolate_donut.jpg" , nil ] ;

3 self.urlAllImages = [ NSArray arrayWithObjects:self.urlFoodImages, self.urlDrinkImages, nil ] ;

– Đoạn mã trên chia tách các hình ảnh công thức thành hai nhóm

– Chúng ta thực hiện trả về số lượng phần của bộ sưu tập

1 - NSInteger ) collectionView: ( UICollectionView * ) collectionView numberOfItemsInSection: ( NSInteger ) section {

2 return [ self.urlAllImages [ section ] count ] ;

3 }

– Mỗi lần hàm này được gọi sẽ trả về 1 section hàm này được gọi count lần

– Tiếp theo, sửa đổi các “numberOfItemsInSection:” phương pháp để trả lại số mục trong mỗi phần:

1 - ( NSInteger ) numberOfSectionsInCollectionView: ( UICollectionView * ) collectionView {

2 return [ self.urlAllImages count ] ;

3 }

– Như trên ta đã tạo khuôn mẫu chung cho cell Tiếp theo chúng ta đưa dữ liệu vào trong cho từng mục

=> Sửa đổi mã nguồn như sau :

1 - UICollectionViewCell * ) collectionView: ( UICollectionView * ) collectionView cellForItemAtIndexPath: ( NSIndexPath

* ) indexPath {

2 static NSString *identifier = @ "Cell" ;

3

4 collectionViewcellImage *cell = [ collectionView dequeueReusableCellWithReuseIdentifier:identifier

forIndexPath:indexPath ] ;

5

6 cell.image.image= [ UIImage imageNamed:self.urlAllImages [ indexPath.section ][ indexPath.row ]] ;

7 // do backgroundView khong the xet den image nen phai khoi tao

8 cell.backgroundView= [[ UIImageView alloc ] initWithImage: [ UIImage imageNamed:@ "photo-frame.png" ]] ;

9 return cell;

10

11 }

Biên dịch và chạy thử ,bây giờ bạn sẽ có một màn hình tương tự như sau:

Các ứng dụng hoạt động nhưng xem không được đẹp Hàng cuối cùng của hình ảnh trong phần đầu tiên quá gần với hàng đầu tiên của phần thứ hai

Nhiệm vụ của chúng ta tiếp theo là làm sao để tinh chỉnh khoảng cách cho hợp lý

Bước 2 Tiếp theo chúng ta 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 ra một hình chữ nhật bao quanh mỗi phần và căn chỉnh top right bottom left

– sử dụng mã lệnh để tao ra hình chữ nhật bao quanh:

1 UIEdgeInsetsMake( top, right, bottom, left ) ;

-Ở đây chúng ta cần căn chỉnh màu tỷ lệ bao quanh section , vì vậy chúng ta lấy đối tượng collection để gọi đến section

1 UICollectionViewFlowLayout *collectionLayout= ( UICollectionViewFlowLayout* )

self.colectionImage.collectionViewLayout;

– collectionImage là đại diện của collectionView mà chúng ta tạo property cho nó – set section vào khung hình chữ nhật chỉnh kích thước theo pixel

1 collectionLayout.sectionInset=UIEdgeInsetsMake( 20 , , 20 , ) ;

sau khi làm như trên ta chạy được kết quả như sau:

Như vậy các phần đã được tách nhau ra .Tuy nhiên người dùng vẫn chưa hiểu cụ thể chủ để trong từng phần là gì

Bước 3 Thêm header và Footer cho từng section:

Chuẩn bị thêm 2 file ảnh Header và Footer link tải:

1 https://dl.dropbox.com/u/2857188/UICollectionView2_Image.zip

header và Footer là quan điểm trang trí cho tưng phần Giúp người dùng dễ đọc nội

dung theo chủ để hơn

Để làm thêm được header và footer chúng ta cần thực hiện:

Bật chế độ xem phần header / footer trong Storyboard !

Thiết kế giao diện header và footer:

Kéo image vào Header,kết nối ảnh “header_banner.png” vào image.tạo nền tĩnh cho header mục đích hiển thị cho đẹp

– Kéo label vào header để hiện thị text – tên chủ đề từng phần

– Thêm image vào footer kết nối ảnh footer.png vào image

Tuy chúng ta đã kết nối ảnh nhưng chạy thử ảnh sẽ chưa hiện ra bởi tương tự như UICollectionViewCell chưa có class nào quản lý nó, mới khởi tạo mà chưa thực hiện Chúng ta tạo Identifine, class quản lý cho header và footer :

-New file tạo 2 file class

– kết nối class ,tạo identifine: header:

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 * ) kind atIndexPath: ( NSIndexPath * ) indexPath {

2 UICollectionReusableView *ReusableView=nil;

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

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