Mobile App Dev 2022W: Tutorial 3: Difference between revisions
No edit summary |
|||
(7 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
In this tutorial you will be playing with [https://homeostasis.scs.carleton.ca/~soma/mad-2022w/code/dragDemo2/ContentView.swift dragDemo2], a simple SwiftUI program where you drag a ball into a box. | In this tutorial you will be playing with [https://homeostasis.scs.carleton.ca/~soma/mad-2022w/code/dragDemo2/ContentView.swift dragDemo2], a simple SwiftUI program where you drag a ball into a box. | ||
Line 14: | Line 12: | ||
* [https://developer.apple.com/documentation/swiftui/building-layouts-with-stack-views ZStack] | * [https://developer.apple.com/documentation/swiftui/building-layouts-with-stack-views ZStack] | ||
* [https://developer.apple.com/documentation/swiftui/geometryreader GeometryReader] | * [https://developer.apple.com/documentation/swiftui/geometryreader GeometryReader] | ||
* [https://docs.swift.org/swift-book/LanguageGuide/BasicOperators.html Basic Swift operators including the "Ternary Conditional Operator"] | |||
A list of key Apple articles on SwiftUI is [https://developer.apple.com/documentation/swiftui here]. Unfortunately, these articles are incomplete and sometimes ambiguous, so you may want to look at other online resources if you are looking to learn more about SwiftUI. I've found the [https://www.hackingwithswift.com/books/ios-swiftui/ Hacking with Swift] online book to be helpful overall, and [https://medium.com/better-programming/drag-swipe-and-touch-gestures-in-swiftui-fa5364090745 Mark Lucking's article on drag and drop is informative] and [https://swiftui-lab.com/geometryreader-to-the-rescue/ The SwiftUI Lab's article on GeometryReader]. Unfortunately, I've found no online resource that is truly authoritative and complete. | A list of key Apple articles on SwiftUI is [https://developer.apple.com/documentation/swiftui here]. Unfortunately, these articles are incomplete and sometimes ambiguous, so you may want to look at other online resources if you are looking to learn more about SwiftUI. I've found the [https://www.hackingwithswift.com/books/ios-swiftui/ Hacking with Swift] online book to be helpful overall, and [https://medium.com/better-programming/drag-swipe-and-touch-gestures-in-swiftui-fa5364090745 Mark Lucking's article on drag and drop is informative] and [https://swiftui-lab.com/geometryreader-to-the-rescue/ The SwiftUI Lab's article on GeometryReader]. Unfortunately, I've found no online resource that is truly authoritative and complete. | ||
== | ==Questions== | ||
# What is the initial coordinates of the box? Of the circle? What are these coordinates relative to? | # What is the initial coordinates of the box? Of the circle? What are these coordinates relative to? | ||
Line 26: | Line 26: | ||
# Can you make it impossible for the ball to enter the square (but allow it to be dragged everywhere else on the screen)? | # Can you make it impossible for the ball to enter the square (but allow it to be dragged everywhere else on the screen)? | ||
# Do you see any regular closures here? If so, where are they being used and for what purpose? (Do not consider closures that are actually Views.) | # Do you see any regular closures here? If so, where are they being used and for what purpose? (Do not consider closures that are actually Views.) | ||
# This tutorial is a revised version of [[Mobile App Dev 2021W: Tutorial 3|Tutorial 3 from last year]]. ([https://homeostasis.scs.carleton.ca/~soma/mad-2022w/code/drag-demo/ContentView.swift ContentView.swift from drag-demo is here.])The basic functionality of last year's code and this year's code is the same. Why is the code here more complicated? What has changed? | |||
==Tasks== | |||
# Disable dragging of the circle, make it instead just appear at the end of the drag. | |||
# Make the box bigger and the ball smaller. Ideally make the ball half the size of the box. | |||
# Make the box appear in the top right of the screen and the circle start in bottom left. | |||
==[https://homeostasis.scs.carleton.ca/~soma/mad-2022w/code/dragDemo2/ContentView.swift Code: dragDemo2 ContentView.swift]== | ==[https://homeostasis.scs.carleton.ca/~soma/mad-2022w/code/dragDemo2/ContentView.swift Code: dragDemo2 ContentView.swift]== |
Latest revision as of 18:08, 26 January 2022
In this tutorial you will be playing with dragDemo2, a simple SwiftUI program where you drag a ball into a box.
Key Concepts & Resources
For this tutorial, however, you shouldn't need to refer to the documentation below; the code itself should be simple enough to understand and experiment with. However, if you want to learn more, see below.
This code introduces these SwiftUI concepts and mechanisms:
- Shapes, specifically circles and rectangles.
- View positions
- Gestures
- ZStack
- GeometryReader
- Basic Swift operators including the "Ternary Conditional Operator"
A list of key Apple articles on SwiftUI is here. Unfortunately, these articles are incomplete and sometimes ambiguous, so you may want to look at other online resources if you are looking to learn more about SwiftUI. I've found the Hacking with Swift online book to be helpful overall, and Mark Lucking's article on drag and drop is informative and The SwiftUI Lab's article on GeometryReader. Unfortunately, I've found no online resource that is truly authoritative and complete.
Questions
- What is the initial coordinates of the box? Of the circle? What are these coordinates relative to?
- How do you change the drag gesture to be processed "OnEnded" rather than "OnDrag"? How does this change the behaviour of the program?
- Where does the circle have to be to get the success menu? Be precise in terms of coordinates.
- Where is view state being stored? Where is it being used?
- How would you make the lines of the rectangle thinner?
- Can you make it impossible for the ball to enter the square (but allow it to be dragged everywhere else on the screen)?
- Do you see any regular closures here? If so, where are they being used and for what purpose? (Do not consider closures that are actually Views.)
- This tutorial is a revised version of Tutorial 3 from last year. (ContentView.swift from drag-demo is here.)The basic functionality of last year's code and this year's code is the same. Why is the code here more complicated? What has changed?
Tasks
- Disable dragging of the circle, make it instead just appear at the end of the drag.
- Make the box bigger and the ball smaller. Ideally make the ball half the size of the box.
- Make the box appear in the top right of the screen and the circle start in bottom left.
Code: dragDemo2 ContentView.swift
//
// ContentView.swift
// dragDemo2
//
import SwiftUI
struct ContentView: View {
@State var circleLocation = CGPoint(x: -100, y: -100)
var body: some View {
GeometryReader{geometry in
let w = geometry.size.width
let h = geometry.size.height
let boxLocation = CGPoint(x: w/2, y: h/2)
let boxSize = (w < h ? w : h) / 2
let startLocation = CGPoint(x: w/2, y: h/6)
VStack{
SuccessMsg(location: $circleLocation,
boxLocation: boxLocation)
ZStack{
CenteredBox(location: boxLocation, size: boxSize)
MovableCircle(location: $circleLocation,
size: boxSize * 0.8,
startLocation: startLocation)
}
Text("Width: " + w.description +
", Height: " + h.description)
}
}
}
}
struct CenteredBox: View {
var location: CGPoint
var size: CGFloat
var body: some View {
Rectangle()
.stroke(Color.green, lineWidth: 10)
.frame(width: size, height: size)
.position(location)
}
}
struct MovableCircle: View {
@Binding var location: CGPoint
@State private var isDragging = false
var size: CGFloat
var startLocation: CGPoint
var body: some View {
return Circle()
.fill(Color.blue)
.frame(width: size, height: size)
.position(location.x < 0 ? startLocation : location)
.gesture(DragGesture()
.onChanged { value in
self.location = value.location})
}
}
struct SuccessMsg: View {
@Binding var location: CGPoint
var boxLocation: CGPoint
var body: some View {
if (abs(location.x - boxLocation.x) < 20) &&
(abs(location.y - boxLocation.y) < 20) {
Text("Success!").font(.title).bold()
} else {
Text("Drag the circle into the box").font(.title).bold()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}