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:

  • Số phần trong  bộ sưu tập.
  • Số lượng các mục trong mỗi phần.
  • Các tế bào xem cho một mục dữ liệu cụ thể.

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)

Screen Shot 2016-04-21 at 10.45.29

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 bộ sưu tập tập như 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ã 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.

-(NSInteger) collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return [self.urlAllImages[section] count];
}

– 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:

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return [self.urlAllImages count];
}

– 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 :

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *identifier = @"Cell";
    
    collectionViewcellImage *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
    
    cell.image.image=[UIImage imageNamed:self.urlAllImages[indexPath.section][indexPath.row]];
    // do backgroundView khong the xet den .image nen phai khoi tao
    cell.backgroundView=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"photo-frame.png"]];
    return cell;
    
}

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:

Screen Shot 2016-04-21 at 10.17.27

 

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:

Screen Shot 2016-04-21 at 14.08.05

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:

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.

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.

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

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

Screen Shot 2016-04-21 at 14.49.50

 

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:

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 !

Screen Shot 2016-04-21 at 14.51.25

 

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. 🙂Screen Shot 2016-04-21 at 14.53.26

 

– 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.

Screen Shot 2016-04-23 at 09.03.01 Screen Shot 2016-04-23 at 09.03.07

 

 

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

Screen Shot 2016-04-23 at 09.10.58

 

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

header:

Screen Shot 2016-04-23 at 09.15.45 Screen Shot 2016-04-23 at 09.15.58 Screen Shot 2016-04-23 at 09.16.08

 

footer:

Screen Shot 2016-04-23 at 09.16.23 Screen Shot 2016-04-23 at 09.16.28 Screen Shot 2016-04-23 at 09.16.35

Đã 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.

Screen Shot 2016-04-23 at 09.54.22

Code mã nguồn:

– Tạo mảng lưu CHỦ ĐỀ cho từng phần.

@property(nonatomic,strong) NSArray *header;

trong 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];
        ReusableView=footer;
    }
    return ReusableView;
}

 

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 . Screen Shot 2016-04-23 at 09.56.59

 

Có gì Trong Phần tiếp theo:

Chúng ta đã tạo ra được collectionView nhưng chưa tương tác với nó.

Trong thực tế như app lựa chọn ảnh pick ảnh xem ảnh đã pick hoặc chia sẻ.Bài tiếp theo chúng ta sẽ tương tác với thành phần trong collectionViewCell.

🙂

Gợi ý xem thêm:

  • Nếu các bạn muốn biết thêm các kỹ thuật khác về ios, các bạn có thể tham khảo thêm các khóa học ios tại đây.

Nguồn : http://laptrinhios.vn/

 

 

 

Add a Comment

Your email address will not be published. Required fields are marked *