web-dev-qa-db-ja.com

2つのヘッダーを持つUICollectionView

UICollectionViewに2つのヘッダーがありますか？

フローレイアウトを使用するUICollectionViewがあり、ヘッダーとフッターもあります。

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

ときどき、次のように2つのヘッダーが必要になります。

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

私はこれを達成する方法に固執しています。フローレイアウトは、1つの頭と1つの足のみを許可するように見えます。 2番目のヘッダーを追加するにはどうすればよいですか？

編集：スティッキーヘッダーも実装しました http://blog.radi.ws/post/32905838158/sticky-headers-for-uicollectionview-using -しかし、最初のヘッダーのみをスティッキーにしたい。これが、1つのヘッダーにすべてを含めることができない理由です。

iphoneiosobjective-cuicollectionviewuicollectionviewlayout
20
cannyboy

簡単なトリックを使用する必要があります。すべてのセクションにヘッダーとフッターの両方を表示します。

フッターを表示したくないセクションでは、サイズゼロを次のように渡します：-

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

    return CGSizeMake(320, 50);
}

ここで私は次のような2つのセクションを使用しました

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

そして、最後のセクションである1つのセクションのみに行を渡さなかった

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

そして、これが私の出力です---

enter image description here

赤いビューはヘッダーで、緑のビューはフッターです。

ここで実装ファイル全体を取得できます

35
Warewolf

このコンテンツは、あなたが望むものを達成するのに役立つかもしれません

クラスCollectionHeaderViewを作成し、それをUICollectionReusableViewから派生させてコンテナーを作成し、次に2 uiviewを作成した後、このコンテナーに配置します。

- (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;
}
5
SachinVsSachin

ヘッダー（1と2）の両方を別のビューに配置し、そのビューをヘッド1として配置する必要があります。したがって、コレクションビューのヘッダー上にのみ作成します。

4
rckoenes

UICollectionElementKindSectionHeaderの種類のヘッダービューとなるUICollectionViewCellを定義します-私の場合、2つのヘッダーがあります-OfferHeaderCellとAPRHeaderCellは次のように定義されています：

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

先に進み、各セクションのヘッダーを返し、このUICollectionViewDelegateFlowLayout関数でセクションヘッダーのサイズをゼロに設定します。

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

}

以下のように、2つの異なるセクションのviewForSupplementaryElementOfKindを定義することが重要です。

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
}

そして最後に、データソース、

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
}

注：以下のようにUICollectionFlowLayoutを追加することを忘れないでください。

//マーク：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)
            }
        }
    }
2
Tarun

どのように1つのヘッダーを追加していますか？セクションヘッダーを指定すると思いますか？ 2つのヘッダーを持つレシピは、1つのヘッダーメインビュー内に2つのヘッダーサブビューを持つことです。

2
Nirav Bhatt

実行できるのは、2つのセクションを持つUITableViewを使用し、UICollectionViewを2番目のセクションのセルに配置することです。

2
DrBug

再利用可能なヘッダーに2つのビューを作成してこれを機能させ、セクションが2番目のセクションである場合にのみスティッキーヘッダーを実装します。また、numberOfSectionを2に調整します。viewForSupplementaryElementOfKindのビューを非表示にして表示することで、ヘッダーを切り替えました。

0
John Paul Manoza