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.
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!
I used to be able to do this:
UIButton *bigBottomBtn=[[UIButton alloc]initWithFrame:CGRectMake(0, self.view.frame.size.height-60, self.view.frame.size.width, 60)];
I also used to be able to just drag a button onto a storyboard and add a constraint that would hold it to the bottom of the parent.
What is going on with Xcode, Autolayout and Apple for that matter....is my Xcode not working properly? Have I missed a major memo? is Apple just going downhill fast?
Your button-creating code used to work (and still does) if self.view's frame was correct at the time you created the button. Note that the view doesn't necessarily come out of the xib or storyboard with the correct frame; the xib/storyboard contains the view at some design size which might not match the current device. This wasn't as much of a problem when all iPhones had 3.5 inch screens, but became a pretty common problem with the advent of the iPhone 5's 4 inch screen.
The view isn't guaranteed to have its correct frame until its superview's layoutSubviews returns, so if for example you're creating bigBottomBtn in viewDidLoad, that's too early. Many questions on stackoverflow cover this problem. You either need to set the autoresizingMask of the button, or implement layoutSubviews or viewDidLayoutSubviews to update the button's frame, or turn off translatesAutoresizingMaskIntoConstraints and install constraints. Note too that your view can change size if you support rotation, slide over or split view multitasking, or if your view can be the detail view of a UISplitViewController, so it's a bad idea to try to guess the correct frame of the button based on the device's screen size at the moment the button is created.
Note that storyboards now by default use a design size of 600x600, which isn't the size of any device. This is probably because if Apple chose some device's size (say, the iPhone 5's 320x568) as the default, and you happened to use a device of that size as your primary (or only) test device, you could easily forget to think about what your app will look like at other sizes. However, you can explicitly set the design size to some device's size if you want:
I usually use “iPhone 3.5-inch” if I don't specifically need something bigger, because it lets me get the most scenes on the screen simultaneously (and produces the smallest screen shots for stackoverflow).
As for “I also used to be able to just drag a button onto a storyboard and add a constraint that would hold it to the bottom of the parent”, I have good news: you still can. Example:
However, you do need to be careful if you have filled your root view with a table view as appears to be the case in your screen shots. You need to drag the button to the document outline in that case, because if you drop it on the table view, Xcode will assume you want it to be the table view header:
Trying to pin a table view header to the bottom of the screen would be folly.
As for the Editor > Align menu, I have found that the items can be mysteriously inactive, which is frustrating.
Note, though, that only the “Horizontally in Container” and “Vertically in Container” will work (when they work at all) with a single view selected. To use the other items in the menu, you need to have at least two views selected, because the other items align the selected views with each other by setting their frames:
If you only have one view selected, Xcode doesn't know what other view you might want to align it to.
Those menu items are perhaps useful in the springs'n'struts model, but they don't add constraints, and under autolayout you probably want constraints to enforce the alignment at run time.
As far as I know, those menu items have never added constraints, but I'm not going to reinstall Xcode 6 to verify that, because there's a convenient popover that will add constraints corresponding to all of those menu items:
In xcode you always need to add buttons according to its visibility. As you said you need to show button on top of tableView and it should be aligned to bottom. For that You just need to arrange the order of items. as shown in the image below.Provide the layout for the button.
I'm trying to create a 3x3 menu, based on a grid of buttons, and I'm facing a lot of problems trying to adapt it to different screen sizes.
Since I want my menu to be equally spaced on the screen (using autolayout tricks on the Storyboard), I have created a custom class with this menu that i'm adding to the center part of the main controller view. The problem is that the menu doesn't fit in small screen (3,5" screens).
Trying to solve this problem, I have created a scrollView in the main screen to add the menu and be able to scroll in small screens.
The problem is that since the view I'm loading in the scrollview, automatically fits to the size of the container (in this case the UIScrollView), only a small part of the menu is appearing in the 3,5" screen, without the option of scrolling (In bigger views it appears equally spaced and everything appears correctly).
How can I solve this UIScrollView problem? Or there is a better solution for this problem?
p.s: I'm sorry, but I don't have enough reputation to add images :(
Uiscrollview with autolayout has some pain into it.
You need to place you're inner views so the scrollview Will be able to understand the contentsize it should use.
You can find more detailed info here
http://infinite-edward.tumblr.com/post/66865604683/uiscrollview-contentsize-and-autolayout-gotcha
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.
i was adjusted layout of my app, one question haunts me see below screenshot:
(please ignore the Chinese characters)
the image is included in a scroll view which be set at position (0, 0)
the red area is the UIVivew which is the superview of the scroll view
why a gap existing between scroll view and UIView? maybe something invisible element hold the place?
TW, all of that is fine in IB editor. really thanks for your help.
just in case you are able to set min os requirement to 5.x or later, then you can use http://developer.apple.com/library/ios/#DOCUMENTATION/UIKit/Reference/UIPageViewControllerClassReferenceClassRef/UIPageViewControllerClassReference.html to do this.