Say I have two UIViews. One is a UIImageView of a frame, and one is a UIImageView of a picture. I want the picture to stay inside the frame regardless of screen size using autolayout. The picture is NOT a subview of the frame - they're just two imageviews that I want to remain superimposed in the right proportions.
I can't pin the heights, because I want them to change when rotating (for arguments sake say I pinned the frames bottom to the bottom of the main view). I can't make the heights equal, because they're not, the picture should be smaller. I can pin the horizontal spacing, but that will just make sure the picture's x,y are right, but not height and width.
I want it so that if for whatever reason I change the frames size (via transform, for example), the picture will follow.
Can I do this in autolayout, or is coding required?
You can make constraints pinning the centerX and centerY of the two views to be the same. Then you can make constraints to specify the width and the height. It depends on how big your frame is. You might try
picture.width = frame.width - 20
or
picture.width = 0.8 * frame.width
(and do something similar for the height).
If you want them both to rotate, you need to either set the rotation transform on both views (not recommended) or put them both in the same superview and set the rotation transform on that superview (recommended). Remember, if a view has a transform set then you can't make a constraint that goes from within that view to something outside that view. They are like separate worlds.
Related
I am having issues maintaining a circular uiimageview when using autolayout without fixed height and width.
Example with fixed height / width inside a uiview container that has a fixed height.
storyboard constraints
Circular image
in viewwillayoutsubview
profileImageView.layoutIfNeeded()
profileImageView.layer.cornerRadius = profileImageView.frame.size.height / 2
profileImageView.layer.masksToBounds = true
Example without fixed height / width inside a uiview container that has a fixed height.
Storyboard constraints
Circular image
Goal: What I am trying to achieve is create a circular uiimageview that scales for all device screen sizes. I believe the issue is that without fixed height and width my cornerRadius is not correct for a circle.
What would be the best way to achieve this without setting a fixed width and height as that does not work on all screen sizes.
The first problem is that you’re pinning your view to all the edges of its parent with a fixed margin.
That may well produce a square in your storyboard, but doesn’t necessarily on your device (it depends on if your parent is constrained as a square or not, which I can’t see in your screenshots). If the parent stretches it’s width to fit it’s own superview, but doesn’t adjust its height, then your image is stretched into a rectangle.
That looks like it is the case, as the image appears stretched horizontally.
I’d suggest you remove all constraints from your image view and start again.
Make the image have a width equal to, say, 0.8 of its superview, give it a 1:1 ratio, and center it horizontally and vertically with its parent.
The second problem, is that you may be setting the cornerRadius too early.
When the view is loaded from your Storyboard, its width and height are whatever it was in storyboard.
Once the view has been laid out in its parent, the width/height will be adjusted and you’ll be left with an incorrect cornerRadius.
To solve this, simply make sure you have a 1:1 aspect ratio constraint on the view, and set the cornerRadius in viewDidLayoutSubviews (instead of viewWillLayoutSubviews).
I have a UIView buttonView and gave it an equal heights constraint to the super UIView with a 0.4 multiplier. The frame is adjusted correctly but the subviews of buttonView are not visible. However, when I click on the position where the buttons are supposed to be then the actions triggers.
This does not happen when I change the buttonViews constraint to be a fixed height.
I can get more into details if you want but has anyone run into something similar?
EDIT
There should be two buttons where the white space underneath the label is. When I click on the white space the timer runs but the button is not visible.
I took a look at the project and the issue I saw in a couple places was that auto layout and manual frame transformations are both used, which can be tricky. A couple specific things I saw that you will probably need to modify in order for the view to adapt and render correctly at different sizes / orientations:
1) The CustomAudioLearn view loads a view from a xib and adds it as a subview. However, it does not set constraints on this subview to make sure that the subview always hugs the edges of the parent view. So changing the size of the CustomAudioLearn view through auto layout in the storyboard results in the the xib-based subview always staying the same size. You should either add constraints to the subview or override layoutSubviews() in CustomAudioLearn and include self.customView.frame = self.bounds and self.customViw.layoutIfNeeded() in there. Also, I would suggest removing the line self.customView.translatesAutoresizingMaskIntoConstraints = false
2) Similarly, the RecordButtonView sets its corner radius on awakeFromNib(), but after layout happens, that's no longer the right radius. So you should again consider overriding layoutSubviews() or similar location to adjust the radius every time the layout is updated.
3) Lastly, the superview of the RecordButtonView in the storyboard is set to a height constraint of 70 with a priority of 1000. If you want the RecordButtonView to expand for the space available, you should reduce the priority of that height constraint so that the proportional width of the RecrodButtonView and the 1:1 aspect ratio take priority in determining the height of the superview. Otherwise, it will always be 70 points, or there will be conflicting constraints.
The problem was that I set the rounded corners to half of my frame's width. The radius got so big that it completely hide the view. I changed it so that after the bounds are set I change the corner radius. Sorry for confusion but thanks for any help!
I am trying to arrange controls in the storyboard using constrains via Interface Builder ("Any Width, Any Height" case). I add there UIView, however, when I press update frames for this element (Selected Views case) according to the given constrains UIView disappears from my view. I guess it size becomes zero. Later on, it is not show up in the screen after the run. The issue is also reported in the issue navigator: Horizontal Position of UIView is ambiguous (marked with the green shape). Anyway, if I set the constrain for width or height (size parameters) together with the constrain of ratio, then the issue disappears, I can update frames, it shows up in the screen during the run.
I am adding the picture with the green marks to make the issue more clear:
The question is whether the parameters of the size are obligatory when I am setting the constrains.
Even if they are obligatory how I can make the size to fit different sizes of the screens or iPhone+iPad because if I set/fix the size it could too big for some screens.
The size is not mandatory. The warning tells you that you must set an X position for this view (constraint between the superView left or right border and the left / right border of the view itself). If you want the view to resize itself to fit each screen size you must set both left and right constraint without the size constraint.
You shouldn't used fixed size (width or height) for view that change size when screen dimension change.
If you want view that fix aspect ratio you can set size that relative to Superview's width or height using:
1) leading and trailing and make sure that
view.leading = superview.leading + fixed_margin
view.trailing = superview.trailing - fixed_margin
and not other way around.
2) equal width or equal height with multiplier, constant relative to superview as you want
So you don't need evil size class.
I've been struggling to learn autolayout (finally). I want to have a vertically scrolling UIScrollView that holds all the content for the view. I want to pin a UIImage view to the top of the scrollview and keep the image a square (scaleToFill). Basically I want to do this (only I want to do it with autolayout):
I can't get the image to keep its aspect ratio while staying within the screen bounds. Whenever I add an aspect ratio constraint the imageView grows to like 600 points (the width of the png I think), but I want it to just be as wide as the screen.
I think I am setting the constraints up for the UIImageView correctly because if I get rid of the scrollView and just drop the imageViw directly on the view then it seems to do what I want it to. The trick is putting it inside the scrollView.
This is how I currently have it set up:
The 4 vertical/horizontal space constraints on the scroll view are all set to constant 0.
Since the size of the UIScrollView depends on its content, you cannot have the size of your UIImageView subview dependent on it.
You have to remove the aspect ratio constraint of the UIImageView and use a fixed width one. You can also have your UIImageView width dependent on another view in the UIScrollView which has either a fixed width or otherwise unambiguous width.
Don't forget to use Placeholder as the intrinsic size value in Interface Builder.
Hope this helps.
I'm trying to zoom in and out an UIView, and rearrange it content to look similar for both states: zoomed and normal.
This picture shows the default state (the view that I'm going to zoom has orange color and has 5 UIImageViews) :
When I press "Zoom in" button I change orange view frame:
_page.frame = self.view.bounds;
And I'm getting the following result:
But the goal that I want to achieve is something similar to this (same result if I would scale the view):
It means that I must change frames for each subview, but it could be complicated when view would have many objects on it.
What I'm asking for are some hints or methods how can I get desired result without accessing subviews.
There are be hacks to do this, but the proper way would be to use auto layout. You don't have to access any subviews and will be able to do it in the storyboard/IB.
If you use auto layout, you can actually create constraints which will pin the following attributes of the subviews:
Pin the top subview's top space and leading space to the container
Pin the all but the last subviews' vertical distance to its nearest neighbour and leading space to container
Pin the last subview's top vertical space to its nearest neighbour and bottom space to container and leading space to container
Set constraints for height and width but set the priority to low
In addition to setting the frame (which just changes the size of the view) you want to change the transform (scale the view) Try something like:
_page.transform = CGAffineTransformMakeScale(2.0, 2.0)
You'll probably want to calculate the scale factor based on the old view size and the new size.