ICTutorialOverlay : A utility for making "Overlay Tutorial"

5,017 views

Published on

ねむい

Published in: Software

ICTutorialOverlay : A utility for making "Overlay Tutorial"

  1. 1. ICTutorialOverlay @i110
  2. 2. ありますよね、チュートリアル • オーバーレイ型のやつ • Instruction Viewとも言う • UI分かりづらいので致し方なく作る • 誰もちゃんと見ていないという説も • しかしまぁ必要なこともままある
  3. 3. しょうがない作るか… • まぁなんか半透明のviewなりwindowなり上か ら被せておいときゃいいんでしょ • 「半日で出来ます(キリッ)」
  4. 4. 穴!? • 穴あいてますね。 • なんかけっこう作るのめんどいっぽい • しかも穴の下のボタン、タップできるらしい • タップしたらふわっと消えるらしい • でもタップできない穴もあるらしい • 穴のサイズにも微妙にこだわりあるらしい
  5. 5. 穴めんどい • 穴めんどい。穴まじめんどい • 穴地味にめんどい。 • 穴あけたくない。 • 穴あけないといけないけど穴あけたくない。 • 別にやればできるんだろうけど穴あけないで 済むならそうしたい。 • 穴あけてる時間があったら別のことしたい。 • 穴めんどい。
  6. 6. ICTutorialOverlayhttps://github.com/i 110/ICTutorialOverlay • 一年前くらいに作って会社でも個人でも地味に使ってた • 地味に便利だからここで晒しておきます • 昨日CocoaPods/Specsにpull req出したのでそのうち載るはず
  7. 7. // 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];
  8. 8. DEMO
  9. 9. 機能① • overlay.animated – ふわっと出入りする • overlay.hideWhenTapped – タップで消えるようにする • コールバック – willShowCallback / didShowCallback, – willHideCallback / didHideCallback – 循環参照には注意
  10. 10. 機能② • hole.form – ひとまず矩形、角丸、楕円を表すenumを用意 • hole.transparentEvent – 背後のviewにtouch eventを透過させるか否か • hole.boundView – 位置指定じゃなくてview指定すればその位置にいい 感じに穴明けてくれる – いずれUIBarItemにもなんとか対応したい
  11. 11. その他もろもろ • Overlay上には好きなviewを突っ込める – xibで作ってinstanciateしてそのままぶっ込むとか • Singletonにはあえてしなかった – キャッシュしておきたいケースがままありそう – その代わり画面に表示できるoverlayは必ずひとつ • 表示中に別のやつ表示させようとすると勝手に閉じる • 「2つ出ちゃった」回避
  12. 12. ICTutorialOverlayhttps://github.com/i 110/ICTutorialOverlay Now Available on CocoaPods • プルリク歓迎 • 具体的には誰かholeに直接UIBezierPath渡せるようにして下さい • あとフチにグラデーションかけるやつとかも • Thank you for your attention.

×