iOS开发新功能特性操作引导界面的实现最优方案
在APP开发中,为了引导用户熟悉APP的新功能特性,需要我们做新功能特性操作的引导界面以供用户快速在新版本中找到新功能的入口。
新功能操作的引导界面往往只会在版本更新有新功能或者是调整原来的功能入口布局时出现引导用户的操作,目前以两种实现方案为例:
第一种:
直接在界面上贴图
这种方案的关键是在切图上,建议写一个单独的工具类 例:OperationGuideView继承自UIView 然后用UIImageView将造作指引的图片贴在相应的位置上,这种方法的缺点是难以适配,掏孔高亮的部分容易因为适配造成位置的错位,不推荐使用。
第二种
使用贝塞尔曲线(UIBezierPath)的bezierPathByReversingPath的反向绘制,对需要高亮的部分进行挖孔,再结合贴图的方式来实现。
如下的效果:

- (void)createTabbarHighlightAtIndex:(NSInteger)idx{
UIBezierPath *bpath = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, SCREEN_WIDT, SCREEN_HEIGHT)]; //bezierPathByReversingPath表示反向绘制 (利用反向绘制掏出需要高亮的部分)
UIBezierPath *reversingPath = [[UIBezierPath bezierPathWithArcCenter:CGPointMake((((idx + 1.f) * 2.f - 1.f) / ((idx + 1.f) * 2.f) * (TabbarItem_W * (idx + 1.f))), SCREEN_HEIGHT - SafeAreBottom - TabbarItem_Highlight_W/2.f) radius:TabbarItem_Highlight_W/2.f startAngle:degreesToRadians(0) endAngle:degreesToRadians(360) clockwise:YES] bezierPathByReversingPath];
[bpath appendPath: reversingPath];
[bpath stroke];
//创建一个CAShapeLayer 图层,黑色半透明背景
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.fillColor = CoveringBGColor_alphaBlack.CGColor;
shapeLayer.path = bpath.CGPath;
[self.contentBgView.layer addSublayer:shapeLayer];
}
效果二

- (void)createMemberManageHighlightAtIndex:(NSInteger)idx{
UIBezierPath *bpath = [UIBezierPath bezierPathWithRect:CGRectMake(0.f, 0.f, SCREEN_WIDT, SCREEN_HEIGHT)];
CGFloat item_interval = (SCREEN_WIDT - 14.f * 2.f - 2.f * 25.f - 3.f * MemberManageItem_Highlight_W) * 0.5f;
CGFloat itemMinx = 14.f + 25.f;
//bezierPathByReversingPath表示反向绘制
UIBezierPath *reversingPath = [[UIBezierPath bezierPathWithRoundedRect:CGRectMake((itemMinx + idx * (MemberManageItem_Highlight_W + item_interval)), (MemberCenterHeader_H - 95.f + 5.f), MemberManageItem_Highlight_W, MemberManageItem_Highlight_H) cornerRadius:5.f] bezierPathByReversingPath];
[bpath appendPath: reversingPath];
[bpath stroke]; //创建一个CAShapeLayer 图层,黑色半透明背景
CAShapeLayer *shapeLayer = [CAShapeLayer layer]; shapeLayer.fillColor = CoveringBGColor_alphaBlack.CGColor; shapeLayer.path = bpath.CGPath; [self.contentBgView.layer addSublayer:shapeLayer];
}
如有错误欢迎指出。
网友评论