Vlad Polyanskiy
Vlad Polyanskiy

Reputation: 2679

Apple Watch: Status bar height

Does anybody know the size of the Apple Watch status bar?

I was unable to find such value in documentation neither in Apple Watch Human Interface Guidelines nor in Apple Watch Programming Guide.

Upvotes: 11

Views: 3128

Answers (7)

Stephan
Stephan

Reputation: 1

Actually, we can use design templates by Apple to get actual information for the lastest OS:

https://developer.apple.com/design/resources/#watchos-apps

Updated snippet, based on link above:

import WatchKit

extension WKInterfaceDevice {

    func statusBarHeight() -> CGFloat {

        // current device

        let currentDevice = WKInterfaceDevice.current()
        let bounds = currentDevice.screenBounds
        let retinaFactor = currentDevice.screenScale

        // dimensions in pixels

        let width = bounds.width * retinaFactor
        let height = bounds.height * retinaFactor

        if #available(watchOS 10, *) {
            switch (width, height) {
                    // 40mm: statusBar = 28pt (56px), screenBounds: 324 x 394
                case (324, 394):
                    return 32 //
                    // 41mm: statusBar = 34pt (68px), screenBounds: 352 x 430
                case (352, 430):
                    return 38 //
                    // 44mm: statusBar = 31pt (62px), screenBounds: 368 x 448
                case (368, 448):
                    return 38 //
                    // 45mm: statusBar = 35pt (70px), screenBounds: 396 x 484
                case (396, 484):
                    return 42 //
                    // 49mm: statusBar = 37pt (74px), screenBounds: 410 x 502
                case (410, 502):
                    return 46 //
                    // default to 40mm
                default:
                    return 32
            }
        } else {
            switch (width, height) {
                    // 38mm: statusBar = 19pt (38px), screenBounds: 272 x 340
                case (272, 340):
                    return 19
                    // 40mm: statusBar = 28pt (56px), screenBounds: 324 x 394
                case (324, 394):
                    return 31
                    // 41mm: statusBar = 34pt (68px), screenBounds: 352 x 430
                case (352, 430):
                    return 34
                    // 42mm: statusBar = 21pt (42px), screenBounds: 312 x 390
                case (312, 390):
                    return 21
                    // 44mm: statusBar = 31pt (62px), screenBounds: 368 x 448
                case (368, 448):
                    return 31
                    // 45mm: statusBar = 35pt (70px), screenBounds: 396 x 484
                case (396, 484):
                    return 35
                    // 49mm: statusBar = 37pt (74px), screenBounds: 410 x 502
                case (410, 502):
                    return 37
                    // default to 38mm
                default:
                    return 19
            }
        }
    }
}

Upvotes: 0

Cosmin
Cosmin

Reputation: 7061

Status bar heights for watchOS 10:

  • 49mm: height = 46pt
  • 45mm: height = 42pt
  • 44mm: height = 38pt
  • 41mm: height = 38pt
  • 40mm: height = 33pt

Status bar heights for Watch series 7 or later:

  • 45mm: height = 35pt (70px)
  • 41mm: height = 34pt (68px)
  • 44mm: height = 31pt (62px)
  • 40mm: height = 28pt (56px)

Why the big difference from series 1-3? Because the status bar has to take into account the rounded corner radius.

Upvotes: 3

Michael N
Michael N

Reputation: 563

Usage

    let currentDevice = WKInterfaceDevice.current()
    let statusBarHeight : CGFloat = currentDevice.statusBarHeight()

Extension

import WatchKit

extension WKInterfaceDevice {

    func statusBarHeight() -> CGFloat {
        
        // current device
        
        let currentDevice = WKInterfaceDevice.current()
        let bounds = currentDevice.screenBounds
        let retinaFactor = currentDevice.screenScale
        
        // dimensions in pixels
        
        let width = bounds.width * retinaFactor
        let height = bounds.height * retinaFactor
        
        // 38mm: statusBar = 19pt (38px), screenBounds: 272 x 340
        
        if width == 272.0 && height == 340.0 {
            
            return 19.0
            
        }
        
        // 40mm: statusBar = 28pt (56px), screenBounds: 324 x 394
        
        if width == 324.0 && height == 394.0 {
                        
            return 31.0
            
        }
        
        // 41mm: statusBar = 34pt (68px), screenBounds: 352 x 430
        
        if width == 352.0 && height == 430.0 {
            
            return 34.0
            
        }
        
        // 42mm: statusBar = 21pt (42px), screenBounds: 312 x 390

        if width == 312.0 && height == 390.0 {
            
            return 21.0
            
        }

        // 44mm: statusBar = 31pt (62px), screenBounds: 368 x 448
        
        if width == 368.0 && height == 448.0 {
            
            return 31.0
            
        }

        // 45mm: statusBar = 35pt (70px), screenBounds: 396 x 484
        
        if width == 396.0 && height == 484.0 {
            
            return 35.0
            
        }
        
        // 49mm: statusBar = 37pt (74px), screenBounds: 410 x 502
        
        if width == 410.0 && height == 502.0 {
            
            return 37.0
            
        }
        
        // default to 38mm
            
        return 19.0
        
    }
    
}

Upvotes: 3

Isaac
Isaac

Reputation: 1

Just to contribute with the missing size, the Apple Watch Ultra

49mm - 37pt (74px)

Upvotes: 0

Markus
Markus

Reputation: 1177

If I want to add a WKInterfaceImage object with the exactly size.

The image created with Adobe Fireworks (or whatever image editor) must be?

38mm : Height = 170 - 19 (status height); Width = 136;

42mm : Height = 195 - 21 (status height); Width = 156;

I am talking about the image @1x (I know that for @2x or @3x I must multiply)

Upvotes: 1

Richard Bao
Richard Bao

Reputation: 415

According to Apple employee's official answer on their forum:

19pt (38px) on 38mm watch 21pt (42px) on 42mm watch

Very easy to remember actually...

Upvotes: 6

Vlad Polyanskiy
Vlad Polyanskiy

Reputation: 2679

So. I've measured them.

38mm - 19pt (38px)

42mm - 21pt (42px)

The technique was to set up the white background and measure the distance from the top edge to the begining of white content. Hope it will be useful to someone.

Upvotes: 7

Related Questions