4

I have noticed that in recent versions of Xcode, the project template for "Tabbed Application" creates a project where the tab bar icon images (dubbed "first" and "second", for the default two tabs/view controllers available) are actually stored in .pdf format, not .png, and displayed in the Assets.xcassets folder with a resolution of "All" for use as "Universal" (instead of -say- a resolution "@3x" for use as "iPhone app iOS 7-8", like the app icons).

I assume this is to provide a vector graphics-based resource that is truly resolution-independent and hence supports all sorts of devices.

My question is: What are the guidelines to create custom resources in this format? I guess it should start by creating a custom outline in Adobe Illustrator and exporting it in pdf format, but, What size and units should I use? Are there any other things to look out for? I haven't found anything in official Apple documentation and a web search for "ios tab bar icon pdf" only gives links to websites providing clip art etc.

Note: I have thought whether to post this question here or in Graphic Design Stack Exchange site, but it still has to do with the Xcode IDE and developing iOS apps, so I place my bet here. Feel free to vote for closing it if you think otherwise.

4

3 回答 3

16

I understand MirekE's answer as I lived the challenge and now have a solution. But for anyone else, here's a real world example.

I create all my line icons (or anything of your choosing) using sketch (highly recommended) using a 30 X 30 Artboard then applying the drawings inside. I make the background transparent and then set my export to 1x size and apply the PDF format. Visible in this screenshot.

enter image description here

Then it's a simple import into Xcode > create the object in Images.xcassets > select the image group > choose single vector from the pulldown scale factors (in the attributes inspector) > then just drag and drop the imported image in the single place holder.

enter image description here

I've applied this approach to all my custom tabbar items and the result has been stellar.

于 2015-11-17T05:00:12.097 回答
2

I assume this is to provide a vector graphics-based resource that is truly resolution-independent and hence supports all sorts of devices.

My understanding is that Xcode actually converts these vector images into bitmaps with appropriate resolution. So they are vectors only at design time and bitmaps at run time.

What are the guidelines to create custom resources in this format? I guess it should start by creating a custom outline in Adobe Illustrator and exporting it in pdf format, but, What size and units should I use?

Create the size in points, the same size as you want the icons. Then export as PDF. I noticed that some programs generate PDFs that look nice in Interface Builder, but are blank in the actual app. Perhaps Illustrator will work fine, but if not, try another program for the conversion to PDF.

于 2015-08-13T04:12:20.477 回答
1

I've just had this issue and I fixed it by manually resizing the UIImage when asigning it using this extension:

extension UIImage {

    func aspectFit(to size: CGSize) -> UIImage? {
        let width = self.size.width
        let height = self.size.height
    
        let widthScale = size.width / width
        let heightScale = size.height / height
    
        let scaleFactor = min(widthScale, heightScale)
    
        UIGraphicsBeginImageContextWithOptions(CGSize(width: width * scaleFactor, height: height * scaleFactor), false, 0.0)
        self.draw(in: CGRect(x: 0.0, y: 0.0, width: width * scaleFactor, height: height * scaleFactor))
    
        defer {
            UIGraphicsEndImageContext()
        }
    
        return UIGraphicsGetImageFromCurrentImageContext()
      }
}

Usage:

tabBarItem.image = myImage.aspectFit(to: CGSize(width: 25, height: 25))
于 2021-02-05T16:27:35.417 回答