SwiftUI Custom Segmented Control (Multiline) - Payment Calculator Tutorial 4/6

Опубликовано: 11 Декабрь 2024
на канале: Paul Solt
73
2

Design a multiline Segmented Control that scrolls horizontally with animations. Users can use this control to select their loan durations and APR values in the calculator. Learn how to design a collection view like experience in SwiftUI. You'll use the LazyHStack and ForEach loop to bring the UI to life. Add polish to the UI by fading out options when scrolling has more content to the left or right using an Alpha Mask.
Download the full code: https://super-easy-apps.kit.com/swiftui
Watch the series:    • SwiftUI Tutorial - Payment Calculator...  

00:00 Custom Segemented Control Overview
03:45 Custom Control
14:30 Live Preview Formatting
17:03 PaymentSelector
21:21 LazyHStack and ForEach
26:48 Style the Divider
40:40 Background Outline
49:00 Animation FX - Alpha Mask at Edges
1:03:30 contentSize Diagram
1:08:58 Scrolling Fade Animation
1:14:55 Ready to Integrate

Download the full code: https://super-easy-apps.kit.com/swiftui
Design credit: https://dribbble.com/shots/5273790-Pa...
Download my timer: https://itunes.apple.com/us/app/super...

#swiftui #SegmentedControl #tutorial #CustomSelector #paymentselector #lazyhstack #foreach #customUI #uislider #coding #xcode #xcode16 #swiftuideveloper #swift #ios #iosdev #swiftuitutorial #iosdevelopment #iosdeveloper #pmt #pmtcalculator #loancalculator #paymentcalculatorswiftui