新手引导分为两部分，一个是蒙版部分 PGGuideView ，另一个是气泡部分 PGBubbleForGuide 组成。整体采用协议的思想实现。如有问题，联系我修改。
demo地址：
https://github.com/penghero/PGGuideView
效果图：
用例：
1、引用头文件
#import "PGGuideView.h"
#import "PGGuideItem.h"
2、遵守协议
<PGGuideViewDelegate>
3、添加初始化
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
/// 初始化方式1
[PGGuideView showsInViewController:self];
// /// 初始化方式2
// self.guideView = [[PGGuideView alloc] initWithFrame:kKeyWindow.bounds]; //注：由于在ipad中 windows窗口的变化 此处需要修改为bounds 根据父视图改变
// self.guideView.delegate = self;
// [self.guideView showGuideAtIndex:0];
// /// 加到windows上
// [kKeyWindow addSubview:self.guideView];
// /// 加到控制器view上
//// [self.view addSubview:self.guideView];
}
4、实现协议
#pragma mark - PGGuideViewDelegate
- (NSInteger)numberOfGuidesInGuideView:(PGGuideView *)guideView {
return self.guideItems.count;
}
- (void)guideViewEnd:(PGGuideView *)guideView {
NSLog(@"结束---");
}
- (void)guideViewDidSelect:(PGGuideView *)guideView AtIndex:(NSUInteger)index {
// [Tools showAllTextDialog:[NSString stringWithFormat:@"点击 - %lu",(unsigned long)index]];
}
- (PGGuideItem *)guideView:(PGGuideView *)guideView itemForGuideAtIndex:(NSUInteger)index {
CGRect frame = CGRectZero;
CGFloat cornerRadius = 0.0;
PGGuideItem *item = self.guideItems[index];
if (index == 0) {
frame = self.puzzle2.frame;
cornerRadius = 10.0;
} else if (index == 1) {
frame = self.puzzle3.frame;
cornerRadius = 0;
} else if (index == 2) {
frame = self.puzzle1.frame;
cornerRadius = 10.0;
} else if (index == 3) {
frame = self.puzzle5.frame;
// cornerRadius = 10.0;
} else if (index == 4) {
frame = self.puzzle6.frame;
// cornerRadius = 10.0;
}
item.frame = frame;
item.cornerRadius = cornerRadius;
return item;
}
- (NSArray *) guideItems {
PGGuideItem *item0 = PGGuideItem.new;
item0.title = @"鹏哥哥引导1测试测试测试";
item0.isShowIcon = YES;
item0.isTop = YES;
item0.isShowRed = NO;
PGGuideItem *item1 = PGGuideItem.new;
item1.title = @"鹏哥哥引导2测试测试测试";
item1.isShowIcon = YES;
item1.isTop = YES;
item1.isShowRed = YES;
PGGuideItem *item2 = PGGuideItem.new;
item2.title = @"鹏哥哥引导2测试测试测试鹏哥哥引导2测试测试测试鹏哥哥引导2测试测试测试鹏哥哥引导2测试测试测试鹏哥哥引导2测试测试测试";
item2.isShowIcon = NO;
item2.isTop = NO;
item2.isShowRed = NO;
item2.isShowFlash = YES;
item2.clickType = @"1";
PGGuideItem *item3 = PGGuideItem.new;
item3.title = @"鹏哥哥引导2测试测试测试鹏哥哥引导2测试测试测试鹏哥哥引导2测试测试测试鹏哥哥引导2测试测试测试鹏哥哥引导2测试测试测试鹏哥哥引导2测试测试测试鹏哥哥引导2测试测试测试鹏哥哥引导2测试测试测试鹏哥哥引导2测试测试测试";
item3.isShowIcon = YES;
item3.isTop = NO;
item3.isShowRed = NO;
item3.isShowFlash = NO;
PGGuideItem *item4 = PGGuideItem.new;
item4.title = @"鹏哥哥引导2测试测试测试鹏哥哥引导2测试测试测试鹏哥哥引导2测试测试测试鹏哥哥引导2测试测试测试鹏哥哥引导2测试测试测试鹏哥哥引导2测试测试测试鹏哥哥引导2测试测试测试鹏哥哥引导2测试测试测试鹏哥哥引导2测试测试测试";
item4.isShowIcon = YES;
item4.isTop = NO;
item4.isShowRed = NO;
item4.isShowFlash = YES;
return @[item0, item1, item2, item3,item4];
}
开源属性
/// 是否显示气泡中老板娘头像icon
@property (nonatomic, assign) BOOL isShowIcon;
/// 气泡颜色
@property (nonatomic, strong) UIColor *bubbleColor;
/// 气泡文字颜色
@property (nonatomic, strong) UIColor *textColor;
/// 设置>0 才有边框 不设置 不显示边框
@property (nonatomic, assign) CGFloat borderWidth;
/// 镂空的frame 一处
@property (nonatomic, assign) CGRect frame;
/// 镂空的frame 二处
@property (nonatomic, assign) CGRect frameOther;
/// 气泡中的内容
@property (nonatomic, strong) NSString *title;
/// 气泡位置 是否在镂空部分上面显示 NO在上方 YES 在下方
@property (nonatomic, assign) BOOL isTop;
/// 镂空的圆角 一处
@property (nonatomic, assign) CGFloat cornerRadius;
/// 镂空的圆角 二处
@property (nonatomic, assign) CGFloat cornerRadiusOther;
/// 是否显示镂空部分红边 默认NO
@property (nonatomic, assign) BOOL isShowRed;
/// 是否显示镂空部分闪动动画
@property (nonatomic, assign) BOOL isShowFlash;
/// 点击区域 0全屏 1镂空区域
@property (nonatomic, strong) NSString *clickType;
/// 是否有两处镂空 默认NO
@property (nonatomic, assign) BOOL isShowOtherFrame;
/// 光圈颜色
@property (nonatomic, strong) UIColor *aperturesColor;
/// 光圈宽度
@property (nonatomic, assign) CGFloat aperturesWidth;
/// 光圈距离
@property (nonatomic, assign) CGFloat aperturesMargin;
/// 光圈圆角
@property (nonatomic, assign) CGFloat aperturesRadius;
协议说明：
/// 引导代理
@protocol PGGuideVCDelegate
/// 引导数据个数
/// @param guideView guideView description
- (NSInteger)numberOfGuidesInGuideView:(PGGuideView *)guideView;
/// 每个引导数据的显示的详细内容
/// @param guideView guideView description
/// @param index index description
- (PGGuideItem *)guideView:(PGGuideView *)guideView itemForGuideAtIndex:(NSUInteger)index;
/// 点击事件
/// @param guideView guideView description
/// @param index index description
- (void)guideViewDidSelect:(PGGuideView *)guideView AtIndex:(NSUInteger)index;
/// 引导结束
/// @param guideView guideViewdescription
- (void)guideViewEnd:(PGGuideView *)guideView;
网友评论