将 UICollectionView 添加到 NavigationBar

Posted 2023-03-13

【中文标题】将 UICollectionView 添加到 NavigationBar

【英文标题】：Add UICollectionView to NavigationBar

【发布时间】：2016-04-02 19:42:59

【问题描述】：

我正在尝试将 UICollectionView 作为子视图添加到我的 NavigationBar。

[self.navigationController.view addSubview:self.hotspotCollectionView];

它似乎工作正常，但覆盖了后退按钮，请参阅随附的屏幕截图。无论如何缩进collectionView以便后退按钮正确可见？还有没有办法增加导航栏的高度，以便我可以在我的 CollectionView 中使用更大的缩略图？

我正在使用 XCode 7 和 ios9。

【问题讨论】：

您是否尝试按照here 中的说明将collectionview 添加到navigationItem 的titleView 中？

【参考方案1】：

我能够实现这个简单的例子

通过使用 UINavigationBar 的子类并将集合视图设置为视图控制器的 navigationItem.titleView

---

#import <UIKit/UIKit.h>

@interface NavigationBar : UINavigationBar

@end

---

#import "NavigationBar.h"

@implementation NavigationBar

- (CGSize)sizeThatFits:(CGSize)size

    return CGSizeMake(self.superview.bounds.size.width, 80);


-(void)setFrame:(CGRect)frame 
    CGRect f = frame;
    f.size.height = 80;
    [super setFrame:f];


@end

---

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end

---

#import "ViewController.h"
#import "CollectionViewCell.h"

@interface ViewController ()<UICollectionViewDelegate, UICollectionViewDataSource>
@property (nonatomic, weak) UICollectionView *collectionView;
@end

@implementation ViewController

- (void)viewDidLoad 
    [super viewDidLoad];
    UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc] init];

    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, 300, 80) collectionViewLayout:layout];
    collectionView.backgroundColor = [UIColor clearColor];
    self.navigationItem.titleView = collectionView;
    [collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
    collectionView.delegate = self;
    collectionView.dataSource = self;



-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView

    return 1;


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

    return 5;


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

    CollectionViewCell *cell = (CollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
    cell.backgroundColor = [UIColor orangeColor];
    return cell;

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath

    return CGSizeMake(50, 50);


@end

---

我在 Interface Builder 中设置了自定义 NavigationBar

---

免责声明 1： 我不能保证这是一个面向未来的解决方案或在任何情况下都可以使用。我没有用自动布局或旋转之类的东西对其进行测试。

免责声明 2： 我个人会独立于视图控制器实现任何数据源/委托。对于 tableViews 和集合视图，我使用我自己成长的 OFAPopulator。

---

这里是一个示例代码：gitlab.com/vikingosegundo/collectionview-in-navigationbar/tree/... 里面还有一些 UI 怪癖。但这可能是意料之中的。我猜苹果只是没有考虑我们改变高度。实际上，我从未见过导航栏高度不同的应用程序。但是代码回答了你的问题。给它更多的爱，它可能对你有用。

【讨论】：

那不是让所有的 NavigationBars 看起来都这样吗？另外，我还没有尝试过你的方法，但是这仍然会覆盖 Back 按钮。

不，不会覆盖后退按钮。查看新的屏幕截图。

那不是让所有 NavigationBars 看起来都这样吗？ 仅在您使用自定义类的地方。你可以添加一个在普通样式和自定义之间切换的方法。

那我只能在根NavigationViewController中设置navigationBar类，还是我错了？

你可以使用不同的导航控制器。

【参考方案2】：

我认为在这种情况下最好的决定是使用模仿UINavigationBar 的自定义UIView 子类。而setNavigationBarHidden:YES animated:NO对应UINavigationController。

【讨论】：

如果你这样做并将视图推送到导航控制器，你的 UIView 不会消失吗？