I'm looking for a way to force a UIImageView inside a collection view cell to maintain 8 points margins, similar to this picture:
It doesn't work all the time, sometimes it crosses the right edge like this:
The image view is set to AspectFill because I want it to fill the space without distorting it. Here is how it looks in Xcode:
I want to force 8 points margin in all sides except for the bottom.
Related
I have PNG images with rounded corners, inner shadows and a fill gradient, that I thought I could slice in Asset Catalogs horizontal and vertically. But no matter what I try, the gradient slice doesn't stretch or tile as I expected. With Xcode 9.1.
The gradient is not copied (although the inner shadow is), and in IB and the simulator, there are just two bars and no gradient.
What am I missing?
Here are the original image:
Here's how I sliced them:
And what they looked like in IB:
And here's what it looks like in IB (with the colors reversed in the simulator (with a red view and another similar image as background without any gradient) and device.
The center is the part that is getting tiled. You defined a 1x1 square that’s getting repeated on the interior of your image in order to make the image fill the space you defined, which isn’t your stated goal. What you can do is change your center to Stretches, and increase the center’s height and width to take up everything in your image that doesn’t include your rounded corners end caps.
I'm going to show you an image that contains my first UIViewController presented in Interface Builder (using the 600x600 Any/Any View).
MainViewController
For now, just look at the UIButton with the C label and the Play button. I added Align center x to: horizontal constraints to both. When I preview what I have (forgetting about the other views and buttons you see), the 2 buttons are centered properly. However, when I switch different device sizes, they do not change size...which makes sense.
What I want is for a way to make those 2 buttons stay proportionally circular and centered on the superview, but adapt their size and Y-position depending on the device size. What constraints would I need to attach in order for that to work? I don't want the buttons to be stuck in the spots you see in the image, I want them to adapt to the device size.
To talk about this further. The game 'Color Switch' does not appear to use constraints in terms of having any view/image/button/label constrained to a certain y or x position. Going from a 5c to a 6s, it's like looking at a blown up version of the game. The buttons and title label at the top are not constrained to the same y position on each device.
You could create constraints to center the buttons to the top-level view and then make their width proportional to the view width. Then on a larger screen, the buttons will be larger and on a smaller screen, they will be smaller.
In a vertical UIStackView I have stacked four UIButtons. The UIStackView is centered (vertically and horizontally), the left side corresponds to the left edge of the device and the right side to the right. Inside the stackview, the buttons take all the horizontal space the stackview takes, so the stackview and its content share their width.
Now, I want to reduce the width of my buttons, so that they are 80% the width of the container (on any device except for iPad) and I want to center them too.
How can I do? I need a solution either in code (Swift) and using any possible property I can't find in XCode
Instead of pinning the stack view to both sides of its superview, give it a width constraint that causes it to be 80% of the width of its superview.
The best working solution is
button.widthAnchor.constraint(equalToConstant:self.stackview.frame-30).isActive = true
This works perfectly fine.
I'm trying to use Auto Layout to minimize the gap between a UIImageView (in green) and a UICollectionView (in red). In the simulator (which I assume is showing an iPhone 4-size screen) the two views line up nicely, with only a small gap between:
However on my actual device, an iPhone 5 with larger screen, there's a big gap:
How can I specify auto layout constraints so that the UIImageView (green box) takes up as much space as available, regardless of screen size, while keeping the UICollectionView pinned to the bottom toolbar?
I've tried experimenting with adjusting the constraints, adding pins, etc in XCode without much success. I feel like I'm just flailing around not really understanding how they work, and I have yet to find a good tutorial that explains how do something like "expand to take up as much vertical space as possible".
So you need to specify that the gap between the two views is fixed, and that the height of the bottom view is also fixed. In visual format language that would be
"V:|[topView]-[bottomView(==150)]|"
V: means this is a vertical constraint
|[topView] means pin the top of topView as close to the top edge of the superview as possible.
- means that the space between the two views is fixed
[bottomView(==150)] means that bottomView must be 150 pixels
]| means that the bottom edge of bottomView is pinned to the bottom edge of the superview
You could also add these constraints in Interface Builder by setting a fixed height on the bottom view, and a fixed gap between the top and bottom views
so i have a uiview that is initialized with a frame that has the height and width that is present for the user, i want the user to be able to draw inside this frame but when the user presses a button, i want the view to cut off that extra wasted space so that the frame is only as big as what the user was drawing. I tried to do something like this
CGRect boundbox = CGPathGetBoundingBox([myPath CGPath]);
boundbox.origin.x = self.frame.origin.x;
boundbox.origin.y = self.frame.origin.y;
self.frame = boundbox;
However, this does not remove that extra wasted space, it only resizes the view, so that the drawn content looks smaller than previously. What i would like to do instead is to remove
that "whitespace", i was thinking if it could be possible to scale up the content of the uiview, but im not sure.
To clarify what i mean:
The red border is the area / frame that the user can draw on, the text in the middle is a drawing, when the user presses a button, i want the frame to only encircle the drawing like in figure 2.
Now lets say i have the following scenario, i have drawn a circle on the middle of the screen.
When i then press the button, the scale remains the same but the circle is still in the same position but we have now changed the draw area, so the circle / drawing will look like its cut off like in figure 4.
What i want to do is to move the drawing / bezier path so that it is positioned in the middle of the frame. So that the red area encircles the blue circle.
[EDIT]
Given your drawings. A UIView will not re-position items in it when you change it's frame property (or it's CGRect). In this case you will need to track the items drawn YOURSELF, and then when the button is pressed perform the object translations yourself.
What that means is you will have to find the object that is left most, the object that is topmost, then move all objects left by that amount, and up by that amount so that all objects are (as a grouping) top-left aligned within the view's frame. After this you will need to self recognize which object is the right most touching and which object is the bottom most touching.
NOW, since you have already moved the items left-top, the right most point will define your frame width, and the bottom most point will define your frame height.
IF YOU SO DESIRE, you should be able to zoom in using the properties below after you have done this.
[First Answer]
If I understand your question correctly, you may want to still perform your box frame manipulation, but if you wish to scale you may want to look into the
contentScaleFactor or
contentStretch
properties.
contentScaleFactor should scale both dimensions based upon a singular floating point value (i.e. xWidth * scaleFactor, yHeight * scale factor).
contentStretch is a CGRect which means that it should scale each dimension (axis) separately.