Hello,
I'm trying to create a complication for Apple Watch, in the modularSmall family, using a CLKComplicationTemplateModularSmallSimpleImage. I want the image to be displayed as a multicolor image when the tint is set to "multicolor" (just like the calculator's complication). My issue is that it is always displayed as a white image, and never as a multicolor image. I tried to set the tintColor of both the image provider and the template to .none and other various values, but I can't get my full color image when scrolling trough the templates... My code is as follow :
case .modularSmall:
let imageProvider = CLKImageProvider(onePieceImage: UIImage(named: "Complication/Modular")!)
let template = CLKComplicationTemplateModularSmallSimpleImage(imageProvider: imageProvider)
handler(template)
Any idea to help ?
Related
I'm trying to recreate the same look and feel like the settings app on iOS in a Catalyst App.
I got a SplitViewController with a TableViewController set up as Grouped as Master and a TableViewController set up as Inset Grouped as Detail.
For the Table Views I've set the background color to System Grouped Background Color and for the Table View Cells I've set the background color to Secondary System Grouped Background Color.
Everything looks as expected on all devices (iOS / Mac) except for light mode on the Mac. It looks like the colors are inverted. The Table View should have the light grey background color and the Table View Cell should have a white background color but it's the other way around.
Is this default Mac behaviour or is something wrong?
I created a sample project on GitHub:
https://github.com/robertveringa89/systemgroupedbackgroundcolor
Seems to be a bug or intended behavior on macOS. I'm guessing it's a bug. But you can easily define your own colors with correct colors in a UIColor extension:
extension UIColor {
static var systemGroupedBackground2: UIColor {
UITraitCollection.current.userInterfaceStyle == .light ?
UIColor(hex: "F2F2F7FF") :
UIColor(hex: "000000FF")
}
static var secondarySystemGroupedBackground2: UIColor {
UITraitCollection.current.userInterfaceStyle == .light ?
UIColor(hex: "FFFFFFFF") :
UIColor(hex: "1C1C1EFF")
}
}
I ran into the same issue. I'm not sure if it is a bug, or a weird design decision on Apple's part. However, a fairly easy workaround is to create custom colors in an asset catalog that use the default colors on iPhone and iPad, but custom colors on macOS Catalyst.
Just create a color, like aGroupedBackgroundColor, make sure "Universal, iPad, Mac Catalyst" are all selected under Devices, and set appearance to "Any, Dark"
Then you can assign system colors to everything except for the macOS Catalyst light appearance. For example, for the table background, assign the "groupTableViewBackgroundColor" to all the light and dark appearances, except for Mac Catalyst Light appearance, assign "System Gray 6 Color".
Then, you can assign your aGroupedBackgroundColor in interface builder to your table view backgrounds, or reference it in code like so: UIColor(named: "aGroupedBackgroundColor")
Here's an image asset catalog example
I am captruing the content of WKWebView into a UIImage via its CALayer by using the following extenstion to UIImage:
extension UIImage {
class func imageFromLayer(layer: CALayer) -> UIImage {
UIGraphicsBeginImageContextWithOptions(layer.bounds.size, layer.isOpaque, 0.0)
layer.render(in: UIGraphicsGetCurrentContext()!)
let img = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return img!
}
}
When I render the captured image to a UIImageView, I see everything from the web view in the image view; everything, except videos, whose content instead appears as a black box. I encounter the same problem if I use WKWebView's takeSnapshot function or the drawHierarchy function of the UIView class to capture UIImage of the web view. Does anyone know why videos are displayed as black boxes and how one can fix this?
Update 1: Additionally, all GIFs in Google Images are frozen until clicked. A GIF can be unfrozen by clicking on it, at which point it gets resized to take up the whole screen and starts looping.
Update 2: I have read that the recording software OBS sometimes experiences the same problem with capturing videos when the browser that it is capturing uses hardware acceleration. I also read that WKWebView uses hardware acceleration. Is there a way to disable hardware acceleration in WKWebView to try this out? Alternatively, does UIWebView use hardware acceleration?
Update 3: There is another post that reports a similar issue. The poster reports that all GPU rendered content appears black in his screenshots and he believes that hardware acceleration is causing the issue.
Update 4: By using Xcode's "Quick Look" feature I have observed that the layer that is passed to imageFromLayer does not contain the videos (i.e. videos are already represents as black boxes in the passed in layer). This makes me think that WKWebView does not render videos to the same layer as it renders its other content. It also makes me think that if I could access this hypothetical video layer I would be able to combine the two snapshots to form a snapshot of the entire web view.
Update 5: I tried modifying my imageFromLayer function to take a UIView instead of a CALayer so that I could pass WKWebView into it directly. The modified version is shown below, but it did not solve the issue of videos not being displayed. Nevertheless, through the use of Xcode's "Quick Look" feature I was able to observe that the videos are already missing in the UIView of the passed in WKWebView object.
class func createImage(view: UIView) -> UIImage {
UIGraphicsBeginImageContextWithOptions(view.frame.size, view.isOpaque, 0.0)
view.drawHierarchy(in: view.bounds, afterScreenUpdates: true)
let rasterizedView = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return rasterizedView
}
Update 6: Trying to capture the web view via the UIWindow that contains it also results in videos not being captured. I used the below code (note that keyWindow is deprecated) and Xcode's Quick Look feature to test this idea.
let window = UIApplication.shared.keyWindow
let windowLayer = window!.layer
I have a couple of NSButtons which act like player controls (play, pause etc.)
When I assign image to them, that image looks blurry.
let playPauseButton: NSButton = {
let btn = NSButton(frame: .zero)
let image = NSImage(named: "pauseIcon")
btn.imageScaling = NSImageScaling.scaleNone
btn.image = image
btn.setAccessibilityLabel("Pause")
btn.isBordered = false
return btn
}()
The image can be viewed on:
https://www.dropbox.com/s/38tvh49ikc2m4x7/Play.pdf?dl=0
This image is .pdf, but I tried .png with 1x,2x and 3x, and it still looked blurry.
I also checked this question:
Images in NSButton and NSImageView Blurred
But it did not help me either.
The solution was very simple.
Open the asset catalog.
Select all your assets that are blurry.
Open the attribute inspector by pressing: command + option + 4.
Check the box that says "Preserve vector data".
Under that checkbox, look for the "Scale" and set it to "Single scale"
Please note that this only works if your designer exported icons as a PDF file. Also, it wont work if you just convert .png or .jpg to .pdf, the actual vector image must be exported to .pdf.
Here are a number of to try that have fixed blurry edges for me in the past.
Assuming you're running in Mojave and/or using layer backed views, be sure that the NSButton draws its own background color ( setDrawsBackground YES ). Otherwise what can happen with CoreAnimation CALayer is that the blending operation of the NSImage background alpha is substandard/wrong.
This shouldn't apply to an NSImage, but maybe its worth a shot: http://stackoverflow.com/questions/5722085/nsbezierpath-rounded-rectangle-has-bad-corners
[nsImage setScalesWhenResized:NO];
try different NSCompositingOperation NSCompositeCopy vs. NSCompositeSourceOver
I have created .png icons 20 x 20 and when I set the image property in the nib they just appear grey blocks.
Any ideas?
UPDATE: Here is one of the icons!
The standard tabbar icons in iOS are rendered solely from the alpha channel. Colors are ignored completely. Instead of colors you can use different alpha values that lead to a different shade of gray (or blue if selected)
Make the background of your icons transparent.
Download these attached images and pass them to your designer and ask him to just create images like these (when you open them in PS you'll know the difference)
This happened to me in iOS 5, I got around it by setting UIImage Outlet property in the Xib to 'Custom' and then set the label programmtically so : imageOne = [UIImage imageNames#"Dog.png"];
Try saving the file as png interlaced. In photoshop at least it gives you an option of interlaced or normal.
I am trying to put an image that contains a text on UITabBarItem.
I went to our Graphics designer and asked him to create an image for me that contains a text "Summary".
He actually did. ( a png image).. but when I put inside the app, I saw a horrible look..
The Image:
How it look in the app:
To create an image for a tab bar or toolbar item, you or your designer must work in the image's alpha channel. The colors in the image don't matter at all, the OS only is interested in the alpha channel. In your case, the background of your image should be fully transparent instead of black.
It is absolutely possible for you to use custom colors and images instead of the ones provided to you by Apple's own UITabBarController. I used the code explained in this (really thorough) tutorial - works great.