ictutorialoverlay : a utility for making "overlay tutorial"
DESCRIPTION
ねむいTRANSCRIPT
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.