How to create pattern with image in SwiftUI and UIKit


Greetings, traveler!

If you need to create a pattern using an image, you can do this with simple actions in UIKit and SwiftUI.

UIKit

To create a pattern-like background for UIView, you can convert any image into UIColor. Check out this code:

let image = UIImage(named: "myImage") ?? .init()
let view = UIView()

view.backgroundColor = UIColor(patternImage: image)

SwiftUI

SwiftUI offers an even easier way to do this. You need to use the resizable() modifier with the resizingMode parameter. Consider this example:

Image("myImage")
    .resizable(resizingMode: .tile)

Resizing an image

If you need to resize an image for your pattern, you can use this maneuver:

extension UIImage {
    func resized(to size: CGSize) -> UIImage {
        UIGraphicsImageRenderer(size: size).image { _ in
            draw(in: CGRect(origin: .zero, size: size))
        }
    }
}

And then, you can use this image with your View:

let image = UIImage(named: "myImage")?.resized(to: CGSize(width: 60, height: 60)) ?? .init()

 Image(uiImage: image)
     .resizable(resizingMode: .tile)

Note

By the way, you can create a custom Progress Bar with these tools. Check out this article.

Conclusion

As you can see, creating a pattern with Swift tools is easy. These tools allow you to make really creative solutions.