IOS

SwiftUI and Shake Gesture

by

There isn’t a way to catch the shake gesture only using SwiftUI, so it’s necessary use these frameworks: Uikit and Combine.

Combine is very helpful in this case because how is wrote in the Apple documentation: “Combine declares publishers to expose values that can change over time, and subscribers to receive those values from the publishers.”

In the example, the goal is catch the Shake gesture with the UiKit, with the Combine framework we publish this event and get the combine published info in the SwiftUI view that is a subscriber. Let’s start.

We must create a Swift file, ShakeGestureManager.swift

import Foundation
import SwiftUI
import Combine
let messagePublisher = PassthroughSubject<Void, Never>()
class ShakeViewController: UIViewController {
override func motionBegan(_ motion: UIEvent.EventSubtype,
                              with event: UIEvent?) {
        guard motion == .motionShake else { return }
        messagePublisher.send()
    }
}
struct ShakeViewRepresentable: UIViewControllerRepresentable {
    
    func makeUIViewController(context: Context) ->
        ShakeViewController {
            ShakeViewController()
    }
func updateUIViewController(_ uiViewController: ShakeViewController,
                                context: Context) {
        
    }
}



Where the PassthroughSubject is a “A subject that broadcasts elements to downstream subscribers.” (from the Apple documentation). We need it to communicate with the SwiftUI View.

The ShakeViewController is a simple UIViewController that catches the shake Gesture. Like in the case of the Map, it’s not possible to use the UIViewController in the SwiftUI so we must create a struct that implement the UIViewControllerRepresentable that we can use in the SwiftUI View.

Now see the SwiftUI view:

import SwiftUI
struct ContentView: View {
    @State var shaked = false
    
    var body: some View {
        NavigationView {
            VStack{
                ZStack {
                    ShakeViewRepresentable()
                                .allowsHitTesting(false)
                    VStack {
                        Text("Shake device to change view!")
                    }
                    
                }.onReceive(messagePublisher) { _ in
                    self.shaked = true
                }
                NavigationLink(destination: SecondView(), isActive: $shaked) {
                    EmptyView()
                }
            }
        }
    }
}



The state variable shaked it used to store the shaked event. In the navigationview there is a ZStack, where at the bottom (first element) there is the ShakeViewRepresentable that can’t get touch event from the user because allowsHitTesting is false, on the top there is a simple Text message.

When the ZStack receives the messagePublisher, the shaked variable become true and the NavigationLink become active so the view navigates to the SecondView (that you can create how you want). Note the use of the EmptyView from the NavigationLink, it used to show nothing but to have a working link.

That’s all. I hope that it can be helpful. You can get the code here.

QML VS. SwiftUI (part 1)

by

In this series I’ll show the difference between QML and SwiftUI. Both are declarative language, the first on is part of the Qt cross-platform library, the second is from Apple, introduced in the last summer.

The idea that is at the base of these languages is simplify the design of the GUI, with the dream that the designer can draw the interface with tools as Photoshop, Sketch or gimp and with some plugin have the code in some programming language, for both the languages we have some attempt in this direction. Done this introduction, let’s start to see a bit of code.

// QML TEXT
import QtQuick 2.12
import QtQuick.Window 2.12Window 
{
   title: qsTr("Hello World")   
   Text {     
       id: name     
       text: qsTr("text")     
       anchors.verticalCenter: parent.verticalCenter
       anchors.horizontalCenter: parent.horizontalCenter     
       font.family: "Helvetica [Cronyx]"    
    }
}



In the previous code, we show a the text “text” centered vertically and horizontally in window. To default in QML the object are positioned in the left/top corner.

In SwiftUI we have:

import SwiftUI

struct ContentView: View {
    var body: some View {
           Text("Hello, World!")
           .fontWeight(.bold)
    }
}



In SwiftUI the widgets are showed already centered in the View, so we have not specify the alignment how in QML, but if we want the Text in the left/top corner we must specify:

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            HStack{
                Text("Hello, World!")
                .fontWeight(.bold)
                Spacer()
            }
            Spacer()
        }
    }
}



In the HStack (horizontal stack) we have the Text and the Spacer that fill the space not covered from the Text, so the Text is pushed on the left, in dual way for the Vertical Stack (VStack) the Spacer push on top the HStack.

The first visible difference between QML and SwiftUI is how the properties are set for the objects, in QML we have propertyName: value within the {} block of the element, instead in SwiftUI ther properties are set with .property after the {} block (when present).