Download to read offline
![// Overlayの生成
ICTutorialOverlay *overlay = [[ICTutorialOverlay alloc] init];
overlay.hideWhenTapped = NO;
overlay.animated = YES;
// 穴あけるよ！！
[overlay addHoleWithView:self.roundRectButton
padding:8.0f
offset:CGSizeMake(1.0f, 1.0f)
form:ICTutorialOverlayHoleFormRoundedRectangle
transparentEvent:YES];
// ついでに気の利いたラベルでものっけておく
UILabel *label =
[[UILabel alloc] initWithFrame:CGRectMake(100, 170, 220, 150)]; label.backgroundColor
= [UIColor clearColor];
label.textColor = [UIColor whiteColor];
label.numberOfLines = 0;
label.text = @"You can place any views on the overlay”;
[overlay addSubview:label];
// 表示
[overlay show];](https://image.slidesharecdn.com/potatotips-140515125852-phpapp02/85/ICTutorialOverlay-A-utility-for-making-Overlay-Tutorial-9-320.jpg)
ICTutorialOverlay : A utility for making "Overlay Tutorial"
- 1.
- 3. ありますよね、チュートリアル • オーバーレイ型のやつ • InstructionViewとも言う • UI分かりづらいので致し方なく作る • 誰もちゃんと見ていないという説も • しかしまぁ必要なこともままある
- 4.
- 6. 穴！？ • 穴あいてますね。 • なんかけっこう作るのめんどいっぽい •しかも穴の下のボタン、タップできるらしい • タップしたらふわっと消えるらしい • でもタップできない穴もあるらしい • 穴のサイズにも微妙にこだわりあるらしい
- 7. 穴めんどい • 穴めんどい。穴まじめんどい • 穴地味にめんどい。 •穴あけたくない。 • 穴あけないといけないけど穴あけたくない。 • 別にやればできるんだろうけど穴あけないで 済むならそうしたい。 • 穴あけてる時間があったら別のことしたい。 • 穴めんどい。
- 8. ICTutorialOverlayhttps://github.com/i 110/ICTutorialOverlay • 一年前くらいに作って会社でも個人でも地味に使ってた • 地味に便利だからここで晒しておきます •昨日CocoaPods/Specsにpull req出したのでそのうち載るはず
- 9. // Overlayの生成 ICTutorialOverlay *overlay= [[ICTutorialOverlay alloc] init]; overlay.hideWhenTapped = NO; overlay.animated = YES; // 穴あけるよ！！ [overlay addHoleWithView:self.roundRectButton padding:8.0f offset:CGSizeMake(1.0f, 1.0f) form:ICTutorialOverlayHoleFormRoundedRectangle transparentEvent:YES]; // ついでに気の利いたラベルでものっけておく UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(100, 170, 220, 150)]; label.backgroundColor = [UIColor clearColor]; label.textColor = [UIColor whiteColor]; label.numberOfLines = 0; label.text = @"You can place any views on the overlay”; [overlay addSubview:label]; // 表示 [overlay show];
- 10.
- 11. 機能① • overlay.animated – ふわっと出入りする •overlay.hideWhenTapped – タップで消えるようにする • コールバック – willShowCallback / didShowCallback, – willHideCallback / didHideCallback – 循環参照には注意
- 12. 機能② • hole.form – ひとまず矩形、角丸、楕円を表すenumを用意 •hole.transparentEvent – 背後のviewにtouch eventを透過させるか否か • hole.boundView – 位置指定じゃなくてview指定すればその位置にいい 感じに穴明けてくれる – いずれUIBarItemにもなんとか対応したい
- 13. その他もろもろ • Overlay上には好きなviewを突っ込める – xibで作ってinstanciateしてそのままぶっ込むとか •Singletonにはあえてしなかった – キャッシュしておきたいケースがままありそう – その代わり画面に表示できるoverlayは必ずひとつ • 表示中に別のやつ表示させようとすると勝手に閉じる • 「2つ出ちゃった」回避
- 14. ICTutorialOverlayhttps://github.com/i 110/ICTutorialOverlay Now Available onCocoaPods • プルリク歓迎 • 具体的には誰かholeに直接UIBezierPath渡せるようにして下さい • あとフチにグラデーションかけるやつとかも • Thank you for your attention.