17

Masz dwa nagłówki w UICollectionView?UICollectionView z dwoma nagłówkami

Mam UICollectionView który wykorzystuje układ przepływu, który również ma nagłówek i stopkę:

--------- 
| head | 
--------- 
| A | B | 
--------- 
| C | D | 
--------- 
| foot | 
--------- 

Okazjonalnie, chciałbym mieć dwa nagłówki, tak:

--------- 
| head1 | 
--------- 
| head2 | 
--------- 
| A | B | 
--------- 
| C | D | 
--------- 
| foot | 
--------- 

Utknąłem, jak to osiągnąć. Układ przepływu pojawia się tylko po jednej głowie i jednej nodze. Jak mogę dodać drugi nagłówek?


edit: Mam również realizowane lepkie nagłówki - http://blog.radi.ws/post/32905838158/sticky-headers-for-uicollectionview-using - ale chcę tylko pierwszy nagłówek być lepkie. Dlatego nie mogę po prostu uwzględnić wszystkiego w jednym nagłówku.

Odpowiedz

34

Wystarczy użyć prostej sztuczki. Pokaż nagłówek i stopkę dla wszystkich sekcji.

W której sekcji nie chcesz pokazać stopkę prostu przekazać swój rozmiar zerowy jak: -

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section 
{ 
    if(section==0) 
    { 
     return CGSizeZero; 
    } 

    return CGSizeMake(320, 50); 
} 

Tutaj użyłem dwie sekcje jak

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView 
{ 
    return 2; 
} 

i przeszedł bez rzędów w tylko jedną sekcje, które jest ostatnim jak

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section 
{ 
    if (section==1) { 
     return 20; 
    } 
    return 0; 
} 

I tu jest moje wyjście ---

enter image description here

Red View to nagłówek i stopka jest zielona.

Here u can get the entire Implementation File

+0

Wydaje się to dobrym kierunkiem. Dzięki tej metodzie mogę użyć różnych układów dla dwóch nagłówków? I pozwól mi, że jeden nagłówek będzie "lepki", a drugi będzie normalnie przewijał. – cannyboy

+0

tak, dlaczego nie, po prostu zastosuj warunek sekcji na widokuForSupplementaryElementOfKind i możesz uzyskać nagłówek różnych układów dla każdej sekcji. – Warewolf

+0

co za odpowiedź .... @ Herçules –

4

Powinieneś umieścić oba nagłówki (1 i 2) w innym widoku i umieścić ten widok jako nagłówek 1. W ten sposób utwórz tylko nagłówek w widoku kolekcji.

+0

Mam zaktualizowany moja odpowiedź na wyjaśnienie, dlaczego posiadanie dwóch subviews nie zadziałałoby. – cannyboy

+0

Nadal powinno to działać, po prostu nie myśl o nich jako o dwóch nagłówkach. – rckoenes

+1

Nie mogę myśleć, jak to by działało, ponieważ nagłówki mają różne zachowania. – cannyboy

2

Jak dodać jeden nagłówek? Przypuszczam, określając nagłówki sekcji? Przepis na dwa nagłówki będzie miał dwa nagłówki subviews w głównym widoku nagłówka.

+0

Zaktualizowałem swoją odpowiedź, aby wyjaśnić, dlaczego posiadanie dwóch subviews nie zadziałałoby. – cannyboy

+0

Możesz wypróbować różne maski autorezjum z oboma nagłówkami. –

5

Ta zawartość może pomóc osiągnąć to, co chcesz

utworzyć klasę CollectionHeaderView i sprawiają, że wywodzą się z UICollectionReusableView i sprawiają, kontener, a następnie po dokonać 2 UIView i umieścić go do tego kontenera

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath 
{ 
    UICollectionReusableView *reusableview = nil; 

    if (kind == UICollectionElementKindSectionHeader) { 
     CollectionHeaderView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"HeaderView" forIndexPath:indexPath]; 

     headerView.firstContainer.titleLabel.text = @"MY Header View 1";//Here you can set title 

     headerView.secondContainer.titleLabel.text = @"MY Header View 2";//Here you can set title 
     UIImage *headerImage = [UIImage imageNamed:@"header_banner.png"]; 
     headerView.firstContainer.backgroundImage.image = headerImage; 
     headerView.secondContainer.backgroundImage.image = headerImage; 

     reusableview = headerView; 
    } 

    if (kind == UICollectionElementKindSectionFooter) { 
     UICollectionReusableView *footerview = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"FooterView" forIndexPath:indexPath]; 

     reusableview = footerview; 
    } 

    return reusableview; 
} 
+0

Podczas gdy ten link może odpowiedzieć na pytanie, zaleca się opublikowanie niezbędnych informacji w treści odpowiedzi. Odpowiedzi dotyczące wyłącznie linku są odradzane. – Krishnabhadra

+0

@Krishnabhadra Ok Zrobiłem to .. Dzięki :) – SachinVsSachin

+0

Do dalszego czytania http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers – Krishnabhadra

2

Co można zrobić, to użyć UITableView z dwiema sekcjami i umieścić UICollectionView w komórce drugiej sekcji.

0

Got tej pracy, tworząc dwa widoki w nagłówku wielokrotnego użytku, wdrożyć lepką nagłówek tylko wtedy, gdy sekcja jest drugi odcinek. Ponadto dostosowuję numerOfSection do 2. Mam przełączanie nagłówków przez ukrywanie i pokazywanie widoków w widokuForSupplementaryElementOfKind.

0

Zdefiniuj UICollectionViewCell który będzie Twój widok Nagłówek rodzaju UICollectionElementKindSectionHeader - W moim przypadku mam dwa nagłówki - OfferHeaderCell i APRHeaderCell zdefiniowane jak poniżej:

verticalCollectionView.register(UINib(nibName: "OfferHeaderCell", bundle: nil), forSupplementaryViewOfKind:UICollectionElementKindSectionHeader, withReuseIdentifier: "OfferHeaderCell") 
verticalCollectionView.register(UINib(nibName: "APRHeaderCell", bundle: nil), forSupplementaryViewOfKind:UICollectionElementKindSectionHeader, withReuseIdentifier: "APRHeaderCell") 

Śmiało i zwraca nagłówek dla każdej sekcji, a następnie ustawić rozmiar nagłówka sekcji mieć rozmiar zero w tym UICollectionViewDelegateFlowLayout funkcji

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize { 
    if(section==0) { 
     return CGSize.zero 
    } else if (section==1) { 
     return CGSize(width:collectionView.frame.size.width, height:133) 
    } else { 
     return CGSize(width:collectionView.frame.size.width, height:100) 
    } 

} 

ważne, aby zdefiniować viewForSupplementaryElementOfKind dla dwóch różnych sekcjach, jak poniżej:

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView { 

    var reusableview = UICollectionReusableView() 
    if (kind == UICollectionElementKindSectionHeader) { 
     let section = indexPath.section 
     switch (section) { 
     case 1: 
      let firstheader: OfferHeaderCell = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "OfferHeaderCell", for: indexPath) as! OfferHeaderCell 
      reusableview = firstheader 
     case 2: 
      let secondHeader: APRHeaderCell = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "APRHeaderCell", for: indexPath) as! APRHeaderCell 
      reusableview = secondHeader 
     default: 
      return reusableview 

     } 
    } 
    return reusableview 
} 

I wreszcie DataSource,

func numberOfSections(in collectionView: UICollectionView) -> Int { 
    return 3 
} 

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { 
    if (section==2) { 
     return 2 
    } 
    return 0 
} 

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { 
    let cell = verticalCollectionView.dequeueReusableCell(withReuseIdentifier: "ReviseOfferCell", for: indexPath) 
    cell.backgroundColor = UIColor.white 
    return cell 
} 

Uwaga: Nie zapomniał dodać UICollectionFlowLayout jak poniżej:

// Znak: UICollectionViewDelegateFlowLayout

extension MakeAnOfferController: UICollectionViewDelegateFlowLayout { 

     func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { 

      if indexPath.item == 0 { 
       return CGSize(width: self.view.frame.size.width, height: 626.0) 
      } 
      return CGSize() 
     } 

     func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize { 

      if(section==0) { 
       return CGSize.zero 
      } else if (section==1) { 
       return CGSize(width:collectionView.frame.size.width, height:133) 
      } else { 
       return CGSize(width:collectionView.frame.size.width, height:100) 
      } 
     } 
    } 
Powiązane problemy