17

Haben zwei Header in UICollectionView?UICollectionView mit zwei Headern

Ich habe ein UICollectionView bekam, die den Fluss Layout verwendet, die auch eine Kopf- und Fußzeile hat:

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

Gelegentlich würde Ich mag zwei Header haben, etwa so:

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

Ich bin fest, wie dies zu erreichen ist. Das Flusslayout scheint nur einen Kopf und einen Fuß zuzulassen. Wie kann ich einen zweiten Header hinzufügen?


edit: - http://blog.radi.ws/post/32905838158/sticky-headers-for-uicollectionview-using - Ich habe auch klebrig Header implementiert, aber ich will nur der erste Header-klebrig sein. Deshalb kann ich nicht einfach alles in einen Header aufnehmen.

Antwort

34

Sie müssen nur einen einfachen Trick verwenden. Zeigen Sie Kopf- und Fußzeile für alle Abschnitte an.

In welchem ​​Bereich wollen Sie nicht Fußzeile zeigen, gerade Null seine Größe passieren, wie: -

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

    return CGSizeMake(320, 50); 
} 

Hier habe ich zwei Abschnitte verwendet, wie

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

Und bestehen keine der Zeilen in nur eine Abschnitte, die die letzte als

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

ist Und hier ist mein Ausgang ---

enter image description here

Red View ist Header und Grün eins ist Fußzeile.

Here u can get the entire Implementation File

+0

Das scheint eine gute Richtung zu sein. Mit dieser Methode könnte ich verschiedene Layouts für die beiden Header verwenden? Und erlauben Sie mir, dass ein Header "sticky" ist und der andere normal scrollt. – cannyboy

+0

yeah warum nicht, wenden Sie einfach Abschnittsbedingung auf viewForSupplementaryElementOfKind an und Sie können Kopfzeile von verschiedenen Layouts für jeden Abschnitt erhalten. – Warewolf

+0

was für eine Antwort .... @ Herçules –

4

Sie sollten sowohl die Kopfzeile (1 und 2) in eine andere Ansicht einfügen und diese Ansicht als Kopf 1 platzieren. So erstellen Sie nur auf Kopfzeile in der Sammlungsansicht.

+0

I aktualisiert haben meine Antwort zu erklären, warum zwei Subviews nicht funktionieren würden. – cannyboy

+0

Trotzdem sollte das funktionieren, nur denke nicht an sie als zwei Header. – rckoenes

+1

Ich kann nicht denken, wie das funktionieren würde, da die Header unterschiedliche Verhaltensweisen haben. – cannyboy

2

Wie fügen Sie einen Header hinzu? Ich nehme an, indem ich Abschnittsüberschriften vorschlage? Das Rezept für zwei Header würde zwei Header-Subviews innerhalb einer Header-Hauptansicht haben.

+0

Ich habe meine Antwort aktualisiert, um zu erklären, warum zwei Teilansichten nicht funktionieren. – cannyboy

+0

Sie können verschiedene Autoresize-Masken mit beiden Header-Teilansichten ausprobieren. –

5

was Sie

wollen

erstellen die Klasse CollectionHeaderView und machen es aus UICollectionReusableView und machen Behälter abzuleiten Diese Inhalte können Sie erreichen helfen Und nachdem dann 2 uiview machen und es in diesen Container setzen

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

Während dieser Link die Frage beantworten kann, wird empfohlen, die erforderlichen Informationen im Antworttext selbst zu veröffentlichen. Link-Only-Antworten werden abgeraten. – Krishnabhadra

+0

@Krishnabhadra Ok, ich tat dies .. Danke :) – SachinVsSachin

+0

Für weitere Informationen http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers – Krishnabhadra

2

Sie können eine UITableView mit zwei Abschnitten verwenden und die UICollectionView in die Zelle des zweiten Abschnitts einfügen.

0

diese Arbeit erhält von zwei Ansichten in einem wieder verwendbaren Header erstellen, sticky Kopf implementieren nur, wenn der Abschnitt der zweite Abschnitt. Außerdem passe ich den numberOfSection auf 2. Hat die Header wechseln durch Ausblenden und Anzeigen der Ansichten in viewForSupplementaryElementOfKind.

0

Ihre UICollectionViewCell definieren, die Ihre Kopfansicht Art UICollectionElementKindSectionHeader sein - in meinem Fall habe ich zwei Header - OfferHeaderCell und APRHeaderCell wie folgt definiert:

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

Gehen Sie voran und geben einen Header für jeden Abschnitt und dann eingestellt, die Größe des Kopfabschnitts mit einer Größe von Null in diesem UICollectionViewDelegateFlowLayout Funktion wie unten

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) 
    } 

} 

wichtig zu definieren, die viewForSupplementaryElementOfKind für zwei unterschiedliche Abschnitte aufweist:

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 
} 

Und schließlich die Datenquelle,

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 
} 

Hinweis: vergessen nicht, wie unten hinzufügen UICollectionFlowLayout:

// MARK: 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) 
      } 
     } 
    }