# Understanding the fundamentals of SwiftUI for iOS development pt.2

This is in continuation of [Part 1](https://namitgupta.com/understanding-the-fundamentals-of-swiftui-for-ios-development-pt1).

## V. Customizing Views in SwiftUI

**A. Overview of the modifiers in SwiftUI**

Modifiers are a powerful feature of SwiftUI that allow you to customize the appearance and behavior of views. SwiftUI provides a large number of built-in modifiers that you can use to **change the color, font, size, and other properties of your views**. You can also create your own custom modifiers to encapsulate commonly used styles or behaviors.

**B. Adding custom fonts and colors to views**

To add custom fonts and colors to your views, you can use the `font()` and `foregroundColor()` modifiers. Let's take a look at an example that demonstrates how to use these modifiers to customize the appearance of a text view:

```swift
struct ContentView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
            .font(.system(size: 24))
            .foregroundColor(Color.red)
    }
}
```

This code creates a text view with a custom font size and color. The `font()` modifier is used to set the font size and the `foregroundColor()` modifier is used to set the text color.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1677822779567/6aff5b35-875e-4871-a523-fab3422df501.png align="center")

**C. Adding images and other media to views**

To add images and other media to your views, you can use the `Image` and `VideoPlayer` controls. Let's take a look at an example that demonstrates how to use the `Image` control to display an image in a view:

```swift
struct ContentView: View {
    var body: some View {
        Image("myImage")
            .resizable()
            .aspectRatio(contentMode: .fit)
    }
}
```

This code creates an image view with a custom image named "myImage". The `resizable()` modifier is used to make the image resizable, and the `aspectRatio()` modifier is used to maintain the aspect ratio of the image.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1677824137642/23277c80-dc30-4ab6-8cc2-a6e7f2ee7f60.png align="center")

**D. Creating reusable custom views using SwiftUI's component system**

One of the most powerful features of SwiftUI is its component system, which allows you to create reusable views and UI components. To create a custom view, you can define a new struct that conforms to the `View` protocol. Let's take a look at an example that demonstrates how to create a custom view that displays a label and a button:

```swift
struct MyView: View {
    var title: String
    var buttonText: String
    var buttonAction: () -> Void
    
    var body: some View {
        VStack {
            Text(title)
                .font(.title)
            Button(buttonText, action: buttonAction)
        }
        .padding()
        .background(Color.gray)
        .cornerRadius(10)
    }
}
```

This code defines a new struct called `MyView`, takes three parameters: a title, a button text, and a button action. The `body` property returns a vertical stack containing a text view and a button. The view is also customized with padding, a background color, and a corner radius.

You can use this custom view just like any other view in SwiftUI, like this:

```swift
struct ContentView: View {
    var body: some View {
        MyView(
            title: "Hello, SwiftUI!", 
            buttonText: "Tap Me") {
                print("Button Tapped")
        }
    }
}
```

This code creates an instance of the `MyView` struct with a custom title, button text, and button action. When the button is tapped, the `buttonAction` closure is executed.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1677824620940/fe1fbdee-de0d-47a2-918e-e910955e611c.png align="center")

## VI. Animations and Transitions in SwiftUI

**A. Overview of animations in SwiftUI**

Animations can add visual interest and improve user experience. SwiftUI provides several ways to add animations to your app's user interface, including using built-in animations and creating custom animations.

**B. Creating basic animations using the built-in animations**

SwiftUI includes a range of built-in animations that you can use to add motion to your app's user interface.

These animations include:

1. **.transition**: This animation type allows you to **animate the transition between two views**, such as when a new view is presented. For example, you could use the `.transition(.slide)` modifier to make the new view slide in from the right.
    
2. **.animation**: This modifier allows you to animate **changes to a view's properties, such as its position or opacity**. You can specify the duration and timing curve of the animation, and use the `.easeInOut` modifier to create a smooth animation curve.
    
3. **.spring**: This modifier **adds a spring-like bounce effect** to an animation. You can specify the `stiffness` and `damping` parameters to customize the animation.
    

Here's an example of how to use the .animation modifier to animate a view's position:

```swift
struct ContentView: View {
    @State private var offset = CGSize.zero
    
    var body: some View {
        Image(systemName: "heart.fill")
            .foregroundColor(.red)
            .font(.system(size: 50))
            .offset(offset)
            .animation(.spring(), value: offset)
            .gesture(
                DragGesture()
                    .onChanged { gesture in
                        self.offset = gesture.translation
                    }
                    .onEnded { _ in
                        self.offset = .zero
                    }
            )
    }
}
```

In this example, the image will animate back to its original position after the user stops dragging.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1677832845187/c5c40654-b2da-433c-ad11-382ed7606d69.gif?width=300 align="center")

**C. Using transitions to add animation effects to views**

Transitions are a powerful way to add animation effects to your app's user interface. SwiftUI provides a range of transition types, including **opacity, move, and scale**. You can use transitions to add animation effects when a view appears or disappears, or when a view's state changes.

Here's an example of how to use the .transition modifier to add a fade animation when a view appears:

```swift
struct ContentView: View {
    @State private var isShowing = false
    
    var body: some View {
        Button("Show") {
            withAnimation {
                self.isShowing.toggle()
            }
        }
        .padding()
        .foregroundColor(.white)
        .background(Color.blue)
        .clipShape(RoundedRectangle(cornerRadius: 10))
        .transition(.opacity)
        .offset(y: isShowing ? 0 : 100)
    }
}
```

In this example, the button will fade in when the user taps it, and fade out when it is tapped again.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1677833710778/dda417c2-0772-4483-a7d9-b55c5358c6f2.gif?width=300 align="center")

**D. Creating custom animations with SwiftUI's animation framework**

In addition to the built-in transitions, SwiftUI provides a powerful animation framework that allows developers to create custom animations.

To create a custom animation, we can use the `withAnimation` modifier and pass in an animation object that describes the animation we want to perform. Here's an example:

```swift
struct ContentView: View {
    @State private var scale: CGFloat = 1.0
    
    var body: some View {
        Text("Hello, World!")
            .scaleEffect(scale)
            .onTapGesture {
                withAnimation(
                    Animation.spring(response: 0.2, dampingFraction: 0.8, blendDuration: 0.2)
                ) {
                    self.scale = self.scale == 1.0 ? 1.5 : 1.0
                }
            }
    }
}
```

In the above example, we're using the `scaleEffect` modifier to scale the text view, and the `onTapGesture` modifier to toggle the `scale` variable when the user taps the view. We're also using the `withAnimation` modifier to animate the scaling effect using a custom animation created with the `Animation` object.

The `Animation` object takes several parameters that can be adjusted to create different animation effects. In this example, we're using the `spring` animation, which creates a bouncy, spring-like effect when the view is scaled.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1677833967861/ecafd5e6-682a-491e-b4e0-7c36b0b93e1a.gif?width=300 align="center")

In this series, we have covered the **fundamentals of SwiftUI for iOS development**. We have learned about the declarative syntax of SwiftUI, and how it simplifies the process of creating user interfaces. We have explored the different layout options and the use of user input controls. We also discussed how to customize views using modifiers, and add animations and transitions to our views.

SwiftUI is still relatively new, and we can expect it to evolve. However, SwiftUI is the future of iOS app development.

If you want to learn more about SwiftUI, there are many resources available online. Here are some helpful links:

1. [Apple's official documentation on SwiftUI](https://developer.apple.com/documentation/swiftui)
    
2. [WWDC videos on SwiftUI](https://developer.apple.com/videos/wwdc2021/?q=swiftui)
    
3. [SwiftUI Tutorials on Ray Wenderlich](https://www.kodeco.com/28684524-swiftui-fundamentals)
    
4. [Udemy SwiftUI Course](https://www.udemy.com/topic/swiftui/)
    

By mastering SwiftUI, you can create modern and intuitive iOS apps that delight your users. So, don't hesitate to dive in and start learning!

*Hope you enjoyed and learned from this Swift UI fundamentals series, let me know if you have any queries.*