iOS引导页的镂空效果

初衷

最近项目新功能更改较大,产品童鞋要求加入新功能引导,于是一口气花了两天的时间做了一个引导页,当然加上后面的修修补补的时间,就不只两天了,不过这事情其实是一劳永逸的事情,值得做。同时为了能够更好的复用,我把它做成了pod库,项目地址在这里:EAFeatureGuideView

EAFeatureGuideView能做什么

EAFeatureGuideView是UIView的一个扩展,用来做新功能引导提示,达到这样的效果:

  • 局部区域高亮(可以设置圆角)
  • 有箭头指向高亮区域
  • 可以设置一段介绍文字(可以是图片、也可以是文字)
  • 可以对应一个按钮,可以通过配置事件、标题。
    最后的效果如下:


    效果图1

    效果图2

如何使用

如果安装了Cocoapods,可以在Podfile中加入如下代码:
pod 'EAFeatureGuideView',接着pod install一下。
接着在需要展示提示的页面引入头文件:
#import "UIView+EAFeatureGuideView.h"
最后添加如下代码:

EAFeatureItem *item = [[EAFeatureItem alloc] initWithFocusView:self.exampleCell focusCornerRadius:0 focusInsets:UIEdgeInsetsZero];
item.introduce = @"txt_feature_post_activity_4.1.png";
item.actionTitle = @"太好了";
item.action = ^(id sender){
        NSLog(@"touched ..");  
    };

EAFeatureItem *recents = [[EAFeatureItem alloc] initWithFocusRect:CGRectMake(centerX - 25, centerY - 25, 50, 50) focusCornerRadius:25 focusInsets:UIEdgeInsetsZero];    
recents.introduce = @"recents";

[self.navigationController.view showWithFeatureItems:@[item, recents] saveKeyName:@"keyName" inVersion:nil];

可以优化的地方

  • 介绍文案没有支持多颜色。
  • 当高亮区域是圆形的时候,箭头的指向没有对中圆心。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,259评论 4 61
  • 那个冬天格外的冷,夜里10点多行人就稀疏地犹如树尖的叶,开车来加油的人更是少之又少,到了凌晨几乎就一个人也没有了。...
    许木木阅读 367评论 0 3
  • 每日关键词:坚持做好、关于不放弃 、 22组伙伴一起成长 关于坚持 每天工作灵活多变,既需要提前落实也需要不断坚持...
    国豪_Xin阅读 367评论 0 0
  • O 又看了一遍慧慧老师对2017年新入局大家生课前培训的感想,慧慧老师成功地用一条感情线(职业发展期待)抓住了新大...
    葳葳一笑浥清清阅读 243评论 6 3