iOS 半透明新手引导 手把手教你做
来源:互联网 发布:linux下查找文件 编辑:程序博客网 时间:2024/06/04 08:38
一、效果展示
这种类型的新手引导比较常见,用于告诉用户某个按钮的作用,或者提醒用户可以进行某种交互操作。引导样式是在界面上加了一个半透明的引导图,高亮部分就是要突出的区域
二、怎么做?
方案有很多种,不同的方案有不同的优缺点,这里列举两种常见的方案
1. 方案一:生成整张引导图
(1). 导出引导图
让设计师导出各个尺寸的引导图,引导图只包含指引部分,不包括背景,导出的引导图样式如下:
需要导出iPhone4,iPhone5,iPhone6,iPhone6 plus 共4个尺寸,如果适配iPad,还需要导出iPad的
(2). 编码
因为整张图导出了,所以代码部分就简单了,不需要考虑布局问题,直接生成一个imageView放上去,然后给它添加个点击事件即可
代码如下:
- (void)addGuideView { NSString *imageName = nil; if (DEVICE_IS_IPHONE5) { imageName = @"guide-568h"; } else { imageName = @"guide"; } UIImage *image = [UIImage imageNamed:imageName]; UIImageView *imageView = [[UIImageView alloc] initWithImage:image]; imageView.frame = self.view.bounds; imageView.userInteractionEnabled = YES; UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(dismissGuideView)]; [imageView addGestureRecognizer:tap]; [self.view addSubview:imageView];}
这里需要特别注意:
@3x 的图片需要iOS8以上的系统才能够自动识别出来,如果要向前兼容,则图片名那里需要自行判断设备类型,然后指定对应的图片名称
(3). 优缺点
这种方案的优点是
a. 快速
只要设计师做好效果图以后,把蒙层导出成各种规格即可,90%的工作量都在设计师身上,程序员只需要简单地添加视图和事件即可
b. 维护成本低
当界面发生变化,或者引导图需要调整时,只需要设计师重新生成图片,然后替换就可以了
但这种方案的缺点也很多:
a. 图片占据空间大
每种设备一张图片,图片还是全屏规格的,可能还要适配横屏,明显会增加app安装包的大小
b. 图片无法复用
一张引导图只能用于一个地方,其他地方不可能会用得上
2. 方案二:图片拼接
图片拼接的思路是这样的,通过若干张图片拼成一个遮罩层,然后再在上面放其他元素,如下图所示
(1). 准备图片
这里需要准备3张图片
a. 空心的椭圆遮罩层
中间是透明,周围是白色的,白色部分可以在遮罩过程中修改成任意的颜色
b. 小箭头
c. 确定按钮
(2). 编码
这里只介绍部分代码的编写过程
a. 接口
接口的定义:
- (void)showInView:(UIView )view maskBtn:(UIButton )btn;
view:引导图的父视图
btn:被遮罩的按钮
接口的实现:
- (void)showInView:(UIView )view maskBtn:(UIButton )btn {
self.parentView = view;
self.maskBtn = btn;
self.alpha = 0;[view addSubview:self];[UIView animateWithDuration:0.2 animations:^{ self.alpha = 1;} completion:nil];
}
b. 修改遮罩层
加载空心的椭圆图片后,先对白色区域进行处理,把它改成黑色半透明
UIImage *image = [UIImage imageNamed:@”whiteMask”];
image = [image maskImage:[[UIColor blackColor] colorWithAlphaComponent:0.71]];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
(UIImage )maskImage:(UIColor )maskColor
{
CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);UIGraphicsBeginImageContext(rect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context, 0, rect.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextClipToMask(context, rect, self.CGImage);
CGContextSetFillColorWithColor(context, maskColor.CGColor);
CGContextFillRect(context, rect);UIImage *smallImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return smallImage;
}
这里会将图片中白色的部分改成任意的颜色,我们要将空心的椭圆图片变成这样
c. 生成上下左右4个黑色半透明视图
分别放在空心椭圆图片的上、下、左、右四个方位
- (UIView *)topMaskView {
if (!_topMaskView) {
UIView *view = [[UIView alloc] init];
view.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.71];
_topMaskView = view;
}
return _topMaskView;
}
(UIView *)bottomMaskView {
if (!_bottomMaskView) {
UIView *view = [[UIView alloc] init];
view.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.71];
_bottomMaskView = view;
}
return _bottomMaskView;
}(UIView *)leftMaskView {
if (!_leftMaskView) {
UIView *view = [[UIView alloc] init];
view.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.71];
_leftMaskView = view;
}
return _leftMaskView;
}(UIView *)rightMaskView {
if (!_rightMaskView) {
UIView *view = [[UIView alloc] init];
view.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.71];
_rightMaskView = view;
}
return _rightMaskView;
}
d. 视图布局
这里有几个需要注意的地方:
c-1. 被拼接的视图的 x,y,width,height 的值需要取整,因为浮点数可能会导致衔接部位出现白边,尤其是在iPhone6 plus上,原因是手机的分辨率问题,所以这里最好使用整数
c-2. 在 layoutSubviews 函数中进行布局,这里布局的好处是横竖屏适配都能够平滑过渡,而且不需要手动更新
布局代码如下:
- (void)layoutSubviews {
[super layoutSubviews];
self.frame = _parentView.bounds;
_maskBg.frame = self.bounds;
_btnMaskView.center = [_maskBtn.superview convertPoint:_maskBtn.center toView:_maskBtn.superview];
CGRect btnMaskRect = _btnMaskView.frame;btnMaskRect.size = CGSizeMake(floor(btnMaskRect.size.width), floor(btnMaskRect.size.height));btnMaskRect.origin = CGPointMake(floor(btnMaskRect.origin.x), floor(btnMaskRect.origin.y));_btnMaskView.frame = btnMaskRect;_topMaskView.left = 0;_topMaskView.top = 0;_topMaskView.height = _btnMaskView.top;_topMaskView.width = self.width;_bottomMaskView.left = 0;_bottomMaskView.top = _btnMaskView.bottom;_bottomMaskView.width = self.width;_bottomMaskView.height = self.height - _bottomMaskView.top;_leftMaskView.left = 0;_leftMaskView.top = _btnMaskView.top;_leftMaskView.width = _btnMaskView.left;_leftMaskView.height = _btnMaskView.height;_rightMaskView.left = _btnMaskView.right;_rightMaskView.top = _btnMaskView.top;_rightMaskView.width = self.width - _rightMaskView.left;_rightMaskView.height = _btnMaskView.height;_arrwoView.right = _btnMaskView.left + 24;_arrwoView.bottom = _btnMaskView.top - 8;_tipsLabel.right = _arrwoView.left - 6;_tipsLabel.bottom = _arrwoView.top + 10;_okBtn.centerX = self.width/2;_okBtn.bottom = _btnMaskView.top - 80;
}
(3). 优缺点
优点:
a. 节约空间
一般就只需要几个小图,然后就可以组装成一张引导图了
b. 图片可重用
按钮、椭圆图、小箭头这一类的图片可能被其他引导图继续使用
缺点:
a. 编码时间较长
每一个界面元素都需要通过编码来实现,每一次改动也需要调整代码
三、总结
第一种方案比较适合小项目,主要是速度快,适合快速迭代
第二种方案适合长期更新的项目,节约app空间
Demo地址:
https://github.com/sunljz/demo/tree/master/GuideDemo
- iOS 半透明新手引导 手把手教你做
- iOS 半透明新手引导 手把手教你做
- 手把手教你做iOS推送
- 手把手教你做iOS推送
- 手把手教你做iOS推送
- 手把手教你做iOS推送
- 手把手教你做iOS推送
- 手把手教你做iOS推送
- 手把手教你做iOS推送
- 手把手教你做iOS推送
- 手把手教你做iOS推送
- 手把手教你做iOS推送
- 手把手教你做iOS推送
- 手把手教你做iOS推送
- 手把手教你做iOS的soap应用(webservice)
- 手把手教你做iOS的soap应用(webservice)
- 手把手教你做iOS的soap应用(webservice)
- 手把手教你做iOS的soap应用(webservice)
- [BZOJ3669][Noi2014]魔法森林
- UVa 10791 - Minimum Sum LCM(唯一分解)
- 31 - 连续字数组的最大和
- 沉浸式状态栏
- java中的异常
- iOS 半透明新手引导 手把手教你做
- 利用ffmpeg将RTSP传输的h264原始码流保存到文件中
- 二叉树的三种排序Java实现
- windows系统tomcat降权遇到的小问题及解决方法
- 杭电ACM1284——钱币兑换问题
- NYOJ 364 田忌赛马(贪心)
- 如何自定义kindeditor编辑器的工具栏items即去除不必要的工具栏或者保留部分工具栏
- Web应用及XHTML基础篇
- mina简单编解码器示例