I have a UITableView and I want it to hit the upper bar, the sides of the view and the Seek Bar below. When I add constraints with the Pin Tool, the UITableView simply disappears and I get no log output.
I use the Pin Tool like shown here:
After this, the table disappears. Why? Here is another picture of my setup, it's literally just up/down/left/right constraints, nothing else, what am I doing wrong?
Solved it by giving the top bar some constraints and giving the UITableView a "width" constraint - I have no idea why that works but now it scales nicely for every display size
Related
I am working on a project on Xcode7.3 using swift using autolayout. I am stuck with an problem with the UITableview not displaying properly on the simulator.
I created a ViewController and dragged a TableView into ViewController. Then I dragged a UIView and UIImage ontop of that TableView (To display as a header image). I also dragged a UIImage onto the prototype cell. They are all aligned in the center horizontally and vertically. However, when I run the app, they don't show in the middle of the screen.
As shown in the UITableView_Problem Image, the images are offset to the right. What is also weird is that when I rotate the screen, the scrollbar on the right does not go all the way to the right. The images appears to be in the center of the screen if I consider where the scroll bar is the end of the screen. But that doesnt make sense because the bottom bar items spans the full width of the screen.
However, if I create a UITableViewController from the story board instead of dragging a TableView onto a ViewController, I do not have a problem at all. (Image3)
It is frustrating because I wanted to add a text field for keyboard at the bottom of the screen just like the comment section in Instagram app. And after hours of searching, it appears that the only way to do that is to drag a tableView onto a ViewController. i stack imgur com JC5Pw png
Could anyone please assist? Much appreciated
Blockquote
note: I dont have a developers account yet so I cant check on an actual device
You are designing your interface in the wRegular/hRegular (or universal) size class. You will need to be very good about your constraints or develop a layout for the wCompact/hRegular size class for iPhones in portrait mode. You can change this by selecting here the blue part on the bottom of your storyboard
Thanks Dan for your prompt response! I added constraints to everything except for the tableView. Dont know what I was thinking as I have been troubled by this bug for a few days. Everything works fine after the tableView constraints was set!
For some reason, no matter what I do, when I create a static tableview inside a UITableViewController, put content into the cells and run the simulator the right half of the screen is always cut off and I don't know why. Ive tried making new projects and remaking the storyboard but nothings working.
Here's what it looks like when I run the app
heres what the storyboard looks like.
I have content set to static cells
Anyone run into this problem or know how to fix it via storyboard (or programmatically but not preferred)?
Update:
Here are some more pictures of what another project looks like when I run it:
and here's what the storyboard looks like
You need to give constraints to your right button...
For that select your button and pin its edges to right, top, bottom and give width constraint like below
and here is autolayout tutorial link .. you can check that
I see the problem in giving constraints to the table not for the button.
Try giving constraints to the table like "leading space to superview,trailing space to superview,top space and bottom space to superview
Edit:
The above solution given by me might fix for tableview inside UIViewcontroller.
I'm trying to use Auto Layout for a custom Table View Cell in my app.
I can't seem to get the constraints quite right.
I layed the labels out in the custom Table View Cell, but the labels are still getting cut off. Any ideas?
Thanks! Will post anything else needed. Tried to show needed info in picture below:
Debugging in Xcode. Somehow what shows in Simulator looks different than in Xcode debug.
Here's the width of my TableView shown:
UPDATE:
The problem here was related to what user matt said in the accepted answer, but I wanted to make the Q&A a bit clearer now that I have it figured out for anyone else that comes across this.
In his initial comment, he mentioned the Xcode View debugging, which was great and I was able to dig into a little bit more. Its called the Assistant Editor: Device Preview, where you are able to see the layout and layers of what is onscreen to see if maybe you have labels overlapping or going offscreen based on the device it is running on. If you want to check multiple device sized, just hit the plus icon in the lower left hand corner of this picture.
This helped me find overlapping layers and sizing issues with the TableView. I was able to see how it looked on each device size.
What also helps here sometimes to use the Pin menu. Sometimes the labels can run off screen because it doesn't know where the constraints of the cell are based on the device size. So your label can run offscreen if the label is based off of a landscape layout but the device is an iPhone 5 and is in Portrait for example. This is the Pin menu:
Hope that makes sense and gives some more color to the problem. Let me know if you have any questions at all, thanks for the help everyone!
The problem is that you are using auto layout but you have not done anything about sizing the table view. The table view here is not your view controller's view; it is a subview. Your view controller's view is automatically sized to the size of the device / window, but its subviews are not automatically resized. So you are ending up with the table view much too wide for the device; the whole table is sticking off into space on the right side.
Use a trailing space from the right side of your labels to the edge of their superview, and set it to greater than instead of equals with a value of ~ 5
Review the constraints of your tableview with the View. Draw cell border, label border and tableview border with different colors to know which elements do not display correctly.
Ex:
#import <QuartzCore/QuartzCore.h>
...
cell.layer.border.width = 1;
cell.layer.border.color = [UIColor blackColor].CGColor;
The thing that worked for me to solve views being clipped was to uncheck "Constrain to margins" in Auto Layout.
I'm trying to learn how to embed pickers into table views and am starting off nice and simply with a static tableview where I've inserted a UIDatePicker within it.
Unfortunately I'm seeing odd behaviour with how the UIDatePicker aligns within the cell. If I line everything up nice and centred within the storyboard then when i run in the simulator i find the picker displays lower than centred and so looks messy. In the end by eye I've had to add padding to the cell beneath the picker in the storyboard to get it looking reasonable within the simulator when running. As shown in the following images.
Anyone any ideas why the storyboard layout isn't being honoured, or whether there's something I can change which would make them behave themselves better?
Apologies for the image resolution size.
layout of picker and cell in the storyboard
outline of my tableview in the storyboard
picker and cell shown in the simulator
Ok I eventually fixed this... i tried using some auto constraints having snapped the picker to the centre of the cell, sadly this didn't seem to help.
I then cleared the constraints and used the align button to add constraints for horizontal and vertical center in container. Added these constraints and now the picker is behaving consistently between the storyboard and the simulator.
Not sure why when adding it centred using the blue guidelines it didn't default to this sort of behaviour without the constraints but now I know.
Thanks to anyone who took the time to read my question.
So I had a UITableView that I tried to make smaller by adjusting its constraints. I then added three labels and textfields to my UIView. However, upon running the app the UITableView doesn't seem to have been made smaller, instead it's "overlapping" my labels and textfields. Here is a picture of what I am describing. http://imgur.com/BoC6l1R. And here is a picture of the storyboard editor. Note the dotted lines. http://imgur.com/wUyccDk. I've tried changing many things with the constraints but they all make everything more messed up. I feel like the solution should be pretty simple. Thanks!
In the second image (the storyboard) you see there's a dotted line and a yellow line with +78. That indicated that the constraint specifies that the table view should be 78 points above where it is now. That's a warning in your storyboard meaning that the UITableView will appear in a different position at runtime.
The easiest way to solve it is to open the storyboard file, then at your left there should be the Document Outline. Find your view controller, and there should be a small yellow arrow next to the view controller name. Click on it and you'll go to a screen showing you the constraint warnings. It should say "Misplaced views". Click on the small yellow arrow next to the misplaced view (your UITableView) and a popup will appear. Select "Update Constraints" and then click on "Fix misplacement". That should do it.
However, a better way to solve it is to put a constraint between your text fields and the UITableView. Delete the constraint between the table view and the top layout guide (the one appearing yellow), then add a Vertical Spacing constraint between the UITableView and the UITextField below the Sea_State label.