代码地址如下:
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. JS监听页面滚动到底部事件

    废话不说,直接上代码,放心我这个是最好的,直接放到js脚本里,直接生效: $(window).scroll(function(){ var scrollTop = $(this).scrollTop( ...

  2. 【cocos2d-js官方文档】十二、对象缓冲池

    cc.pool的使用场景 经常创建和销毁的元素,例如打飞机游戏里面的子弹等. 不适用的场景:不是很经常创建的物体,比如背景,建筑等. 如何使用cc.pool 让你的类支持cc.pool 首先,你需在需 ...

  3. mongodb复制集搭建

    注:mongodb当前版本是3.4.3 1.准备三个虚拟机做服务器 192.168.168.129:27017 192.168.168.130:27017 192.168.168.131:27017 ...

  4. JavaScript代码放在head和body的区别(QRCode生成)

    1.在head中时,所代表的functions只加载而不执行,执行是在某一事件触发后才开始. 2.在body中时,直接加载并执行 典型的区别: 如果有不在函数中的执行语句,比如变量初始化,如果在hea ...

  5. (寒假开黑gym)2018 ACM-ICPC, Syrian Collegiate Programming Contest

    layout: post title: (寒假开黑gym)2018 ACM-ICPC, Syrian Collegiate Programming Contest author: "luow ...

  6. 【分类讨论】bzoj3856 Monster

    #include<cstdio> using namespace std; int T=0; long long h,a,b,k; int main() { freopen("b ...

  7. 5.1 java类集(java学习笔记)Collection、List接口及ArrayList、LinkedList类。

    一.类集 类集就是一组动态的对象数组,说类集可能不好理解,类集又称容器,容器顾名思义就是放东西的地方. 类集就是为了让我们更加简洁,方便的存放.修改.使用数据的. 二.Collection接口 我们看 ...

  8. 125.乘积最大(划分性DP)

    1017 乘积最大 2000年NOIP全国联赛普及组NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解 题目描述 Descriptio ...

  9. Scala高手实战****第18课:Scala偏函数、异常、Lazy值编码实战及Spark源码鉴赏

    本篇文章主要讲述Scala函数式编程之偏函数,异常,及Lazy 第一部分:偏函数 偏函数:当函数有多个参数,而在使用该函数时不想提供所有参数(比如函数有3个参数),只提供0~2个参数,此时得到的函数便 ...

  10. 误删除Ubuntu 14桌面文件夹“~/桌面”,如何恢复?

    一不小心把当前用户的桌面文件夹“/home/wenjianbao/桌面”删了,导致系统把“/home/wenjianbao”当成桌面文件夹.结果,桌面上全是乱七八糟的文件/文件夹. 查看了下网络资料, ...