很多 App 在第一次打开使用时，都会有一个提示的页面来教导用户怎么使用你所编写的 App。这个页面我把它叫做“引导页面”，引导页面是为了让用户在第一次使用你的设计的软件时更容易上手，下面让我来教大家怎么编写一个简单而又实用的引导页面。
效果图
实现教程
1．建立一个 UIView 的子类 WQGuideView
在这个子类中定义两个公有方法
@interface WQGuideView : UIView
/*!
* 初始化引导页面
*
* @param frame 引导页面的 frame
* @param guides <@"引导描述" : 点击范围>
*
* @return 引导页面
*/
- (WQGuideView *)initWithFrame:(CGRect)frame
guides:(NSArray<NSDictionary<NSString *,NSValue *> *> *)guides;
/*!
* 开始引导
*/
- (void)showGuide;
@end
2．在 .m 文件中实现这两个方法就可以实现一个简单的引导页面了
#param mark 公有方法
- (WQGuideView *)initWithFrame:(CGRect)frame
guides:(NSArray<NSDictionary<NSString *,NSValue *> *> *)guides {
self = [super initWithFrame:frame];
if (self) {
self.guides = [guides copy];
self.backgroundColor = [UIColor blackColor];
self.alpha = 0.8;
// 点击动作
self.btnGuide = [UIButton buttonWithType:UIButtonTypeRoundedRect];
self.btnGuide.backgroundColor = [UIColor clearColor];
[self.btnGuide addTarget:self
action:@selector(nextGuide:)
forControlEvents:UIControlEventTouchUpInside];
[self addSubview:self.btnGuide];
// 引导描述
self.labMessage = [[UILabel alloc] init];
self.labMessage.textColor = [UIColor whiteColor];
self.labMessage.numberOfLines = 0;
self.messageFont = [UIFont fontWithName:@"Zapfino"
size:8];
[self addSubview:self.labMessage];
}
return self;
}
- (void)showGuide {
self.currentIndex = 0;
[self guideWithIndex:self.currentIndex];
}
#param mark 私有方法
- (void)guideWithIndex:(NSInteger)index {
if (self.guides.count == 0) {
[self nextGuide:nil];
return;
}
NSDictionary *dic = self.guides[index];
CGRect rect = [dic[[[dic allKeys] firstObject]] CGRectValue];
self.btnGuide.frame = rect;
// 添加描述
[self addMessage1:[[dic allKeys] firstObject]
nearRect:rect];
UIBezierPath *shapePath;
CGFloat lineWidth = 5.0;
shapePath = [UIBezierPath bezierPathWithOvalInRect:rect];
// 添加圆形空白处
CAShapeLayer *layer = [CAShapeLayer layer];
UIBezierPath *bezier = [UIBezierPath bezierPathWithRect:self.bounds];
[bezier appendPath:[shapePath bezierPathByReversingPath]];
layer.path = bezier.CGPath;
layer.lineWidth = lineWidth;
layer.lineDashPattern = @[@5,@5];
layer.strokeColor = [UIColor redColor].CGColor;
layer.fillColor = [UIColor redColor].CGColor;
self.layer.mask = layer;
}
/**
* 为引导添加描述文字
*/
- (void)addMessage1:(NSString *)message
nearRect:(CGRect)rect {
CGPoint center = CGPointMake(CGRectGetMidX(rect),
CGRectGetMidY(rect));
self.location = (sHeigth - center.y) > sHeigth/2 ? Down : Upper;
// 文字最大显示区域
CGSize size = CGSizeMake(sWidth - Margin*2,
self.location & Upper ? CGRectGetMinY(rect) - self.space : sHeigth - (self.space + CGRectGetMaxY(rect)));
// 文字长宽
CGRect msgRect = [message boundingRectWithSize:size
options:NSStringDrawingUsesLineFragmentOrigin
attributes:@{NSFontAttributeName : self.labMessage.font}
context:nil];
CGFloat labY = self.location & Upper ? CGRectGetMinY(rect) - self.space - CGRectGetHeight(msgRect) : CGRectGetMaxY(rect) + self.space;
CGFloat labX = 0.0;
if (center.x + msgRect.size.width/2 >= sWidth) {
labX = sWidth - msgRect.size.width - Margin ;
}else if (center.x - msgRect.size.width/2 <= 0){
labX = Margin;
}else {
labX = CGRectGetMidX(rect) - msgRect.size.width/2;
}
CGRect labRect = CGRectMake(labX,
labY,
msgRect.size.width,
msgRect.size.height);
self.labMessage.frame = labRect;
self.labMessage.text = message;
}
/**
* 下一个引导
*/
- (void)nextGuide:(UIButton *)sender {
self.currentIndex ++;
if (self.currentIndex < self.guides.count) {
[self guideWithIndex:self.currentIndex];
return;
}
[self removeFromSuperview];
if ([self.delegate respondsToSelector:@selector(hideGuide)]) {
[self.delegate hideGuide];
}
}
GitHub 下载地址: https://github.com/AppleDP/WQGuideView
CocoaChina 下载地址: http://code.cocoachina.com/view/133173
