SwiftUI Animated Sticky Header | Resizable Header | Scroll Velocity | Xcode 14

SwiftUI Animated Sticky Header | Resizable Header | Scroll Velocity | Xcode 14 | SwiftUI Tutorials

Рет қаралды 10,480

Күн бұрын

Hello Guys 🖐🖐🖐
In this Video I'm going to teach how to create Stylish Animated Sticky Resizable Header With Scroll Velocity Using SwiftUI | SwiftUI Sticky Header | SwiftUI Resizable Header | SwiftUI Scroll Velocity | SwiftUI ScrollView Offset | SwiftUI Complex Animations | SwiftUI Complex UI | SwiftUI Geometry Reader | SwiftUI Advanced Animations | Swift | SwiftUI Xcode 14 | SwiftUI for iOS 15 & iOS 16 | Xcode 14 SwiftUI.
#apple #swiftui #ios #xcode #animation #ui #ux #design
► Source Code: / early-access-14-82452445
► Subscribe For More: kzfaq.info?sub_c...
► For Apple Device MockUps: apps.apple.com/in/app/mockvie...
► Support Us
Patreon : / kavsoft
PayPal: www.paypal.com/paypalme/Kavso...
Contributions : donorbox.org/kavsoft
► My MacBook Specs
M1 MacBook Pro(16GB)
Xcode Version: 14.3
macOS Version: 13.3.1 Ventura
► Official Website: kavsoft.dev
For Any Queries: kavsoft.dev/#contact
► Social Platforms
Instagram: / _kavsoft
Twitter: / _kavsoft
► Timestamps
0:00 Intro
0:38 Project SetUp
1:10 Building Header View
6:30 Adding Sticky Animation
Thanks for watching
Make sure to like and Subscribe For More Content !!!

Пікірлер: 20

@Kavsoft Жыл бұрын

fileprivate extension View { func moveText(_ progress: CGFloat, _ headerHeight: CGFloat, _ minimumHeaderHeight: CGFloat) -> some View { self .hidden() .overlay { GeometryReader { proxy in let rect = proxy.frame(in: .global) let midY = rect.midY /// Half Scaled Text Height (Since Text Scaling will be 0.85 (1 - 0.15)) let halfScaledTextHeight = (rect.height * 0.85) / 2 /// Profile Image let profileImageHeight = (headerHeight * 0.5) /// Since Image Scaling will be 0.3 (1 - 0.7) let scaledImageHeight = profileImageHeight * 0.3 let halfScaledImageHeight = scaledImageHeight / 2 /// Applied VStack Spacing is 15 /// 15 / 0.3 = 4.5 (0.3 -> Image Scaling) let vStackSpacing: CGFloat = 4.5 let resizedOffsetY = (midY - (minimumHeaderHeight - halfScaledTextHeight - vStackSpacing - halfScaledImageHeight)) self .scaleEffect(1 - (progress * 0.15)) .offset(y: -resizedOffsetY * progress) } } } }

@coderkrishna8990 Жыл бұрын

Why not a github gist ?

@TheCstriker Жыл бұрын

3:43 maybe add recursive mechanism to go up the chain of superviews until you find the scrollview instead of manually accessing it 3 times, this way if you add a modifier nothing will break

@laurentbennis Жыл бұрын

Brilliant has always :)

@andrejkling3886 Жыл бұрын

Cool achievement 💫👏

@yahyabn1223 Жыл бұрын

that's cool😁

@dongka195 8 ай бұрын

The animate Profile View algorithm makes me quite confused. Are there any specific sources that talk about how to do so?

@preetibasil682 2 ай бұрын

Instead of a list, I am using text in the body. It is a long text. My header is not sticking to the minimum length and scrolling of text is happening on the whole page. Kindly guide

@Patresko-SVK Жыл бұрын

How do you achieve scaleEffect not to side, but only to top like in native contact app?

@vittyfiorentini238 Жыл бұрын

Hi, updating xcode to 14.3 i receive the log "[PipelineLibrary] Mapping the pipeline data cache failed, errno22" when adding the MapView in the viewcontroller. I Receive this error only when i test on a real device not in the simulator. Can i fix it ? Is a common problem? Thanks for the time I appreciate so much.

@matva258 5 ай бұрын

This works great however, a concern arises when there are too few cells to permit the header to shrink to its intended size. In such cases, the image also fails to reach the desired position and ends up only moving partially. Do you have any ideas on how to address this issue?

@pbking3 Жыл бұрын

Hello, if you have used macOS in the system.. does your letest Xcode in PC open the correct simulator or not(macos ventura, xcode 14.2)

@Kavsoft Жыл бұрын

I didn’t had any issues with simulators.

@pbking3 Жыл бұрын

@@Kavsoft you have used hackintosh?

@DurgaViswanadhNemala 3 ай бұрын

How can i get this same effect in swift?

@AkimboFennec Жыл бұрын

One very annoying thing is that you still use UIKit for this. Why is it imposible to extract the scroll offset using pure SwiftUI?

@Kavsoft Жыл бұрын

We can use GeometryReader for fetching the scroll offset, but there is no way to obtain its velocity or other scroll properties natively using SwiftUI. I’m awaiting WWDC 23 for advancements on SwiftUI scrollview.BTW, I actually extracted the embedded UIScrollView from the SwiftUI scroll view.

@AkimboFennec 8 ай бұрын

@@KavsoftDId ScrollView enhancements of WWDC 2023 add enough things to do this purely in SwiftUI ?

@kdtechniquesofficial6153 5 ай бұрын

This is too easy, create a scroll view like on the Twitter Profile view where it has vertical(parent), (horizontal+vertical)(child) scroll views.

@Harsh-uq2js 11 ай бұрын

Converted it to pure SwiftUI using `struct StickyScrollTargetBehavior: ScrollTargetBehavior { var onDraggingEnd: (CGFloat, CGFloat) -> () func updateTarget(_ target: inout ScrollTarget, context: TargetContext) { let offset = target.rect.origin.y let velocity = context.velocity.dy onDraggingEnd(offset, velocity) } }`