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的幾個方法入手, 先搞清楚這幾個方法的使用尤其是返回的參數意義, 這幾個方法這里就不贅述了.
