I'm trying to emulate Xcode's toolbar controls to show/hide the Navigator and Inspector:
...but without the bottom pane (only left and right: two segments)
I screen-captured the icons from Xcode's UI and traced them in an image editing application. The resources for the left pane are:
#1x:
(20x20 #72 dpi)
#2x:
(40x40 #72 dpi, although using 20x20 #144 dpi seems to make no difference)
The right-pane counterparts are identical, but flipped horizontally.
All rhe resources are stored in the asset catalogue, as follows:
I dropped a segmented control on the toolbar, to create a toolbar item with a segmented control inside it, and set the image attribute for each segment (0 and 1).
Image Scaling for both segments is set to "Proportionally Down". The segment control has segment width "Fixed" checked, with a width of 48 for both segments. The toolbar item has Minimum Size of (83 x 25) and Maximum Size of (100 x 28).
The icons display correctly on the storyboard (Interface Builder).
However, when I run the app, I can not get the icon images to display appropriately.
If I launch my app on a retina monitor, no icon is displayed on either segment.
If I move the window to the external, non-retina monitor, both icons are displayed.
If I remove the one of the two image sets from thew catalogue and run the app, the other icon is correctly displayed! (on either monitor)
If I further set the same, remaining image for both segments, they display correctly!
If I leave both image sets in the project, but reset the Image field in one of the segments to empty, the other icon isn't displayed eihter!
What on Earth is going on??
I have put a sample project on GitHub that reproduces the issue.
Edit: Just to make sure, I extracted the resources from the compiled app binary using the cartool command line utility (as explained in this answer), and all 4 images are there at the right sizes...
Solution: As suggested by Ivan's answer below, I switched to using vector graphics (PDF) for the icons. I downloaded the trial version of Acorn and recreated my icons at 1x size, then exported as PDF.
To avoid blurring at the scaled up size of #2x at runtime, I had to make sure all coordinates in the editor were integers, and also check the box for "Snap to pixels" in the Vector Shapes inspector for each shape layer:
(Happy Ending)
$ git commit -m "Fix toolbar icons for good (PDF)"
According to my experience, using of bitmaps in toolbar is troublesome. You can try to target exactly recommended resolutions to possibly avoid some problems: https://developer.apple.com/macos/human-interface-guidelines/icons-and-images/custom-icons/
However, the cleanest way would be to use vector (pdf) icons, as they simply work as intended.
Related
I'm trying to create Finder toolbar icons that match the look and feel of Monterey, but they seem to be jagged as if there are issues with anti-aliasing.
Here are the retina icons I'm trying to convert (two on the right):
And here is how they look on my non-retina display:
At first, I thought this was simply a problem with automatic anti-aliasing. However, when I manually resize the icons to 32x32, this is how they're supposed to look:
But when I use those icons in Finder, they look jagged all over again. I have no idea what is happening.
Update
Steps to reproduce:
Take icon_terminal_light.icns from this icon pack
If you already have a custom Finder toolbar icon, skip to step 6
Right-click on your Finder toolbar and choose "Customize Toolbar"
Click-and-drag any application onto the toolbar
Click "Done"
Right-click on your application and choose "Get Info"
Click-and-drag icon_terminal_light.icns onto the icon in the upper-left
Notice:
If you move the Finder toolbar to a non-retina screen, the icon will look thin and the edges will be jagged.
You can even open icon_terminal_light.icns in Preview, resize it to 32x32, and then export it to a new icns file. The icns file will look smooth on a non-retina monitor, but if you try putting it into the toolbar, it'll be jagged once again.
Finder has a quirk whereby the alpha layers of toolbar icons get multiplied by two when the window is active. If the Finder window is in the background, however, the icons probably look how'd you expect.
If your icons have any thin graphical element, the anti-aliased pixels will have low alpha values. When those alpha values are doubled, the pixels practically disappear, which is what looks like is happening.
I solved this issue when trying to resize the icons provided in OpenInTerminal-Light. My solution is a bit of a hack:
To fix the rendering, I manually resized the icons and added 89% gray behind the anti-aliased pixels. Every pixel has either 0% or 100% alpha now.
You can see more detailed notes in the issue I opened on GitHub.
I have generated the assets for my uwp app using the Assets Generator (which is inside the Package.appxmanifest) and also using this extention.
It generates files OK. However when i see the icons, they are centered. Like (the icon on the right of Settings) where you can barely see anything. The quality of the icon is better than it is showed here, and the quality of the icon is good. So the problem is that the icon is centered in the rectangle. I want it to stretch over all its rectangle.
Like:. (it does not need to stretch to 2 rectangles as in this photo.)
How can i do this?
Edit: Perhaps the question was not clear. I want to remove the padding from the icon. Let me give you another example that may be more clear. In the taskbar.
I have my logo here, with padding outside. I want it to stretch so there is no padding.I want my logo to be the size of the actual container.
Stretching the icon to 2 rectangles has nothing to do with the developer. You as a developer do not have any control over that. The user can right click the tiles and select the size of the tile, if they select it to be medium size, it will take space of 2 rectangles if small then only 1 and if large size is selected it take size of 4 rectangles.
In the image below you can see I have opened the context menu on the SMicrosoft Store tile and its selected size is currently Wide which is why it is currently taking 2 squares ( or rectangles ) and I can change its size to small, Medium or Large as well, this is all done at the user end after they have installed your app.
If you want to remove extra padding around your assets: when you generate assets with the built in asset generator of the manifest there is a checkbox "add recommended padding" uncheck it and you will have the desired result.
Do you know why this is happening and most important how to fix it?
Adding the key with what value?
Starting in tvOS 10 you must include a wide top shelf image, Top Shelf Image Wide, with a size of 2320px by 720px #1x. tvOS Human Interface Guidelines: Icons and Images.
If Top Shelf Image Wide is not already in your Assets.xcassets you can create one manually, or with the + Add a Group or Image Set button. For example:
The crop area is still 1920px x 720px #1x when the top shelf image is displayed on the Apple TV. So, if you're using any text or images that you don't want cut off make sure to make them centered in those dimensions. For example:
The areas in red are only used for sliding in your top shelf image when your app icon becomes highlighted on the Apple TV home screen.
EDIT:
Check your target's Build Settings.
I think this is an obvious bug on Xcode 6.0.1 but I'm searching for at least a workaround. In interface builder, I have an image view that is smaller in dimensions than the image that it contains. Here is my newly created, fresh nib with just an image view, the heart image is a larger PNG file than the containing image view:
So far so good. However, when I click on the any of the grips at the corners/edges of the view to resize the image view, it immediately changes to this the very moment I click on the grip:
This happens whenever I try to resize by hand (I can resize using width/height values at inspector though) and I have hard time trying to fit my design into the nib. The problem happens both on nibs and the storyboards. Does anyone know a workaround?
UPDATE: I've updated to Xcode 6.1 but I'm still having the same problem.
The same result I've noticed when close and reopen the project. The view continues to grow up every time. I have created a simple project to search the cause of the wrong behavior of the autoresizing mask (flexible width AND align to right).
So, try to disable "flexible width/height" and "align to right". Keep the "align to left" only.
This answer is for autolayout-enabled views/nibs. For autoresizing mask solution, see Nicolai Nita's answer: Xcode 6.0/6.1 Interface Builder resizes views to fit whole content when clicked on the corner grip to resize
I've solved the problem by setting the content compression resistance priority (both vertical and horizontal) to 250 from 750. I don't know why it wasn't the case before Xcode 5 though.
I am having a property sheet and added three pages.In the first page I added a picture control and in the properties of that picture control for "Image" property I am setting a bitmap.And was able to load very successfully.But,the problem here I faced when I run my exe then I am getting bitmap on the page header(which is some kind of banner for the page.)But what I noticed is there is some gap between the banner bitmap and the frame edge (which is occurring at the right top corner). And when I ran my xxx.exe on a Japanese machine then I had observed like the sheet is somewhat stretched and banner bitmap is not stretched completely till the edge of the sheet (top right corner)for Instance if we take a dialog on load a bitmap on it then we can observe that it is entirely got stretched till the edge.
So how can we avoid this issue like whatever the operating system it is and whatever the resolution it might be that banner should get stretched till the edge of the sheet.The gap has to be removed.
I am not loading the bitmap dynamically (setting in the properties.)
Can anyone please help me ti achieve this
The reason you get different results on different systems is that dialogs and controls are sized using "dialog units" which are based on the average size of the font, rather than an absolute number of pixels.
By default a static image control will resize itself to the size of the bitmap it's displaying. So if the dialog itself ends up bigger than normal (because the font is physically bigger), the picture control will appear to have shrunk, leaving a gap.
You could try setting the SS_REALSIZECONTROL style on the static control. The normal behavior of the static control (when displaying a picture) is to resize itself to the size of the bitmap, however the SS_REALSIZECONTROL style overrides that behavior and instead causes the bitmap to be resized to the size of the control. However the results of that may be less than optimal (e.g. the aspect ratio will probably be wrong), so instead you may want to look into scaling the bitmap yourself.