4 Secrets you need to know about asset catalog

• This paper is translated by Cocoachina translator @ Hector Matos

• Original: 4 XCODE ASSET CATALOG secrets need to KNOW

Nightmare

Imagine you are working, and your superiors are asking you to add some pictures to the project. You find the designer of the team (if you have one), summon up the courage to ask him for these pictures. However, usually he is too busy to help you at all. Because he has more work to do than you. Honestly, have you ever seen a designer have a lot of work to do?! It's a lot of outrageous! So the last thing you want to do is to be the one to add to his job. Especially those jobs are boring for designers. Not to mention, designers have to work in order, you get those pictures also a few days later. So let's take a look at how to deal with the trouble with Xcode's asset catalog.

Trouble: "Can you change the color of this picture?" ”

iOS has so far provided some fairly complex ways to work with pictures in engineering, but unfortunately, there is no way to deal with this situation. I can't figure out how many times we've changed the color of the project because of the convenience or the customer's dislike. It is no longer a problem to change uicolor globally in engineering, but we also have to change the color of the pictures in the project. So we have to go back to the already busy designers, because we are too lazy to learn how to use Photoshop. Of course we can also write code to do it, but it looks pretty complicated, and it's easy to leak. Before iOS7, writing code changes the color of the picture to the following (there are many other ways):

123456789101112131415161718192021222324252627282930313233

class func image(name: String, withColor color: UIColor) -> UIImage? {     ifvarimage = UIImage(named: name) {         // begin a new image context, to draw our colored image onto. Passing in zero for scale tells the system to take from the current device‘s screen scale.         UIGraphicsBeginImageContext(image.size, false, 0)                 // get a reference to that context we created         let context = UIGraphicsGetCurrentContext()                 // set the context‘s fill color         color.setFill()                 // translate/flip the graphics context (for transforming from CoreGraphics coordinates to default UI coordinates. The Y axis is flipped on regular coordinate systems)         CGContextTranslateCTM(context, 0.0, image.size.height)         CGContextScaleCTM(context, 1.0, -1.0)                 // set the blend mode to color burn so we can overlay our color to our image.         CGContextSetBlendMode(context, kCGBlendModeColorBurn)         let rect = CGRect(origin: CGPointZero, size: image.size)         CGContextDrawImage(context, rect, image.CGImage)                 // set a mask that matches the rect of the image, then draw the color burned context path.         CGContextClipToMask(context, rect, image.CGImage)         CGContextAddRect(context, rect)         CGContextDrawPath(context, kCGPathFill)                 // generate a new UIImage from the graphics context we‘ve been drawing onto         image = UIGraphicsGetImageFromCurrentImageContext()         UIGraphicsEndImageContext()             returnimage     }     returnnil }

After two large versions of the upgrade, I can see this code. In IOS7, we have Imagewithrenderingmode, which is a method of uiimage, and the parameter is an enumeration value uiimagerenderingmode with three options.

12345

typedef NS_ENUM(NSInteger, UIImageRenderingMode) {     UIImageRenderingModeAutomatic,          // Use the default rendering mode for the context where the image is used     UIImageRenderingModeAlwaysOriginal,     // Always draw the original image, without treating it as a template     UIImageRenderingModeAlwaysTemplate,     // Always draw the image as a template image, ignoring its color information } NS_ENUM_AVAILABLE_IOS(7_0);

• Uiimagerenderingmodealwaysoriginal just like the literal meaning, this mode tells the system to render the image according to the original image file.

• Uiimagerenderingmodealwaystemplate This is the most interesting pattern. You'll first scan your picture and then create a template from all the opaque pixels in the picture. This also ignores all color information for the picture. You can use the Tintcolor property of the UIView subclass to fill the picture with the color you choose.

• Uiimagerenderingmodeautomatic This mode determines how the image is rendered based on the environment in which the image is used. If your images are used in places such as Uitabbar, Uinavigationbar, Uitoolbar, and Uisegmentedcontrol, the images use the Alwaystemplate rendering mode. Images used in other places will use the Alwaysoriginal rendering mode.

Once we understand the above, our code for changing the color of the image can be simplified as follows:

1234	ifvarimageToChange = imageView.image?.imageWithRenderingMode(.AlwaysTemplate) {     imageView.image = imageToChange     imageView.tintColor = .redColor() //Setting the tint color is what changes the color of the image itself! }

Isn't it amazing? Changing the color of a picture with code is now much easier.

Wait, it's not over yet! In fact, you do not need code to change the color of the picture.

Starting with Xcode 6, Imagewithrenderingmode has been integrated into the asset catalog. If you select a picture in the asset catalog, in the Attributes inspector on the right, you can change the render as option to template image like that.

It's that simple. You can even change the color of the picture in Tintcolor by changing the ImageView property of the Uiimageview in the storyboard, in the Attributes pane.

Trouble No.2: "Can you give me this 3X resolution diagram?" ”

This is really annoying, because every designer in every app has been asked this question for at least a year. It seems that Apple is adding a new screen resolution every year, and I'm skeptical this year. With the development of hardware technology, Apple always walks in the forefront, always in the best possible way to raise the PPI of the screen. Unfortunately, this means that we cannot enlarge an existing image directly in the preview, as this can cause problems such as pixelated and aliasing. Popular point, is that our pictures become ugly, nasty! Every time you ask the designer to make a 3x resolution map of an existing picture, a unicorn will die somewhere. This, in fact, explains why you can't see this magical creature now.

So the best news I mentioned last year in WWDC is that Xcode 6 and later support the use of vector PDFs in asset catalog. Your designer knows what that means, but in general, PDF is the de facto standard for vector elements. A vector file contains a lot of metadata about an element that tells the system how to render the content, which is independent of the screen resolution. For an easy-to-understand example, a rounded vector pdf is as clear as 5 when rendered as wide and rendered as 5000000 pixels wide.

On the iOS platform, Xcode generates 1x, 2x, and 3x graphs at compile time based on the size of your vector pdf map. If your PDF map is 45*45px, Xcode generates the following 3 PNG at compile time:

• 45*45PX:1X Equipment (IPhone 3G and 3GS)

• 90*90PX:2X or Retina Display devices (iPhone 4, 4s, 5, 5S, and 6)

• For 135*135px:3x equipment (IPhone 6 Plus and above)

This also means that when there is a higher screen resolution, Xcode can enlarge the image based on the existing vector PDF, which automatically supports future devices. Also, if you are a developer of OS X, then vector PDF is better, and OS x app fully supports vector PDF, you can scale the picture without distortion.

And all you need to do is to find your good asset designer to get these vector PDF files, and then in Attribtues pane of the catalog, select single vector in the drop-down box in the scale factor.

You can simply drag the PDF to the asset catalog and set it up.

No.3: "Can you give me a start-up diagram of the new equipment?" ”

The start chart is very important for apps. This is the first thing you see when you start the app, and it gives the user an impression of how the rest of the app is designed. If I saw a poorly designed start-up diagram, I would think that the rest of the app would be a lot better, but that's just my case. For our poor designer, every time a new device comes out, they know they want to zoom in on the start chart to support the resolution of the new device. For iphone 6 and iphone 6 Plus, if you don't have a corresponding launch map for both devices, then the app will work in magnification mode. The start-up diagram is still in the asset catalog, but I suggest that it be disassembled because the start-up diagram is also upgraded. Now you can use the Launchscreen xibs.

In the project file, you can specify the xib that the app loads at startup, so you don't have to prepare 9 start charts. Launchscreen.xib also supports automatic layout so that we can build the splash screen in chunks. Set this up as follows:

First create a xib file. You can select the launch screen type of xib in the location shown.

Then open the project file, select the app target, and select your launch screen. xib file at launch screen file.

Use launch screen as much as you can. You don't want to get caught. Ask the designer to get a new 8x start-up diagram of the mobile phone tablet a year later.

Trouble No.4: "Can you lengthen the picture of these buttons?" ”

The probability of this happening is much higher than you think. For a pattern image or a rounded image, you need to resize the image to avoid distortion in the image, given the larger screen. Natasha has released a great article on how to program this problem, but we can also do it in Xcode 6 's asset catalog. By the way, I strongly suggest you take a look at Natasha's article before you continue reading, so that you can understand exactly what is going on. Disclaimer: The picture below is copied directly from Natasha's article. sorry!

All right, let's go.

Previously, it was common to use code similar to the following to get a resizable picture:

1234	let edgeInsets = UIEdgeInsets(top: 8.0, left: 8.0, bottom: 8.0, right: 8.0)let backgroundButtonImage = UIImage(named:"purple_button")?.resizableImageWithCapInsets(edgeInsets) purpleButton.setBackgroundImage(backgroundButtonImage, forState: .Normal)

This will give you a picture similar to the one below:

At run time, the middle part of the border of the container of the distance uiimageview is stretched to 8 pixels, so that the fillet can be preserved to get the following:

Thanks to the slice and dice of asset catalog in Xcode, we don't need code to stretch the picture. First select the picture in Xcode, then click Show slicing in the lower-right corner:

You should now be able to see the slicing panel and a button "Start slicing".

After you click the button, the following three options are displayed:

The left button is used for horizontal edge insets, the right button for vertical edge insets, and two in the middle. In our example we want to keep the fillet, so we press the middle button to tell the system that we want the middle of the button to stretch horizontally and vertically. After you press the button, you'll see some thin strips that you can drag, which lets you set where to start stretching the picture.

The system retains the dark purple area, and the light purple area is stretched.

What's more, Xcode automatically finds the fillet, so we don't need to set where to start stretching the picture. Finally, don't forget to set the picture to be stretched in Attribtues pane.

If I were you, I would try and get used to this function. With this priceless treasure, you no longer have to fill in the magic numbers in the Resizableimagewithcapinsets method, it can also help you separate the view logic and the app logic.

Conclusion

I'm pretty sure that we developers do a lot of other things every day to bother designers, but at least we can use these features more often and give them a little rest. After all, programming can solve all problems, why not?

4 Secrets you need to know about asset catalog