Introduction to Semantic Colors

Semantic colors are predefined colors in SwiftUI that adapt to the app’s theme and accessibility settings. Some common semantic colors include accentColor, primary, and secondary.

Example: Using AccentColor

The accentColor is a broad theme color applied to views and controls. You can set it at the application level by specifying an accent color in your app’s asset catalog.

Setting AccentColor in Asset Catalog

1. Open your asset catalog (Assets.xcassets).
2. Create a new color set and name it AccentColor.
3. Choose your desired color.

Example: Using AccentColor in SwiftUI

import SwiftUI

@main
struct SemanticColorsApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .accentColor(.purple) // Set accent color for the entire app
        }
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Accent Color Example")
                .foregroundStyle(Color.accentColor)
                .padding()
                .background(Color.accentColor.opacity(0.2))
                .cornerRadius(10)
            
            Button(action: {
                print("Button tapped")
            }) {
                Text("Tap Me")
                    .padding()
                    .background(Color.accentColor)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
        .padding()
    }
}

In this example, we set the accent color of the entire app to purple using the accentColor modifier. The Text and Buttonviews use the accent color to create a consistent look.

Example: Using Primary and Secondary Colors

The primary and secondary colors are used for primary and secondary content, respectively. These colors adapt to the system’s color scheme and user settings.

Example: Using Primary and Secondary Colors in SwiftUI

import SwiftUI

struct PrimarySecondaryColorsView: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("Primary Color Example")
                .foregroundStyle(Color.primary)
                .padding()
                .background(Color.primary.opacity(0.2))
                .cornerRadius(10)

            Text("Secondary Color Example")
                .foregroundStyle(Color.secondary)
                .padding()
                .background(Color.secondary.opacity(0.2))
                .cornerRadius(10)

            Button(action: {
                print("Primary Button tapped")
            }) {
                Text("Primary Button")
                    .padding()
                    .background(Color.primary)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }

            Button(action: {
                print("Secondary Button tapped")
            }) {
                Text("Secondary Button")
                    .padding()
                    .background(Color.secondary)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
        .padding()
    }
}

In this example, we use Color.primary and Color.secondary to style text and buttons. These colors adapt to the system’s light and dark modes, providing a consistent and accessible user experience.

Example: Customizing System Colors

In addition to predefined semantic colors, you can customize colors in SwiftUI to create a unique look for your app. Custom colors can be defined in the asset catalog or directly in code.

Example: Using Custom Colors

import SwiftUI

struct CustomColorsView: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("Custom Color Example")
                .foregroundStyle(Color("CustomColor"))
                .padding()
                .background(Color("CustomColor").opacity(0.2))
                .cornerRadius(10)

            Button(action: {
                print("Custom Color Button tapped")
            }) {
                Text("Custom Color Button")
                    .padding()
                    .background(Color("CustomColor"))
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
        .padding()
    }
}

To use custom colors:

1. Open your asset catalog (Assets.xcassets).
2. Create a new color set and name it CustomColor.
3. Choose your desired color.

In this example, we define a custom color in the asset catalog and use it in the Text and Button views.

Conclusion

Using semantic colors in SwiftUI allows you to create visually consistent and accessible user interfaces. By leveraging accentColor, primary, secondary, and custom colors, you can ensure your app looks great across different themes and user settings.

The post Semantic Colors in SwiftUI: accentColor, primary, secondary, custom color appeared first on AppMakers.Dev.

Introduction to Canvas

Canvas is a view in SwiftUI that provides a drawing area for creating custom graphics. It uses GraphicsContext to draw shapes, images, and text.

Example: Drawing with Canvas and GraphicsContext

import SwiftUI

struct CanvasDrawingView: View {
    var body: some View {
        Canvas { context, size in
            context.draw(Text("Hello, SwiftUI!"), at: CGPoint(x: size.width / 2, y: size.height / 2))
            
            let circle = Path(ellipseIn: CGRect(x: size.width / 4, y: size.height / 4, width: size.width / 2, height: size.height / 2))
            context.fill(circle, with: .color(.blue))
        }
        .frame(width: 300, height: 300)
        .border(Color.black, width: 2)
    }
}

In this example, we use Canvas to draw text and a blue circle. The GraphicsContext allows us to draw shapes and text at specific positions within the canvas.

Using Border

The border modifier adds a border around a view. You can customize the border’s color, width, and style.

Example: Applying a Border to a View

struct BorderedView: View {
    var body: some View {
        Text("Bordered Text")
            .padding()
            .border(Color.red, width: 4)
    }
}

In this example, we add a red border around a text view.

ForegroundStyle

ForegroundStyle allows you to set the style for the foreground content of a view, such as text or shapes.

Example: Using ForegroundStyle with Text

struct ForegroundStyledView: View {
    var body: some View {
        Text("Stylized Text")
            .font(.largeTitle)
            .foregroundStyle(
                LinearGradient(
                    gradient: Gradient(colors: [.red, .orange]),
                    startPoint: .leading,
                    endPoint: .trailing
                )
            )
            .padding()
    }
}

In this example, we use a linear gradient as the foreground style for the text, creating a smooth color transition.

BackgroundStyle

BackgroundStyle allows you to set the background style of a view.

struct BackgroundStyledView: View {
    var body: some View {
        Text("Stylized Background")
            .padding()
            .background(
                LinearGradient(
                    gradient: Gradient(colors: [.blue, .purple]),
                    startPoint: .top,
                    endPoint: .bottom
                )
            )
            .cornerRadius(10)
            .padding()
    }
}

In this example:

1. We apply a LinearGradient as the background to a Text view using the .background modifier.
2. The gradient transitions from blue at the top to purple at the bottom.
3. We add a corner radius to the text view to give it rounded corners.

Conclusion

SwiftUI’s Canvas, GraphicsContext, Border, ForegroundStyle, and BackgroundStyle provide powerful tools for creating custom graphics and styling views. By understanding and using these features, you can enhance the visual appeal and functionality of your SwiftUI applications.

The post Mastering Canvas, GraphicsContext, and Styles in SwiftUI appeared first on AppMakers.Dev.

Introduction to Gradients in SwiftUI

SwiftUI provides built-in support for creating gradients using the LinearGradient, RadialGradient, and AngularGradient views. These gradients can be used to fill shapes, backgrounds, and more.

Linear Gradient

A linear gradient creates a color transition along a straight line. You can define the start and end points, as well as the colors to transition between.

Example: Creating a Linear Gradient

import SwiftUI

struct LinearGradientView: View {
    var body: some View {
        Rectangle()
            .fill(
                LinearGradient(
                    gradient: Gradient(colors: [Color.red, Color.blue]),
                    startPoint: .topLeading,
                    endPoint: .bottomTrailing
                )
            )
            .frame(width: 200, height: 200)
    }
}

In this example, we create a Rectangle filled with a linear gradient that transitions from red to blue, starting from the top leading corner to the bottom trailing corner.

Radial Gradient

A radial gradient creates a color transition radiating outward from a center point.

Example: Creating a Radial Gradient

import SwiftUI

struct RadialGradientView: View {
    var body: some View {
        Circle()
            .fill(
                RadialGradient(
                    gradient: Gradient(colors: [Color.yellow, Color.orange]),
                    center: .center,
                    startRadius: 20,
                    endRadius: 100
                )
            )
            .frame(width: 200, height: 200)
    }
}

In this example, we create a Circle filled with a radial gradient that transitions from yellow at the center to orange at the edges.

Angular Gradient

An angular gradient creates a color transition around a circle, sweeping from one color to another.

Example: Creating an Angular Gradient

import SwiftUI

struct AngularGradientView: View {
    var body: some View {
        Circle()
            .fill(
                AngularGradient(
                    gradient: Gradient(colors: [Color.purple, Color.pink, Color.purple]),
                    center: .center
                )
            )
            .frame(width: 200, height: 200)
    }
}

In this example, we create a Circle filled with an angular gradient that transitions from purple to pink and back to purple around the center.

Using EllipticalGradient with Shapes

Elliptical gradients can be applied to various shapes, not just ellipses. You can use them with rectangles, circles, and custom shapes to create unique visual effects.

Example: Applying Elliptical Gradient to a Rectangle

import SwiftUI

struct EllipticalGradientRectangleView: View {
    var body: some View {
        Rectangle()
            .fill(
                EllipticalGradient(
                    gradient: Gradient(colors: [.green, .yellow]),
                    center: .center,
                    startRadiusFraction: 0.2,
                    endRadiusFraction: 0.8
                )
            )
            .frame(width: 300, height: 200)
    }
}

Combining Gradients

You can combine different gradients to create more complex and interesting effects.

Example: Combining Linear and Radial Gradients

struct CombinedGradientView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(
                    LinearGradient(
                        gradient: Gradient(colors: [Color.blue.opacity(0.5), Color.green.opacity(0.5)]),
                        startPoint: .top,
                        endPoint: .bottom
                    )
                )
                .frame(width: 300, height: 300)
            
            Circle()
                .fill(
                    RadialGradient(
                        gradient: Gradient(colors: [Color.white.opacity(0.5), Color.clear]),
                        center: .center,
                        startRadius: 50,
                        endRadius: 150
                    )
                )
                .frame(width: 300, height: 300)
        }
    }
}

In this example, we create a Rectangle with a linear gradient background and overlay a Circle with a radial gradient to create a more complex visual effect.

Conclusion

Gradients are a versatile tool in SwiftUI that can enhance the visual appeal of your app. By understanding how to use LinearGradient, RadialGradient, and AngularGradient, you can create stunning effects and backgrounds.

The post Gradients in SwiftUI – Linear, Radial, Angular appeared first on AppMakers.Dev.

Introduction to AsyncImage

AsyncImage is a view that asynchronously loads and displays an image from a specified URL. You can easily add a placeholder, handle errors, and manipulate the loaded image.

Basic Usage of AsyncImage

Let’s start with a basic example of loading an image from a URL and displaying it in a SwiftUI view.

import SwiftUI

struct BasicAsyncImageView: View {
    let imageUrl = URL(string: "https://picsum.photos/200")

    var body: some View {
        AsyncImage(url: imageUrl)
            .frame(width: 200, height: 200)
    }
}

In this example, we load an image from a URL and display it within a 200×200 frame. Until the image loads, SwiftUI displays a default placeholder.

Customizing the Placeholder

You can customize the placeholder to enhance the user experience while the image is loading.

import SwiftUI

struct PlaceholderAsyncImageView: View {
    let imageUrl = URL(string: "https://picsum.photos/200")

    var body: some View {
        AsyncImage(url: imageUrl) { image in
            image
                .resizable()
                .aspectRatio(contentMode: .fit)
        } placeholder: {
            ProgressView("Loading...")
                .frame(width: 200, height: 200)
        }
    }
}

Here, we use ProgressView as a custom placeholder, which is displayed until the image is fully loaded.

Handling Errors

It’s crucial to handle errors gracefully, providing a fallback UI when the image fails to load.

import SwiftUI

struct ErrorHandlingAsyncImageView: View {
    let imageUrl = URL(string: "https://picsum.photos/200")

    var body: some View {
        AsyncImage(url: imageUrl) { phase in
            switch phase {
            case .empty:
                ProgressView("Loading...")
                    .frame(width: 200, height: 200)
            case .success(let image):
                image
                    .resizable()
                    .aspectRatio(contentMode: .fit)
            case .failure:
                Image(systemName: "exclamationmark.triangle")
                    .resizable()
                    .frame(width: 50, height: 50)
                    .foregroundColor(.red)
            @unknown default:
                EmptyView()
            }
        }
        .frame(width: 200, height: 200)
    }
}

In this example, we handle different loading phases using a switch statement. If the image fails to load, we display a system symbol as an error indicator.

Advanced Example: Image Grid

Let’s create an advanced example where we display a grid of asynchronously loaded images.

import SwiftUI

struct ImageGridAsyncView: View {
    let urls = [
        URL(string: "https://picsum.photos/200/300"),
        URL(string: "https://picsum.photos/200"),
        URL(string: "https://picsum.photos/300"),
        URL(string: "https://picsum.photos/400")
    ]

    var body: some View {
        let columns = [
            GridItem(.flexible()),
            GridItem(.flexible())
        ]
        
        ScrollView {
            LazyVGrid(columns: columns, spacing: 20) {
                ForEach(urls, id: \.self) { url in
                    AsyncImage(url: url) { phase in
                        switch phase {
                        case .empty:
                            ProgressView()
                                .frame(width: 100, height: 100)
                        case .success(let image):
                            image
                                .resizable()
                                .aspectRatio(contentMode: .fill)
                                .frame(width: 100, height: 100)
                                .clipped()
                        case .failure:
                            Image(systemName: "exclamationmark.triangle")
                                .resizable()
                                .frame(width: 50, height: 50)
                                .foregroundColor(.red)
                        @unknown default:
                            EmptyView()
                        }
                    }
                }
            }
            .padding()
        }
    }
}

The post AsyncImage in SwiftUI appeared first on AppMakers.Dev.

Introduction to Image in SwiftUI

The Image view in SwiftUI displays an image and provides various initializers and modifiers to customize its appearance. You can create images from different sources, such as asset catalogs, UIImage or NSImage instances, and SF Symbols.

Creating a Basic Image

Let’s start with a simple example of displaying an image from the app’s asset library.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Image("exampleImage") // Replace "exampleImage" with your image name
            .resizable()
            .aspectRatio(contentMode: .fit)
            .padding()
    }
}

In this example, the image is loaded from the asset catalog, made resizable, and its aspect ratio is maintained to fit within its container.

Customizing Image Views

SwiftUI provides several modifiers to customize how images are displayed. Here are some useful modifiers and how to use them:

Resizing and Scaling Images

You can resize and scale images to fit or fill a given space while maintaining their aspect ratio.

import SwiftUI

struct ResizableImageView: View {
    var body: some View {
        VStack {
            Image("exampleImage")
                .resizable()
                .scaledToFit()
                .frame(width: 200, height: 200)
                .border(Color.green, width: 1)
            
            Image("exampleImage")
                .resizable()
                .scaledToFill()
                .frame(width: 300, height: 200)
                .clipped()
                .border(Color.gray, width: 10)
        }
    }
}

Applying Shapes and Borders

You can apply various shapes and borders to your images to make them more visually appealing.

import SwiftUI

struct ShapedImageView: View {
    var body: some View {
        VStack {
            Image("exampleImage")
                .resizable()
                .clipShape(Circle())
                .overlay(Circle().stroke(Color.white, lineWidth: 4))
                .shadow(radius: 10)
                .padding()

            Image("exampleImage")
                .resizable()
                .clipShape(RoundedRectangle(cornerRadius: 25))
                .overlay(RoundedRectangle(cornerRadius: 25).stroke(Color.white, lineWidth: 4))
                .shadow(radius: 10)
                .padding()
        }
    }
}

Applying Color Adjustments to Image in SwiftUI

import SwiftUI

struct ColorAdjustmentImageView: View {
    var body: some View {
        VStack {
            Image("exampleImage")
                .resizable()
                .scaledToFit()
                .brightness(0.2) // Increases the brightness of the image
                .contrast(1.5) // Increases the contrast of the image
                .saturation(1.2) // Increases the saturation of the image
                .frame(width: 300, height: 200)
                .padding()
        }
    }
}

Applying Blend Mode

The blendMode modifier allows you to apply different blending effects to images, combining them with their background or other views.

import SwiftUI

struct BlendModeImageView: View {
    var body: some View {
        VStack {
            Image("exampleImage")
                .resizable()
                .scaledToFit()
                .blendMode(.multiply) // Applies multiply blend mode to the image
                .frame(width: 300, height: 200)
                .background(Color.yellow) // Background color to blend with the image
                .padding()
        }
    }
}

Rotating and Scaling Images

You can use the rotationEffect and scaleEffect modifiers to rotate and scale images in SwiftUI.

import SwiftUI

struct RotateAndScaleImageView: View {
    var body: some View {
        VStack {
            Image("exampleImage")
                .resizable()
                .scaledToFit()
                .rotationEffect(.degrees(45)) // Rotates the image by 45 degrees
                .scaleEffect(1.5) // Scales the image by 1.5 times
                .frame(width: 300, height: 200)
                .padding()
        }
    }
}

Using SF Symbols

SF Symbols are a set of over 2,400 configurable symbols that you can use in your SwiftUI apps. Here’s how to use them:

import SwiftUI

struct SFSymbolsView: View {
    var body: some View {
        VStack {
            Image(systemName: "star.fill")
                .font(.largeTitle)
                .foregroundColor(.yellow)
            
            Image(systemName: "heart.fill")
                .font(.system(size: 50))
                .foregroundColor(.red)
        }
    }
}

Creating a Custom Image with Drawing Instructions

SwiftUI also allows you to create custom images using drawing instructions. Here’s a simple example:

import SwiftUI

struct CustomDrawingImageView: View {
    var body: some View {
        Image(uiImage: drawCustomImage())
            .resizable()
            .scaledToFit()
            .frame(width: 200, height: 200)
    }
    
    func drawCustomImage() -> UIImage {
        let renderer = UIGraphicsImageRenderer(size: CGSize(width: 200, height: 200))
        return renderer.image { context in
            let cgContext = context.cgContext
            cgContext.setFillColor(UIColor.blue.cgColor)
            cgContext.fill(CGRect(x: 0, y: 0, width: 200, height: 200))
            cgContext.setFillColor(UIColor.white.cgColor)
            cgContext.setStrokeColor(UIColor.red.cgColor)
            cgContext.setLineWidth(10)
            cgContext.addEllipse(in: CGRect(x: 50, y: 50, width: 100, height: 100))
            cgContext.drawPath(using: .fillStroke)
        }
    }
}

The post Image in SwiftUI appeared first on AppMakers.Dev.

How to change the background color of the view in SwiftUI

This will set the background of the Text to .red

var body: some View {
    Text("Hello AppMakers.dev visitors")
        .background(Color.red)
}

If you want to set the whole screen to be red, you can do this. This will center the text and set the whole view to red.

var body: some View {
    HStack {
        Spacer()
        VStack {
            Spacer()
            Text("Hello AppMakers.dev")
            Spacer()
        }
        Spacer()
    }
    .background(Color.red)
}

Or use this instead to fill the whole view with red, ignoring the safe area.

var body: some View {
    ZStack {
        Color.red
            .edgesIgnoringSafeArea(.all)
        Text("Hello AppMakers.Dev")
    }
}

How to change Text Color in SwiftUI

This code will change the text color to green. Use `foregroundColor(_:)` to set the color that the view uses for foreground elements.

var body: some View {
    Text("Hello")
        .foregroundColor(Color.green)
}

How to convert UIColor to SwiftUI Color

To convert UIColor to SwiftUI Color, add this extension to your codebase.

extension UIColor {
    var suColor: Color { Color(self) }
}

After that, you can call `.suColor` on any `UIColor` instance to get a SwiftUI Color.

someUIColor.suColor

How to use Color set from Assets Catalog?

If you’ve created a color named “newColor” in your Assets catalog, you can use it like this:

Color("newColor")

To simplify usage of Asset Catalog colors, add this extension:

extension Color {
    static let newColor = Color("newColor")
    static let newColor2 = Color("newColor2")
}

Learn more about SwiftUI using SwiftUI Tutorials by AppMakers. You can always check the official documentation if updates occur.

Color Documentation

The post Color – SwiftUI appeared first on AppMakers.Dev.