iOS-UI效果之【监听滚动导航条渐隐】

超简单好用的监听滚动,导航条渐隐的UI效果实现(目前最流行的UI效果之一) ,源码分享
打开你手里的App仔细观察,你会发现很多都有实现这个功能。

效果图如下

1.gif

实现思路

1.首先来看一下导航条的层次结构图,先搞定背景图片View的Alpha值,即黄色箭头指向的view

iOS-UI效果之【监听滚动导航条渐隐】_第1张图片
Snip20160409_5.png

怎么拿到黄色标注出来的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分类的常用属性方法

属性

  1. keyScrollView:当控制器中有多个ScrollView时,要指明是监听哪个ScrollView的滚动

    /** 需要监听的view */
    @property (nonatomic,weak) UIScrollView * keyScrollView;

  2. 导航条中item是否跟着渐隐,分别设置左边,中间,右边三个的BOOL值.默认为NO

    /** 设置导航条上的标签是否需要跟随滚动变化透明度,默认不会跟随滚动变化透明度 */
    @property (nonatomic,assign) BOOL  isLeftAlpha;
    @property (nonatomic,assign) BOOL  isTitleAlpha;
    @property (nonatomic,assign) BOOL  isRightAlpha;
    
  3. scrolOffsetY:偏移大于等于scrolOffsetY时,导航条的alpha为1

    @property (nonatomic,assign) CGFloat scrolOffsetY;

方法 (push或者pop控制器时,消除或回复导航条状态)

  1. - (void)setInViewWillAppear;/** 恢复导航条的背景设置,在控制器的viewWillAppear:方法中调用*/

  2. - (void)setInViewWillDisappear; /** 清除导航条的背景设置,在控制器的viewWillDisappear:方法中调用*/

  3. - (void)scrollControl; /** ScrollView滚动时需要调用的方法*/

源码分享:https://github.com/HelloYeah/HYNavBarHidden

觉得不错的,请献上你的star

你可能感兴趣的:(iOS-UI效果之【监听滚动导航条渐隐】)