最近的一个项目中,要求在已有的界面上加入一个半透明的蒙板,提示用户界面上每个元素的功能。
而且蒙板不是只有一页,要求可以左右滑动切换页面。

简单的整理一下实现的思路:
1. 既然是要显示半透明的蒙板图片,UIImageView肯定是少不了了。
2. 要多页显示且能左右滑动,把UIImageView嵌入到UIScrollView中,并将UIScrollView的pagingEnabled属性设为YES,即可实现整页的滑动。
3. 按当下流行的设计方案,图片滑动时,用点来表示当前页和总页数,这个就要用到UIPageControl控件了。
4. 这些用于显示帮助的元素不应扰乱xib界面文件对页面的定义,所以使用动态加载的方式添加到页面上。

下面结合代码来讲解一下实现的方法:

在头文件中,添加UIScrollView和UIPageControl类型的成员变量,并实现UIScrollViewDelegate。

@interface ViewController : UIViewController<UIScrollViewDelegate>{    UIScrollView* helpScrView;    UIPageControl* pageCtrl;}

在.m文件中,首先实现viewDidLoad函数,该函数在界面即将显示前被调用。

- (void)viewDidLoad{    [super viewDidLoad];    CGRect bounds = self.view.frame;  //获取界面区域

//加载蒙板图片,限于篇幅,这里仅显示一张图片的加载方法    UIImageView* imageView1 = [[[UIImageView alloc] initWithFrame:CGRectMake(bounds.origin.x, bounds.origin.y, bounds.size.width, bounds.size.height)] autorelease];  //创建UIImageView,位置大小与主界面一样。    [imageView1 setImage:[UIImage imageNamed:@"help01.png"]];  //加载图片help01.png到imageView1中。    imageView1.alpha = 0.5f;  //将透明度设为50%。

//继续加载图片//。。。。

//创建UIScrollView    helpScrView = [[UIScrollView alloc] initWithFrame:CGRectMake(bounds.origin.x, bounds.origin.y, bounds.size.width, bounds.size.height)];  //创建UIScrollView,位置大小与主界面一样。    [helpScrView setContentSize:CGSizeMake(bounds.size.width * 3, bounds.size.height)];  //设置全部内容的尺寸,这里帮助图片是3张,所以宽度设为界面宽度*3,高度和界面一致。    helpScrView.pagingEnabled = YES;      //设为YES时,会按页滑动    helpScrView.bounces = NO;          //取消UIScrollView的弹性属性,这个可以按个人喜好来定    [helpScrView setDelegate:self];       //UIScrollView的delegate函数在本类中定义    helpScrView.showsHorizontalScrollIndicator = NO;  //因为我们使用UIPageControl表示页面进度,所以取消UIScrollView自己的进度条。    [helpScrView addSubview:imageView1];    //将UIImageView添加到UIScrollView中。    [self.view addSubView:helpScrView];    //将UIScrollView添加到主界面上。

//创建UIPageControl    pageCtrl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, bounds.size.height - 30, bounds.size.width, 30)];  //创建UIPageControl,位置在屏幕最下方。    pageCtrl.numberOfPages = 3;     //总的图片页数    pageCtrl.currentPage = 0;        //当前页    [pageCtrl addTarget:self action:@selector(pageTurn:) forControlEvents:UIControlEventValueChanged];  //用户点击UIPageControl的响应函数    [self.view addSubview:pageCtrl];  //将UIPageControl添加到主界面上。}

其次是UIScrollViewDelegate的scrollViewDidEndDecelerating函数,用户滑动页面停下后调用该函数。

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{//更新UIPageControl的当前页    CGPoint offset = scrollView.contentOffset;    CGRect bounds = scrollView.frame;    [pageCtrl setCurrentPage:offset.x / bounds.size.width];}

然后是点击UIPageControl时的响应函数pageTurn

- (void)pageTurn:(UIPageControl*)sender{//令UIScrollView做出相应的滑动显示    CGSize viewSize = helpScrView.frame.size;    CGRect rect = CGRectMake(sender.currentPage * viewSize.width, 0, viewSize.width, viewSize.height);    [helpScrView scrollRectToVisible:rect animated:YES];}

最后别忘了在viewDidUnload中释放UIScrollView和UIPageControl对象。

结束前还要提一句,这里没有加入帮助页面的关闭功能和再次显示功能,这部分属于更细节的实现了,实现起来难度也不大,这里不再赘述。

转载于:https://www.cnblogs.com/every2003/archive/2012/03/15/2397137.html

[IOS]使用UIScrollView和UIPageControl显示半透明帮助蒙板相关推荐

  1. ios html gif 显示,iOS中gif图的显示方法示例

    iOS中gif图的显示方法示例 发布时间:2020-09-19 06:15:42 来源:脚本之家 阅读:86 作者:蓝光95 一.前言 iOS开发中,大部分时候我们显示一张静态图就可以了,但是有的时候 ...

  2. 利用UIScrollView和UIPageControl实现图片切换

    一种简单的图片切换效果,如下: 通过滚动中间的图片或页面控制,都可以实现图片的切换. 在xib中添加UIScrollView和UIPageControl,并设置为对应类的IBOutlet, #impo ...

  3. iOS手机端日志打印显示工具

    iOS手机端日志打印显示工具. 在不连接xcode时,你仍然可以清晰的看到app内系统日志以及NSLog打印的日志,开发调试必不可少,大大提高调试效率,不用时时都链接xcode. 快速方便集成,两行代 ...

  4. 解决 .webp 格式图片在 ios 设备上无法正常显示的问题

    解决.webp 格式图片在 ios 设备上无法正常显示的问题 使用字符串的 replace() 方法,将 webp 的后缀名替换为 jpg 的后缀名 // 定义请求商品详情数据的方法 async ge ...

  5. iOS下border一半不显示问题

    如图区域, 1.在做点击评价的时候,刚开始遇到下边选择标签左边border显示不全(仅在iOS下电脑和安卓显示完全正常), 解决方法:没有写宽高,使用padding将内容撑开,解决 2.又一次遇到问题 ...

  6. 安卓dialog只显示半透明背景

    问题机型:魅族16sPro.Android9.Flyme8.1.5.4A 问题描述:Dialog.show()时只显示半透明背景,没有显示ContentView. 解决办法:Dialog.OnShow ...

  7. 显示某个区域2,蒙板

    C#中图片处理中定义显示区域[或者可以称为蒙板效果] public Image MaskPic(string filename,params Point[] p) { //获取需要被蒙板的图片 Ima ...

  8. WPF 子窗打开时在父窗显示蒙板

    WPF 子窗打开时在父窗显示蒙板 控件名:WindowHelpers 作   者:WPFDevelopersOrg - 驚鏵 原文链接[1]:https://github.com/WPFDevelop ...

  9. 使用AD18 敷铜时,不显示敷铜的板框,

    使用AD18 敷铜时,在polygor manager(如下图所示)中不显示敷铜的板框, 按CTRL + D 或者按下图操作 打开后显示界面如下 (左键点击小眼睛)开启边框显示,regions 再打开 ...

  10. iOS:分页控件UIPageControl的使用

    分页控件:UIPageControl   功能:通常搭配滚动视图一起使用,设置pagingEnabled=YES即可,UIScrollView会被分割成多个独立页面,用户的滚动体验则变成了页面翻转,一 ...

最新文章

  1. OC指示符assign、atomic、nonatomic、copy、retain、strong、week的解释
  2. linux 物理内存统计,说说free命令  + Linux可用内存统计方法
  3. windows和linux系统之间的txt文档兼容问题
  4. 8086汇编基础 push,pop指令执行时,sp怎么变
  5. 八大排序算法:插入(2:插入、希尔)、选择(2:选择、堆)、交换(2:冒泡、快速)、归并、基数
  6. 深度学习高能干货:手把手教你搭建MXNet框架
  7. php获取apk中文应用名,php提取apk包信息 - 搜知道网 - 搜知道社区,C, iOS,Android,golang 等的知识....
  8. 8类网线利弊_知识积累 | 千兆网线和百兆网线有何区别?
  9. 2015-2020年各类国际会议与期刊基于图像的三维对象重建论文综述(4)—— 3D Surface decoding
  10. 选项卡 || 图片切换
  11. 第十届全国社会媒体处理大会 (SMP 2021) 征文通知
  12. 技术要求→物理安全→防雷击
  13. 开启Hive的本地模式
  14. 7 位 CEO 创业自述:你熬过人生中最黑暗时刻的经历,是你成为强者的必然选择...
  15. Linux中文件颜色代表类型
  16. 梦之光芒黑客小游戏攻略
  17. 利用朴素贝叶斯算法解决“公园凉鞋问题”
  18. 卢松松博客模板php版,[Emlog模板]卢松松博客主题
  19. vue移动端监听切屏次数
  20. Excel:冻结窗口

热门文章

  1. 最土家乡话,莫过于栖霞
  2. XCODE中,修改苹果APP支持哪些设备
  3. 六年级下计算机课ppt课件ppt课件,小学信息技术浙摄影版六年级上册第1课 走进计算机说课ppt课件...
  4. python代码缩进中是否支持tab键和空格混用_python自测——编码规范
  5. mysql infobright 缺点_Infobright存储引擎的特点
  6. VC++ 添加用户环境变量
  7. python 高并发 tomcat_TOMCAT 高并发配置
  8. @param注解什么意思_你对Java注解真的理解吗?
  9. 跟我学Spring Cloud(Finchley版)-21-Spring Cloud Config-配置属性加解密
  10. 在Kubernetes上使用Sateful Set部署RabbitMQ集群