Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

ICTutorialOverlay : A utility for making "Overlay Tutorial"

ねむい

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

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.

×