Swift View - Adding to swift.md (#172)

-what a swift view is
-how to edit a swift view manually and using a code inspector
-talked about separating and combing views using stakcs
-talked about features of Xcode Preview to view your interface in different ways such as light vs dark mode, orientation and on different devices

Topics/Tech_Stacks/swift.md

@@ -5,6 +5,7 @@
 ### [Why Use Swift?](#why-use-swift-1)
 ### [What is SwiftUI?](#what-is-swiftui-1)
 ### [Starting a Swift Project](#starting-a-swift-project-1)
+### [Swift View](#swift-view-1)
 ### [Testing Your App - Unit Tests](#testing-your-app---unit-tests-1)
 ### [Testing Your App - Simulators](#testing-your-app---simulators-background)
 ### [Testing Your App - Debugging](#testing-your-app---debugging-1)
@@ -59,18 +60,105 @@ This information can be changed later, so for starters, you can leave `Team` to
 
 Make sure to use `SwiftUI` and `Swift` as your interface and language respectively, then click `Next` to choose where to store your project, and now you're ready to start.
 
+
+## Swift View
+
+A view is a user interface component used to create the visual part of the application. Creating a new project automatically creates a view called `Content View`:  
+
+<p align="center">
+<img width="500" alt="Screenshot 2023-11-23 at 12 32 33 AM" src="https://github.com/learning-software-engineering/learning-software-engineering.github.io/assets/97854264/58e8197c-897b-4bff-be4d-77b6daa62ecd">
+</p>
+
+Views in Swift are defined as structs and must conform to the View protocol. The content and behavior of the view are provided in the body of the view. To see how the view is transformed into the user’s interface and how users can interact with the view, we can either build and run our application on a `simulated device` or view the `Xcode preview`. An Xcode preview of a view is created automatically when we create a new view.  The Xcode preview will display the Content View as shown below:
+
+<p align="center">
+<img width="1394" alt="Screenshot 2023-11-23 at 12 34 28 AM" src="https://github.com/learning-software-engineering/learning-software-engineering.github.io/assets/97854264/93913afd-a6df-4958-a1e6-d7fe276814ea">
+</p>
+
+To see the view on a simulated device refer to the [Testing Your App - Simulators](#testing-your-app---simulators-background) for instrustion on how to set up a simulator. We cannot edit a view through the simulator. We must edit the view manually and rebuild and rerun our application to see the changes reflected on the simulator.
+
+**Editing a View**
+
+We can edit a view in two ways: `manually` or through the `view inspector` (only when the view is opened in `Xcode preview`). Modifications to the view’s body will be reflected in real-time in the preview. For our example, we will show how to edit the text colour manually and through a view inspector. To edit a view through an inspector:
+
+1. Change from `live mode` (default mode) to `selectable mode` to enable editing
+
+<p align="center">
+<img width="500" alt="Screenshot 2023-11-28 at 3 41 14 PM" src="https://github.com/learning-software-engineering/learning-software-engineering.github.io/assets/97854264/34a7b952-c6e3-4a85-b746-cbd26c9fc3fc">
+
+</p>
+
+2. `Command-control-click` the element you want to edit, bringing up the structured editing pop-up. The pop-up shows the different attributes you can customize. For our example, we will customize the colour attribute. Select `Show SwiftUI Inspector`.
+
+<p align="center">
+<img width="500" alt="Screenshot 2023-11-23 at 12 35 54 AM" src="https://github.com/learning-software-engineering/learning-software-engineering.github.io/assets/97854264/9f115e5b-7773-44e3-9e4b-48366bf54d2f">
+</p>
+
+3. Select the `color attribute` and choose the color `purple`.
+
+<p align="center">
+<img width="500" alt="Screenshot 2023-11-23 at 12 36 25 AM" src="https://github.com/learning-software-engineering/learning-software-engineering.github.io/assets/97854264/b6a04517-1aba-4dea-9b41-099aa592295b">
+</p>
+
+The change will be reflected immediately on the simulated device, and Xcode will update your code to match the change. 
+<p align="center">
+<img width="1394" alt="Screenshot 2023-11-23 at 1 09 35 AM" src="https://github.com/learning-software-engineering/learning-software-engineering.github.io/assets/97854264/8fd856b6-b23e-4860-866a-3dcb95c679a1">
+</p>
+
+
+To edit manually, we must add the line `foregroundColor (Color.purple)` to the view’s body ourselves.
+
+**Combining Views**
+
+A single view with multiple elements can lead to a cluttered view body. We should separate each of these elements into their own separate view. Then, combine these views in [stacks](https://developer.apple.com/documentation/uikit/uistackview), which group views together horizontally ([HStack](https://developer.apple.com/documentation/swiftui/hstack)), vertically ([VStack](https://developer.apple.com/documentation/swiftui/vstack)), or back-to-front ([ZStack](https://developer.apple.com/documentation/swiftui/zstack)). For instance, in this scenario, the [Circle Image and Map View](https://developer.apple.com/tutorials/swiftui/creating-and-combining-views) are initially separate views and are combined in a `VStack`and embedded with the Content View for display:
+
+<p align="center">
+<img width="783" alt="Screenshot 2023-11-23 at 1 06 40 AM" src="https://github.com/learning-software-engineering/learning-software-engineering.github.io/assets/97854264/498685ee-7c70-45de-b450-978c961510f1">
+</p>
+
+**Previewing Light and Dark Modes, Orientations, and Device Types**
+
+We can see how our user interface will look in light and dark modes. To do so select the `Variant Control` 
+<p align="center">
+<img width="528" alt="Screenshot 2023-11-23 at 12 39 27 AM" src="https://github.com/learning-software-engineering/learning-software-engineering.github.io/assets/97854264/d0c765f1-5fce-4c88-993b-729a8d9b612d">
+</p>
+
+and choose `Colour Scheme Variants`.
+
+
+<p align="center">
+<img width="527" alt="Screenshot 2023-11-23 at 12 39 44 AM" src="https://github.com/learning-software-engineering/learning-software-engineering.github.io/assets/97854264/eb34957e-5e9c-4ff6-9554-d8c8de007eb0">
+</p>
+
+We can also view how the user interface will look in different orientations by selecting the “Orientation Variant.”
+<p align="center">
+<img width="530" alt="Screenshot 2023-11-23 at 12 40 07 AM" src="https://github.com/learning-software-engineering/learning-software-engineering.github.io/assets/97854264/2ca289f4-b042-4abc-8720-56566890dc9e">
+</p>
+
+To view the preview on different device types, you can change the device the preview is displayed on from the buttons below. Here is an example of the same view shown on an iPad:
+<p align="center">
+<img width="524" alt="Screenshot 2023-11-28 at 3 53 35 PM" src="https://github.com/learning-software-engineering/learning-software-engineering.github.io/assets/97854264/be90f760-ab75-4c5f-aeb7-75700f1d316b">
+
+</p>
+
+
+
+
+
 ## Testing Your App - Unit Tests
 In Xcode, unit tests are written using the `XCTest` framework. 
 
 You can add a new unit test case by going to `New File` and selecting the `Unit Test Case Class` template:
-
+<p align="center">
 <img width="726" alt="Unit Test Case" src="https://github.com/NonLan/learning-software-engineering.github.io/assets/95160562/360192fb-40ee-48c0-92d8-9585ad78eb7a">
+</p>
 
 Xcode will then automatically set up a test case class, and you can write your unit test there.
 
 Unit tests in Xcode work as they do in any other language. One major difference to take note of is that assertions and other functions you may require for unit testing may look a little different since they're a part of the `XCTest` framework. For an outline of this framework and its functions, please refer to Apple's [documentation](https://developer.apple.com/documentation/xctest).
 
 ## Testing Your App - Simulators: Background
+
 Xcode has [built-in simulators for many Apple devices](https://developer.apple.com/documentation/xcode/running-your-app-in-simulator-or-on-a-device)
 you can use to run your code and see how it performs. 
 Simulators in Xcode are a powerful tool for emulating, in real-time, a user’s app experience. You can download new simulators for a specific device and operating system version to test different scenarios, such as an iPhone 11 running iOS 13.
@@ -104,6 +192,7 @@ You can [set a breakpoint](https://developer.apple.com/documentation/xcode/setti
 
 When you next run your app, the app execution will pause at the site of the breakpoint. You will be able to see your variables in the Variable view in the bottom panel. You can then continue or step through the rest of your code and watch your variables change accordingly by clicking the appropriate buttons in the Debugger console in the bottom panel. For more detailed help with breakpoints and the Debugger console, see [here](https://developer.apple.com/documentation/xcode/stepping-through-code-and-inspecting-variables-to-isolate-bugs).
 
+
 ## Other Useful Resources
 [Learn about the different data types in Swift](https://www.hackingwithswift.com/read/0/3/types-of-data). Each language has its own nuances in how
 variables are declared and stored, useful to become familiar with it before starting to code.