很多 App 在第一次打開使用時(shí)，都會(huì)有一個(gè)提示的頁面來教導(dǎo)用戶怎么使用你所編寫的 App亦歉。這個(gè)頁面我把它叫做“引導(dǎo)頁面”嘿棘，引導(dǎo)頁面是為了讓用戶在第一次使用你的設(shè)計(jì)的軟件時(shí)更容易上手须误，下面讓我來教大家怎么編寫一個(gè)簡單而又實(shí)用的引導(dǎo)頁面挨稿。
效果圖
實(shí)現(xiàn)教程
1．建立一個(gè) UIView 的子類 WQGuideView
在這個(gè)子類中定義兩個(gè)公有方法
@interface WQGuideView : UIView
/*!
* 初始化引導(dǎo)頁面
*
* @param frame 引導(dǎo)頁面的 frame
* @param guides <@"引導(dǎo)描述" : 點(diǎn)擊范圍>
*
* @return 引導(dǎo)頁面
*/
- (WQGuideView *)initWithFrame:(CGRect)frame
guides:(NSArray<NSDictionary<NSString *,NSValue *> *> *)guides;
/*!
* 開始引導(dǎo)
*/
- (void)showGuide;
@end
2．在 .m 文件中實(shí)現(xiàn)這兩個(gè)方法就可以實(shí)現(xiàn)一個(gè)簡單的引導(dǎo)頁面了
#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;
// 點(diǎn)擊動(dòng)作
self.btnGuide = [UIButton buttonWithType:UIButtonTypeRoundedRect];
self.btnGuide.backgroundColor = [UIColor clearColor];
[self.btnGuide addTarget:self
action:@selector(nextGuide:)
forControlEvents:UIControlEventTouchUpInside];
[self addSubview:self.btnGuide];
// 引導(dǎo)描述
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;
}
/**
* 為引導(dǎo)添加描述文字
*/
- (void)addMessage1:(NSString *)message
nearRect:(CGRect)rect {
CGPoint center = CGPointMake(CGRectGetMidX(rect),
CGRectGetMidY(rect));
self.location = (sHeigth - center.y) > sHeigth/2 ? Down : Upper;
// 文字最大顯示區(qū)域
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;
}
/**
* 下一個(gè)引導(dǎo)
*/
- (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
