iOS引導(dǎo)頁的鏤空效果

初衷

最近項目新功能更改較大,產(chǎn)品童鞋要求加入新功能引導(dǎo),于是一口氣花了兩天的時間做了一個引導(dǎo)頁,當(dāng)然加上后面的修修補(bǔ)補(bǔ)的時間,就不只兩天了,不過這事情其實是一勞永逸的事情,值得做。同時為了能夠更好的復(fù)用,我把它做成了pod庫,項目地址在這里:EAFeatureGuideView。

EAFeatureGuideView能做什么

EAFeatureGuideView是UIView的一個擴(kuò)展,用來做新功能引導(dǎo)提示,達(dá)到這樣的效果:

  • 局部區(qū)域高亮(可以設(shè)置圓角)
  • 有箭頭指向高亮區(qū)域
  • 可以設(shè)置一段介紹文字(可以是圖片、也可以是文字)
  • 可以對應(yīng)一個按鈕,可以通過配置事件、標(biāo)題。
    最后的效果如下:


    效果圖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];

可以優(yōu)化的地方

  • 介紹文案沒有支持多顏色。
  • 當(dāng)高亮區(qū)域是圓形的時候,箭頭的指向沒有對中圓心。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,067評論 4 61
  • 那個冬天格外的冷,夜里10點(diǎn)多行人就稀疏地猶如樹尖的葉,開車來加油的人更是少之又少,到了凌晨幾乎就一個人也沒有了。...
    許木木閱讀 425評論 0 3
  • 每日關(guān)鍵詞:堅持做好、關(guān)于不放棄 、 22組伙伴一起成長 關(guān)于堅持 每天工作靈活多變,既需要提前落實也需要不斷堅持...
    國豪_Xin閱讀 411評論 0 0
  • O 又看了一遍慧慧老師對2017年新入局大家生課前培訓(xùn)的感想,慧慧老師成功地用一條感情線(職業(yè)發(fā)展期待)抓住了新大...
    葳葳一笑浥清清閱讀 262評論 6 3

友情鏈接更多精彩內(nèi)容