I have the following configuration of a view:
Sometimes I have an image to put in the image view, sometimes I do not. If there is no image to show, I would like the Title label to be extended to the right, occupying the whole space of the image and the gap between the label and the image. I assigned a constraint "less than or equal" to the width of the image view, so I guess it might get zero width if the image property of the image view is null. But how do I remove the gap between the image view and the title label? I know it is possible from code by defining an outlet for the gap constraint, but is it possible in a simpler way, maybe from interface builder?
Nope, this isn’t possible in XIB. I’ve filed enhancement requests (starting even before this shipped). File more! The more votes this gets, the more likely it is to happen.
We ended up adding an outlet onto our subclass of ImageView that we point at the constraint we want to go away, and in the subclass disabling the constraint when the image is nil (we use different tricks to disable it in different places, since there’s no one single easy way).
Related
I'm building a FeedViewController for my app.
This screen consists in a tableView (or a collectionView), that shows users' posts. A post always have a content, and it can include or not an image.
I was wondering what is the best way to handle the case when there is no image to display, how do you handle the height of the table view cell and assure that the spacing between each item remains the same?
What I've tried :
I created a subclass of table view cell and inside I added some constraints. Within the cellForRowAtIndexPath method of my FeedViewController, I added an "if statement" to check whether the postImageView.image is nil or not, and update the height constraint of the post image accordingly. The problem is, as you can see in the screenshot below, the spacing slightly differs from a cell with an image, to a cell without an image. I would like the spacing between elements to be exactly the same, no matters if there's an image attached to the post or not.
How would you guys solve that problem ?
Thanks for your help,
J.
If you use the autolayout then u need to give bottom and top constraints to buttonlabel. OR if you use the autoresizing then you need to fix the position of buttonlabel. #jellyfish6
I think you have given BottomConstraint for "Bottom Label" that is the reason why it is having different spacings.
I guess instead of giving bottom constraint provide it with top constraint or both and manage it with priority.
I've designed a ViewController with an ImageView, 3 Label-TextField combination, one single Label and one Toolbar at the bottom of the view. All of these view elements are inside a Stack View. The design is like below:
The contentMode property of the ImageView is set to Aspect Fit in the Attributes Inspector.
Now when I run the app and select different size of photos, the ImageView seems to be inconsistent different times. Like:
The teal color background the ImageView is set to distinguish the difference between the ImageView and the original Background.
This is okay. But when I choose a large size photo it seems to be inconsistent as the ImageView is overlapping the Toolbar below and this time the Camera button is no more clickable. Here is the image:
And the design gets more broken when I choose another photo. The view is showing up differently in different times. Screenshots are: and
Now what to do? I haven't done any of these design from the code side, all from the Interface Builder.
Any help will be appreciable.
I have these options in the Drawing section of Attributes Inspector:
And this is my Stack View's attributes:
Well it seems everything is fine. Just add height constraint in your Toolbar. The problem will be fixed.
First, make sure you've checked Clip To Bounds property of UIImageView in Attributes Inspector.
Second, set your constraints and / or Stack View's Distribution property in such way that all your views fits within available height.
Here's a sample: https://www.dropbox.com/s/5a7r0oz1v8vclgz/AspectFitImageView.zip?dl=0
By searching a lot of ways around, I finally was able to sort out the issue. Setting the content hugging priority(don't want to grow) and content compression resistance priority(don't want to shrink) helps a lot. Basically I needed to adjust the elements vertically. So tuning the vertical priorities for each element solved my problem. As I have to keep the size of the ImageView to be changed from time to time I've made it's vertical hugging and compression to lower than the other elements of the Stack View. Other priorities are kept as they were by default.
To visualise the situation, here is attached images. Color combinations are used here to distinguish among the elements of the Stack View.
Hope this helps.
I implemented a viewcontroller similar to the one in this question:
iOS two views cover exactly half of parent view
I get the desired result. The problem is that when I add a UIImageView into those two containers, the result get resized and ruins the symmetry. How do I prevent Imageviews from changing the size of their containers? I need to use AspectFill for these images.
I don't think the containers' sizes are changed. You just need to set their clipsToBounds property to true to avoid overflow.
If you use Reveal you should see the containers' sizes are not changed even if pictures inside them are bigger than themselves.
I'm unsure I understand what you mean about adding UIImageView into those controllers causing the views to resize, so forgive me if I'm getting this all wrong...
It sounds as though you've created two views of equal height that, together, consume the entire vertical space of the screen. After having done that, you want to add one or more UIImageView's to each of the original two views. Unfortunately, when you add the UIImageView, the enclosing view is resized.
Assuming I have that correct...
Are you doing this with Interface Builder either in an XIB or Storyboard file? If so, you ought to be able to achieve this with the proper set of constraints.
In the following image, I've laid out what I describe above.
As you can see, I have a red view on the top half of the window and a green view on the bottom half. The red view contains a UIImageView that is 75% of the width and height of red view, with its origin at (20, 20) within the red view.
The scene is configured as shown below:
The constraints on "Upper View" are:
You can see from this that Upper View is flush with the left, right, and top of its superview, and that its space to Bottom View is 0. You'll have to trust me that Bottom View is set up the same way.
The height of the Upper and Lower views is "Proportional" as shown in this constraint:
To achieve this "Proportional" setting, you first make the height of Upper View equal to the height of the superview, and then edit the constraint, changing "Multiplier" from "1" to "0.5."
The height (and width) of the Image View is proportional to that of the Upper view, as shown here:
If you set it up this way, you ought to be able to accomplish what (I think) you are looking to accomplish.
If my original assumption of what you are trying to achieve is incorrect, please post images of what you've got and how it's not working.
I have a text that should be placed over the image. Now the image covers the text, any text that is not visible. I thought here is what the priorities for the display, but did not find them. Tell me how you can specify that the text should be drawn over the picture, and not vice versa.
debug view
The order that things appear in the navigation bar (the second screenshot) is the order they draw in. The lower down they are the later they are drawn. So at the moment your image view will be behind you text (and everything else).
That's actually what it shows in the Interface Builder also as you can see the text.
TBH, your AutoLayout constraints look a little suspect to me. I suspect they are pushing the label off the screen. I really don't think you want the constraints that way. You don't need a height to begin with and if you want the label centred then give it a centre constraint not a leading constraint.
What, exactly, is giving you the impression that the image is over your text? Have you tried the view debugger in the simulator?
You can call bringSubviewToFront method in code [self.view bringSubviewToFront:self.label];
I found solution - mode = Aspect Fit
I'm just trying to display a ViewController as a Popover, this is a small part of a big iPad application, and I've being trying to display the content with no success.
The worst thing is that if I create the same scenario in an empty/new project, it's works! The two View Controllers showed in the Image1 are completely new, I created those after tried to add a simple Popover action in one of my views I'm using in the App...which was not working. I tried with Clean and Build the Project more than once...just in case, but the same result. It's just not working in this specific project.
The two view controllers don't have Classes associated yet, I'm just trying to open the View2 when I click on the Button.
I appreciate your comments if I'm missing something really basic in this scenario.
(Adding more details)
I tried a different thing with the restrictions as you can see in the last two images, now I can see "something", but it's not respecting the positions.
You are using size classes of regular width & regular height (wRegular hRegular).
Design your popover view controller in Any-Any size and it should be OK.
(You can also uninstall the size classes of any object in that view controller)
There are some problems in your constraints.
The Label should have 3 constraints: left (Leading), right-to-the-text-field (Trailing) and top (Top Space):
The width and height are not needed because they are automatically set from the intrinsic content size of the label text ("Label").
IMPORTANT: When you add the constraints be sure that they are absolute, not margin related (to understand the difference read this blog post iOS8 Layout Margins).
The Text Field should have the following constraints: width and distance-from-top (Top Space):
Note that the second ("Leading Space") is the same of the "Trailing Space" of the label, not an additional one (the constraints are 5 in total).
You have to explicitly set the width of the text field (134 in my example) because otherwise the intrinsic content size will be set (and it is near to 0 because the text field is initially empty). The height is set correctly from the intrinsic size (calculated from font height, also if text is empty).
NOTE:
My answer implies some important Autolayout concepts. I advice you to study the Apple documentation to better understand them.
Hope this helps