ビギグラマーのノート

自作PCやプログラミングについてのブログです。

【Swift3】吹き出しを作る

 制作意図

 アプリケーションの初回起動などで吹き出しを使って機能を説明したい時があります。しかしデフォルトの吹き出し等が用意されていないので、今回balloonViewというカスタムビューを作成しました

f:id:BegiGrammer:20170602094059p:plain

コード

 BalloonView.swift with initializer

こっちがイニシャライザを使って綺麗に整えたやつ。動かせる機能はオミットされた。

BalloonView.swift Old Version

グリグリと動かせるけどあまり推奨しないし、意味がない。

解説

 やっていることはCoreGraphicsを使って吹き出しのイメージをBalloonViewに貼り付け。そしてその吹き出しの真ん中にUITextLabelを貼り付けているだけです。本当はもじもCoreGraphicsを使って吹き出しのイメージに書き込もうかと思いましたが、拡張性を考え今回このような形にしました。なのでラベル以外にもボタンなどを、吹き出しの中心であるcenterPointプロパティで位置決めして使うことができます。

 また四角形の形をCGRectで指定し、CGPointで頂点つまり吹き出しの三角のところを決めると自動でこれらの吹き出しを生成します。

f:id:BegiGrammer:20170603140031p:plain

 halfBaseLengthプロパティで吹き出しの三角形の底辺の大きさを変更することができます。上の図では赤と青の点の距離を示します。

 使用例のViewControllerでは吹き出し部分をグリグリとタッチで動かせるようになっていますが、静的な部分も毎回描写し直しているので効率はとても悪いです。実証用に付け足した機能なので実装する際は使用しないでください。

 使用するとUIImageViewとBalloonViewの二枚のSubViewがかぶさることになります。そうすると親のViewへの操作が一切受け付けなくなります。親への操作の透過についてこの2枚のsubViewのisUserInteractionEnabledfalseにしてください。