KotlinとSwiftでアナログ時計を作るーー見た目の時計文字盤

著者：川上洋

公開日：2019/07/16

最終更新日：2019/07/16

こんにちは。川上です。

KotlinでAndroidアプリ作成で、最初にお調べさせていたのは
　「ConstraintLayoutのCircular positioningでアナログ時計を作った」
です。
このサンプルアプリのカタチ似をみながら、KotlinとSwiftでアナログ時計アプリを作ってみました。

動作見た目は、おんなじ様に見えたけど、SwiftとKotlinの中身はあんまりちゃいますw。
Swiftでの文字盤位置は、サイン、コサインをシラーと使っています。（ミー的には凄い！！）

  // 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
    }

// 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

}

ちなみに、

　　 
 //既存の子Viewの削除
 self.view.removeAllSubviews()

//既存の子Viewの削除

self.view.removeAllSubviews()

を外すと、縦横置きの動作で文字表示がダブります。

iPhone用の動画はココです。

Kotli向けの時計盤文字には、コチラでした。

Kotlinの時計針の回転処理に詰まりました。
ー　そのうち・・・でけへんかなぁ・・
ので、SwiftのNonClockに背びれ腹ビレに蛇足しとこかなぁ。。です。

ではでは。