在公司上个版本的开发中遇到了一个UI布局的小问题:

某个页面需要增加一个分享按钮,但是该页面是二级页面,导航栏右边也已经放置了2个button。

起初和老大谈论这个问题的时候想到的方法是导航栏右边加三个button得了~但是一回想,这貌似太丑了!虽然两人都不是处女座,不过这个方法算是pass掉了

当天下班前想起浏览网页的时候经常会在滑动的时候右下方出现一个“回到顶部”的按钮,似乎在iOS客户端也可以实现这一类似的功能。

原理:获取到keywindow,然后在keywindow上面添加一个bgView,在bgView上面加上一个UIButton(之所以这样包装一层是为了美观一点,想将shareBtn弄成圆型)

    - (void)createShareBtn
{
    UIButton *shareBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    shareBtn.frame = CGRectMake(0, 0, 40, 40);
    [shareBtn setImage:[UIImage imageNamed:@"wright"] forState:UIControlStateNormal];
    [shareBtn addTarget:self action:@selector(shareBtnAction) forControlEvents:UIControlEventTouchUpInside];
   
    bgView = [[UIView alloc] initWithFrame:CGRectMake(kScreen_width-50, kScreen_height/2-64, 40, 40)];
    bgView.backgroundColor = [UIColor whiteColor];
    bgView.alpha = .9;
    bgView.layer.cornerRadius = 20;
    bgView.layer.masksToBounds = YES;
    [bgView addSubview:shareBtn];
    
    // 获取keyWindow
    UIWindow *keywindow = [UIApplication sharedApplication].keyWindow;
    [keywindow addSubview:bgView];
}
- (void)shareBtnAction
{
//创建分享视图
    [self shareView];
}

有一点需要注意:即如果我们这样设置了,那么需要进行下一步操作(在视图pop的时候,移除shareBtn),否则shareBtn会一直显示在keywindow上面

    - (void)viewWillDisappear:(BOOL)animated
{
    [super viewWillDisappear:animated];
// 这里bgView是全局的
    [bgView removeFromSuperview];
}

当然还有一点

细心的同学会发现我在bgView设置了alpha值为0.9,这样依然会遮挡住下面的视图,影响用户浏览

为此我做了如下设置:

1、值得说一下的是,整个二级页面的层级结构是

UIViewController-->webView

2、让我们来看看webView里有一些什么我们可以用到的:

@interface UIWebView : UIView <NSCoding, UIScrollViewDelegate> 
@property (nullable, nonatomic, assign) id <UIWebViewDelegate> delegate;
@property (nonatomic, readonly, strong) UIScrollView *scrollView NS_AVAILABLE_IOS(5_0);

对于UIScrollViewDelegate大家应该不陌生了

    #pragma mark - UIScrollViewDelegate
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    bgView.alpha = .45;
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    bgView.alpha = .9;
}

当然一定不要忘了签约:webView.scrollView.delegate = self;

对于- (void)createShareBtn方法的调用随大家需求所定

1、如果需要长期显示,可以在- (void)viewDidLoad方法里调用(此处还有一个小技巧:createShareBtn在createWebView之后

在UIWindow上加类似于“回到顶部”的按钮的更多相关文章

  1. 简单地做一下“回到顶部”按钮,用jQuery实现其隐藏和显示

    1.首先,我们要准备HTML代码: <div id="return-top"> <a href="#top">返回顶部</a> ...

  2. 一款回到顶部的 jQuery 插件,支持 Div 中的滚动条回到顶部

    前言 今天在网上搜索“回到顶部”的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery 插件,经过自己的修 ...

  3. jq回到顶部效果分析

    在浏览网页时,超出屏幕高度就会出现提上点击回到顶部的图标,点击即可回到页面顶部. 用到的知识点如下: 1.首先控制图标的显示和隐藏,先要获取浏览器的高度. var wHeight = $(window ...

  4. jQuery滚动条回到顶部或指定位置

    jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...

  5. 兼容IE,chrome 等所有浏览器 回到顶部代码

    今天在博客园看到一片帖子回到顶部代码,索性就看了下,但是发现在非IE浏览器下可以运行,在IE浏览器下却运行不了. 故将其代码搬弄过来做了些许修改后,完美支持了IE下的运行. 主要实现功能代码文件: & ...

  6. vue中回到顶部

    1. 回到顶部,使用 scrollIntoView 方法: Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域 该方法可以接受一个布尔值作为参数.如果为true,表示元 ...

  7. jQuery写toTop(回到顶部)效果

    在通常的网站开发中,页面有时候会很长,尤其是一些电商网站,为了提高用户的体验效果,我们通常会增加一个回到顶部的按钮,这个按钮我们同城会使用fixed定位,将其定位在当前可视区域某一固定位置.这个效果用 ...

  8. JavaScript实现网页回到顶部效果

    在浏览网页时,当我们浏览到网页底部,想要立刻回到网页顶部时,这时候一般网页会提供一个回到顶部的按钮来提升用户体验,以下代码实现了该功能 HTML代码: <p id="back-top& ...

  9. 从微信小程序到鸿蒙js开发【13】——list加载更多&回到顶部

    鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口] 目录: 1.list加载更多 2.list回到顶部 3.<从微信小程序到鸿蒙js开发>系列文章合集 1.list加 ...

随机推荐

  1. 用Jmeter进行接口测试及乱码问题

    web接口测试工具: 手工测试的话可以用postman ,自动化测试多是用到 Jmeter(开源).soupUI(开源&商业版). 下面将对前一篇Postman做接口测试中的接口用Jmeter ...

  2. Django objects.all() ,objects.get() ,objects.filter()之间的区别

    ret=UserInfo.objects.all() all返回的是QuerySet对象,程序并没有真的在数据库中执行SQL语句查询数据,但支持迭代,使用for循环可以获取数据. ret=UserIn ...

  3. PHPStorm/webstorm/PyCharm tips

    phpstorm对于使用PHP开发web的人员来说,是一个非常不错的编辑开发IDE,以前用过sublime,但是相比于storm,sublime在浏览legacy代码,类代码编辑方面明显要逊色不少.同 ...

  4. 学习笔记:Nginx反射代理使用缓存和删除其缓存文件的方法

    使用nginx做cache服务器 需求就是缓存android的软件包,后缀名是apk.话不多说,直接上配置,供参考: a-->nginx.conf user www www; worker_pr ...

  5. Windows Socket和Linux Socket编程的区别 ZZ

    socket相关程序从Windows移植到Linux下需要注意的: 1)头文件 Windows下winsock.h/winsock2.h Linux下sys/socket.h 错误处理:errno.h ...

  6. Web前端——jQuery----细节

    jQuery终极思想:创建jQuery对象(当发现相同的选择器在你的代码里出现多次时,请用变量把它储存起来.一切面向对象) 认识jQuery 1.jQuery库可以做什么? HTML元素选取 HTML ...

  7. CentOS7中安装VMwareTools

    本例中为在Linux(以CentOS 7为例)安装VMware Tools. 1.首先启动CentOS 7,在VMware中点击上方“VM”,点击“Install VMware Tools...”(如 ...

  8. Android笔记之 Web Service 基础

    一.Web Service是什么? 就是网络服务.依据W3C的定义,WebServices(Web服务)是一个用于支持网络间不同机器互操作的软件系统,它是一种自包括.自描写叙述和模块化的应用程序,它能 ...

  9. 程序人生:02我来告诉你,一个草根程序员如何进入BAT

    本文摘自左潇龙博客,原文出处:http://www.cnblogs.com/zuoxiaolong/p/life54.html 引言 首先声明,不要再问LZ谁是林萧,林萧就是某著名程序员小说的主角名字 ...

  10. BZOJ1012:[JSOI2008]最大数maxnumber(线段树)

    Description 现在请求你维护一个数列,要求提供以下两种操作:1. 查询操作.语法:Q L 功能:查询当前数列中末尾L 个数中的最大的数,并输出这个数的值.限制:L不超过当前数列的长度.2. ...