iOS 简单引导界面

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

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

走，上图

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

解决办法
- 1 可以让UI做几套图，直接加载上面，但是这样要加许多图片，而且要是以后有新需求的话，又要去换，比较麻烦，故不考虑。
- 2 我们把我们需要高亮的部分通过坐标转换，转换到暗色背景上面，然后通过UIBezierPath画一个圆圈，最后通过CAShapeLayer的path属性将圆圈展示出来，由于这个是在最上层，而且下面部分不能点击，所以我将其加载了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];//使用代码布局 需要将这个属性设置为NOlable.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].keyWindow 为nil，keywindow实际上没有初始化完成

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

第三方字体导入

首先在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 简单引导界面相关推荐

iOS简单的界面制作（第一周）
[iOS]简单的界面制作一. 整体构思二.分栏控制器三.首页四."我的"页面一. 整体构思需要写一个简单界面,第一个界面为"首页",第二个界面为&q ...
iOS编写最简单的界面切换应用
以下是在iOS中最简单的界面切换示例.使用了多个Controller,并演示Controller之间在切换界面时的代码处理. 实现的应用界面: 首先,创建一个window-based applicat ...
IOS炫酷的引导界面
代码地址如下: http://www.demodashi.com/demo/11246.html 一.准备工作 1.先用时ps工具制作好图片 2.然后计算好每张图片通过滑动视图的偏移量来改变图片的位置 ...
【iOS】简单的界面制作
文章目录整体构思三个视图控制器+分栏控制器主页购买我的整体构思通过近两个周的控件学习,了解到了关于iOS的一些基本控件用法.想通过这些基本控件写一个简单的界面,类似于ZARA和得物的混合 ...
Uni-App 简单引导页示例
Uni-App 简单引导页示例第一步:建3个页面文件.在pages目录下,新建index/init.vue.index/guide.vue.index/home.vue pages.json: {{ ...
Android 引导界面制作
2019独角兽企业重金招聘Python工程师标准>>> 项目做完了,做了第一次启动,滑动的引导页了. 然后需求又要改成流行的图层图片引导了.如图: 大家一定也经常见吧,实现当然很简单 ...
5分钟搞定开机引导界面
作者: 夏至,欢迎转载,也请保留这段申明,谢谢. www.jianshu.com/p/dfc188f13- 今天讲一个比较简单的东西,那就是每一个app在第一次启动的时候,都会出现的引导界面:刚开始的 ...
【Android UI设计与开发】第05期：引导界面（五）实现应用程序只启动一次引导界面
转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/8987342 这篇文章算是对整个引导界面开发专题的一个终结了吧,个人觉得大部 ...
Android UI设计与开发】第03期：引导界面（三）仿微信引导界面以及动画效果
转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/8985457 基于前两篇比较简单的实例做铺垫之后,这一篇我们来实 ...

iOS 简单引导界面

项目文件截图：

iOS 简单引导界面相关推荐

最新文章

热门文章