Pro Tips To Load Image From Image Assest

Introduction

The traditional way of loading an image from image assets is initializing an image with a string and that string should be same as the image name.

let myImage = UIImage.init(named: "MyImageName")

Each time we add an image we need to open the image assets and copy the exact image name and pass it to initialize the image. It's very time consuming, and not so efficient. In most of the projects, we used plenty of images in our image assets like we are using different view background images, different cell background images, different menu icons, different social icons. We are not categorizing our images. So it is getting very messy and not so organized for other developers to understand quickly.

In this article, we will see how we can categorize our images in our iOS project and load them more effectively without moving to Image Assets all time. We also get a taste of the great flexibility of Swift Enum, and how they can simplify and clarify our code.

Q: Hey, why do we need to do these brainstorming sessions? Can't we do it in a traditional way?

Yes, you can. But the aim is to " Be the smartest one in the room". Try this and you will stand out among your teammates.

System Requirments & Expertise

Xcode 9.0 , Swift 4.0 .
Must have the basic understanding of Swift Enum and Extension.
Expertise level: intermediate.

Step 1

Will create an enum to hold all the project images within it.

public enum MyImage {
public enum SocialIcons: String {
case FBIcon
}
}

Then we will be creating nested enum and within that enum we will have categories of all our images.

public enum MyImage {
public enum SocialIcons: String {
case FacebookIcon // make sure FacebookIcon should be same as your image string
case TwitterIcon
case LinkdeinIcon
case InstagramIcon
case GooglePlusIcon
}
public enum BackGroundImage: String {
case LogInScreenBGImage
case ContactUsBGImage
case ProfileTableViewBGImage
}
public enum CellBGImage: String {
case ProfileCellBGImage
}
}

NOTE
Make sure the case name should be exactly the same as your image name. And the image is added to your project folder or your Assets.xcassets folder.

Step 2

Now we will be creating one UIImage extension which will be initialized by taking RawRepresentable value.

public extension UIImage {
convenience init?<T: RawRepresentable>(MyImage: T) where T.RawValue == String {
self.init(named: MyImage.rawValue)
}
}

Step 3

Now we will be declaring one protocol of RawRepresentable type, which will pass the raw value to image extension init method.

public protocol ImageConvertible { }
public extension ImageConvertible where Self: RawRepresentable, Self.RawValue == String {
public var image: UIImage? {
return UIImage(named: self.rawValue)
}
}

Step 4

Now we will confirm the Enum MyImage to the protocol ImageConvertible .

public enum MyImage:ImageConvertible {
public enum SocialIcons: String {
case FacebookIcon // make sure FacebookIcon should be same as your image string
case TwitterIcon
case LinkdeinIcon
case InstagramIcon
case GooglePlusIcon
}
public enum BackGroundImage: String {
case LogInScreenBGImage
case ContactUsBGImage
case ProfileTableViewBGImage
}
public enum CellBGImage: String {
case ProfileCellBGImage
}
}

Step 5

We are done. Finally, we will try to access the image name by using an enum and initializing the Image.

class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
let bgImage = UIImage.init(MyImage: MyImage.BackGroundImage.LogInScreenBGImage)
}

Conclusion

Here is the simple trick of how we can categorize our images in our iOS project and be able to access them more precisely in an effective way. I hope you will be using this for your next big project. Note how clean this is. No more hardcoded string. Swift Enum autocompletes the image name for you. Cheers!!

It's beautiful isn't it? Let me know in the comments. Happy Programming !!!