Purpose of the article: To educate beginner and XCode and swift developers to create the watch OS application and layouts design.

Intended Audience: IOS developers

Tools and Technology: XCode, Swift

Keywords: XCode, Swift, Watch OS

First of all, we need to install the Xcode in Mac to create a project for the watchOS app.

Go to the app store, download the Xcode latest version and install.

Create an independent watchOS app from Xcode:

Just click on the Xcode application and select Create a new Xcode project.

Now we are going to create one HelloApp project for an independent watchOS application. After selecting the create a new Xcode project, then you can get the below screen. Then select the Watch app to create an Independent watchOS application.

We have one more option iOS app with a watch App that is also for watches app, but if we select that, then the project will set the iOS app as its companion.

After selecting the watch app option now, we are going to give the name of the project on the next screen.

Now I am giving the name as HelloApp like below and choose the interface as a storyboard or swift UI. I’m going with the storyboard.

Now our project got created. The structure will be like below.

You can see two directories added to your project. HelloApp WatchKit App and HelloApp WatchKit Extension.

HelloApp WatchKit App provides a storyboard where you can design your watch app UX.

HelloApp WatchKit Extension contains swift files where you need to write the logic or code to perform actions in the application. You can create new Swift files to write code.

Now HelloApp project got created. The structure will be like below.

You can see the Interface storyboard file in the HelloApp WatchKit App directory. Here you can design your watch App UX. Like iOS Storyboard files. Default Initial Interface created here.

Now the interface looks like the above. You can drag and drop the objects from the Object Library from the right-side top of the Xcode framework.

I took one label from the object library and named as Hello. Here interface in watchOS is different from iOS. We do not have auto layouts here. We have only Horizontal and vertical positions to fix the interface.

Horizontal Position: we have three options to fix our object to the interface using

• Left
• Right
• Center

Vertical Position: We have three options to fix our object to the interface using

• Top
• Bottom
• Center

We can create an interface at our convenience by using the top, bottom, and center positions.

Let me show the examples of selecting above all the properties on a simple label.

If you want to use multiple objects from the library, you can group them by taking group objects from the library. The below image shows grouping the two labels hello and app and 2nd Label in another group by giving positions like Horizontal center and vertical center.

The build watch simulator will look like this if I run the app.

App Icon Integration:

Here in watch app integrating app icon is like same as iOS app icon Integration. In the project structure HelloApp watch kit app folder, we have assets. xcassests. We need to add App Icon.

For required sizes for the app icon, you can refer to the official document from here:

https://developer.apple.com/design/human-interface-guidelines/watchos/visual/app-icon/

Thank you for reading this article.