之前很多兄弟问如何实现类似于淘宝客户端搜索列表那种动态显隐的效果,这几天刚好有时间,就实现了几个例子搞一下,其实原理很简单,也参考了github上一位兄弟的实现.不多说,上代码
@interface D1ScrollingNaviBarViewController : UIViewController //滑动隐藏,显示导航栏 -(void)followRollingScrollView:(UIView *)scrollView; //用来处理导航栏下还有其他内容也需要跟随导航栏一起隐藏,显示的情况,类似于淘宝客户端的搜索 -(void)followRollingScrollView:(UIView *)scrollView secondAreaHeight:(CGFloat)secondAreaHeight; @end
#define NAVI_BAR_HEIGHT 44.0 @interface D1ScrollingNaviBarViewController ()<UIGestureRecognizerDelegate> @property (weak, nonatomic) UIView *scrollView; @property (retain, nonatomic)UIPanGestureRecognizer *panGesture; @property (retain, nonatomic)UIView *overLay; @property (assign, nonatomic)BOOL isHidden; @property(nonatomic,assign)CGFloat secondAreaHeight; @end @implementation D1ScrollingNaviBarViewController - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil { self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]; if (self) {
self.secondAreaHeight = 0.0; } return self; } //设置跟随滚动的滑动试图 -(void)followRollingScrollView:(UIView *)scrollView { self.scrollView = scrollView; self.panGesture = [[UIPanGestureRecognizer alloc] init]; self.panGesture.delegate=self; self.panGesture.minimumNumberOfTouches = 1; [self.panGesture addTarget:self action:@selector(handlePanGesture:)]; [self.scrollView addGestureRecognizer:self.panGesture]; CGRect rect = self.navigationController.navigationBar.bounds; self.overLay = [[UIView alloc] initWithFrame:rect]; self.overLay.alpha=0; self.overLay.backgroundColor=self.navigationController.navigationBar.barTintColor; [self.navigationController.navigationBar addSubview:self.overLay]; [self.navigationController.navigationBar bringSubviewToFront:self.overLay]; } -(void)followRollingScrollView:(UIView *)scrollView secondAreaHeight:(CGFloat)secondAreaHeight { self.secondAreaHeight = secondAreaHeight; [self followRollingScrollView:scrollView]; } #pragma mark - 兼容其他手势 -(BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer { return YES; } #pragma mark - 手势调用函数 -(void)handlePanGesture:(UIPanGestureRecognizer *)panGesture { CGPoint translation = [panGesture translationInView:[self.scrollView superview]]; //显示 if (translation.y >= 5) { if (self.isHidden) { self.overLay.alpha=0; CGRect navBarFrame = self.navigationController.navigationBar.frame; CGRect scrollViewFrame=self.scrollView.frame; navBarFrame.origin.y = 20; scrollViewFrame.origin.y += self.secondAreaHeight+NAVI_BAR_HEIGHT; scrollViewFrame.size.height -= self.secondAreaHeight+NAVI_BAR_HEIGHT; [UIView animateWithDuration:0.5 animations:^{ self.navigationController.navigationBar.frame = navBarFrame; self.scrollView.frame=scrollViewFrame; }]; self.isHidden= NO; } } //隐藏 if (translation.y <= -20) { if (!self.isHidden) { CGRect frame =self.navigationController.navigationBar.frame; CGRect scrollViewFrame=self.scrollView.frame; frame.origin.y = -24; scrollViewFrame.origin.y -= self.secondAreaHeight+NAVI_BAR_HEIGHT; scrollViewFrame.size.height += self.secondAreaHeight+NAVI_BAR_HEIGHT; [UIView animateWithDuration:0.5 animations:^{ self.navigationController.navigationBar.frame = frame; self.scrollView.frame=scrollViewFrame; } completion:^(BOOL finished) { self.overLay.alpha=1; }]; self.isHidden=YES; } } } -(void)viewDidAppear:(BOOL)animated{ [self.navigationController.navigationBar bringSubviewToFront:self.overLay]; } @end
要使用的类继承这个基类
//设置导航栏的背景色的两种方式 self.navigationController.navigationBar.barTintColor=[UIColor greenColor];//使用颜色 self.navigationController.navigationBar.barTintColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"nav_bg_h64"]];//使用图片 //44高度会被自动拉伸,所以需要注意图片的实际效果 self.navigationController.navigationBar.barTintColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"navi_bg_h44"]];//使用图片 //使用自动滑动显隐代码,这个50,是指紧挨着导航栏的要跟随显隐的区域的高度,如果没有这个区域,可以调用没有这个参数的接口,一样的 [self followRollingScrollView:self.view secondAreaHeight:50];