I have a grouped UITableView that was really designed to look nice in portrait mode for iPhone. Its cell subviews have autosizing set up so that they stretch in landscape mode, but this makes it a lot less aesthetically pleasing -- the cells just look too wide for their content.
I'm now making it a universal app but on iPad the autosizing causes even more stretching and it looks just unacceptable.
It would be ideal if I could make the UITableView's groups of cells have a fixed width (or a max width), or if I could somehow control the horizontal margins.
Having not found support for this in UITableView, I have done a few quick attempts at subclassing it to constrain its size at layout time and, as an alternative, at introducing a container view in order to make the UITableView autoresize vertically only. Both approaches work but create new problems: Scrolling doesn't work when swiping in the margins, and I am now forced to make the UITableView's background transparent (which goes against Apple's recommendations) as there is now a discontinuity of background between the UITableView's frame and the margins.
Has anyone found a trick to solve my problem (i.e. constrain the width of the groups in a UITableView, causing margins to expand to fill the width of the view), or an open source solution to it?
Good news! I finally found a way to achieve this satisfactorily with only tiny code changes:
Shrink the cells by subclassing UITableViewCell and overriding -setFrame, as per the solution to this post:
How to set the width of a cell in a UITableView in grouped style
And to add vertical padding, using the contentInset property of the UITableView (inherited from UIScrollView) works pretty well.
You can always keep the standard table view and provide custom backgrounds with transparent sides for the table view cell's so that they look smaller than they are.
Cocoa With Love has a great article on how to do that here: Easy custom UITableView drawing.
The basic gist of the article is that you need to make six different versions of the backgrounds, and supply the correct one when tableView:cellForRowAtIndexPath: asks for a cell. You will need one with rounded corners at the top (for the first row of a section), one with rounded corners at the bottom (for the bottom row of a section), and one with all four corners rounded (for when there is only one row in the section). Then you will need the same three, but customized for the "selected" version of each row.
Related
In my app I have a screen where I use a UIScrollView containing a UIStackView and multiple UITableViews to horizontally scroll through different kinds of content.
I have a problem with the iPhone X where the first tableviews left side and the last tableviews right side are inset correctly to give room for the iPhone X safe area. However, the right side of the first tableview, the left side of the last tableview and both sides of all tableviews in between are not correctly inset.
Question: What is the correct way to apply the inset to both sides of each tableview?
Update 1
While at the first look, the solution suggested by Sh_Khan (using leading/trailing constraints to the safe area on the container UIScrollView) looks quiet good, it is not actually what I would like to achieve. As you can see, the cell separators are not going all the way to the edge of the screen and when scrolling from one tableview to the next, the white bars where the safe area is are clearly visible.
I need to somehow inset the tableviews cell content views just like the system does it but I'd need to do it for every tableviews cell. Does anybody know how the system actually achieves this?
I am trying to achieve specific layout inside UICollectionView.
I need to adjust my phone layout to work well with iPad, so I used horizontal scrolling direction for "default" flow layout.
But unfortunately I am doing something wrong. Please look at following sketch:
These are elements view:
So far, I will not have too much cells, but maybe they will not fit (so I need to use UIScrollView derivate).
One cell is double in size (plus one margin space), a very first one.
Other cells are all same size (square)
As can be seen in sketch, row is not "breaking" in right moment (even after I played with contentSize) and 1st cell in 2nd row occupy two places.
If nothing helps, I will start with writing own UICollectionLayout descendant, but maybe it's something simple and can be done with "standard" flow layout.
Thank you.
Sample file
I needed to subclass UICollectionView.
I have followed tutorial from Raywenderlich, and converted vertical scrolling from their example to my horizontal layout.
I avoided using custom layout for long, but luckily it's not too bad at the end.
I have cells that resize automatically, and my problem becomes that I can't seem to have an even distance between the cells when the content in said cells differs.
Is there a way to go about fixing this? Maybe setting something to Aspect fit or fill?
if you using Subclass of UITableViewCell with .xib the best way to do this is to increase your overall cell hight and add a UIView as subview just for spacing to the bottom.
This way you have access to that UIView and can change height, colors and even a pattern.
Example:
I have been struggling with this for a few days now, and I am looking to see if someone can help me with this AutoLayout problem.
In my iOS7 application, I have a UIView that has a UIScrollView and inside it a UIView(container) with some elements positioned. I have in there, a UIImageView, UITableView, UICollectionView, UITextView and a MapView. There is no height constraint on the UIScrollView and the container UIView. There are no height constraints on the UICollectionView and the UITextView.
What I want to accomplish is
The UITextview should expand to the content size as in all the text should appear without any vertical scrolling enabled for the UITextView.
The UICollectionView should always show all items and there should not be any scrolling enabled there as well.
Overall, I want a UIScrollView with items in it, that scale based on content. I have tried numerous things, but failed.
If anyone has pointers or suggestions on how to go about doing this, it would be very helpful.
OK, I would go about this in a completely different way.
First, get rid of the scrollView completely.
Just use a UICollectionView for this entire interface.
The UICollectionView can take a UIView for a section header. Make this UIView with your UITextView inside. You will need to manually calculate the correct height for your UITextView (and UIView).
Something like...
CGSize size = [theText sizeWithFont:<the font used> constrainedToSize:CGSizeMake(desiredWidth, CGFLOAT_MAX)];
Then just populate your collection view.
By doing this your collection view will control all the scrolling. Because you have set the textview to the correct size in the header you will have all the text there.
This is how I would go about it:
I assume your issue is with the height of the views, that affect the scrolling.
In the textViewDidChange: I would set the frame of the UITextView same as it's contentSize. When they are both the same, scrolling gets disabled.
After populating your UITableView and calling reloadData, I would set it's frame same as it's contentSize.
The mapView (MKMapView, I suppose) has the same frame throughout, I suppose. So you just use it's fixed height. If it changes height, you must store it's changing height each time it changes.
Once you have all the heights, add them up, and set the frame of the outer view same as then combined height of the inner view. Iterate this to all nested views, beginning from innermost views, and moving to outer views.
The catch here is, every time your content changes, the frames have to be resized. Hence changing the frames in textViewDidChange:, after reloadData, etc makes sense.
EDIT : One thing you might want to do first is, getting rid of redundant views. Your view hierarchy seems Rube Goldberg to me. The lesser views you have, the lesser work you will have to do.
Ok.. so I solved this problem by creating a IBOutlet for my NSLayoutConstraint on the UITextView in question.
I simply computed the height and then applied it on the constraint and it worked..
#Fogmeister - Your solution will also work, but it would require me to rewire a whole UI page.. Your approach is definitely a feasible one and shall keep in mind for future iOS apps..
I have a UIScrollView with several UITableViews embedded in it. I want to allow each table to expand its height as much as is needed to display all of its cells. The scroll view's frame takes up the whole screen, so its contentSize.height need to expand to fit the biggest table (which I think is the default behavior, but I mention it just in case I'm incorrect). Can this all be done on my storyboard? Or if I will need to add code to do it, I found this tutorial, but it's for iOS 6 - has any of the code for this constraint stuff changed for iOS 7?
If you know in advance how much room each table takes up you can do it purely in your storyboard, but because each UITableView is also a scrollview the default behavior of a UITableView is to fill the assigned size with content and scroll if there is overflow.
If you do not know the height of the tables at design time, you will need to set them at run time. See Autolayout a UIScrollView to fit content including subviews and grouped tables for an example, the short answer is to add a height constraint to your table, drag it into your controller as an outlet, and then set the height when you know it.
It can be done both ways.Manually moving UI elements through code(mentioning locations) and overriding it in did rotate or through mentioning constraints in auto layout.
This link http://www.doubleencore.com/2013/09/auto-layout-updates-in-ios-7/ provides details of ios7 auto layout .