EDIT: I still have not gotten this to work. Would someone mind downloading my simple test project and trying it on their machine? There's just boilerplate code and a storyboard.
https://www.dropbox.com/sh/qtoqhi7pjq5w3hh/AADLCTY_7FPG18RWeSe57Jroa?dl=0
ORIGINAL QUESTION: I’m developing a macOS app for Big Sur. I want to take advantage of the blur effect of the window bar over my content. I have set the fullSizeContentView mask on the window. However, I can only get the effect to work when I have set a minimal amount of spacing between the scrollview’s leading edge and its superview’s leading edge. This seems to be a bug in AppKit. Can anyone confirm or tell me what I’m doing wrong?
See below clips:
First I have a simple Xcode project (no code, just using the Storyboard). Scroll view is setup in the content view of the view controller. The Scroll View has no spacing to its superview for its top, trailing and bottom edges. The leading edge has standard spacing (20pt) to its superview’s leading edge.
This works as expected, but I don’t want the the leading edge spacing. So I set the leading edge spacing to 0.
And the blur effect goes away.
Update: It seems that this 'issue' has been fixed in macOS 12 beta 5.
The code below may still be useful for macOS 11.
Nowadays macOS is overcrowded with small weird 'issues' and this seems to be one of them. In most cases these issues are only solvable by applying weird solutions, because we don't have access to the inner parts of AppKit.
if let constraint = view.constraints.first(where: { $0.firstAttribute == .leading }) {
constraint.constant = -0.3
}
Applying a small negative leading constraint seems to solve the problem for now. Can be done in code, and theoretically also in the Storyboard, although it's hard to enter and store decimal values in interface designer.
Related
I'm working on a project where I want the following in an NSTableViewCell:
Image
Text
Subtitle text
The NSTableView is in a window which the user can expand or contract. When the window expands and contracts, the text wraps as needed.
That much is working.
When it comes to the image view, I can't get the thing to resize at all. I don't understand how the text automatically wraps, but images don't automatically scale. I've been working on iOS so long that I might have missed something in how stack views differ between iOS and macOS, but I never had this problem in iOS.
I don't have much code because the text wraps properly without any code at all, so instead I posted a minimal project showing the problem on Github:
NSImageTableViewTest
Some things I tried:
I have to set the width/height of the image view, or the text won't wrap. It seems to me that the reason why is that if I keep the image view unbound, the table view starts at the width of the image.
I tried setting the leading and bottom constraints of the image view to no avail.
I tried setting the constraints of the NSStackView, but that doesn't help constrain the frame of the image view.
Question: do I have to change the frame of the image view in code? I did try that, to no avail.
At this point, I'm stumped and I'm sure the fix is something easy that I overlooked.
Thanks.
The image view doesn't shrink because the default Content Compression Resistance Priority is too high. Set the Content Compression Resistance Priority to (a bit lower than) "Low (250)".
Here's what happened: I had a pretty much finalised app. I added a feature, which is completely unrelated to the GUI (so I think), I noticed a strange behaviour of GUI elements which have already been polished and worked flawlessly. After two weeks of playing around, disabling/enabling code, recreating and altering stuff I'm out of clues on how to solve this.
Take a look at this picture:
There are two bugs which appeared simultaneously and that's why I combine them into one question.
I have a simple background view with .wantsLayer = true and .masksToBounds = true. On it I have multiple views with the same settings and a .cornerRadius to their layer. A few weeks ago this worked perfectly. Now I can see some (! not every) corner not actually being cut off but displaying (often simply black) content.
Some corners show white content (top left). Some display the content of a completely different layer (the bottom views)!
To clarify: for debugging reasons I added a simple red layered view below the white one at the top of the picture. I expect the white view to have rounded corners (red!) both at the top and and bottom. However the top one is white (with a red line) and the bottom one isn't round at all. Second, and this one is weird to me, the bottom views do not have anything set to the colour red at all! The red coloured corners come from the colour of the top view's layer! If I make the top view's background view blue instead of red, the corners of the bottom views become blue as well.
What I found out so far:
The corner thing normally happens when the parent view is not set to .maskToBounds = true. It is set in my example and also it worked before. How could I have messed this up without touching any related code or views in Interface Builder?
I failed to find anything online regarding layers showing content of other layers in portions which should not be visible...
Any help would be highly appreciated!
Note: there's a drop shadow on the bottom views which is a completely different view underneath doing nothing but dropping a shadow. I forgot to remove it for the screenshot.
I don't know the reason behind this behaviour but I found a solution.
One of the many views (with CALayers) and subviews is a NSProgressIndicator. And I assigned a Content Filter named "Hue Adjust" with the value of -0.5 to it, in order to have a different colour of the bar. Removing this Content Filter in Interface Builder solved the problem and the GUI looks again like it should:
I would still be interested to know why this happens and how I can keep my tinted progress bar without losing the corners...
I'm trying to set a constrain of "0" to a UIImageView from the sides (left & right) but when I add the constrain with "Constrain to margin" checked, it pins the image all the way to the edge of the ViewController while it should keep some distance, why is this happening?
I was having the same problem and recently resolved the issue by turning off the safe area. Safe Area Layout is enabled by default. To disable Safe Area Layout in Xcode 9, choose View > Utilities > Show File Inspector and deselect the checkbox for Use Safe Area Layout Guides. This should correct the issue. Good luck, hope it helps.
Check to see if your UIImageView is overlapping or placed past that margin line. If this is the case, the constrain to margin thing doesn't do anything. What I did to fix this was manually move that object so that it was away from the margin line and try again.
This lets you keep the Safe Area.
I found that if the UIView is overlapped with or by another view this issue also happens - for example if you want to put an image up by the side and you also have a full screen camera preview.
The solution for me was to drag the view where I wanted it (i.e. to one side) and then set the constraints and it behaved properly from then on - I did not have to remove the safe view. This is with Xcode 10.1.
I've build this view in inferred size in Xcode 6 -
Every button is in an image view. When i run the app it looks terrible.
I know a little bit about auto-layout but i can't make it look good.
Any tips?
I guess the only way to help you is to suggest you grabbing a good auto-layout tutorial. I guess this one is perfect in your case: https://www.youtube.com/watch?v=IwSTXY0awng
Hope you will get a better understanding of using auto-layout.
Nevertheless if you want some immediate tips, here are some. Remember that I can only guess how the appearance should look like on other screen, it all depends on your vision:
1)Set the trailing space and leading space to superview for the blue rectangle. Don't forget to pin it on the top as well
2) Set leading space for YT and FB buttons, the first should be pinned to the blue rectangle while the latter should be pinned to the bottom of subview.
3) Do the analogy with yellow and green one, but set the trailing space instead of leading space
4) Twitter button should be pinned to fb icon and to the bottom of subview
I'm having some issues with the constraints in my app. Here is how it looks on the iPhone 4 (that's how i want it to look, and how i usually setup my interface, is this the proper approach or not?)
Now, when i switch to the iPhone 5 screen it looks like this
and as you can see, the blue dots (which is UIButtons) are not placed where i want them to be. I made my constraints rely solely on the right side of the view (since that is the one re-sizing, i found that in order for you'r views to align themselves accordingly, it doesn't help to align them to the left side). I don't really know how to fix this. I am finding this new iPhone screen to be a real pain in the arse. Any good advice on how to work with this new screen without a lot of headache would be appreciated :)
Thanks on advance
It looks to me like the are still the same distance from the right side of your view, as you said you set them to be, while the background has stretched to fit the new size. I suspect it's actually the background that isn't doing what you want it to do (keep the same aspect ratio and show more stuff on the left), or try keeping the buttons relating to left and right to stay aligned with the stretched background image.