ICTutorialOverlay

@i110

ありますよね、チュートリアル• オーバーレイ型のやつ• Instruction Viewとも言う• UI分かりづらいので致し方なく作る• 誰もちゃんと見ていないという説も• しかしまぁ必要なこともままある

しょうがない作るか…• まぁなんか半透明の viewなり windowなり上から被せておいときゃいいんでしょ

• 「半日で出来ます（キリッ）」

穴！？• 穴あいてますね。• なんかけっこう作るのめんどいっぽい• しかも穴の下のボタン、タップできるらしい

• タップしたらふわっと消えるらしい• でもタップできない穴もあるらしい• 穴のサイズにも微妙にこだわりあるらしい

穴めんどい• 穴めんどい。穴まじめんどい• 穴地味にめんどい。• 穴あけたくない。• 穴あけないといけないけど穴あけたくない。• 別にやればできるんだろうけど穴あけないで済むならそうしたい。

• 穴あけてる時間があったら別のことしたい。• 穴めんどい。

ICTutorialOverlayhttps://github.com/i110/ICTutorialOverlay

• 一年前くらいに作って会社でも個人でも地味に使ってた• 地味に便利だからここで晒しておきます• 昨日 CocoaPods/Specsに pull req出したのでそのうち載るはず

// 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];

DEMO

機能①• overlay.animated– ふわっと出入りする

• overlay.hideWhenTapped– タップで消えるようにする

• コールバック– willShowCallback / didShowCallback,– willHideCallback / didHideCallback– 循環参照には注意

機能②• hole.form– ひとまず矩形、角丸、楕円を表す enumを用意

• hole.transparentEvent– 背後の viewに touch eventを透過させるか否か

• hole.boundView– 位置指定じゃなくて view指定すればその位置にいい感じに穴明けてくれる

– いずれ UIBarItemにもなんとか対応したい

その他もろもろ• Overlay上には好きな viewを突っ込める– xibで作って instanciateしてそのままぶっ込むとか

• Singletonにはあえてしなかった– キャッシュしておきたいケースがままありそう– その代わり画面に表示できる overlayは必ずひとつ

• 表示中に別のやつ表示させようとすると勝手に閉じる• 「 2つ出ちゃった」回避

ICTutorialOverlayhttps://github.com/i110/ICTutorialOverlay

Now Available on CocoaPods

• プルリク歓迎• 具体的には誰か holeに直接 UIBezierPath渡せるようにして下さい• あとフチにグラデーションかけるやつとかも• Thank you for your attention.