UIKit

今度は外部ライブラリChartsを利用して、棒グラフを作成してみる。 目標 値が最大のデータは色をオレンジにする アニメーションがある 棒グラフの上に値を表示する ページ切り替えができる棒グラフを作る タップしたらイベントを発生させる 1〜3、5は機能としてある。4だけ頑張って作る。思い通りのレイアウトにするためにはプロパティとかドキュメントとかを漁る必要があるが、どこにどのプロパティがあるのかは大体予想できる。 ChartDataSet.colorsで各棒の色を変更できる。 BarChartView.animate(yAxisDuration:)を利用。 BarChartView.drawValueAboveBarEnabled = trueとする。表示形式を変更するためにはChartDataSet.valueFormatterにフォーマット用のオブジェクトを指定する。 ScrollViewの中ににBarChartViewを複数配置。 ChartViewDelegateを利用。 その他デフォルトの設定だと表示する情報量が多すぎるので、いくつかのプロパティをいじる。 Chartsのインストール まず、CocoaPodsがインストールされていることが前提。 プロジェクトフォルダで以下のコマンドを実行。 1 $ pod init podfileが作成されるので、それを編集する。use_frameworks!の下に以下の記述を追加。 1 pod 'Charts' プロジェクトフォルダで以下のコマンドを実行。 1 $ pod install 以降、プロジェクトはプロジェクト名.xcodeprojではなくプロジェクト名.xcworkspaceから開く。 基本 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 import UIKit import Charts struct BarChartModel { let value: Int let name: String } class ViewController: UIViewController { let barItems = [ (7, "太郎"), (1, "次郎"), (2, "三郎"), (6, "四郎"), (3, "五郎"), (9, "六郎"), (2, "七郎"), (3, "八郎"), (1, "九郎"), (5, "十郎"), (1, "十一郎"), (1, "十二郎"), (6, "十三郎") ] override func viewDidLoad() { super.viewDidLoad() let barChartView = createBarChartView() self.view.addSubview(barChartView) barChartView.translatesAutoresizingMaskIntoConstraints = false barChartView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 80).isActive = true barChartView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -80).isActive = true barChartView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true barChartView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true } private func createBarChartView() -> BarChartView { let barChartView = BarChartView() barChartView.data = createBarChartData(of: barItems.map({BarChartModel(value: $0.0, name: $0.1)})) return barChartView } private func createBarChartData(of items: [BarChartModel]) -> BarChartData { let entries: [BarChartDataEntry] = items.enumerated().map { let (i, item) = $0 return BarChartDataEntry(x: Double(i), y: Double(item.value)) } let barChartDataSet = BarChartDataSet(entries: entries, label: "Label") let barChartData = BarChartData(dataSet: barChartDataSet) return barChartData } } これだけの記述で以下の棒グラフが描ける。 ...

棒グラフをアニメーションさせたり、タップしたら詳細画面に遷移するようにしたい。 (寄り道) StackViewのアニメーション 自分がいままでやったことがあるのは以下のような感じで、frameやlayer.positionをいじるパターン。 1 2 3 4 UIView.animate(withDuration: 1, animations: { view.position.x += 100 view.frame.size.height += 20 }); ただし、これをAutoLayoutと混ぜて使おうとすると動かなかったり、動いたとしても変な挙動を起こす。そもそも、AutoLayoutは制約を設定して位置やサイズを決定する仕組みで、frameは位置やサイズを手動で決める仕組み。これが競合を起こすのは当たり前な気もする。 StackViewはframeを設定しても何も反応しない。これは内部的にAutoLayoutっぽいことをやっているからなのかもしれない。例えば次のようにしてもStackViewの子要素は変更されない。 1 2 subView.frame.size.height = 100 stackView.addArrangedSubview(subView) その代わり、次のようにすると、ちゃんと子要素の高さは100になる。 1 2 subView.heightAnchor.constraint(equalToConstant: 100).isActive = true stackView.addArrangedSubview(subView) よって、StackViewでアニメーションするためには、AutoLayoutでのアニメーションの方法を知る必要がある。 AutoLayoutでのアニメーション 例えば、「ボタンを押すと長方形が0から伸びる」アニメーションを実現したい。 まずは次のように、高さ制約を0に設定しておく。ただし、それを何か変数に入れておく。 1 2 3 4 5 var constraint: NSLayoutConstraint view.addSubview(view0) constraint = view0.heightAnchor.constraint(equalToConstant: 0) constraint.isActive = true アニメーションをしたいタイミングで、次のように書けば良い。 1 2 3 4 UIView.animate(withDuration: 1, animations: { constraint.constant = 100 view.layoutIfNeeded() }) constraintにはconstantプロパティがあるので、そこで制約の定数を変更できる。layoutIfNeededは、アプリにレイアウト変更を直ちにさせるメソッド。 画面遷移後、下から長方形が伸びてくる処理は次のように書ける。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 class ViewController: UIViewController { var constraint: NSLayoutConstraint! override func viewDidLoad() { super.viewDidLoad() let myView = UIView() myView.backgroundColor = .systemIndigo view.addSubview(myView) myView.translatesAutoresizingMaskIntoConstraints = false myView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true myView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true myView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true constraint = myView.heightAnchor.constraint(equalToConstant: 0) constraint.isActive = true } override func viewDidAppear(_ animated: Bool) { super.viewDidAppear(animated) UIView.animate(withDuration: 3, animations: { self.constraint.constant = 200 self.view.layoutIfNeeded() }) } } StackViewのアニメーション 上の事実がわかってしまうと、StackViewのアニメーションもそこまで難しくない。子要素すべてのConstraintを変更すれば良いだけ。ただしそのために、各Constraintを保存した配列を用意しておく必要がある。 ...

前に頑張ってCoreGraphicsを使って棒グラフを描いたが、やはりViewを棒に見立てて扱った方が良さそうだ。考えられる利点は次の3つ。 タップ時に何かアクションを起こせる。例えば、棒グラフをタップしたら、そのデータに関する詳細ページに飛ぶ、などの処理が実装できる。 アニメーションについてのコードを描きやすい。例えば棒グラフの高さを0から伸ばしていくアニメーションが実現できる。 StackViewで棒を管理すれば、棒のサイズや棒同士の間隔を自動で設定してくれる これはやるしかない。 基本的にはこちらを参考にしながら進めていく。 UIStackViewをコード上で使う基本 とりあえず使い方を確認する。 Main.storyboard こんな感じにする。 ViewController.swift 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 class ViewController: UIViewController { let colors: [UIColor] = [.systemRed, .systemBlue, .systemPink, .systemGreen, .systemIndigo] let percentages: [CGFloat] = [0.1, 0.2, 0.5, 0.3, 0.9] @IBOutlet weak var graphStackView: UIStackView! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. graphStackView.distribution = .fillEqually graphStackView.alignment = .bottom graphStackView.spacing = 20 graphStackView.isLayoutMarginsRelativeArrangement = true graphStackView.layoutMargins.left = 20 graphStackView.layoutMargins.right = 20 for (color, percentage) in zip(colors, percentages) { addBar(bgColor: color, percentage: percentage) } } private func addBar(bgColor: UIColor, percentage: CGFloat ) { let view = UIView() let height = graphStackView.frame.height * percentage view.backgroundColor = bgColor view.heightAnchor.constraint(equalToConstant: height).isActive = true graphStackView.addArrangedSubview(view) } } こんなに短いコードで次のような棒グラフが表現できる。 ...

目標 前回の棒グラフを複数ページにする 今回は、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! let marginX: CGFloat = 80 let marginY: CGFloat = 40 override func viewDidLoad() { super.viewDidLoad() scrollView.frame = CGRect( x: marginX, y: marginY, width: view.bounds.width - 2*marginX, height: view.bounds.height - 2*marginY ) } } contentsViewのレイアウト 例えばページが5枚だとすると、ページ5枚で1つのcontentsViewを作る。それを念頭においてレイアウトを組む必要がある。 ダミー用GraphView作成 GraphViewに関する位置、サイズの設定は、イニシャライザに任せるように書く。引数として、(ページ番号, スクロールビューのサイズ, データ)を与える。とりあえず今の所はデータを色として、これをbackgroundColorに設定する。 ...

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.borderWidthとlayer.borderColorで枠線を設定できる。これはCoreGraphicsとは関係ない。 ...

UIPresentationControllerを利用すると、モーダル表示の方法をカスタマイズできる。これについて備忘録を残す。 そもそもモーダル表示とは そもそもモーダル表示って何？と思ったので調べる。モーダルと検索すると「モーダルウインドウ」の話がよく出てくる。これは「ある操作を終えるまで親ウインドウの操作ができない子ウインドウ」という意味で使われているようだ。これはモーダル表示と似たような意味なのだろうか。判然としないので一次資料を漁る。 AppleのHuman Interface GuidelineにModalityの意味が書いてあって、これを引用すると、 Modality is a design technique that presents content in a temporary mode that’s separate from the user's previous current context and requires an explicit action to exit. [意訳] Modalityとは、ユーザの以前の文脈から離れた一時的なモードでコンテンツを表示するデザインの手法。そのモードを終了するためには何か明示的なアクションを必要とする。 ほとんど同じ意味っぽい。 例えば次のようなモーダル表示(Page Sheet)の場合，呼び出し元が下にあってその上に青いビューが載っている。ここでは、「上から下に引っ張る」というアクションを起こすことで、このビューを閉じることができる。 用意するもの 表示元のViewController 表示先のViewController UIPresentationControllerのサブクラス - これが表示先のViewControllerの表示方法を規定する。 ここでは、表示先のViewControllerのStoryboard IDをdestとする． 準備 まずはボタンをクリックすると表示されるものだけ作る。 Main.storyboard 表示元にはボタンを配置する。表示先はラベルを配置し、適切なConstraintを設定しておく。 ViewController.swift ボタンのAction接続を作る。ボタンがタップされたら遷移するようにする。 1 2 3 4 5 6 7 8 9 10 11 class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. } @IBAction func buttonTapped(_ sender: Any) { let vc = (storyboard?.instantiateViewController(identifier: "dest"))! present(vc, animated: true, completion: nil) } } 遷移前の設定 buttonTappedに追記して次のようにする。 ...

目標 スワイプしたら削除されるテーブルを作る。 準備 TableViewに最低限の設定をしておく。 Main.storyboardを次のようにする。 ViewController.swiftの内容を以下のようにする。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 class ViewController: UIViewController { @IBOutlet weak var tableView: UITableView! var items = ["Item1", "Item2", "Item3", "Item4", "Item5"] override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. tableView.dataSource = self tableView.delegate = self } } extension ViewController: UITableViewDataSource { func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { items.count } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "testCell")! cell.textLabel?.text = items[indexPath.row] return cell } } スワイプしたらボタンが出る処理 次のメソッドを実装する。 ...

目標 ウォークスルーっぽいものを作る。 メイン画面でボタンを押すとウォークスルー画面に飛ぶ。 ウォークスルー画面では、左右にスワイプすると画面が移動する。 画面下に、何ページかを教えてくれる白丸(Page Control)を配置する。 登場物 Main.storyboardとViewController.swift Walkthrough.storyboardとPageViewController.swift 準備 上に書いたものをとりあえず全て作る。ただし、PageViewControllerのサブクラスはUIPageViewControllerであることに注意。 Main.storyboard ボタンを一つ作っておく。 Walkthrough.storyboard 配置を次のようにする Page View Controllerのidentifierはwalkとする。また、classをPageViewControllerにする。 “Page1"と書かれたViewControllerのidentifierはpage1とする。 “Page2"と書かれたViewControllerのidentifierはpage2とする。 “Page3"と書かれたViewControllerのidentifierはpage3とする。 以下で、Transition Styleを"Scroll"とする。もし"Page Curl"とした場合は、ページをめくるようなアニメーションになる。その代わりにPage Controlが表示されない。 PageViewController.swift 次のように書く。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 class PageViewController: UIPageViewController { var controllers: [UIViewController] = [] override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. view.backgroundColor = .black let stb = storyboard! let page1 = stb.instantiateViewController(withIdentifier: "page1") let page2 = stb.instantiateViewController(withIdentifier: "page2") let page3 = stb.instantiateViewController(withIdentifier: "page3") controllers = [page1, page2, page3] setViewControllers([controllers[0]], direction: .forward, animated: true, completion: nil) dataSource = self } /* // MARK: - Navigation // In a storyboard-based application, you will often want to do a little preparation before navigation override func prepare(for segue: UIStoryboardSegue, sender: Any?) { // Get the new view controller using segue.destination. // Pass the selected object to the new view controller. } */ } extension PageViewController: UIPageViewControllerDataSource { func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? { if let index = controllers.firstIndex(of: viewController), index-1 >= 0 { return controllers[index-1] } else { return nil } } func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? { if let index = controllers.firstIndex(of: viewController), index+1 < controllers.count { return controllers[index+1] } else { return nil } } func presentationCount(for pageViewController: UIPageViewController) -> Int { return controllers.count } func presentationIndex(for pageViewController: UIPageViewController) -> Int { return 0 } } 説明 UIPageViewControllerは次のように利用する。 ...

目標 降順、昇順の切り替えができるTableViewを作成する。 準備 Main.storyborad 部品を以下のように配置する。 Segmented Controlのラベルの設定は以下で行える。 TableViewCellのindentifierはtestCellとする。 ViewController.swift 後々の処理のため、TableViewに表示するデータをitems、その元データをitemsSourceと分けることにする。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 class ViewController: UIViewController { let itemsSource = ["items1", "items2", "items3", "items4", "items5", "items6", "items7", "items8"] var items: [String] = [] @IBOutlet weak var segmentedControl: UISegmentedControl! @IBOutlet weak var tableView: UITableView! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. tableView.dataSource = self items = itemsSource } } extension ViewController: UITableViewDataSource { func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return items.count } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "testCell")! cell.textLabel?.text = items[indexPath.row] return cell } } Segmented Controlのイベント設定 ViewController.swiftに追記する。 ...

目標 セミモーダルビューを作成する セミモーダルビュー上のボタンを押すと、それを閉じた後に別ビューに遷移する。 登場物 Main.storyboardとViewController Menu.storyboardとMenuViewController Dest1.storyboard Dest2.storyboard 前提 今後Viewが増えていく状況を想定して、Storyboardを分割することを考える。Storyboard同士はStoryboard Referenceで結びつける。 セミモーダルビューの作成 検索して良く出てくるのはUIPresentationControllerを利用する方法。ただ今回はなるべくStoryboardで完結させたい。 そこで、以下のページを参考して作ることを考える。 ハンバーガーメニューを作成するには？ - Swift Life ファイル作成 Menu.storyboard、MenuViewController、 Menu.storyboard、Dest1.storyboard、 Dest2.storyboardの5つをあらかじめ作成しておく。 Menu.storyboard classにはMenuViewControllerを指定する。部品配置は以下のようにする。 全体を包むViewを親View、その中に作ったViewを子Viewと呼ぶことにすると、 Constraintは適当に設定する。子Viewが画面下に配置されるようにする。 StackViewにはFill Equallyの設定を行っておく。 親Viewの背景色を、黒の半透明に設定する。設定手順は以下の通り。 BackgroundをBlackに設定 BackgroundをCustomに設定し直すと、カラーピッカーが現れる。そこで透明度を50%に設定する。 また、“Initial View Controller"にチェックをつける。 親Viewのtagを1に設定しておく。これはタッチイベントを捕捉する際に必要になる。 Dest1.storyboard、Dest2.storyboard Dest1.storyboardの部品配置は以下のようにする。 “Is initial View Controller"にチェックをつける。 Dest2.storyboardの部品配置は以下のようにする。 “Is initial View Controller"にチェックをつける。 Main.storyboard 部品配置は以下のようにする。 OpenButtonからStoryboard ReferenceへのSegueのActionは"Present Modally"を選択。Segueの設定は以下のようにする。 Storyboard Referenceにて、“Storyboard"をMenuに、“Referenced ID"を未記入にする。 “Referenced ID"が未記入の場合、Storyboard上のInitial View Controllerへの参照にしてくれる。もしInitial View ControllerでないViewControllerに遷移したいなら、ここに記入する。ただし、遷移先のView ControllerにてIdentifierを設定しておくことを忘れずに。 MenuViewController.swift Menu.storyboardの小ViewのOutletを作成する。名前はmenuViewとする。 その上で以下の文を追記する。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 class MenuViewController: UIViewController { ... override func viewWillAppear(_ animated: Bool) { super.viewWillAppear(animated) let menuPosY = menuView.layer.position.y menuView.layer.position.y += menuView.layer.frame.height UIView.animate( withDuration: 0.5, delay: 0, options: .curveEaseOut, animations: { self.menuView.layer.position.y = menuPosY }, completion: nil) } override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) { for touch in touches { if touch.view?.tag == 1 { UIView.animate( withDuration: 0.2, delay: 0, options: .curveEaseOut, animations: { self.menuView.layer.position.y += self.menuView.layer.frame.height }) { bool in self.dismiss(animated: bool, completion: nil) } } } } } dismissメソッドを使うと自身のビューを閉じることができる。 ...