iOS 17 Updates for SwiftUI — Part 2

In Part 1 of this blog series, we discussed the exciting new features introduced in iOS 17 and how they can enhance your SwiftUI app development. Building upon that foundation, let’s dive deeper into more iOS 17 features and explore their implementation in SwiftUI.

Let’s see the remaining topics.

Observable & Bindable

In this section, we’ll dive into the powerful features of Observable and Bindable in SwiftUI, which were introduced in the SwiftData framework. These features revolutionize the way we handle data flow and UI updates within our apps. By leveraging Observable and Bindable, we can effortlessly keep our views in sync with our data models, ensuring a reactive and dynamic user interface.

We’ll begin by exploring the concept of observable objects and how they enable us to track changes in data. Observable objects provide a convenient way to observe and react to any modifications in their properties. We’ll discuss how to define and use observable objects in our SwiftUI projects, allowing us to build responsive and data-driven interfaces.

import SwiftData

Now Swift Introduces @Observable to get rid of confirming viewmodel to ObservableObject and usage of @Published property wrappers. Here is an example of how to use this one.

@Observable //<------- @Observable wrapper
class Products{ //<------------ViewModel
    var PdtName: String = ""
    var isFav: Bool = false
}

struct Observable_BindingUpdates: View {
    @Bindable var products: Products = .init() //<---- @Bindable warpper
    var body: some View {
        VStack{
            TextField("My Product", text: $products.PdtName)
                .padding()
        }
    }
}

Now it’s easy na!

UnEvenRoundedRectangle

The UnevenRoundedRectangle is a custom SwiftUI shape that represents a rectangular shape with rounded corners, where each corner can have a different radius value. This shape is specifically designed to fit and align inside the frame of the view that contains it.

The UnevenRoundedRectangle allows for greater flexibility in creating visually appealing designs by enabling the customization of each corner’s curvature. This means that you can have rounded corners with varying radii, allowing for more dynamic and visually interesting shapes.

By using the UnevenRoundedRectangle shape, you can easily add unique and eye-catching elements to your SwiftUI views. Whether you want to create a card-style interface, a unique button, or any other creative design, the UnevenRoundedRectangle shape provides the necessary flexibility and customization options to achieve your desired visual outcome.

In summary, the UnevenRoundedRectangle is a powerful tool in SwiftUI that allows you to create rectangular shapes with rounded corners of different radii, enhancing the aesthetics and visual appeal of your app’s user interface.

I’ve just created this design using the the newly launched unevenrectangle view.

struct UnevenRoundedRectangles: View {
    var body: some View {
        VStack{
            HStack{
                UnevenRoundedRectangle(topLeadingRadius: 15, bottomLeadingRadius: 15, topTrailingRadius: 45)
                    .frame(width: 100, height: 100)
                    .foregroundColor(.teal)
                Rectangle()
                    .frame(width: 100, height: 100)
                    .foregroundColor(.purple)
                    .clipShape(.rect(topLeadingRadius: 45, bottomTrailingRadius: 15))
            }
            
            HStack{
                //Also we can have it like this
                Rectangle()
                    .frame(width: 100, height: 100)
                    .foregroundColor(.purple)
                    .clipShape(.rect(topLeadingRadius: 20, bottomTrailingRadius: 20))
                UnevenRoundedRectangle(bottomLeadingRadius: 15, bottomTrailingRadius: 15, topTrailingRadius: 45)
                    .frame(width: 100, height: 100)
                    .foregroundColor(.teal)
                
            }
            
        }
    }
}

Cool na?

Animated SFSymbols

And now we can animate SFSymbols. I really loved it.

Here is the implementation.

struct AnimatedSFImages: View {
    
    @State var isAnimate: Bool = false
    
    var body: some View {
        
        VStack{
            ZStack{
                Circle()
                    .frame(width: 80)
                    .foregroundColor(.yellow)
                Image(systemName: "heart.fill")
                    .font(.largeTitle)
                    .foregroundColor(.pink)
                    .symbolEffect(.bounce, value: isAnimate) //<---- here it is
                    .onTapGesture {
                        isAnimate.toggle()
                    }
            }
        }
    }
}

PhaseAnimator API

And finally here it is!.

The PhaseAnimator is a powerful container in SwiftUI that facilitates the animation of its content by automatically cycling through a collection of phases. Each phase represents a discrete step within the animation, allowing for smooth and controlled transitions between different states of the content.

With the PhaseAnimator, you can define a sequence of phases that represent the keyframes or intermediate steps of your animation. The animator will automatically handle the timing and progression between these phases, resulting in fluid and visually appealing animations.

By utilizing the PhaseAnimator, you can create dynamic and engaging user interfaces that respond to user interactions or other triggers. Whether you want to animate the appearance of elements, transition between different views, or add motion effects, the PhaseAnimator provides a convenient and efficient way to achieve these effects.

In summary, the PhaseAnimator in SwiftUI is a powerful tool for creating complex animations by automatically cycling through a collection of phases. It simplifies the process of defining and managing animations, allowing you to focus on creating captivating user experiences in your app.

But i don’t know why it is not working for my beta version Xcode.‼️

Just comment here whether my code is working for anyone!

struct PhaseAnimatorUpdate: View {
    @State var startAnimate: Bool = false
    var body: some View {
        VStack(spacing: 25.0){
            PhaseAnimator(ImageSet.allCases, trigger: startAnimate) { img in
                ZStack{
                    
                    Image(systemName: img.rawValue)
                        .font(.largeTitle)
                        .foregroundColor(.pink)
                }
            } animation: { img in
                switch img{
                case .heart:
                        .bouncy
                case .person:
                        .smooth(duration: 2, extraBounce: 1.0)
                case .home:
                        .bouncy
                case .phone:
                        .snappy
                }
            }
            
            
            Button(action: {
                startAnimate = true
            }, label: {
                Text("Start Animating")
            })
        }
        
    }
}

#Preview {
    PhaseAnimatorUpdate()
}

enum ImageSet: String, CaseIterable{
    case heart = "suit.heart.fill"
    case person = "person.crop.circle.fill"
    case home = "house.circle.fill"
    case phone = "iphone.homebutton.radiowaves.left.and.right.circle.fill"
}

And thats all i have folks. Meet you in another blog. Thank you.

Happy Coding!🥶