I am trying to create icons for each of my view controllers, but it is creating a question mark block as if it does not understand the image
let settings = UINavigationController(rootViewController: SettingsController())
let individual = IndividualAthleteController()
var items: [FontAwesome: UIViewController] = [.slidersH: settings,.user: individual]
for (iconString, viewController) in items {
let icon = UIImage.fontAwesomeIcon(name: iconString, style: .brands, textColor: .black, size: CGSize(width: 30, height: 30))
let tabBar = UITabBarItem(title: viewController.title, image: icon, selectedImage: icon)
items[iconString]!.tabBarItem = tabBar
}
viewControllers = Array(items.values)
It is creating this image for each viewController:
What is the problem?
Make sure you're importing .ttf file into your project and set the target of the files. Then, make sure you're updating your plist:
Import .ttf file into you project simply by draggin&drop, check "copy if needed" (Es. fontawesome-webfont.ttf)
Select you .ttf file and in the inspector select the icon above similar to a sheet, then in the section below (Target Membership) select your project as target if not
Finally check you plist and add the key "Fonts provided by application in your", and as item0 (it is an array) put the name of your fonts as value (es. fontawesome-webfont.ttf )
Refer to this link to see images of the previous instructions
If you're using this library Vaberer/Font-Awesome-Swift, make sure you're doing the same as the above steps
NOTE: If you're not using the Vaberer library, give it a chance
Use .solid instead of .brands. Brands uses just the font awesome brands library, for using icons like apple, github, etc.
Related
I have created my own custom tab bar icons. I have saved them at sizes:
22pt x 22pt with file name iconname#1x.png
44pt x 44pt with file name iconname#2x.png
66pt x 66pt with file name iconname#3x.png
After importing these files into the asset folder I've used the code:
let homeController = HomeViewController()
homeController.tabBarItem = UITabBarItem(title: "Home", image:#imageLiteral(resourceName: "home"), tag: 1)
let nav1 = UINavigationController(rootViewController: homeController)
The icon is presented but at a very large size. What am I doing wrong?
Looks like I was saving it at 300 resolution so the image was larger than I thought.
When building my app for macOS Big Sur, and switching my preference panel toolbar style to .preference, the icons just don't seem to size correctly.
No matter if I use #1x/#2x PNG variants, or universal PDF vector images with a single scale, my icons always turn out larger and blurry compared to using a SF Symbol icon.
Now that my app needs to be backwards compatible with 10.13 I can't use symbol images.
Here is what my toolbar looks like
What is the correct way to get properly sized icons in a preference panel toolbar?
Do I need to include a margin in my vector assets? If so, what is the correct point size?
I got a good result with 26x26px vector PDF. The icon size was 22x22px with the margins but the icon was blurry. Enabling Preserve Vector Data option did the trick
You can set it under the Image Set settings:
Vector images don't seem to go well with NSToolbar. I created an NSImage extension for them to manually create a toolbar friendly image.
extension NSImage {
convenience init?(namedVectorToolbarImage name: String) {
guard let image = NSImage(named: name) else {
return nil
}
self.init()
let small = image.resized(to: .init(width: 24, height: 24))
let regular = image.resized(to: .init(width: 32, height: 32))
let reps = regular.representations + small.representations
isTemplate = true
reps.forEach {
addRepresentation($0)
}
}
The resize() method here is just another extension for producing a resized image. On top of that I set NSToolbar.sizeMode to small if the system is not (below) macOS 11.0.
Can I only upload .png files into the assets folder? I get an error for .svg files.
I want to use it for the Image() component
You can use Macaw to display a SVG: https://github.com/exyte/Macaw
1) Add the Package via SPM to your project (the tag 0.9.5 actually doesn't work, you need to use the master branch)
2) Move your .svg-file to the project or create a new Data set in your Assets.xcassets and then add the svg file to this data set.
3) Use this code:
struct MyView: View {
var svgName: String
var body: some View {
SVGImage(svgName: self.svgName)
.frame(width: 50, height: 550)
}
}
struct SVGImage: UIViewRepresentable {
var svgName: String
func makeUIView(context: Context) -> SVGView {
let svgView = SVGView()
svgView.backgroundColor = UIColor(white: 1.0, alpha: 0.0) // otherwise the background is black
svgView.fileName = self.svgName
svgView.contentMode = .scaleToFill
return svgView
}
func updateUIView(_ uiView: SVGView, context: Context) {
}
}
You can import svg images too in XCAssets.
Go to XCAssets, click on + button.
Refer this image
Click on import & select svg image.
Now to load & display that image use below code :
Image(uiImage: UIImage(named: "imageName")!)
I've created a simple tool, which converts SVG code into SwiftUI's Shape object. It is very limited for now (in particular it only supports straight lines and cubic curves, single path SVGs and shapes that are filled with one color), but you can still use it for simple situations.
Here's the link to the tool, and the repository, in case you'd want to contribute and make it support all SVG features.
You can use pdf's for vectors in the asset catalog (select single scale and preserve vector data in the inspector on the right). You cannot directly use SVG's in the asset catalog, but with Xcode 11 you actually can use SVG's for symbols. Apple has a detailed guide on how to make your own SVG symbols here.
I am having trouble trying to create an NSCollectionView with icons that are taken from Finder's icon preview.
Ideally, if the file is a dmg it should display the hard drive icon, an mp3 should be the mp3 icon and a photo should display what the photo looks like itself.
There is one post that addresses this issue:
Is it possible to get programmatic access to finder preview images?
But the code is old and does not compile. I am also using Swift in this project.
I used this post to setup a template for my project:
Is there a way to set up a NSCollectionView programmatically in Swift?
Which adds a subview to NSView. If this can be modified to implement the icons, that would be ideal.
In addition I am using a NSFileManager.defaultManager to get the contents of a folder, and would like to display those contents in the collection view.
I am new to developing on the Mac platform and have more experience with iOS, specific answers are much appreciated, thanks!
Update, I was able to figure out how to use what Finder uses with the Quicklook library that Apple provides. Here is part of the code that I used. Note that if you are trying to use Quicklook on a file that does not have a preview, then there will be an error, so in those cases I just used the iconForFile function (below this code block)
let tmp = QLThumbnailImageCreate(kCFAllocatorDefault, tmpURL , CGSize(width: 64, height: 64), nil)
tmpImage = tmp.takeUnretainedValue()
tmpIcon = NSImage(CGImage: tmpImage!, size: NSSize(width: 64, height: 64))
Original:
I was able to find (almost) what I was looking for.
In the NSWorkspace class there is a method
func iconForFile(_ fullPath: String) -> NSImage
That will return an NSImage of the icon. Unfortunately, I do not see a way to get a preview of the image if it is a picture. Nor do I see a way to make the picture larger (only 32x32 pixels).
Hopefully this answer will help others that encounter this problem!
I've used your code from your answer but I noticed that it did not keep the file's aspect ratio and the low res version would just be the downsampled high res version. So based on your answer, here's my solution:
let imageLowResRef = QLThumbnailImageCreate(kCFAllocatorDefault, url as CFURL , CGSize(width: 32, height: 32), nil)
guard imageLowResRef != nil else {
return NSWorkspace.shared.icon(forFile: url.path)
}
let image = NSImage()
let imageLowRes = imageLowResRef!.takeUnretainedValue()
image.addRepresentation(NSBitmapImageRep(cgImage: imageLowRes))
let imageHighResRef = QLThumbnailImageCreate(kCFAllocatorDefault, url as CFURL , CGSize(width: imageLowRes.width*2, height: imageLowRes.height*2), nil)
let imageHighRes = imageHighResRef!.takeUnretainedValue()
image.addRepresentation(NSBitmapImageRep(cgImage: imageHighRes))
Edit: If you add let options = [kQLThumbnailOptionIconModeKey: true] as CFDictionary, you get to the options parameter, you get the preview rendered as icons.
I currently have UIApplicationShortcutItem working, however, I would like to use my own custom Icon.
I know that I can use iconWithTemplateImageName to get my own custom icon. However, I would rather not include 100s of icons with the app. It seems that iconWithTemplateImageName requires the image file to be included in the xcassets.
I have a function that downloads and save an image to the Document folder upon the user dynamically adding UIApplicationShortcutItem. Is there a way to referance the newly downloaded image.
How I add UIApplicationShortcutItem
let icon = UIApplicationShortcutIcon(templateImageName: fileName)
let newItem = UIMutableApplicationShortcutItem(type: "Chance", localizedTitle: title, localizedSubtitle: chances.joinWithSeparator(", "), icon: icon, userInfo: ["Items":chances])
existingShortcutItems.append(newItem)
UIApplication.sharedApplication().shortcutItems = existingShortcutItems
Where fileName is the path to an image I have saved. I have tried both the full path and just the file name. Ofcourse that wont work since its not in the xcassets
Is there a way to add the image to the xcassets at runtime?
Is there a way to use an image on the fly?
Working version of the code:
let icon = UIApplicationShortcutIcon(type: .Favorite)
let newItem = UIMutableApplicationShortcutItem(type: "Chance", localizedTitle: title, localizedSubtitle: chances.joinWithSeparator(", "), icon: icon, userInfo: ["Items":chances])
existingShortcutItems.append(newItem)
UIApplication.sharedApplication().shortcutItems = existingShortcutItems