あなたのコードの中でうまく動かない原因は2つあります。
- タイマーで1秒ごとに
setTheClock()
を呼び出している
sHand
, mHand
, hHand
をインスタンス変数にしてしまっている
まずは1点目ですが、あなたがsetTheClock()
のようなスタイルで描画用の命令を並べた場合、それが正しく画面に反映されるのは適切に描画用のコンテキストを設定してある場合のみです。ご自身のコードをXcodeで実行したら、何やらエラーメッセージが1秒ごとにデバッグコンソールに表示されたりはしないでしょうか。
May 22 01:36:46 AnalogClock[69711] <Error>:CGContextSetStrokeColorWithColor: invalid context 0x0. If you want to see the backtrace, please set CG_CONTEXT_SHOW_BACKTRACE environmental variable.
(以下同様のメッセージが同じ1秒間にずらりと表示される。)
iOSがdraw(_:)
メソッドを呼ぶ場合には、上記の「適切に描画用のコンテキストを設定」をやってくれるので、最初の1回、つまりdraw(_:)
の中から呼ばれた時にはsetTheClock()
は正しく動作するでしょうが、それ以降はずっとタイマー処理の中から直接setTheClock()
が呼ばれますので、それらの中で実行された描画用の命令に関しては「(描画用の)コンテキストがおかしい」と言う上記のようなエラーになってしまいます。
もちろん自前でdraw(_:)
を呼ぶのはいろいろなドキュメントに書いてあるように禁止です。
ここは発想を変えて、 1秒ごとに描画用の命令を自前で呼び出すのではなく、1秒ごとにiOSがdraw(_:)
を呼び出すように仕向ける ようにしないといけません。
変更点を最小にしようと思うと、こんなコードができるのですが、
//`Timer`で起動されるメソッドは`Timer`型の引数を1個取らないといけない
@objc func updateSelf(_: Timer) {
//このviewの再描画が必要であることをiOSに教えてやる
//-> 次にメインスレッドが空いた時に`draw(_:)`がiOSから呼ばれる
self.setNeedsDisplay()
}
override func draw(_ rect: CGRect) {
setTheClock()
_ = Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(updateSelf), userInfo: nil, repeats: true)
}
これだと、iOSがdraw(_:)
を呼び出すたびに新しいタイマーが作成されるので、アプリ内でどんどんアクティブなタイマーが増え続け、そのうち処理が破綻してしまいます。一般的にアプリの側から各viewのdraw(_:)
がいつ呼び出されるかを特定するのは困難ですから、 draw(_:)
の中では画面描画以外の処理は可能な限り何もしない と言うのが鉄則です。
この点を踏まえると、やはりこの手のコードはviewではなく、view controllerに記述すべきでしょう。
ViewController.swift:
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
//当然storyboard上で正しくIBOutletの接続を行っておくこと
@IBOutlet weak var clockView: Line!
var clockUpdateTimer: Timer? = nil
@objc private func updateSelf(_: Timer) {
self.clockView.setNeedsDisplay()
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
clockUpdateTimer = Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(updateSelf), userInfo: nil, repeats: true)
}
override func viewDidDisappear(_ animated: Bool) {
//画面から消えたら必ずタイマーを無効化する
clockUpdateTimer?.invalidate()
clockUpdateTimer = nil
super.viewDidDisappear(animated)
}
}
Line.swift: (抜粋)
//`updateClock(_:)`はview側には不要
override func draw(_ rect: CGRect) {
setTheClock()
//描画以外のことは何もしない
}
ここまでの修正をしたら、2点目についての部分を読む前に一度動作確認をしておいてもらった方が良いかもしれません。
さて、2点目ですが、なぜUIBezierPath
をインスタンス変数にしてしまってはいけないのかと言うと、 UIBezierPath
は画面への描画命令を貯めておくための箱 のようなものだからです。実際に動かしてもらえば(秒針に関しては)一目瞭然なのですが、一度setTheClock()
が呼び出されるとsHand
が保持するUIBezierPath
の中身は
sHand.move(to: CGPoint(x: 100, y: 100)) //*
sHand.addLine(to: CGPoint(x: 100 + 100*sin(sRad), y: 100 - 100*cos(sRad))) //*
UIColor.yellow.setStroke()
sHand.lineWidth = 0.5 //*
sHand.stroke()
で設定された内容(*)が保持されているわけですが、次にもう一度setTheClock()
が呼び出された場合にそれらの内容が消えてしまうわけではなく、そこにさらに新しい命令が付け足されていきます。こうして何度もsetTheClock()
が呼ばれる間にsHand
は秒針を何本も描くための描画命令を溜め込むことになってしまうわけです。
これを解消するためには、普通にローカル変数にしてしまうだけです。
Line.swift:
import UIKit
class Line: UIView {
func setTheClock() {
let cal = Calendar(identifier: .gregorian)
let now = Date()
let ss = Double(cal.component(.second, from: now))
let mm = Double(cal.component(.minute, from: now))
let hh = (Double(cal.component(.hour, from: now)) + mm/60).truncatingRemainder(dividingBy: 12)
let sRad = .pi*ss/30
let mRad = .pi*mm/30
let hRad = .pi*hh/6
let sHand = UIBezierPath() //<-
sHand.move(to: CGPoint(x: 100, y: 100))
sHand.addLine(to: CGPoint(x: 100 + 100*sin(sRad), y: 100 - 100*cos(sRad)))
UIColor.yellow.setStroke()
sHand.lineWidth = 0.5
sHand.stroke()
let mHand = UIBezierPath() //<-
mHand.move(to: CGPoint(x: 100, y: 100))
mHand.addLine(to: CGPoint(x: 100 + 80*sin(mRad), y: 100 - 80*cos(mRad)))
UIColor.blue.setStroke()
mHand.lineWidth = 1
mHand.stroke()
let hHand = UIBezierPath() //<-
hHand.move(to: CGPoint(x: 100, y: 100))
hHand.addLine(to: CGPoint(x: 100 + 60*sin(hRad), y: 100 - 60*cos(hRad)))
UIColor.red.setStroke()
hHand.lineWidth = 2
hHand.stroke()
}
override func draw(_ rect: CGRect) {
setTheClock()
}
}
一般的には、ローカル変数の方が最適化が効きやすいなどいろいろなメリットがありますから、必要ない限りインスタンス変数は増やさない方が良いと思った方が良いでしょう。
とりあえず、上記2点を修正すれば、毎秒アナログ時計画面が更新されると言う目的は達成できるかと思います。お試しください。