How to build Bubble level app swiftui

by ·

hello developer in this iOS tutorial i am share how to build a bubble level app with swiftui. bubble level App work base on the mobile rotation and mobile till up down and the show the level on the potion base on mobile rotation and tillt angle.

So let’s start to make your ios bubble level check App. start your XCode and make a new swift class with the name of bubble level.and follow below code.

Bubble level app swiftui iphone.

here we are create firstly a horizontal line and vertical line in the centre of the screen and the create two circles in the centre of the screen. And base on the device rotation we show the level.

import Foundation
import SwiftUI

struct BubbleLevel: View {

    @EnvironmentObject var detector: MotionDetector
    let range = Double.pi
    let levelSize: CGFloat = 300

    var bubbleXPosition: CGFloat {
        let zeroBasedRoll = detector.roll + range / 2
        let rollAsFraction = zeroBasedRoll / range
        return rollAsFraction * levelSize
    }

    var bubbleYPosition: CGFloat {
        let zeroBasedPitch = detector.pitch + range / 2
        let pitchAsFraction = zeroBasedPitch / range
        return pitchAsFraction * levelSize
    }

    var verticalLine: some View {
        Rectangle()
            .frame(width: 0.5, height: 40)
    }

    var horizontalLine: some View {
        Rectangle()
            .frame(width: 40, height: 0.5)
    }

    var body: some View {

        Circle()
            .foregroundStyle(Color.secondary.opacity(0.25))
            .frame(width: levelSize, height: levelSize)
            .overlay(

                ZStack {

                    Circle()
                        .foregroundColor(.accentColor)
                        .frame(width: 50, height: 50)
                        .position(x: bubbleXPosition,
                                  y: bubbleYPosition)

                    Circle()
                        .stroke(lineWidth: 0.5)
                        .frame(width: 20, height: 20)
                    verticalLine
                    horizontalLine

                    verticalLine
                        .position(x: levelSize / 2, y: 0)
                    verticalLine
                        .position(x: levelSize / 2, y: levelSize)
                    horizontalLine
                        .position(x: 0, y: levelSize / 2)
                    horizontalLine
                        .position(x: levelSize, y: levelSize / 2)
                }
            )
    }
}

struct BubbleLevel_Previews: PreviewProvider {

    @StateObject static var motionDetector = MotionDetector(updateInterval: 0.01).started()

    static var previews: some View {
        BubbleLevel()
            .environmentObject(motionDetector)
    }
}

 

Read More Tutorial 

Tags:

You may also like...