iOS-UI效果之【监听滚动导航条渐隐】
超简单好用的监听滚动,导航条渐隐的UI效果实现(目前最流行的UI效果之一) ,源码分享
打开你手里的App仔细观察,你会发现很多都有实现这个功能。
效果图如下
1.gif实现思路
1.首先来看一下导航条的层次结构图,先搞定背景图片View的Alpha值,即黄色箭头指向的view
怎么拿到黄色标注出来的view呢,查看导航控制器的头文件,并未发现有对外暴露属性.通过运行时拿?没必要,这里教大家一个简单的方法.看下面代码.
[[[self.navigationController.navigationBar subviews]objectAtIndex:0] setAlpha:alpha];
2.再设置左中右三个item视图的Alpha值
代码如下
//设置导航条上的标签是否跟着透明
self.navigationItem.leftBarButtonItem.customView.alpha = self.isLeftAlpha?alpha:1;
self.navigationItem.titleView.alpha = self.isTitleAlpha?alpha:1;
self.navigationItem.rightBarButtonItem.customView.alpha = self.isRightAlpha?alpha:1;
3.然而还有一个很重要的问题,既然是导航控制器,那就有push和pop操作,也就说会有多个控制器共用一个导航条.那怎么样让各个控制器中的导航条不相互影响呢?
解决方案如下
- (void)setInViewWillAppear{
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
self.navBarBackgroundImage = [self.navigationController.navigationBar backgroundImageForBarMetrics:UIBarMetricsDefault];
});
//设置背景图片
[self.navigationController.navigationBar setBackgroundImage:self.navBarBackgroundImage forBarMetrics:UIBarMetricsDefault];
//清除边框,设置一张空的图片
[self.navigationController.navigationBar setShadowImage:[[UIImage alloc]init]];
[self getScrollerView].contentOffset = CGPointMake(0, self.keyScrollView.contentOffset.y - 1);
[self getScrollerView].contentOffset = CGPointMake(0, self.keyScrollView.contentOffset.y + 1);
}
- (void)setInViewWillDisappear{
[[[self.navigationController.navigationBar subviews]objectAtIndex:0] setAlpha:1];
[self.navigationController.navigationBar setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault];
[self.navigationController.navigationBar setShadowImage:nil];
}
整体的思路就是这样.具体的实现方案各有不同.大家可以参照笔者demo
下面介绍一下,我对外提供的分类接口
HYNavBarHidden分类的常用属性方法
属性
-
keyScrollView:当控制器中有多个ScrollView时,要指明是监听哪个ScrollView的滚动
/** 需要监听的view */
@property (nonatomic,weak) UIScrollView * keyScrollView; -
导航条中item是否跟着渐隐,分别设置左边,中间,右边三个的BOOL值.默认为NO
/** 设置导航条上的标签是否需要跟随滚动变化透明度,默认不会跟随滚动变化透明度 */ @property (nonatomic,assign) BOOL isLeftAlpha; @property (nonatomic,assign) BOOL isTitleAlpha; @property (nonatomic,assign) BOOL isRightAlpha;
-
scrolOffsetY:偏移大于等于scrolOffsetY时,导航条的alpha为1
@property (nonatomic,assign) CGFloat scrolOffsetY;
方法 (push或者pop控制器时,消除或回复导航条状态)
-
- (void)setInViewWillAppear;/** 恢复导航条的背景设置,在控制器的viewWillAppear:方法中调用*/
-
- (void)setInViewWillDisappear; /** 清除导航条的背景设置,在控制器的viewWillDisappear:方法中调用*/
-
- (void)scrollControl; /** ScrollView滚动时需要调用的方法*/
源码分享:https://github.com/HelloYeah/HYNavBarHidden
觉得不错的,请献上你的star