CoreGraphics

目標 前回の棒グラフを複数ページにする 今回は、1ページに最大5本の棒が並ぶ、とする。 ページは横スライドで切り替える プロジェクトは前回のものを引き継がず、新しく作る。 用いるデータ ViewController.swiftが次のようなデータを持っていることを想定する。 1 2 3 4 5 var dataSource = [ (7, "太郎"), (1, "次郎"), (2, "三郎"), (6, "四郎"), (3, "五郎"), (9, "六郎"), (2, "七郎"), (3, "八郎"), (1, "九郎"), (5, "十郎"), (1, "十一郎"), (1, "十二郎"), (6, "十三郎") ] このデータは、後で整形してグラフ描画用のデータに変換する。 UScrollViewの配置 Main.storyboardにUIScrollViewを配置する。サイズ設定はコードで行うので、ここでは単に配置するだけ。 その後、UIScrollViewのOutlet接続をViewController.swiftに対して行う。 UIScrollVieの設定 「スクロールの対象となるコンテンツを中に入れる」だけで、スクロール可能なViewが作れる。ただし、思い通りの表示にするためには、UIScrollViewやコンテンツのサイズを設定しておく必要がある。 複数ページを持つコンテンツを作りたいので、コンテンツ用Viewの中にページ用のViewが複数存在する状態になる。なのでページの位置やサイズもちゃんと設定する。 ScrollViewのレイアウト こんな感じにする。 なのでコードはこんな感じにする。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 class ViewController: UIViewController { @IBOutlet weak var scrollView: UIScrollView!...

iPhoneアプリで棒グラフを描く方法として考えられるのは次の3通り。 ライブラリを使う - Chartsというライブラリがある。おそらくこれが一般的な選択肢。 Viewを棒グラフに見立てる - UIStackViewをうまく使った例にこんなのがある。 CoreGraphicsを使って手で描画する - 厳密にはUIKit側でこれを扱いやすくしたものがあるみたいで、Drawingとしてまとめられている。 ここではCoreGraphicsの練習を兼ねて、3つ目の方法で棒グラフを書いてみる。 目標 棒グラフを表示する 棒グラフの先端に値を表示する 今回用いるデータは(ラベル, 整数値)とする 整数値を棒グラフの高さとし、棒グラフの頂点にその数字を描く ラベルは棒グラフの下に描く 整数値が最も大きなものの色をオレンジ色にする 画面の大きさに関わらない図を作る 要するに以下のようなものを作る。 細かいレイアウト 画面の大きさに応じて棒グラフのサイズを変更する必要があるため、レイアウトについてそれなりに決めておく。テキストについては適当なサイズに設定する。 ビューの幅を$W$、barWidthを$w$、データの個数を$n$とする。するとpadXの個数は$n+1$である。このとから、$w$は次のように計算できる。 $$ \begin{aligned} & wn + \frac{w}{2}(n+1) = W \\ \Leftrightarrow&\ w = \frac{2W}{3n + 1} \end{aligned} $$ この計算結果をbarWidthとして利用する。 準備 Main.storyboardを次のようにしておく。 GraphViewのClassをGraphViewにする。新たにGraphView.swiftを作っておく。 GraphView.swiftを作る 以下が雛形。 1 2 3 4 5 6 7 8 9 10 class GraphView: UIView { override func awakeFromNib() { } let data: [(String, CGFloat)] = [(7, "太郎"), (1, "次郎"), (2, "三郎"), (6, "四郎"), (3, "五郎")] override func draw(_ rect: CGRect) { } } Viewの枠線 layer....