Skip to content

Instantly share code, notes, and snippets.

@CodeSlicing
Last active December 26, 2020 10:16
Show Gist options
  • Save CodeSlicing/e3cb4949d0f8a8f68e11a44b784f10f5 to your computer and use it in GitHub Desktop.
Save CodeSlicing/e3cb4949d0f8a8f68e11a44b784f10f5 to your computer and use it in GitHub Desktop.
Source for part 2 of large sticky toggles CodeSlicing episode
//
// StickyTogglePhase2.swift
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
// of the Software, and to permit persons to whom the Software is furnished to do so,
// subject to the following conditions:
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
// INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
// PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
// AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
// Created by Adam Fordyce on 15/12/2020.
// Copyright © 2020 Adam Fordyce. All rights reserved.
//
import SwiftUI
import PureSwiftUI
private let toggleLayoutConfig = LayoutGuideConfig.grid(columns: 10, rows: 10)
private struct StickyToggle: View {
let size: CGFloat
let stickyThreshold: CGFloat
@State private var atTop = true
@State private var yTranslation = CGFloat.zero
@State private var halfScreenHeight = CGFloat.zero
@State private var offsetAtBottom = CGFloat.zero
private var validTranslation: Bool {
(atTop && yTranslation > 0) || (!atTop && yTranslation < 0)
}
private var offsetForTranslation: CGFloat {
guard validTranslation else {
return 0
}
return yTranslation
}
var body: some View {
let designing = false
let debug = true
GeometryReader { (geo: GeometryProxy) in
ZStack {
VStack {
StretchableSquare(stretchFactor: 0, isTop: false, designing: designing)
.toggleStyle(color: .green, designing: designing)
.frame(size)
.yOffset(offsetForTranslation)
.yOffsetIfNot(atTop, offsetAtBottom)
.shadowIfNot(designing, radius: 10)
.layoutGuide(toggleLayoutConfig)
.showLayoutGuides(designing)
.gesture(DragGesture(minimumDistance: 0)
.onChanged(onChanged)
.onEnded(onEnded))
Spacer()
}
.onAppear {
halfScreenHeight = geo.heightScaled(0.5)
offsetAtBottom = geo.height - size
}
if debug && !designing {
TitleText("atTop: \(atTop)")
}
}
.greedyFrame()
}
}
private func isTopHalf(_ gesture: DragGesture.Value) -> Bool {
gesture.location.y <= halfScreenHeight
}
private func onChanged(_ gesture: DragGesture.Value) {
yTranslation = gesture.translation.y
}
private func onEnded(_ gesture: DragGesture.Value) {
yTranslation = .zero
atTop = isTopHalf(gesture)
}
}
private extension Shape {
@ViewBuilder func toggleStyle(color: Color, designing: Bool = false) -> some View {
if designing {
stroke(Color.black, style: .init(lineWidth: 2, lineCap: .round, lineJoin: .round))
} else {
fill(color)
}
}
}
private struct StretchableSquare: Shape {
private let isTop: Bool
private let designing: Bool
var animatableData: CGFloat
init(stretchFactor: CGFloat, isTop: Bool, designing: Bool = false) {
animatableData = stretchFactor
self.isTop = isTop
self.designing = designing
}
func path(in rect: CGRect) -> Path {
var path = Path()
let g = toggleLayoutConfig.layout(in: rect)
.yScaled(-1, factor: isTop || designing ? 0 : 1)
let p1 = g.topLeading
let p2 = g.topTrailing
let cpToP3 = g[10, 1].to(g[6, 1], animatableData)
let p3 = g.bottomTrailing.to(g[6, 10], animatableData)
let p4 = g.bottomLeading.to(g[4, 10], animatableData)
let cpToP1 = g[0, 1].to(g[4, 1], animatableData)
path.move(p1)
path.line(p2)
path.quadCurve(p3, cp: cpToP3, showControlPoints: designing)
path.line(p4)
path.quadCurve(p1, cp: cpToP1, showControlPoints: designing)
return path
}
}
struct StickyTogglePhase2_Previews: PreviewProvider {
struct StickyTogglePhase2_Harness: View {
var body: some View {
GeometryReader { (geo: GeometryProxy) in
StickyToggle(size: geo.widthScaled(0.3), stickyThreshold: geo.heightScaled(0.3))
}
.ignoresSafeArea()
}
}
static var previews: some View {
StickyTogglePhase2_Harness()
.previewDevice(.iPhone_8_Plus)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment