KotlinとSwiftでアナログ時計を作るーー見た目の時計文字盤
こんにちは。川上です。
KotlinでAndroidアプリ作成で、最初にお調べさせていたのは
「ConstraintLayoutのCircular positioningでアナログ時計を作った」
です。
このサンプルアプリのカタチ似をみながら、KotlinとSwiftでアナログ時計アプリを作ってみました。
動作見た目は、おんなじ様に見えたけど、SwiftとKotlinの中身はあんまりちゃいますw。
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 | // MARK: ⚡️--ライフサイクル：レイアウト処理終了メソッド override func viewDidLayoutSubviews() { // MARK:+++++ Clock Base Setting makeClockBaseSetting() } // MARK:+++++ Clock Base Setting func makeClockBaseSetting() { //既存の子Viewの削除 self.view.removeAllSubviews() let selfsize = self.view.frame.size let bsWorH = (selfsize.width > selfsize.height ? selfsize.height : selfsize.width ) - 20 ・・・ // MARK: -- 時計盤の数文字表示 drawClockBoardMoji( bsWorH / 2 - 20) ・・・ } // MARK: -- 時計盤の数文字表示 func drawClockBoardMoji(_ hankei:CGFloat) { let lblwh :Int = 20 let bs_center = self.view.center for tm in 1...12 { // MARK:Status用Label let lbl: UILabel = UILabel(frame: TotnCGRect.CGRectMake(0,0,CGFloat(lblwh),CGFloat(lblwh))) //＝＝＝ ※ SwiftとAndroidでは、度数角度設定が90度違うみたい！？ let θ = Double.pi / Double(180) * Double(getKakuDo(tm) - 90 ) let x = Double(hankei) * cos(θ) let y = Double(hankei) * sin(θ) let lbl_x:CGFloat = bs_center.x + CGFloat(x) let lbl_y:CGFloat = bs_center.y + CGFloat(y) // MARK: ==== Status用Label == lbl.text = tm.description lbl.textColor = UIColor.blue lbl.textAlignment = NSTextAlignment.center lbl.center = CGPoint(x: lbl_x, y: lbl_y ) self.view.addSubview(lbl) } } // MARK: --- 数文字（1-12）位置用の角度の取得 func getKakuDo(_ idx:Int) -> CGFloat{ let CIRCLE_RADIUS = 360 let angleUnit : CGFloat = CGFloat(CIRCLE_RADIUS / 12) return CGFloat(idx) * angleUnit } |
ちなみに、
1 2 3 | //既存の子Viewの削除 self.view.removeAllSubviews() |
を外すと、縦横置きの動作で文字表示がダブります。
iPhone用の動画はココです。
Kotli向けの時計盤文字には、コチラでした。
Kotlinの時計針の回転処理に詰まりました。
ー そのうち・・・でけへんかなぁ・・
ので、SwiftのNonClockに背びれ腹ビレに蛇足しとこかなぁ。。です。
ではでは。