一、廢話不多說,直接上效果
-
實際使用效果
引導頁gif.gif
二、Demo址
- Demo效果
三、功能
1、便捷實現引導圖,均采用縷空模式
2、支持一次性出現一個或多個提示
3、支持順序出現引導提示功能且不限制最大連續出現的數量
4、自帶動畫效果
四、使用方式
在Demo中,需要關注的類有WKStepMaskGuideView以及WKStepMaskModel,它們均位于WKStepMaskGuideView.h文件中。
1、WKStepMaskModel
作用:構建WKStepMaskGuideView所必須的實例類
///首先構建一個模型,圓角度
@interface WKStepMaskModel : NSObject
///基于keywindow的frame
@property (nonatomic, assign) CGRect frame;
@property (nonatomic, strong) UIView * view;
@property (nonatomic, assign) CGFloat cornerRadius;
@property (nonatomic, assign) NSUInteger step;
///推薦使用此方法 計算好frame傳入
+ (instancetype)creatModelWithFrame:(CGRect)frame cornerRadius:(CGFloat)cornerRadius step:(NSUInteger)step;
///推薦使用withframe方法初始化 如若傳入view 只會取此view對應其俯視圖的frame,如果布局層級過深可能會有差錯。
+ (instancetype)creatModelWithView:(UIView *)view cornerRadius:(CGFloat)cornerRadius step:(NSUInteger)step;
@end
構建此model時,view和frame可以都設置值,首先以frame計算,在注釋中也寫了原因,因為傳入view獲取frame時可能不準確。
cornerradius顧名思義,構建view對應的縷空時的圓角度。
step標識此view于何時顯示--->構建maskguideview時根據傳入的model中step由小至大依次顯示。
2、WKStepMaskGuideView
作用:帶順序的縷空引導視圖的基類,你的引導圖必須繼承自它。
它有且僅有一個初始化方法,必須使用此方法初始化它。
@interface WKStepMaskGuideView : WKKMBaseGuideView
@property (nonatomic, strong, readonly) NSMutableArray<UIView *> * views;
@property (nonatomic, strong, readonly) NSMutableArray<NSValue *> * rects;
@property (nonatomic, strong, readonly) NSMutableArray<NSNumber *> * steps;
@property (nonatomic, weak ) id<WKStepMaskGuideViewDelegate> delegate;
///models中的model的step可以無序,內部會進行排序,生成的views根據step排序
- (instancetype)initWithModels:(NSArray <WKStepMaskModel *> *)models;
///子類覆寫
- (void)configInterFace;
///此方法 先調用與代理方法 willchange
- (void)viewWillEnterNextStep:(NSUInteger)nextStep;
- (void)viewDidEnterNextStep:(NSUInteger)nextStep;
@end
當你構建它的子類時,你可以覆寫的方法有以下七個:
- (void)configInterFace;
- (void)viewWillShow;
- (void)viewDidShow;
- (void)viewWillDismiss;
- (void)viewDidDismiss;
- (void)viewWillEnterNextStep:(NSUInteger)nextStep;
- (void)viewDidEnterNextStep:(NSUInteger)nextStep;
這里只簡要介紹一下configInterFace方法,因其他方法均顧名思義。
其中configInterFace,你的guideview中包含的提示信息所需要的view在此構建以及布局。布局時,有一個要點是為UIView添加的wk_steptag屬性,此處簡要概述其作用:
縷空的view具備wk_steptag屬性(你不能去設置此值,此值在內部也被設置好),如果需要和縷空的view一起出現的提示性view的wk_steptag屬性應和其有一樣的值。例如A為縷空的view,x,y,z為需要和其一起出現的提示性view,則x,y,z的wk_steptag值等于view的wk_steptag。注:再次強調不能去設置縷空view的wk_steptag值。
具體的使用例子,請參照Demo