Build Chat App with SwiftUI | iOS 16 & Xcode 14 | Status Screen | Part 2

In the previous part of this tutorial series, we covered the basics of creating a chat app with SwiftUI in iOS 16 using Xcode 14. In this part, we will focus on creating a status screen for our chat app.

Step 1: Create a Status Screen Layout

First, we need to create a new SwiftUI file for our status screen. In Xcode, go to File > New > File, select SwiftUI View, and name it StatusScreen.swift.

We will create a simple layout for the status screen with a list of users and their online status.

“`swift
import SwiftUI

struct StatusScreen: View {
var body: some View {
List {
ForEach(users, id: .id) { user in
Text(“(user.name) – (user.onlineStatus ? “Online” : “Offline”)”)
}
}
}
}

struct StatusScreen_Previews: PreviewProvider {
static var previews: some View {
StatusScreen()
}
}
“`

Step 2: Populate Users Data

Next, we need to create a sample data model for users and their online status.

“`swift
import Foundation

struct User: Identifiable {
let id = UUID()
let name: String
let onlineStatus: Bool
}

let users = [
User(name: “Alice”, onlineStatus: true),
User(name: “Bob”, onlineStatus: false),
User(name: “Charlie”, onlineStatus: true)
]
“`

Step 3: Integrate Status Screen in Chat App

Now that we have our status screen layout and data model ready, we can integrate it into our chat app.

“`swift
struct ChatApp: View {
var body: some View {
NavigationView {
TabView {
ConversationScreen()
.tabItem {
Image(systemName: “message”)
Text(“Conversations”)
}

StatusScreen()
.tabItem {
Image(systemName: “person.3”)
Text(“Status”)
}
}
}
}
}
“`

Now, when you run your app, you should see a tab bar with two tabs – one for conversations and one for the status screen.

Conclusion

In this part of the tutorial, we learned how to create a status screen for our chat app using SwiftUI in iOS 16 and Xcode 14. Stay tuned for the next part, where we will add more features to our chat app!