I've created a UIViewController in a storyboard using autolayout and it has an embedded UITableView. For some reason there is white space above the table view section. My expectation is that the tableview would split all available space into cells and have cells starting right from the top.
What is causing the table view to add empty space above the first section when using auto layout and size classes?
(See screenshot below, the white space beneath "television" and above "Prototype cells" is the problem)
I've examined the constraints and insets, and cant see anything wrong with them:
UPDATE:
Here's the scene hierarchy
Try toggling the UIViewController property in Interface Builder named:
Adjust Scroll View Insets
If you drag a view into the table view it becomes the tableviews headerview that gives a space similar to what you see. Could this be the issue? Your posted layout looks correct.
Alternativley If you click on the Watch view controller in the hierarchy and switch in the simulated metrics section the top bar property from inferred to translucent navigation bar and back again this seems to move the cells down in the tableview when it is set to a translucent navigation bar
Related
Using Autolayout and Interface Builder with the target device being iOS 7 iPhones, how do I create three of these kind of UIButtons that have an image, a divider line and text? The 3 images for each of the buttons all have the same size. The lines and text in one button must line up with the other buttons' line and text (left align the text). Things can't go crazy if the phone is turned to landscape. All buttons are the same constant size.
The buttons are part of a home screen layout which has a logo at the top and so on. When one taps one of the buttons, the app does something.
One thought was to create a button with no text, put a label on top, a thin view for the line on top, and the uiimageview on top. Maybe explicit layout constraints are not even needed? Maybe a containing view is needed for the "button" contents to keep the "button" pieces together?
Image+text can be achieved using UIButton only without adding any autolayout constraints. You set both image and text using -setImage:forState and -setTitle:forState:, and then adjust button insets using *Insets properties. To set the insets properly, play with this great test project: https://github.com/jrturton/ButtonInsets (it's not quite clear from the docs how to use them simultaneously, and this test app should give you the idea).
As for the separator, I'd recommend adding it directly to your images.
But if you don't want to stick to the UIButton and its insets, you can subclass UIView, add 2 UIImageViews (the actual image and the separator), a UILabel, and throw in a couple of constraints. To make the view clickable, you attach a UITapGestureRecognizer to it.
I am not very experienced with UICollectionView and Auto-Layout.
I have a very basic UICollectionView inside a root view. The root view seems to have a Navigation Item.
I created a custom cell which is really a square in proper size to allow 2 such cells per row using the FlowLayout.
There are 8 such cells in the view - it is basically a grid. I have absolutely no constraints on the view.
The collection view occupies the entire size of the root view according to the IB and in the editor, the first cell is placed right under the navigation item which is perfect.
However, when I ran the app in the simulator and scrolled the collectionview all the way to the button, I see only a partial fragment of both cells in the last row. I can see I have scrolled all the way down...
Obviously there seems to be some sort of overflow...but I would have thought uicollectionview would automatically handle the overflow and make all the cells visible?
When I set number of items in IB I can see that the cells in the last row are only partially visible.
Seems like content size of the collection view is not right - that's my guess..
What do I need to do to adjust things in IB so that all of my cells are visible...I do not want to hardcode any values in the code...
Thanks.
Solved. It turns out simulator does not show the entire collection view...the same shows fine on the device... What a headache...
I wanna do something like THIS in my ipad application, what is the best way to do the followings:
The shadow under the upper bar.
The padding for the papers (top, left, right & bottom)
The background (as a notepad) : please think about the cells: they must still scrolled inside the paper and cropped before reaching to the paper bottom edge.
I'm looking for the optimal solution that avoids overriding as much as possible.
EDIT :
I tried to use UIViewController (with UITableVIew and has the delegate methods) inside UISplitViewController, And I tried adding UIImageView at the top of the table but this view will scroll with the cells and it'll hide when I scroll down. I tried to use viewForHeaderInSection function also for upper shadow (under the bar) but what about the papers bottom edge (what if I put one image including the shadow and the papers bottom edge and has the padding as a background for the UITableView or UITableViewController, and change this image when rotate to the portrait orientation? is this a good and possible solution?)
My guess:
Create the background in an image editing app
Cut 4 images, for header, footer, left and right sides
Create a UIViewController with 4 UIVIews and add the correct images as background
In the middle of all 4 add a UITableView
This way the images won't move and if you position the UIViews with the background properly, your TableView will scroll inside the notebook (assuming you are trying to create a notebook)
If you app is iOS 6.0 only, autolayout will be a great help. Check apple developer video on it to learn how to use this feature: WWDC 2012 Session 232 - Auto Layout by Example
One easy way to do this is from the xib:
1. In xib create image .On image view you can put background whatever you want as a image.
2. create table view above the image view and set table view background color as a clear color.
This will do it.
I am working on an iphone application on XCode 4.3 using storyboard.
I have created a view and I need it to be divided in two parts. the top part will contain a UIImageView and the bottom part a UItableView.
So I added both to the view using the storyboard interface builder, and set the sizes and positions of the UIImageView and the UITableView.
However when I run the application, the UITableView will take the entire view (it is being scaled to fill the view). I need it just to stay at the width/height I specified in the IB.
Why does the UITableView take the entire view? and how can I make a view with a UITableView be a small part of the view and not fill it?
I hope I was clear
Thanks a lot for any help
edit:
Screenshot of the storyboard section
the top part has a UIImageView and a "Share" Button
and the bottom part a UITableView
The UITableView is taking the entire view and hidding the rest
Another screenshot requested
I am not using storyboard here, just a xib, but it should matter. This is how you should set it up:
Autoresizing for UITableView:
Autoresizing for UIImageView:
Notice the fixed top margin for image view, fixed bottom margin for tableview, and flexible height for both. This will ensure tableview always sticks to the bottom and expands upwards proportionally, and vice versa for image view.
You would want to play around with this settings of your UITableView
I believe the setting is off making it resize. But I might be wrong.
Note: this is a screenshot of my UITableView inside a view controller and it is NOT filling my screen. It may have a different setting in your case. So play around with the values in there.
I have a UITableView which is composed of custom cells. There are 21 cells containing text fields.
When I try to scroll and edit the cells at the bottom of the UITableView, I can't manage to get my cells properly positioned above the keyboard.
Also i created a custom cell class separately for my cells. So keyboard delegates are available on that class only.
I have seen many answers talking about changing view sizes,etc... but none of them has worked nicely so far.
Could anybody clarify the "right" way to do this with a concrete code example?
There are three approaches to this problem all of which tie into the keyboard did / will show notification....
When the keyboard appears, you move the whole view (including tableview) up to ensure the selected textfield is shown on screen, you can calculate this by getting the keyboard height (from the notification) and the textfield position.
You can resize the tableview so that it is only as big as the portion of the screen not covered by the keyboard, again get the height from the notification.
You can set the content inset for the tableview (for the bottom value) to the height of the keyboard.
If you need to, when resizing or repositioning the tableview, you may need to set it to scroll the content to the rect of the text field to ensure it is in view...
- (void)scrollToRowAtIndexPath:(NSIndexPath *)indexPath atScrollPosition:(UITableViewScrollPosition)scrollPosition animated:(BOOL)animated;