代码地址如下:
http://www.demodashi.com/demo/11607.html

前言

现在很多APP在用户第一次用的时候,由于用户可能并不知道其中一些功能点的时候,这个时候就需要我们来对用户做一些引导工作。于是这个功能引导界面就应运而生了,先来看看大概效果吧,我这只是很简单的做了一个demo

走,上图

分析

  • 1 图中高亮的圆圈部分怎么做呢?
  • 2 怎么让我们能很轻易的把圆圈加到我们想要的地方上去呢?

解决办法

  • 1 可以让UI做几套图,直接加载上面,但是这样要加许多图片,而且要是以后有新需求的话,又要去换,比较麻烦,故不考虑。
  • 2 我们把我们需要高亮的部分通过坐标转换,转换到暗色背景上面,然后通过UIBezierPath画一个圆圈,最后通过CAShapeLayerpath属性将圆圈展示出来,由于这个是在最上层,而且下面部分不能点击,所以我将其加载了keyWindow上面

部分代码


- (void)showGuideViewWithTapView:(NSArray<UIView *> *)tapview tips:(NSArray<NSString *> *)tips
{
self.tapNumber = 0;
self.tapViews = tapview;
self.tips = tips; CGRect frame = [UIScreen mainScreen].bounds;
UIView * bgView = [[UIView alloc] initWithFrame:frame];
bgView.backgroundColor = UICOLOR_FROM_RGB_OxFF_ALPHA(0x323232, 0.8); self.bgView = bgView; self.tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(sureTapClick:)];
[self.bgView addGestureRecognizer:self.tapGesture]; [[UIApplication sharedApplication].keyWindow addSubview:self.bgView]; [self addBezierPathWithFrame:frame tapView:tapview[self.tapNumber] tip:tips[self.tapNumber]]; } - (void)addBezierPathWithFrame:(CGRect)frame tapView:(UIView *)view tip:(NSString *)tip
{
UIImage *guideImage = [UIImage imageNamed:@"guide3"]; CGRect tap_frame = [[view superview] convertRect:view.frame toView:self.bgView]; //通过 UIBezierPath 创建路径
UIBezierPath *path = [UIBezierPath bezierPathWithRect:frame];
//画圆圈
CGFloat radius = 42.5; [path appendPath:[UIBezierPath bezierPathWithArcCenter:CGPointMake(tap_frame.origin.x + tap_frame.size.width/2.0, tap_frame.origin.y + tap_frame.size.height/2.0) radius:radius startAngle:0 endAngle:2*M_PI clockwise:NO]]; //利用CAShapeLayer 的 path 属性
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = path.CGPath;
[self.bgView.layer setMask:shapeLayer]; CGFloat x = CGRectGetMidX(tap_frame);
CGFloat y = CGRectGetMaxY(tap_frame) + radius; for (UIView *view in self.bgView.subviews)
{
if ([view isKindOfClass:[UIImageView class]] || [view isKindOfClass:[UILabel class]])
{
[view removeFromSuperview];
}
} UIImageView * imageView = [[UIImageView alloc]initWithFrame:CGRectMake(x,y,guideImage.size.width,guideImage.size.height)];
imageView.image = guideImage;
[self.bgView addSubview:imageView]; UILabel *lable = [[UILabel alloc] init];
lable.text = tip;
lable.font = [UIFont fontWithName:@"Wawati SC" size:20];
lable.textColor = [UIColor whiteColor];
//使用代码布局 需要将这个属性设置为NO
lable.translatesAutoresizingMaskIntoConstraints = NO;
[self.bgView addSubview:lable]; NSLayoutConstraint * constraintx = nil;
//将屏幕分成三等分 来确定文字是靠左还是居中 还是靠右 (大概 可以自己调整)
if (x <= frame.size.width / 3.0) {
//创建x居左的约束
constraintx = [NSLayoutConstraint constraintWithItem:lable attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:imageView attribute:NSLayoutAttributeLeft multiplier:1 constant:0];
}
else if ((x > frame.size.width / 3.0) &&(x <= frame.size.width * 2 / 3.0))
{
//创建x居中的约束
constraintx = [NSLayoutConstraint constraintWithItem:lable attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:imageView attribute:NSLayoutAttributeCenterX multiplier:1 constant:0];
}
else
{
//创建x居右的约束
constraintx = [NSLayoutConstraint constraintWithItem:lable attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:imageView attribute:NSLayoutAttributeRight multiplier:1 constant:0];
} //创建y坐标的约束
NSLayoutConstraint * constrainty = [NSLayoutConstraint constraintWithItem:lable attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:imageView attribute:NSLayoutAttributeBottom multiplier:1 constant:10]; [self.bgView addConstraints:@[constraintx,constrainty]]; self.tapNumber ++;
}

在上面代码中,我把需要高亮的部分的view装在了数组里面,并且把提示文字也加入到数组中,然后传入,这样如果是在一个界面有几个地方需要进行展示,就不用重复调用,只需要传入对应的参数就可以。

注意:在使用的时候,如果程序打开的第一个界面就是引导界面 建议在 viewDidAppear 中调用,因为此时 [UIApplication sharedApplication].keyWindownilkeywindow实际上没有初始化完成

在代码中,由于用到了第三方字体,这里也简答注释下怎么加入第三方字体,大神勿喷哈,我只是记录一下,简单的记录一下

第三方字体导入

首先在plist文件中

然后在TARGETS->Build Phases-> Copy Bundle Resources中导入字体

到此字体就可以使用了,但是还有个问题,就是[UIFont fontWithName:@"Wawati SC" size:20];中的字体名字我们需要去获取,有下面两个方法

  • 1 用代码去遍历字体库,打印字体名字
    //打印字体
NSArray * fontArrays = [[NSArray alloc] initWithArray:[UIFont familyNames]];
for (NSString * font in fontArrays) {
NSLog(@"Font name = %@", font);
}

  • 2 双击字体,然后会安装到字体库中,在字体库的详细信息中,我们可以得到

两种方式在名字上有点不同,但是效果是同的,我估计是因为在mac上,名字有些不一样.

项目文件截图:

iOS 简单引导界面

代码地址如下:
http://www.demodashi.com/demo/11607.html

注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权

iOS 简单引导界面的更多相关文章

  1. IOS炫酷的引导界面

    代码地址如下:http://www.demodashi.com/demo/11246.html 一.准备工作 1.先用时ps工具制作好图片 2.然后计算好每张图片通过滑动视图的偏移量来改变图片的位置 ...

  2. iOS 实现简单的界面切换

    以下是在iOS中最简单的界面切换示例.使用了多个Controller,并演示Controller之间在切换界面时的代码处理. 实现的应用界面: 首先,创建一个window-based applicat ...

  3. App 引导界面

    App 引导界面 1.前言 最近在学习实现App的引导界面,本篇文章对设计流程及需要注意的地方做一个浅显的总结. 附上项目链接,供和我水平类似的初学者参考——http://files.cnblogs. ...

  4. 【Android UI设计与开发】第05期:引导界面(五)实现应用程序只启动一次引导界面

    [Android UI设计与开发]第05期:引导界面(五)实现应用程序只启动一次引导界面 jingqing 发表于 2013-7-11 14:42:02 浏览(229501) 这篇文章算是对整个引导界 ...

  5. Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现

    周末升级了墨迹天气,看着引导界面做的不错,模仿一下,可能与原作者的代码实现不一样,但是实现的效果还是差不多的.先分享一篇以前的文章,android动画的基础知识,<Android UI开发第十二 ...

  6. 【Android UI设计与开发】3.引导界面(三)实现应用程序只启动一次引导界面

    大部分的引导界面基本上都是千篇一律的,只要熟练掌握了一个,基本上也就没什么好说的了,要想实现应用程序只启动一次引导界面这样的效果,只要使用SharedPreferences类,就会让程序变的非常简单, ...

  7. SharedPreference 存储小量数据,一般首次启动显示引导界面就用这个。

    写://添加一个SharedPreference并传入数据SharedPreference sharedPreferences = getSharedPreferences("share_d ...

  8. 【新手--android日记】实现IOS风格电话界面

    [前言--新手日记] 开始学习android开发,通过做一个通讯录练习,打算实现各种自己想实现的功能. 新手作品,技术含量很浅.主要是记录自己的学习过程. 纯学习之用,求评论,求建议,求教导. [正题 ...

  9. GuideActivity.java引导界面:

    这是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api. 而viewpager就是其中之一利用它,我们可以做很多事情,从最简单的导航,到页面菜单等等.那 ...

随机推荐

  1. .net core 2.0 报错:error NU1102: Unable to find package ...

    原文地址:传送门 这种是nuget无法还原的问题.解决问题的方法: 在项目文件所在的目录下创建文件:NuGet.Config 里面内容: <?xml version="1.0" ...

  2. javascript+dom编程艺术 读后感

    利用上班空闲2,3天把这本书看完了,整体来说,这本书很不错.虽然我js有一定的基础了,jquery基础也会使用,但是我觉得对js应该有个循序渐进的理解,所以还是把js系统的学习一遍.我看技术类的书总数 ...

  3. 内部网络出口防火墙导致TCP类扫描异常

    测试过程中确认,由于内部网络出口防火墙存在连接数等策略限制,会导致TCP类扫描出现异常,表现为大量误报. Nessus.nmap.synscan均存在此现象.

  4. Cookie 的运用

    Cookie的原理是通过Set-Cookie响应头和Cookie请求头将会话中产生的数据保存在客户端.--- 底层(SUN公司已经给我们提供了一套API) Cookie是将需要保存的数据保存在了客户端 ...

  5. 【转.解析清晰】你真明白 Python 装饰器么?

      原文出处: 武沛齐    装饰器是程序开发中经常会用到的一个功能,用好了装饰器,开发效率如虎添翼,所以这也是Python面试中必问的问题,但对于好多小白来讲,这个功能 有点绕,自学时直接绕过去了, ...

  6. Windows7 SP1旗舰版精简版最终版本

    2016年6月9号,老毛子@lopatkin大神针对Win7 SP1旗舰版精简版进行了最终更新,此次主要是之前小问题的修复和调整.该版为Windows 7 SP1 简体中文旗舰版最新版,包含2016年 ...

  7. (转载)grep的使用

    R的意思是递归的对目录下的所有文件(包括子目录)进行 grep. 比如 grep -R main src就会搜索src目录下所有文件中是否包含 main 这个字符串. 因此grep -R " ...

  8. [BZOJ 1072] 排列perm

    Link: BZOJ 1072 传送门 Solution: 一道直接next_permutation纯暴力就能过的题? 难道2007年时大家都不知道next_permutation这个函数吗 还是用复 ...

  9. [Codeforces 30D] Kings Problem

    Brief Intro: 有n+1个点,其中n个点在X轴上,求从第k个点出发最短的汉密尔顿路径 Solution: 分类讨论+逐个枚举 设dist(i)是第i个点到n+1的距离 cal1(l,r)是n ...

  10. [UOJ198]时空旅行

    看懂题目就知道$y,z$是没用的,这题相当于是给一堆$(x_i,c_i)$和询问$x_q$,要求$(x_q-x_i)^2+c_i$的最大值 先把这个式子拆开:$-2x_ix_q+x_i^2+c_i+x ...