iOS_UICollectionView上滑隐藏下滑显示导航栏(

1.概述

其实这个不是我目前项目里面需要的, 昨晚睡觉之前突然想到实现以下应该不错, 虽然暂时没什么卵用, 但多几个卵也是一种战略储备.

目前这种设计在知乎等这种阅读类的APP里面用的比较多, 或者新闻购物类的, 总之就是可以提供沉浸式阅读体验或者沉浸式购物体验啥的, 这些华丽的辞藻在猿类脑海里都没啥改变吧(我觉得), 在我们看来脑海里第一个想到的就是"卧槽这咋实现的啊????"

上滑隐藏下滑显示导航栏.gif

网上有很多类似的实现效果, 我这里也只是个人兴趣来弄一下, 至于那种说"偷"的, 我只想说"程序猿的事, 怎么能叫偷呢!!!"

2. 实现思路

大致的实现思路是在UICollectionViewDelegate的方法里, 通过判断滑动的方向来决定navigationController的显示和隐藏

- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset

还是那句话, 能用代码说明的东西就不要瞎逼逼. 看下面的代码吧

3.代码

3.1 创建和配置项目
demo是纯代码实现的, 为了有个能演示的导航栏, 所以删除了创建项目时候自带的ViewController文件, 并且在项目的general里面删除了main; 然后创建了一个OneViewController文件.

3.2 AppDelegate.m文件里

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
   
    self.window = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];
    self.window.backgroundColor = [UIColor whiteColor];
    
    OneViewController *oneVC = [[OneViewController alloc] init];
    UINavigationController *nvgVC = [[UINavigationController alloc]initWithRootViewController:oneVC];
    
    self.window.rootViewController = nvgVC;
    
    [self.window makeKeyAndVisible];
    
    
    return YES;
}

3.3 OneViewController文件里
.h文件里就没有啥了;

.m文件里:

#import "OneViewController.h"


@interface OneViewController ()<UICollectionViewDelegate, UICollectionViewDataSource>

@property (nonatomic, weak) UICollectionView *collectionView;

@end

static NSString *const cellID = @"cellID";

@implementation OneViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.title = @"最帅的男人";
    
    // 设置layout
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    CGFloat itemsW = (self.view.frame.size.width - 5*3) /4;
    layout.itemSize = CGSizeMake(itemsW, itemsW + 40);
    layout.minimumLineSpacing = 5;
    layout.minimumInteritemSpacing = 5;
   
    // 设置collectionView
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
    collectionView.delegate = self;
    collectionView.dataSource = self;
    [self.view addSubview:collectionView];
    self.collectionView = collectionView;
    // 注册cell
    [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:cellID];
    
}

# pragma mark - UICollectionViewDataSource
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{

    return 1;
}

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

    return 300;
}

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

    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellID forIndexPath:indexPath];
    if (cell == nil) {
        cell = [[UICollectionViewCell alloc] init];
    }
    
    cell.backgroundColor = [UIColor whiteColor];
    
    return cell;
    
}


# pragma mark - UICollectionViewDelegate
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset{

    /*
     通过判断滑动的方向来决定navigationController的显示和隐藏
     */
    if(velocity.y>0){
        
        [self.navigationController setNavigationBarHidden:YES animated:YES];
        
    }else{
        
        [self.navigationController setNavigationBarHidden:NO animated:YES];
        
    }
    
}
@end

到这里, 图片里的效果就算完成了. 超级简单;
但是, 这只是一个简单的demo而已, 在项目中使用起来这个效果的话, 要考虑的东西可能就多很多了, 比如根据手指是否离开屏幕的时候来显示还是屏幕滑动停止后才显示等等这些问题, 都是要自己实现思考一下的, 我个人提示是根据UICollectionViewDelegate的几个方法入手, 先搞清楚这几个方法的使用尤其是返回的参数意义, 这几个方法这里就不赘述了.

end