Related
I've implemented this wheel picker:
but I don't know how to change numbers' angulation according to wheel rotation, what should I do?
I would like to achieve this:
Numbers' rotation should be based on user's scroll(for example, every number should be in normal position when reaches the top)
This is the full code:
struct myVal : Equatable {
let id = UUID()
let val : String
}
enum Direction {
case left
case right
}
struct WheelView: View {
// Circle Radius
#State var radius : Double = 150
// Direction of swipe
#State var direction = Direction.left
// index of the number at the bottom of the circle
#State var chosenIndex = 0
// degree of circle and hue
#Binding var degree : Double
// #State var degree = 90.0
let array : [myVal]
let circleSize : Double
var body: some View {
ZStack {
let anglePerCount = Double.pi * 2.0 / Double(array.count)
let drag = DragGesture()
.onEnded { value in
if value.startLocation.x > value.location.x + 10 {
direction = .left
} else if value.startLocation.x < value.location.x - 10 {
direction = .right
}
//here I call the function to move the wheel
}
// MARK: WHEEL STACK - BEGINNING
ZStack {
ForEach(0 ..< array.count) { index in
let angle = Double(index) * anglePerCount
let xOffset = CGFloat(radius * cos(angle))
let yOffset = CGFloat(radius * sin(angle))
Text("\(array[index].val)")
.rotationEffect(Angle(degrees: -degree))
.offset(x: xOffset, y: yOffset )
}
}
.rotationEffect(Angle(degrees: degree))
.gesture(drag)
.onAppear() {
radius = circleSize/2 - 30 // 30 is for padding
}
// MARK: WHEEL STACK - END
}
}
}
You are calculating angle in radian. Set radians instead of degrees and add Double.pi/2.
Text("\(array[index].val)")
.rotationEffect(Angle(radians: angle + Double.pi/2)) // <== Here
Background
I'm following the excellent tutorial by Jean-Marc Boullianne on animating colour in change in swift. I would like to enhance this example by adding a slider that would allow me to control the animation speed. For that purpose I've defined the relevant UI elements in the ContentView.swift and I would like to use the values in the SplashView.swift that produces the animation.
Problem
The value that I'm attempting to pass via slider is disregarded and the animation keeps reproducing with the same default speed.
Code
ContentView.swift
A note: colours are defined in the assets catalogue for the purpose of example any values will do.
import SwiftUI
struct ContentView: View {
// Color variables for the animation
var colors: [Color] = [Color("AnimationColor1"),
Color("AnimationColor2"),
Color("AnimationColor3"),
Color("AnimationColor4")]
#State var index: Int = 0
#State var progress: CGFloat = 0
#State var animationDuration: Double = 0.5
var body: some View {
VStack {
SplashView(animationType: .leftToRight, color: self.colors[self.index])
.frame(width: 200, height: 100, alignment: .center)
.cornerRadius(10)
.shadow(color: Color("ShadowColor"), radius: 10, x: 0.0, y: 0.0)
Button(action: {
self.index = (self.index + 1) % self.colors.count
}, label: {
Text("Change Colour")
.padding(.top, 20)
})
Slider(value: $animationDuration, in: 0.0...1.0)
Text("Animation duration \(animationDuration)")
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
SplashView.swift
I understand that I'm using the #Binding wrong...
//
// SplashView.swift
// ColourChange
//
//
import SwiftUI
/**
Customer observable object
- Parameter color: The color to store
*/
class ColorStore: ObservableObject {
#Published var color: Color
init(color: Color) {
self.color = color
}
}
struct SplashView: View {
// This binds value from the slider option of the swift ui view
#Binding var animationDuration: Double
// Keeping track of the color: animation defaults as per tutorial
#State var layers: [(Color, CGFloat)] = [] // New Color & Progress
var animationType: SplashShape.SplashShapeAnimation
#State private var prevColor: Color // Background colour
#ObservedObject var colorStore: ColorStore
// Those init calls help to deal with the binding problem when the value is called
init(animationType: SplashShape.SplashShapeAnimation,
color: Color,
animationDuration: Binding<Double> = .constant(0.1)) {
self.animationType = animationType
self._prevColor = State<Color>(initialValue: color)
self.colorStore = ColorStore(color: color)
self._animationDuration = animationDuration
}
var body: some View {
// Need to display each layer as an overlay on the Rectangle inside the body variable
Rectangle()
.foregroundColor(self.prevColor) // Current color
// Displaying each layer on top of another
.overlay(
ZStack {
ForEach(layers.indices, id: \.self) { xLayer in
SplashShape(progress: self.layers[xLayer].1, animationType: self.animationType)
.foregroundColor(self.layers[xLayer].0)
}
}
)
.onReceive(self.colorStore.$color, perform: { color in
// Animate color update
self.layers.append((color, 0))
// Exclamation mark in variable calling is necessary to faciliate unwrapping
withAnimation(.easeInOut(duration: self.animationDuration)) {
self.layers[self.layers.count - 1].1 = 1.0
}
})
}
}
SplashShape.swift
For convenience, I have added SplashShape.swift file but that file doesn't differ from the original one available in the tutorial.
import SwiftUI
struct SplashShape: Shape {
public enum SplashShapeAnimation {
case leftToRight
case rightToLeft
}
var progress: CGFloat // Will take values between 0 and 1
var animationType: SplashShapeAnimation
var animatableData: CGFloat {
get { return progress }
set { self.progress = newValue }
}
func path(in rect: CGRect) -> Path {
// We return the correct path after deciding which type of animation is being used
switch animationType {
case .leftToRight:
return leftToRight(rect: rect)
case .rightToLeft:
return rightToLeft(rect: rect)
}
}
func leftToRight(rect: CGRect) -> Path {
var path = Path()
path.move(to: CGPoint(x: 0, y: 0)) // Top left corner
path.addLine(to: CGPoint(x: rect.width * progress, y: 0)) // Top Right
path.addLine(to: CGPoint(x: rect.width * progress, y: rect.height)) // Bottom right
path.addLine(to: CGPoint(x: 0, y: rect.height)) // Bottom Left
path.closeSubpath()
return path
}
func rightToLeft(rect: CGRect) -> Path {
var path = Path()
path.move(to: CGPoint(x: rect.width, y: 0))
path.addLine(to: CGPoint(x: rect.width - (rect.width * progress), y: 0))
path.addLine(to: CGPoint(x: rect.width - (rect.width * progress), y: rect.height))
path.addLine(to: CGPoint(x: rect.width, y: rect.height))
path.closeSubpath()
return path
}
}
In your example the animationDuration in SlashView is independent of the ContentView's animationDuration (that is bound to the Slider).
In other words: in your ContentView we do not find the animationDuration in the initialization of SplashView:
SplashView(animationType: .leftToRight, color: self.colors [self.index])
should be:
SplashView(animationType: .leftToRight, color: self.colors [self.index], animationDuration: $animationDuration)
But in reality, if the animationDuration variable is never changed in SplashView, then it shouldn't be declared with #Binding.
In this case you can :
Replace (in SplashView)
#Binding var animationDuration: Double
by
var animationDuration: Double
Change your custom init :
init(animationType: SplashShape.SplashShapeAnimation,
color: Color,
animationDuration: Double = 0.1) {
self.animationType = animationType
self._prevColor = State<Color>(initialValue: color)
self.colorStore = ColorStore(color: color)
self.animationDuration = animationDuration
}
Initialize SplashView(in ContentView), this way :
SplashView(animationType: .leftToRight, color: self.colors[self.index], animationDuration: animationDuration)
I'm trying to implement an animated pie chart in SwiftUI.
I noticed that my implementation has some glitches on iPad, specifically when the device is rotated.
As you can see, the pieces are not connected anymore when the device is rotated. Cause: The pieces update their frame size immediately.
I noticed that everything will work fine when drawingGroup() is used with the chart. Another possible approach is to set the frame of the chart explicitly with a .frame modifier (using GeometryReader for the size) and to animate the frame change with .animation(). However, those options are creating problems in the app switcher. When the app is closed and after that, the device is rotated, the preview of the app in the app switcher looks weird. The chart is not centered and the size is off as well:
So that's not an option unfortunately.
Also: The pie chart should have different sizes in portrait vs landscape mode (I simulated that with a padding here). Moreover, I want to be able to animate all pieces of the pie chart individually (the start and end angle) just like in the current implementation.
Hope somebody has an idea how to fix this. Thanks so much for answering!
import SwiftUI
struct ContentView: View {
#ObservedObject var model = CellModel.sharedInstance
var body: some View {
PieChart(dataModel: $model.sample)
//.drawingGroup()
.aspectRatio(1, contentMode: .fit)
.padding()
.padding(.vertical, 200)
}
}
struct PieChart: View {
#Binding var dataModel: [ChartEntry]
var body: some View {
ZStack{
ForEach(dataModel) { elem in
PieChartWrapper(elem: elem)
}
}
}
}
struct PieChartWrapper: View {
#ObservedObject var elem: ChartEntry
var body: some View {
PieChartCell(start: elem.startAngle, end: elem.endAngle)
.foregroundColor(elem.color)
}
}
let chartCoverage: CGFloat = 0.7
struct PieChartCell: Shape {
var start: Double
var end: Double
var animatableData: AnimatablePair<Double, Double> {
get { .init(start, end) }
set {
start = newValue.first
end = newValue.second
}
}
func path(in rect: CGRect) -> Path {
var p = Path()
let center = CGPoint(x: rect.size.width/2, y: rect.size.width/2)
let radius = rect.size.width/2
let startAngle = Angle(degrees: start)
let endAngle = Angle(degrees: end)
let width = radius * chartCoverage
p.addArc(center: center, radius: abs(width - radius), startAngle: startAngle, endAngle: endAngle, clockwise: false)
p.addArc(center: center, radius: radius, startAngle: endAngle, endAngle: startAngle, clockwise: true)
p.closeSubpath()
return p
}
}
class CellModel: ObservableObject {
static let sharedInstance = CellModel()
#Published var sample = [ChartEntry(color: .red), ChartEntry(color: .yellow), ChartEntry(color: .green)] {
didSet{
calcAngles()
}
}
private init() {
calcAngles()
}
private func calcAngles() {
for elem in sample {
withAnimation() {
elem.startAngle = getStartAngle(elem: elem, dataModel: sample)
elem.endAngle = getEndAngle(elem: elem, dataModel: sample)
}
}
}
private func getStartAngle(elem: ChartEntry, dataModel: [ChartEntry]) -> Double {
return 360 * (Double(dataModel.firstIndex(of: elem) ?? 0) / Double(dataModel.count))
}
private func getEndAngle(elem: ChartEntry, dataModel: [ChartEntry]) -> Double {
return 360 * (Double((dataModel.firstIndex(of: elem) ?? 0) + 1) / Double(dataModel.count))
}
}
class ChartEntry: Identifiable, Equatable, ObservableObject{
static func == (lhs: ChartEntry, rhs: ChartEntry) -> Bool {
lhs.id == rhs.id
}
var id = UUID()
var color: Color
#Published var startAngle: Double = 360
#Published var endAngle: Double = 360
init(color: Color) {
self.color = color
}
}
How would I add draggable separator lines between Views or UIViews using purely SwiftUI. Is it even possible with SwiftUI, or would I have to fall back on UIKit?
Example screens with separators:
I can't find this kind of stuff in the SwiftUI documentation. Even just enough info to do the top-left two-pane example would be useful.
(Similar questions have been asked here and here , but these are 5 and 7 years old, and deal with Objective-C / UIKit, not Swift / SwiftUI)
Here is a sample that allows horizontal and vertical resizing using grips. Dragging the purple grip resizes horizontally and the orange grip vertically. Both vertical and horizontal sizes are bounded by device resolution. The red pane is always visible, but the grips and other panes can be hidden using a toggle. There is also a reset button to restore, it is only visible when the original state changes. There are other tidbits that are useful and commented inline.
// Resizable panes, red is always visible
struct PanesView: View {
static let startWidth = UIScreen.main.bounds.size.width / 6
static let startHeight = UIScreen.main.bounds.size.height / 5
// update drag width when the purple grip is dragged
#State private var dragWidth : CGFloat = startWidth
// update drag height when the orange grip is dragged
#State private var dragHeight : CGFloat = startHeight
// remember show/hide green and blue panes
#AppStorage("show") var show : Bool = true
// keeps the panes a reasonable size based on device resolution
var minWidth : CGFloat = UIScreen.main.bounds.size.width / 6
let minHeight : CGFloat = UIScreen.main.bounds.size.height / 5
// purple and orange grips are this thick
let thickness : CGFloat = 9
// computed property that shows resize when appropriate
var showResize : Bool {
dragWidth != PanesView.startWidth || dragHeight != PanesView.startHeight
}
// use computed properties to keep the body tidy
var body: some View {
HStack(spacing: 0) {
redPane
// why two show-ifs? the animated one chases the non-animated and adds visual interest
if show {
purpleGrip
}
if show { withAnimation {
VStack(spacing: 0) {
greenPane
orangeGrip
Color.blue.frame(height: dragHeight) // blue pane
}
.frame(width: dragWidth)
} }
}
}
var redPane : some View {
ZStack(alignment: Alignment(horizontal: .trailing, vertical: .top)) {
Color.red
// shows and hides the green and blue pane, both grips
Toggle(isOn: $show.animation(), label: {
// change icon depending on toggle position
Image(systemName: show ? "eye" : "eye.slash")
.font(.title)
.foregroundColor(.primary)
})
.frame(width: 100)
.padding()
}
}
var purpleGrip : some View {
Color.purple
.frame(width: thickness)
.gesture(
DragGesture()
.onChanged { gesture in
let screenWidth = UIScreen.main.bounds.size.width
// the framework feeds little deltas as the drag continues updating state
let delta = gesture.translation.width
// make sure drag width stays bounded
dragWidth = max(dragWidth - delta, minWidth)
dragWidth = min(screenWidth - thickness - minWidth, dragWidth)
}
)
}
var greenPane : some View {
ZStack(alignment: Alignment(horizontal: .center, vertical: .top)) {
Color.green
// reset to original size
if showResize { withAnimation {
Button(action: { withAnimation {
dragWidth = UIScreen.main.bounds.size.width / 6
dragHeight = UIScreen.main.bounds.size.height / 5
} }, label: {
Image(systemName: "uiwindow.split.2x1")
.font(.title)
.foregroundColor(.primary)
.padding()
})
.buttonStyle(PlainButtonStyle())
}}
}
}
var orangeGrip : some View {
Color.orange
.frame(height: thickness)
.gesture(
DragGesture()
.onChanged { gesture in
let screenHeight = UIScreen.main.bounds.size.height
let delta = gesture.translation.height
dragHeight = max(dragHeight - delta, minHeight)
dragHeight = min(screenHeight - thickness - minHeight, dragHeight)
}
)
}
}
I decided to do a more SwiftUI-like approach. It can be any size so it is not fixed to the whole screen size. It can be called like this:
import SwiftUI
import ViewExtractor
struct ContentView: View {
var body: some View {
SeparatedStack(.vertical, ratios: [6, 4]) {
SeparatedStack(.horizontal, ratios: [2, 8]) {
Text("Top left")
Text("Top right")
}
SeparatedStack(.horizontal) {
Text("Bottom left")
Text("Bottom middle")
Text("Bottom right")
}
}
}
}
Result:
Code (read notes below):
// MARK: Extensions
extension Array {
subscript(safe index: Int) -> Element? {
guard indices ~= index else { return nil }
return self[index]
}
}
extension View {
#ViewBuilder func `if`<Output: View>(_ condition: Bool, transform: #escaping (Self) -> Output, else: #escaping (Self) -> Output) -> some View {
if condition {
transform(self)
} else {
`else`(self)
}
}
}
// MARK: Directional layout
enum Axes {
case horizontal
case vertical
}
private struct EitherStack<Content: View>: View {
let axes: Axes
let content: () -> Content
var body: some View {
switch axes {
case .horizontal: HStack(spacing: 0, content: content)
case .vertical: VStack(spacing: 0, content: content)
}
}
}
// MARK: Stacks
struct SeparatedStack: View {
static let dividerWidth: CGFloat = 5
static let minimumWidth: CGFloat = 20
private let axes: Axes
private let ratios: [CGFloat]?
private let views: [AnyView]
init<Views>(_ axes: Axes, ratios: [CGFloat]? = nil, #ViewBuilder content: TupleContent<Views>) {
self.axes = axes
self.ratios = ratios
views = ViewExtractor.getViews(from: content)
}
var body: some View {
GeometryReader { geo in
Color.clear
.overlay(SeparatedStackInternal(views: views, geo: geo, axes: axes, ratios: ratios))
}
}
}
// MARK: Stacks (internal)
private struct SeparatedStackInternal: View {
private struct GapBetween: Equatable {
let gap: CGFloat
let difference: CGFloat?
static func == (lhs: GapBetween, rhs: GapBetween) -> Bool {
lhs.gap == rhs.gap && lhs.difference == rhs.difference
}
}
#State private var dividerProportions: [CGFloat]
#State private var lastProportions: [CGFloat]
private let views: [AnyView]
private let geo: GeometryProxy
private let axes: Axes
init(views: [AnyView], geo: GeometryProxy, axes: Axes, ratios: [CGFloat]?) {
self.views = views
self.geo = geo
self.axes = axes
// Set initial proportions
if let ratios = ratios {
guard ratios.count == views.count else {
fatalError("Mismatching ratios array size. Should be same length as number of views.")
}
let total = ratios.reduce(0, +)
var proportions: [CGFloat] = []
for index in 0 ..< ratios.count - 1 {
let ratioTotal = ratios.prefix(through: index).reduce(0, +)
proportions.append(ratioTotal / total)
}
_dividerProportions = State(initialValue: proportions)
_lastProportions = State(initialValue: proportions)
} else {
let range = 1 ..< views.count
let new = range.map { index in
CGFloat(index) / CGFloat(views.count)
}
_dividerProportions = State(initialValue: new)
_lastProportions = State(initialValue: new)
}
}
var body: some View {
EitherStack(axes: axes) {
ForEach(views.indices) { index in
if index != 0 {
Color.gray
.if(axes == .horizontal) {
$0.frame(width: SeparatedStack.dividerWidth)
} else: {
$0.frame(height: SeparatedStack.dividerWidth)
}
}
let gapAtIndex = gapBetween(index: index)
views[index]
.if(axes == .horizontal) {
$0.frame(maxWidth: gapAtIndex.gap)
} else: {
$0.frame(maxHeight: gapAtIndex.gap)
}
.onChange(of: gapAtIndex) { _ in
if let difference = gapBetween(index: index).difference {
if dividerProportions.indices ~= index - 1 {
dividerProportions[index - 1] -= difference / Self.maxSize(axes: axes, geo: geo)
lastProportions[index - 1] = dividerProportions[index - 1]
}
}
}
}
}
.overlay(overlay(geo: geo))
}
#ViewBuilder private func overlay(geo: GeometryProxy) -> some View {
ZStack {
ForEach(dividerProportions.indices) { index in
Color(white: 0, opacity: 0.0001)
.if(axes == .horizontal) { $0
.frame(width: SeparatedStack.dividerWidth)
.position(x: lastProportions[index] * Self.maxSize(axes: axes, geo: geo))
} else: { $0
.frame(height: SeparatedStack.dividerWidth)
.position(y: lastProportions[index] * Self.maxSize(axes: axes, geo: geo))
}
.gesture(
DragGesture()
.onChanged { drag in
let translation = axes == .horizontal ? drag.translation.width : drag.translation.height
let currentPosition = lastProportions[index] * Self.maxSize(axes: axes, geo: geo) + translation
let offset = SeparatedStack.dividerWidth / 2 + SeparatedStack.minimumWidth
let minPos = highEdge(of: lastProportions, index: index - 1) + offset
let maxPos = lowEdge(of: lastProportions, index: index + 1) - offset
let newPosition = min(max(currentPosition, minPos), maxPos)
dividerProportions[index] = newPosition / Self.maxSize(axes: axes, geo: geo)
}
.onEnded { drag in
lastProportions[index] = dividerProportions[index]
}
)
}
}
.if(axes == .horizontal) {
$0.offset(y: geo.size.height / 2)
} else: {
$0.offset(x: geo.size.width / 2)
}
}
private static func maxSize(axes: Axes, geo: GeometryProxy) -> CGFloat {
switch axes {
case .horizontal: return geo.size.width
case .vertical: return geo.size.height
}
}
private func gapBetween(index: Int) -> GapBetween {
let low = lowEdge(of: dividerProportions, index: index)
let high = highEdge(of: dividerProportions, index: index - 1)
let gap = max(low - high, SeparatedStack.minimumWidth)
let difference = gap == SeparatedStack.minimumWidth ? SeparatedStack.minimumWidth - low + high : nil
return GapBetween(gap: gap, difference: difference)
}
private func lowEdge(of proportions: [CGFloat], index: Int) -> CGFloat {
var edge: CGFloat { proportions[index] * Self.maxSize(axes: axes, geo: geo) - SeparatedStack.dividerWidth / 2 }
return proportions[safe: index] != nil ? edge : Self.maxSize(axes: axes, geo: geo)
}
private func highEdge(of proportions: [CGFloat], index: Int) -> CGFloat {
var edge: CGFloat { proportions[index] * Self.maxSize(axes: axes, geo: geo) + SeparatedStack.dividerWidth / 2 }
return proportions[safe: index] != nil ? edge : 0
}
}
Note: this uses my GeorgeElsham/ViewExtractor for the ability to pass in #ViewBuilder content, rather than just an array of views. This part is not necessary, however I recommend it because it makes the code readable and more SwiftUI-like.
Here is what I have been using. I have a generic SplitView with a primary (P) and secondary (V) view created using ViewBuilders. The fraction identifies the ratio of primary to secondary width or height at open. I use secondaryHidden to force the primary to full width modulo half of the visibleThickness of the Splitter. The invisibleThickness is the grabbable width/height for the Splitter. The SizePreferenceKey is used with a GeometryReader on a clear background to capture the overallSize of the SplitView so that the fraction can be applied properly.
fileprivate struct SplitView<P: View, S: View>: View {
private let layout: Layout
private let zIndex: Double
#Binding var fraction: CGFloat
#Binding var secondaryHidden: Bool
private let primary: P
private let secondary: S
private let visibleThickness: CGFloat = 2
private let invisibleThickness: CGFloat = 30
#State var overallSize: CGSize = .zero
#State var primaryWidth: CGFloat?
#State var primaryHeight: CGFloat?
var hDrag: some Gesture {
// As we drag the Splitter horizontally, adjust the primaryWidth and recalculate fraction
DragGesture()
.onChanged { gesture in
primaryWidth = gesture.location.x
fraction = gesture.location.x / overallSize.width
}
}
var vDrag: some Gesture {
// As we drag the Splitter vertically, adjust the primaryHeight and recalculate fraction
DragGesture()
.onChanged { gesture in
primaryHeight = gesture.location.y
fraction = gesture.location.y / overallSize.height
}
}
enum Layout: CaseIterable {
/// The orientation of the primary and seconday views (e.g., Vertical = VStack, Horizontal = HStack)
case Horizontal
case Vertical
}
var body: some View {
ZStack(alignment: .topLeading) {
switch layout {
case .Horizontal:
// When we init the view, primaryWidth is nil, so we calculate it from the
// fraction that was passed-in. This lets us specify the location of the Splitter
// when we instantiate the SplitView.
let pWidth = primaryWidth ?? width()
let sWidth = overallSize.width - pWidth - visibleThickness
primary
.frame(width: pWidth)
secondary
.frame(width: sWidth)
.offset(x: pWidth + visibleThickness, y: 0)
Splitter(orientation: .Vertical, visibleThickness: visibleThickness)
.frame(width: invisibleThickness, height: overallSize.height)
.position(x: pWidth + visibleThickness / 2, y: overallSize.height / 2)
.zIndex(zIndex)
.gesture(hDrag, including: .all)
case .Vertical:
// When we init the view, primaryHeight is nil, so we calculate it from the
// fraction that was passed-in. This lets us specify the location of the Splitter
// when we instantiate the SplitView.
let pHeight = primaryHeight ?? height()
let sHeight = overallSize.height - pHeight - visibleThickness
primary
.frame(height: pHeight)
secondary
.frame(height: sHeight)
.offset(x: 0, y: pHeight + visibleThickness)
Splitter(orientation: .Horizontal, visibleThickness: visibleThickness)
.frame(width: overallSize.width, height: invisibleThickness)
.position(x: overallSize.width / 2, y: pHeight + visibleThickness / 2)
.zIndex(zIndex)
.gesture(vDrag, including: .all)
}
}
.background(GeometryReader { geometry in
// Track the overallSize using a GeometryReader on the ZStack that contains the
// primary, secondary, and splitter
Color.clear
.preference(key: SizePreferenceKey.self, value: geometry.size)
.onPreferenceChange(SizePreferenceKey.self) {
overallSize = $0
}
})
.contentShape(Rectangle())
}
init(layout: Layout, zIndex: Double = 0, fraction: Binding<CGFloat>, secondaryHidden: Binding<Bool>, #ViewBuilder primary: (()->P), #ViewBuilder secondary: (()->S)) {
self.layout = layout
self.zIndex = zIndex
_fraction = fraction
_primaryWidth = State(initialValue: nil)
_primaryHeight = State(initialValue: nil)
_secondaryHidden = secondaryHidden
self.primary = primary()
self.secondary = secondary()
}
private func width() -> CGFloat {
if secondaryHidden {
return overallSize.width - visibleThickness / 2
} else {
return (overallSize.width * fraction) - (visibleThickness / 2)
}
}
private func height() -> CGFloat {
if secondaryHidden {
return overallSize.height - visibleThickness / 2
} else {
return (overallSize.height * fraction) - (visibleThickness / 2)
}
}
}
fileprivate struct SizePreferenceKey: PreferenceKey {
static var defaultValue: CGSize = .zero
static func reduce(value: inout CGSize, nextValue: () -> CGSize) {
value = nextValue()
}
}
With the filePrivate SplitView in place, I use HSplitView and VSplitView as the public entry points.
/// A view containing a primary view and a secondary view layed-out vertically and separated by a draggable horizontally-oriented Splitter
///
/// The primary view is above the secondary view.
struct VSplitView<P: View, S: View>: View {
let zIndex: Double
#Binding var fraction: CGFloat
#Binding var secondaryHidden: Bool
let primary: ()->P
let secondary: ()->S
var body: some View {
SplitView(layout: .Vertical, zIndex: zIndex, fraction: $fraction, secondaryHidden: $secondaryHidden, primary: primary, secondary: secondary)
}
init(zIndex: Double = 0, fraction: Binding<CGFloat>, secondaryHidden: Binding<Bool>? = nil, #ViewBuilder primary: #escaping (()->P), #ViewBuilder secondary: #escaping (()->S)) {
self.zIndex = zIndex
_fraction = fraction
_secondaryHidden = secondaryHidden ?? .constant(false)
self.primary = primary
self.secondary = secondary
}
}
/// A view containing a primary view and a secondary view layed-out horizontally and separated by a draggable vertically-oriented Splitter
///
/// The primary view is to the left of the secondary view.
struct HSplitView<P: View, S: View>: View {
let zIndex: Double
#Binding var fraction: CGFloat
#Binding var secondaryHidden: Bool
let primary: ()->P
let secondary: ()->S
var body: some View {
SplitView(layout: .Horizontal, fraction: $fraction, secondaryHidden: $secondaryHidden, primary: primary, secondary: secondary)
}
init(zIndex: Double = 0, fraction: Binding<CGFloat>, secondaryHidden: Binding<Bool>? = nil, #ViewBuilder primary: #escaping (()->P), #ViewBuilder secondary: #escaping (()->S)) {
self.zIndex = zIndex
_fraction = fraction
_secondaryHidden = secondaryHidden ?? .constant(false)
self.primary = primary
self.secondary = secondary
}
}
The Splitter is a ZStack with a visible RoundedRectangle with visibleThickness on top of a clear Color with invisibleThickness.
/// The Splitter that separates the primary from secondary views in a SplitView.
struct Splitter: View {
private let orientation: Orientation
private let color: Color
private let inset: CGFloat
private let visibleThickness: CGFloat
private var invisibleThickness: CGFloat
enum Orientation: CaseIterable {
/// The orientation of the Divider itself.
/// Thus, use Horizontal in a VSplitView and Vertical in an HSplitView
case Horizontal
case Vertical
}
var body: some View {
ZStack(alignment: .center) {
switch orientation {
case .Horizontal:
Color.clear
.frame(height: invisibleThickness)
.padding(0)
RoundedRectangle(cornerRadius: visibleThickness / 2)
.fill(color)
.frame(height: visibleThickness)
.padding(EdgeInsets(top: 0, leading: inset, bottom: 0, trailing: inset))
case .Vertical:
Color.clear
.frame(width: invisibleThickness)
.padding(0)
RoundedRectangle(cornerRadius: visibleThickness / 2)
.fill(color)
.frame(width: visibleThickness)
.padding(EdgeInsets(top: inset, leading: 0, bottom: inset, trailing: 0))
}
}
.contentShape(Rectangle())
}
init(orientation: Orientation, color: Color = .gray, inset: CGFloat = 8, visibleThickness: CGFloat = 2, invisibleThickness: CGFloat = 30) {
self.orientation = orientation
self.color = color
self.inset = inset
self.visibleThickness = visibleThickness
self.invisibleThickness = invisibleThickness
}
}
Here's an example. One additional note is that I had to use zIndex for the Splitter when SplitViews contained other SplitViews that contain other SplitViews. This is because the because the overlap of the multiple Splitters with the primary/secondary of adjacent views prevents the drag gesture from being detected. It's not necessary to specify in simpler cases.
struct ContentView: View {
var body: some View {
HSplitView(
zIndex: 2,
fraction: .constant(0.5),
primary: { Color.red },
secondary: {
VSplitView(
zIndex: 1,
fraction: .constant(0.5),
primary: { Color.blue },
secondary: {
HSplitView(
zIndex: 0,
fraction: .constant(0.5),
primary: { Color.green },
secondary: { Color.yellow }
)
}
)
}
)
}
}
And the result...
First off, my appologies for the unconventional title of this post, but I don't know of any way to describe the behavior any better than that.
To reproduce this problem, create a new project in xCode 12 specifying IOS App with any name and **Interface:**SwiftUI, Life Cycle: SwiftUI App, Language: Swift. Then replace all of Content View with the code listed here.
In either Live Preview, or when running the app, a click on the Poly will trigger the animation. It should move a fraction of a pixel, and do a 1/3 turn (as the angle is in radians).
The problem, as noted on line 37 is that when I try to move or turn the Poly, it goes crazy, multiplying any move by much greater amounts. The color animates fine, but the Animatable properties in the shape do not. The location starts at 200,200 with an angle of 0, and if you try to move it very close, as the sample code does, it overreacts. If you try to move it only a few pixes (say 190,190) it will fly off the screen.
I have not had this happen to any other animations I have done, and have no idea why this is behaving this way.
In trying to debug this, at one point I put print statements on the animatableData getters and setters, and can make no sense of what the animation engine is doing to the variables. It just seems to pick a number that is much further from the source that the value I am asking it to go to.
I am confident that the trig in the path is correct, and suspect the issue lies in one of the following:
My declaration of animatableData somehow
The withAnimation function in the gesture
An issue with animating a CGFloat
SwiftUI is just going crazy
I am running Xcode 12.1 (12A7403) and Swift 5. After many hours of trying to figure this out, I humbly present my problem here. Help me Obiwan Kenobi, you are my only hope...
import SwiftUI
let twoPi:CGFloat = CGFloat.pi * 2
let pi = CGFloat.pi
class Poly: ObservableObject, Identifiable {
#Published var location:CGPoint
#Published var color:Color
var sides:CGFloat
var vertexRadius:CGFloat
var angle:CGFloat
init(at:CGPoint, color:Color, sides:CGFloat, radius:CGFloat, angle:CGFloat=0) {
self.location = at
self.color = color
self.sides = sides
self.vertexRadius = radius
self.angle = angle
}
}
struct ContentView: View {
#ObservedObject var poly:Poly = Poly(at: CGPoint(x:200,y:200), color: .green, sides: 6, radius: 100)
var body: some View {
PolyShape(poly: poly)
.fill(poly.color)
.gesture(
DragGesture(minimumDistance: 0, coordinateSpace: .local)
.onEnded { gesture in
withAnimation(.easeInOut(duration:15)) {
//This is what doesn't work.
//Try to nudge it a fraction of a pixel, and do only 1/3 of a turn, and it spins and moves much further.
poly.location.x = 200.4
poly.location.y = 200.2
poly.angle = twoPi / 3
poly.color = .red
}
}
)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
Group {
ContentView(poly: Poly(at: CGPoint(x:200,y:200), color: .blue, sides: 3, radius: 100))
}
}
}
struct PolyShape:Shape {
var poly:Poly
public var animatableData: AnimatablePair<CGFloat, AnimatablePair<CGFloat,CGFloat>> {
get { AnimatablePair(poly.angle, AnimatablePair(poly.location.x, poly.location.y))
}
set {
poly.angle = newValue.first
poly.location.x = newValue.second.first
poly.location.y = newValue.second.second
}
}
func path(in rect: CGRect) -> Path {
var path = Path()
var radial:CGFloat = 0.5
while radial < twoPi + 0.5 {
let radialAngle = twoPi / poly.sides * radial + poly.angle
let newX = poly.location.x + cos(radialAngle) * poly.vertexRadius
let newY = poly.location.y + sin(radialAngle) * poly.vertexRadius
if radial == 0.5 {
path.move(to: CGPoint(x: newX, y: newY))
} else {
path.addLine(to: CGPoint(x: newX, y: newY))
}
radial += 1
}
return path
}
}
You need to separate model from view model, because to have PolyShape correctly work in your case the input data have to be a value.
Here is tested solution (Xcode 12 / iOS 14)
Separate model and view model
class Poly: ObservableObject, Identifiable {
#Published var data:PolyData
init(data: PolyData) {
self.data = data
}
}
struct PolyData {
var location:CGPoint
var color:Color
var sides:CGFloat
var vertexRadius:CGFloat
var angle:CGFloat
init(at:CGPoint, color:Color, sides:CGFloat, radius:CGFloat, angle:CGFloat=0) {
self.location = at
self.color = color
self.sides = sides
self.vertexRadius = radius
self.angle = angle
}
}
Make shape value dependent
struct PolyShape:Shape {
var poly:PolyData // << here !!
// ... other code no changes
}
Update dependent demo
struct ContentView: View {
#ObservedObject var poly:Poly = Poly(data: PolyData(at: CGPoint(x:200,y:200), color: .green, sides: 6, radius: 100))
var body: some View {
PolyShape(poly: poly.data) // << pass data only here !!
.fill(poly.data.color)
.gesture(
DragGesture(minimumDistance: 0, coordinateSpace: .local)
.onEnded { gesture in
withAnimation(.easeInOut(duration:15)) {
poly.data.location = CGPoint(x: 200.4, y: 200.2)
poly.data.angle = twoPi / 3
poly.data.color = .red
}
}
)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
Group {
ContentView(poly: Poly(data: PolyData(at: CGPoint(x:200,y:200), color: .blue, sides: 3, radius: 100)))
}
}
}
Can you give the following a try?
import SwiftUI
let twoPi:CGFloat = CGFloat.pi * 2
let pi = CGFloat.pi
struct ContentView: View {
#State var location: CGPoint = CGPoint(x: 200, y: 200)
#State var color: Color = .blue
#State var angle: CGFloat = 0
var body: some View {
PolyShape(location: location, color: color, angle: angle, sides: 3, vertexRadius: 100)
.fill(color)
.gesture(
DragGesture(minimumDistance: 0, coordinateSpace: .local)
.onEnded { gesture in
withAnimation(.easeInOut(duration:1)) {
//This is what doesn't work.
//Try to nudge it a fraction of a pixel, and do only 1/3 of a turn, and it spins and moves much further.
location.x = 220
location.y = 220
angle = (CGFloat.pi * 2) / 3
color = .red
}
}
)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
Group {
ContentView(location: CGPoint(x: 200, y: 200), color: .blue, angle: 0)
}
}
}
struct PolyShape:Shape {
var location: CGPoint
var color: Color
var angle: CGFloat
var sides: CGFloat
var vertexRadius: CGFloat
public var animatableData: AnimatablePair<CGFloat, AnimatablePair<CGFloat,CGFloat>> {
get {
return AnimatablePair(angle, AnimatablePair(location.x, location.y))
}
set {
angle = newValue.first
location.x = newValue.second.first
location.y = newValue.second.second
}
}
func path(in rect: CGRect) -> Path {
var path = Path()
var radial:CGFloat = 0.5
while radial < twoPi + 0.5 {
let radialAngle = twoPi / sides * radial + angle
let newX = location.x + cos(radialAngle) * vertexRadius
let newY = location.y + sin(radialAngle) * vertexRadius
if radial == 0.5 {
path.move(to: CGPoint(x: newX, y: newY))
} else {
path.addLine(to: CGPoint(x: newX, y: newY))
}
radial += 1
}
return path
}
}