在公司上个版本的开发中遇到了一个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. Mac 下VIM配置

    Mac下VIM配置 首先,我们去这里下载MacVim,也可用这个网址:(http://code.google.com/p/macvim/),进入后的界面如下: ____________________ ...

  2. 初识WCF3

    http://www.cnblogs.com/xiangchangdong/p/3924030.html 第三篇 在IIS中寄宿服务 通过前两篇的学习,我们了解了如何搭建一个最简单的WCF通信模型,包 ...

  3. 打通版微社区(1):PHP环境部署 for DZX3.2

    写在前面:本文参考了http://blog.sina.com.cn/s/blog_513be2630101linz.html非常感谢博主此文对我此次操作帮助很大.PHP的windows部署方案主要分为 ...

  4. 计算机作业(Excel工资表) 物联网 王罗红

  5. December 24th 2016 Week 52nd Saturday

    The first step is as good as half over. 第一步是最关键的一步. If one goes wrong at the first steps, what shoul ...

  6. 用ABAP代码读取S/4HANA生产订单工序明细

    在S/4HANA事务码CO03显示的Production Order里,我希望用ABAP代码显示出该订单的operation(工序)ID,描述和状态Status,如下图所示: 很简单的几行ABAP代码 ...

  7. Redis数据的底层存储原理

    redis底层是用什么结构来存储数据的呢? 我们从源码上去理解就会容易的多:   redis底层是使用C语言来编写的,我们可以看到它的数据结构声明.一个 dict 有两个dictht,一个dictht ...

  8. [T-ARA][괜찮아요][没关系]

    歌词来源: 没关系:http://music.163.com/#/song?id=22704448 没关系(Remix Ver.):http://music.163.com/#/song?id=258 ...

  9. 两天学会css基础(一)

    什么是css?css的作用是什么? CSS 指层叠样式表 (Cascading Style Sheets)主要作用就是给HTML结构添加样式,搭建页面结构,比如设置元素的宽高大小,颜色,位置等等. 学 ...

  10. IOS Charles(代理服务器软件,可以用来拦截网络请求)

    什么是Charles Charles是一款代理服务器软件,可以用来拦截网络请求 利用Charles能得知大部分公司app的数据来源和数据格式 下载地址:http://www.charlesproxy. ...