根据滑动显隐状态栏的iOS实现

之前很多兄弟问如何实现类似于淘宝客户端搜索列表那种动态显隐的效果,这几天刚好有时间,就实现了几个例子搞一下,其实原理很简单,也参考了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];
时间: 2024-10-13 12:28:43

根据滑动显隐状态栏的iOS实现的相关文章

关于界面的按钮的显隐 还有jsp页面数据的传递 把页面的标签变成只读

//界面按钮的显示隐藏 界面input的锁定    function change(){       document.getElementById('first1').style.display="inline";       document.getElementById('first2').style.display="inline";       document.getElementById('first3').style.display="in

WPF MVVM模式中,通过命令实现窗体拖动、跳转以及显隐控制

在WPF中使用MVVM模式,可以让我们的程序实现界面与功能的分离,方便开发,易于维护.但是,很多初学者会在使用MVVM的过程中遇到一个显而易见且无法回避的问题,那就是不同的窗体之间如何跳转?很多人在介绍MVVM的使用时,都没有明显提到该如何解决这一问题,不知是因为觉得太简单了还是其他原因. 博主根据自己的开发经验,写了一个简单的示例程序,介绍MVVM模式中,如何通过命令来控制窗体的跳转.拖动与显隐控制. 先看效果: 主窗体中只有一个按钮,点击该按钮后,可以打开新的窗. 新窗体可以为自定义样式窗体

元素显隐切换过渡效果的实现

近来看到 饿了么 App和 h5站上,在商家详情页点餐之后,底部放置了一个点击之后能够弹出模态框查看点餐详情的元素,其中有个背景遮罩层的渐进显隐的效果. 凭着我少许的经验,第一时间的想法是觉得这个遮罩层应该是使用 display:none;来控制隐藏和显示的,但是这个属性会破坏 transition动画,也就是说如果遮罩层是使用了这个属性来控制显示与隐藏,那么渐进显隐的效果似乎很难达到,效果应该是瞬间显示与隐藏才对. 使用 Chrome 模拟移动端,查看了一下 饿了么的实现方式,这才想到 饿了么

控制同一窗体的显隐(Toggle和Button)

公共变量的脚本 using UnityEngine; using System.Collections; using UnityEngine.UI; public class CommonValues : MonoBehaviour { public GameObject AnswerShowWin;//答案显示窗口 public Button CloseBtn; public GameObject SubmitTog;//提交答案 void Start () { } void Update (

JS/jquery实现鼠标控制页面元素显隐

最近因为公司网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码.像这种鼠标事件控制页面元素显隐的情况,码农们会经常遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一起归纳一下. mouseout和mouseleave 这里需要特别注意mouseout与mouseleave的区别.我们通过下面代码示例来看一下: <p style="color:#333333;font-family:-apple-system, " font-size:16px;&qu

盒子的显隐

# 一.浮动布局的总结# 1.同意结构下,如果采用浮动布局,所有的同级别兄弟标签采用浮动布局# 2.浮动布局的盒子宽度在没有设定时会自适应内容宽度 # 二.盒子的显隐# display:none;# 该隐藏方式在页面中不占位,显隐都不会影响其他标签布局,不需要用动画处理时## opactiy:0;# 通过控制盒子的同名度来隐藏盒子,该隐藏方式在页面中占位,一般显隐操作的盒子都是采用定位布局;# 显隐都不会影响其他标签布局,需要用动画处理时 # 三.定位布局# 什么是定位布局:可以通过上下左右四个

vue 实现多个tab切换显隐

实现效果如上图:实现tab切换显隐 1 <template> 2 <div id="app"> 3 <ul> 4 <li v-for="(tab,index) in tabs" @click="toggle(index,tab.view)" :class="{active:active==index}"> 5 {{tab.type}} 6 </li> 7 </u

ios 下防止整个网页滑动(阻尼回弹 . 瞒天过海,骗IOS,把阻尼回弹限制在滚动区div内

下面是一个手机APP页面,分成上中下三部分,最上面和最下面是固定的,中间可以滚动.这是常见的APP布局方式. <style> .box{ overflow: auto; -webkit-overflow-scrolling: touch; /*使得div内的超出滑动具有惯性,阻尼回弹等特性,否则滑动很生涩*/ } </style> </head> <body class="box" > <div id="top"

js(javascript)小谈变量声明(显隐声明,声明提前)

var a=5: function fun(){     a=0;              alert(a);         //0     alert(this.a);    //5     var a;      alert (a);        //0      } fun(); 以上代码  将会输出  0 ,5,0.首先在js中我们的变量声明赋值分为两个部分 .1.变量的声明 var a:2.变量的赋值 a=2;但是一般我们会把变量的声明和赋值写在 一起 也就是  var a=2: