SwiftUI: Animate inserted values to line graph - ios

I have created a line graph of a fixed width that takes in "data" (an array of doubles), using this tutorial. Here is my code:
struct ChartView: View {
var data: [Double]
private let maxY: Double = Double(Constants.maxRange)
private let minY: Double = 0
var body: some View {
VStack (spacing: 0) {
HStack (spacing: 0) {
chartYAxis
.frame(width: 40)
Divider()
chartView
.background(chartBackground)
Divider()
}
HStack (spacing: 0) {
Rectangle()
.fill(Color.clear)
.frame(width: 40, height: 20)
chartXAxis
}
}
.frame(height: 300)
.font(.caption)
.foregroundColor(Color("TextColor"))
}
}
extension ChartView {
private var chartView: some View {
GeometryReader { geometry in
Path { path in
for index in data.indices {
let xPosition = geometry.size.width / CGFloat(data.count - 1) * CGFloat(index)
let yAxis = maxY - minY
let yPosition = (1 - CGFloat((data[index] - minY) / yAxis)) * geometry.size.height
if (index == 0) {
path.move(to: CGPoint(x: xPosition, y: yPosition))
}
path.addLine(to: CGPoint(x: xPosition, y: yPosition ))
}
}
.stroke(Color.blue, style: StrokeStyle(lineWidth: 3, lineCap: .round, lineJoin: .round))
}
}
private var chartBackground: some View {
VStack {
Divider()
Spacer()
Divider()
Spacer()
Divider()
}
}
private var chartYAxis: some View {
VStack {
Text("\(maxY, specifier: "%.0f")")
Spacer()
let midY = (maxY + minY) / 2
Text("\(midY, specifier: "%.0f")")
Spacer()
Text("\(minY, specifier: "%.0f")")
}
}
private var chartXAxis: some View {
HStack {
ForEach(0..<data.count, id: \.self) { index in
Text("\(index + 1)")
if (index < (data.count - 1)) {
Spacer()
}
}
}
}
}
The array "data" will append values as per button press by the user, and at any time should have around 2-20 values.
Every time value is appended to "data", I want to animate this change. The animation should not redraw the line from left to right (like here) but squeeze the existing line together to make room for the appended value. Here is a very janky example of how I want the graph to work. However, I would like the changes to be smoother, similar to this example.
I want the graph frame to remain the same size with appended values to "data", not to scroll to add new values as in this question.
I have looked at some examples of animatable vectors in line graphs, but none address this problem I am having.
Does anyone know if there is any software or method I could use to achieve this? I am fairly new to Swift, so I am hoping this is possible.

Related

How to align the middle of a View to the bottom of other view in SwiftUI?

So basically I need to come up with a layout that aligns the middle of a View to the bottom of other View in SwiftUI.
To make it more clear, all I need is something like this:
I guess the equivalent in a UIKit world would be:
redView.bottomAnchor.constraint(equalTo: whiteView.centerYAnchor)
Ive tried setting both in a ZStack and offsetting the white View but it won't work on all screen sizes for obvious reasons.
Any tips?
You can use .aligmentGuide (which is a tricky beast, I recommend this explanation)
Here is your solution, its independent of the child view sizes:
struct ContentView: View {
var body: some View {
ZStack(alignment: .bottom) { // subviews generally aligned at bottom
redView
whiteView
// center of this subview aligned to .bottom
.alignmentGuide(VerticalAlignment.bottom,
computeValue: { d in d[VerticalAlignment.center] })
}
.padding()
}
var redView: some View {
VStack {
Text("Red View")
}
.frame(maxWidth: .infinity)
.frame(height: 200)
.background(Color.red)
.cornerRadius(20)
}
var whiteView: some View {
VStack {
Text("White View")
}
.frame(maxWidth: .infinity)
.frame(width: 250, height: 100)
.background(Color.white)
.cornerRadius(20)
.overlay(RoundedRectangle(cornerRadius: 20).stroke())
}
}
You may try this:
ZStack {
Rectangle()
.frame(width: 300, height: 400)
.overlay(
GeometryReader { proxy in
let offsetY = proxy.frame(in: .named("back")).midY
Rectangle()
.fill(Color.red)
.offset(y: offsetY)
}
.frame(width: 150, height: 140)
, alignment: .center)
}
.coordinateSpace(name: "back")
Bascially the idea is to use coordinateSpace to get the frame of the bottom Rectangle and use geometryreader to get the offset needed by comparing the frame of top rectangle with the bottom one. Since we are using overlay and it is already aligned to the center horizontally, we just need to offset y to get the effect you want.
Based on OPs request in comment, this is a solution making use of a custom Layout.
The HalfOverlayLayout takes two subview and places the second half height over the first. The size of the first subview is flexible. As this is my first Layout I'm not sure if I covered all possible size variants, but it should be a start.
struct ContentView: View {
var body: some View {
HalfOverlayLayout {
redView
whiteView
}
.padding()
}
var redView: some View {
VStack {
ForEach(0..<20) { _ in
Text("Red View")
}
}
.padding()
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.red)
.cornerRadius(20)
}
var whiteView: some View {
VStack {
Text("White View")
}
.frame(width: 200, height: 150)
.background(Color.white)
.cornerRadius(20)
.overlay(RoundedRectangle(cornerRadius: 20).stroke())
}
}
struct HalfOverlayLayout: Layout {
func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
let heightContent = subviews.first?.sizeThatFits(.unspecified).height ?? 0
let heightFooter = subviews.last?.sizeThatFits(.unspecified).height ?? 0
let totalHeight = heightContent + heightFooter / 2
let maxsizes = subviews.map { $0.sizeThatFits(.infinity) }
var totalWidth = maxsizes.max {$0.width < $1.width}?.width ?? 0
if let proposedWidth = proposal.width {
if totalWidth > proposedWidth { totalWidth = proposedWidth }
}
return CGSize(width: totalWidth, height: totalHeight)
}
func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
let heightFooter = subviews.last?.sizeThatFits(.unspecified).height ?? 0
let maxHeightContent = bounds.height - heightFooter / 2
var pt = CGPoint(x: bounds.midX, y: bounds.minY)
if let first = subviews.first {
var totalWidth = first.sizeThatFits(.infinity).width
if let proposedWidth = proposal.width {
if totalWidth > proposedWidth { totalWidth = proposedWidth }
}
first.place(at: pt, anchor: .top, proposal: .init(width: totalWidth, height: maxHeightContent))
}
pt = CGPoint(x: bounds.midX, y: bounds.maxY)
if let last = subviews.last {
last.place(at: pt, anchor: .bottom, proposal: .unspecified)
}
}
}

Non-rectangular image cropping SwiftUI?

I would like to allow a user to crop images by drawing a closed shape on the original image. Sort of like Snapchat stickers. I was looking at this post from 2012 and was curious if there is an updated way to do this with SwiftUI.
To clarify, I would like to take user input (drawing) over a displayed image and crop the actual image (not the view) with a mask that is that shape.
Actually your question need to more specific.
but you can resize your image by following code in swift ui.
Image("Your Image name here!")
.resizable()
.frame(width: 300, height: 300)
if you want to crop at any position of the image you may try this one
import SwiftUI
struct ContentView: View {
var body: some View {
CropImage(imageName: "Your Image name here!")
}
}
// struct Shape
struct CropFrame: Shape {
let isActive: Bool
func path(in rect: CGRect) -> Path {
guard isActive else { return Path(rect) } // full rect for non active
let size = CGSize(width: UIScreen.main.bounds.size.width*0.7, height: UIScreen.main.bounds.size.height/5)
let origin = CGPoint(x: rect.midX - size.width/2, y: rect.midY - size.height/2)
return Path(CGRect(origin: origin, size: size).integral)
}
}
// struct image crop
struct CropImage: View {
let imageName: String
#State private var currentPosition: CGSize = .zero
#State private var newPosition: CGSize = .zero
#State private var clipped = false
var body: some View {
VStack {
ZStack {
Image(imageName)
.resizable()
.scaledToFit()
.offset(x: currentPosition.width, y: currentPosition.height)
Rectangle()
.fill(Color.black.opacity(0.3))
.frame(width: UIScreen.main.bounds.size.width*0.7 , height: UIScreen.main.bounds.size.height/5)
.overlay(Rectangle().stroke(Color.white, lineWidth: 3))
}
.clipShape(
CropFrame(isActive: clipped)
)
.gesture(DragGesture()
.onChanged { value in
currentPosition = CGSize(width: value.translation.width + newPosition.width, height: value.translation.height + newPosition.height)
}
.onEnded { value in
currentPosition = CGSize(width: value.translation.width + newPosition.width, height: value.translation.height + newPosition.height)
newPosition = currentPosition
})
Button (action : { clipped.toggle() }) {
Text("Crop Image")
.padding(.all, 10)
.background(Color.blue)
.foregroundColor(.white)
.shadow(color: .gray, radius: 1)
.padding(.top, 50)
}
}
}
}
This is the full code of a view with image cropping.
else you may use a library from GitHub, see the GitHub demo here

SwiftUI - stacking views like the notifications on the Lockscreen

I am trying to stack views of my app like the notifications on the lockscreen. (See attachment) I want them to be able to stack by clicking the button and expand on a click on the view. I have tried many things on VStack and setting the offsets of the other views but without success.
Is there maybe a standardized and easy way of doing this?
Somebody else have tried it and has a tip for me programming this?
Thanks
Notifications stacked
Notifications expanded
EDIT:
So this is some Code that I've tried:
VStack{
ToDoItemView(toDoItem: ToDoItemModel.toDo1)
.background(Color.green)
.cornerRadius(20.0)
.padding(.horizontal, 8)
.padding(.bottom, -1)
.zIndex(2.0)
ToDoItemView(toDoItem: ToDoItemModel.toDo2)
.background(Color.blue)
.cornerRadius(20.0)
.padding(.horizontal, 8)
.padding(.bottom, -1)
.zIndex(1.0)
.offset(x: 0.0, y: offset)
ToDoItemView(toDoItem: ToDoItemModel.toDo3)
.background(Color.yellow)
.cornerRadius(20.0)
.padding(.horizontal, 8)
.padding(.bottom, -1)
.offset(x: 0.0, y: offset1)
ToDoItemView(toDoItem: ToDoItemModel.toDo3)
.background(Color.gray)
.cornerRadius(20.0)
.padding(.horizontal, 8)
.padding(.bottom, -1)
.offset(x: 0.0, y: offset1)
ToDoItemView(toDoItem: ToDoItemModel.toDo3)
.background(Color.pink)
.cornerRadius(20.0)
.padding(.horizontal, 8)
.padding(.bottom, -1)
.offset(x: 0.0, y: offset1)
}
Button(action: {
if(!stacked){
stacked.toggle()
withAnimation(.easeOut(duration: 0.5)) { self.offset = -100.0 }
withAnimation(.easeOut(duration: 0.5)) { self.offset1 = -202.0 }
}
else {
stacked.toggle()
withAnimation(.easeOut(duration: 0.5)) { self.offset = 0 }
withAnimation(.easeOut(duration: 0.5)) { self.offset1 = 0 }
}
}, label: {
Text("Button")
})
So the first problem is that view 4 and 5 are not stacked on z behind view 3.
The second problem is that the button is not getting under the 5th view. (the frame/VStack of the views is still the old size)
Views stacked vertical
Views stacked on z
Another way using ZStack if your interested.
Note-:
I have declared variables globally in view, you can create your own model if you wish.
struct ContentViewsss: View {
#State var isExpanded = false
var color :[Color] = [Color.green,Color.gray,Color.blue,Color.red]
var opacitys :[Double] = [1.0,0.7,0.5,0.3]
var height:CGFloat
var width:CGFloat
var offsetUp:CGFloat
var offsetDown:CGFloat
init(height:CGFloat = 100.0,width:CGFloat = 400.0,offsetUp:CGFloat = 10.0,offsetDown:CGFloat = 10.0) {
self.height = height
self.width = width
self.offsetUp = offsetUp
self.offsetDown = offsetDown
}
var body: some View {
ZStack{
ForEach((0..<color.count).reversed(), id: \.self){ index in
Text("\(index)")
.frame(width: width , height:height)
.padding(.horizontal,isExpanded ? 0.0 : CGFloat(-index * 4))
.background(color[index])
.cornerRadius(height/2)
.opacity(isExpanded ? 1.0 : opacitys[index])
.offset(x: 0.0, y: isExpanded ? (height + (CGFloat(index) * (height + offsetDown))) : (offsetUp * CGFloat(index)))
}
Button(action:{
withAnimation {
if isExpanded{
isExpanded = false
}else{
isExpanded = true
}
}
} , label: {
Text(isExpanded ? "Stack":"Expand")
}).offset(x: 0.0, y: isExpanded ? (height + (CGFloat(color.count) * (height + offsetDown))) : offsetDown * CGFloat(color.count * 3))
}.padding()
Spacer().frame(height: 550)
}
}
I find it a little easier to get exact positioning using GeometryReader than using ZStack and trying to fiddle with offsets/positions.
This code has some numbers hard-coded in that you might want to make more dynamic, but it does function. It uses a lot of ideas you were already doing (zIndex, offset, etc):
struct ToDoItemModel {
var id = UUID()
var color : Color
}
struct ToDoItemView : View {
var body: some View {
RoundedRectangle(cornerRadius: 20).fill(Color.clear)
.frame(height: 100)
}
}
struct ContentView : View {
#State private var stacked = true
var todos : [ToDoItemModel] = [.init(color: .green),.init(color: .pink),.init(color: .orange),.init(color: .blue)]
func offsetForIndex(_ index : Int) -> CGFloat {
CGFloat((todos.count - index - 1) * (stacked ? 4 : 104) )
}
func horizontalPaddingForIndex(_ index : Int) -> CGFloat {
stacked ? CGFloat(todos.count - index) * 4 : 4
}
var body: some View {
VStack {
GeometryReader { reader in
ForEach(Array(todos.reversed().enumerated()), id: \.1.id) { (index, item) in
ToDoItemView()
.background(item.color)
.cornerRadius(20)
.padding(.horizontal, horizontalPaddingForIndex(index))
.offset(x: 0, y: offsetForIndex(index))
.zIndex(Double(index))
}
}
.frame(height:
stacked ? CGFloat(100 + todos.count * 4) : CGFloat(todos.count * 104)
)
.border(Color.red)
Button(action: {
withAnimation {
stacked.toggle()
}
}) {
Text("Unstack")
}
Spacer()
}
}
}

x coordinate value of a child is negative inside its own parent view

I am making a "Range" slider - a Slider with 2 thumbs to denote an age range.
The values are tied to their corresponding UserDefaults value (using SwiftUI's AppStorage wrapper).
When I drag a thumb, it updates its UserDefaults value based on its new position.location.x coordinate.
Here is the View:
struct AgeSlider : View {
#AppStorage("minAge") var minAge: Double = 18
#AppStorage("maxAge") var maxAge: Double = 65
#State var leftThumbMoving = false
#State var rightThumbMoving = false
var body: some View {
GeometryReader { geo in
ZStack{
Color.gray.opacity(0.4)
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 2, alignment: .center)
.onAppear {
print("width: \(geo.frame(in: CoordinateSpace.local).width)")
}
HStack{
Circle()
.foregroundColor(leftThumbMoving ? Color.orange.opacity(0.5) : Color.orange)
.position(x: CGFloat(self.minAge), y: 0)
.frame(width: 25, height: 25)
.offset(x: 0, y: 15)
.gesture(
DragGesture()
.onChanged { position in
self.leftThumbMoving = true
UserDefaults.standard.set(position.location.x, forKey: "minAge")
print("x: \(position.location.x)")
}
.onEnded { position in
self.leftThumbMoving = false
}
)
.onAppear {
print("width: \(geo.frame(in: CoordinateSpace.local).width)")
}
Circle()
.foregroundColor(rightThumbMoving ? Color.orange.opacity(0.5) : Color.orange)
.position(x: CGFloat(self.maxAge), y: 0)
.frame(width: 25, height: 25)
.offset(x: 0, y: 15)
.gesture(
DragGesture()
.onChanged { position in
self.rightThumbMoving = true
UserDefaults.standard.set(position.location.x, forKey: "maxAge")
}
.onEnded { position in
self.rightThumbMoving = false
}
)
}
}
}
}
}
I'm trying to move to the next step, which is adjusting the formula so the range of the slider is between 18 and 65.
However the random x value is causing me problems. To give you an example, the first orange thumb below has an x value of -130:
Where exactly is this negative value coming from?
The 2nd thumb value is 60.
Here is the parent view if you're curious:
struct Settings: View {
let auth: UserAuth
init(auth: UserAuth) {
self.auth = auth
}
#AppStorage("minAge") var minAge: Double = 18
#AppStorage("maxAge") var maxAge: Double = 65
#State var showDeleteDialog = false
#State var deleteText: String = ""
var body: some View {
NavigationView {
Form {
Section {
Text(String(Int(minAge))).foregroundColor(.orange)
}
Section {
Text("Max age")
AgeSlider()
Text(String(Int(maxAge))).foregroundColor(.orange)
}
Section {
Text("Details")
Text("Gender: \(UserDefaults.standard.string(forKey: "gender")?.capitalizingFirstLetter() ?? "Unknown")").foregroundColor(.gray)
Text("Birthday: \(UserDefaults.standard.string(forKey: "birthday") ?? "Unknown")").foregroundColor(.gray)
}
Section {
Text("Account")
Button(action: { self.auth.goOffline() }){
Text("Logout")
}
NavigationLink(destination: DeleteAccount(auth: self.auth)){
Text("Delete Account")
}
}
}.navigationBarTitle(Text("Settings")).accentColor(Color.orange)
}.accentColor(.black)
}
}
The problem is the ZStack - which is throwing off the x value of its children.
By removing the parent ZStack - the child x values will then start from 0.
However if you need to keep the ZStack, an alternative fix is:
ZStack(alignment: .leading) - so the x value starts from the left of the ZStack container.

SwiftUI: top-anchoring resizable views in a scroll view

How do I anchor resizing views in a scrollview to the top-leading point so that when they grow, they grow downwards?
Context: I'm trying to make a scrollviews of views that I can resize in height by dragging a handle in the bottom of it up and down. My problem is that when it resizes, it resizes equally much up as down. I want the top to stay put and only adjust how far down it goes.
I don't think the problem lies with the scrollview, as the behaviour is the same if I replace it with a VStack. In the context of the scrollview, though, it resizing upwards makes the user not able to scroll up far enough to see the top of the view.
Full sample code follows under the screenshots. The issue is on both iPad and iPhone simulator
In the following screenshots, the scrollview is scrolled to the top in both. The first screenshot shows the start-state before resizing the topmost item
The second screenshot shows the state after resizing the topmost item - the topmost item now goes outside the list so we cannot see scroll up to see the top
Here follows the full code, runnable with Xcode 11.0, to show the issue
struct ScaleItem: View {
static let defaultHeight: CGFloat = 240.0
#State var heightDiff: CGFloat = 0.0
#State var currentHeight: CGFloat = ScaleItem.defaultHeight
var resizingButton: some View {
VStack {
VStack {
Spacer(minLength: 15)
HStack {
Spacer()
Image(systemName: "arrow.up.and.down.square")
.background(Color.white)
Spacer()
}
}
Spacer()
.frame(height: 11)
}
.background(Color.clear)
}
var body: some View {
ZStack {
VStack {
Spacer()
HStack {
Spacer()
Text("Sample")
Spacer()
}
Spacer()
}
.background(Color.red)
.overlay(
RoundedRectangle(cornerRadius: 5.0)
.strokeBorder(Color.black, lineWidth: 1.0)
.shadow(radius: 3.0)
)
.padding()
.frame(
minHeight: self.currentHeight + heightDiff,
idealHeight: self.currentHeight + heightDiff,
maxHeight: self.currentHeight + heightDiff,
alignment: .top
)
resizingButton
.gesture(
DragGesture()
.onChanged({ gesture in
print("Changed")
let location = gesture.location
let startLocation = gesture.startLocation
let deltaY = location.y - startLocation.y
self.heightDiff = deltaY
print(deltaY)
})
.onEnded { gesture in
print("Ended")
let location = gesture.location
let startLocation = gesture.startLocation
let deltaY = location.y - startLocation.y
self.currentHeight = max(ScaleItem.defaultHeight, self.currentHeight + deltaY)
self.heightDiff = 0
print(deltaY)
print(String(describing: gesture))
})
}
}
}
struct ScaleDemoView: View {
var body: some View {
ScrollView {
ForEach(0..<3) { _ in
ScaleItem()
}
}
}
}
One way to resolve this is to redraw the ScrollView to its original position during the dragging. Create an observer object and when your DeltaY will be changed, the parent view will be notified and the view will update accordingly.
First, Create an ObservableObject final class DeltaHeight: ObservableObject & pass to the child view.
Add .offset(x: 0, y: 0) to your ScrollView
Here is the tested code:
import SwiftUI
struct ScaleDemoView_Previews: PreviewProvider {
static var previews: some View {
ScaleDemoView()
}
}
struct ScaleItem: View {
#ObservedObject var delta: DeltaHeight
static let defaultHeight: CGFloat = 200.0
#State var heightDiff: CGFloat = 0.0
#State var currentHeight: CGFloat = ScaleItem.defaultHeight
var resizingButton: some View {
VStack {
VStack {
Spacer(minLength: 15)
HStack {
Spacer()
Image(systemName: "arrow.up.and.down.square")
.background(Color.white)
Spacer()
}
}
Spacer()
.frame(height: 11)
}
.background(Color.clear)
}
var body: some View {
ZStack {
VStack {
Spacer()
HStack {
Spacer()
Text("Sample")
Spacer()
}
Spacer()
}
.background(Color.red)
.overlay(
RoundedRectangle(cornerRadius: 5.0)
.strokeBorder(Color.black, lineWidth: 1.0)
.shadow(radius: 3.0)
)
.padding()
.frame(
minHeight: self.currentHeight + heightDiff,
idealHeight: self.currentHeight + heightDiff,
maxHeight: self.currentHeight + heightDiff,
alignment: .top
)
resizingButton
.gesture(
DragGesture()
.onChanged({ gesture in
print("Changed")
let location = gesture.location
let startLocation = gesture.startLocation
let deltaY = location.y - startLocation.y
self.heightDiff = deltaY
print("deltaY: ", deltaY)
self.delta.delta = deltaY
})
.onEnded { gesture in
print("Ended")
let location = gesture.location
let startLocation = gesture.startLocation
let deltaY = location.y - startLocation.y
self.currentHeight = max(ScaleItem.defaultHeight, self.currentHeight + deltaY)
self.heightDiff = 0
print(deltaY)
print(String(describing: gesture))
})
}
}
}
struct ScaleDemoView: View {
#ObservedObject var delta = DeltaHeight()
var body: some View {
ScrollView(.vertical) {
ForEach(0..<3) { _ in
ScaleItem(delta: self.delta)
}
}.offset(x: 0, y: 0)
.background(Color.green)
}
}
final class DeltaHeight: ObservableObject {
#Published var delta: CGFloat = 0.0
}

Resources