I am trying to make a feed very similar to Instagram, everything works however I have ran into a problem I cannot figure out how to solve.
This feed will include photos that are of different sizes, e.g squares, portrait photos and landscape photos.
The problem is I want to resize the UIImageView in the UITableViewCell to match the size of the photo, and also have the UILabel resize depending on how much text there is.
The UIImageView's width will always equal the width of the screen, like Instagram, and only its height will change to make sure the photos are of correct ratio.
Here is a photo of my current cell:
I have tried using autolayout, however I couldn't understand how to get it to work with a UIImageView that will change ratio, from being landscape orientation to portrait orientation etc.
I have also tried in this method here :
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath object:(PFObject *)object
Manually trying to calculate the size:
//An example of trying to calculate the size of a view in my cell
cell.cellView.frame = CGRectMake(0, 0, self.view.frame.size.width, 400);
However, it has gotten extremely complicated that way because I don't know how to resize the actual UITableViewCell height to be unique for every cell.
I have also looked at the following resources:
Link 1
Link 2
Link 3
Link 4
Link 5
All of these are tutorials on dynamic cell height, however they do not seem to explain what to do with my situation.
It would be great if anyone could please suggest what I can do to achieve the Instagram style feed with unique cell heights and unique content size within the cells.
As far as I can tell from looking at the app, each item in the feed is actually a whole section in the tableview. The giveaway is the way the username/location/time header 'snaps' into place at the top and everything else scrolls under it. That's a viewForHeaderInSection. Each section then has 2 or more rows: the photo, the toolbar, the hearts/likes info, and then one row per comment.
So instead of making one giant cell and trying to lay everything out inside it, use multiple cells. You can prototype each cell in the storyboard with a unique reuse identifier, then just figure out what kind of cell you're looking at and dequeue the appropriate one from the storyboard.
Related
I am displaying feed items in a tableview. Depending on the item, the cell must be larger or smaller--for example larger to accomodate a photo or larger still if it references another feed item such as an article and I have to display the item referenced.
In most cases, I've used autolayout to get the cells to auto expand or contract based on the content. However, in a couple cases, this was proving next to impossible so I reset the value of a constraint in code. For example, if there is no photo in one case, I shrink the height of the cell in code as the cell was not shrinking on its own.
This works fine when the page loads. But when you scroll and reuse cells, it leads to weird effects such as the cell expanding vertically or lines being pushed into one another.
Some questions on SO suggest using the method:
-(void) tableView:(UITableView *)tableView didEndDisplayingCell:(IDFeedCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
//Undo changes here
}
The problem is I don't know how to undo changes. For example, if I made a cell smaller by setting
self.height.constant = 100;
Should I set it back to the constant value in storyboard?
What value can I set it to when I don't know what the next item to resuse the cell will need in the way of dimensions.
Thanks for any suggestions. BTW, autolayout shows no issues.
I've done some research on self adjusting static cells but they seem to apply to the entire table view as a whole.
what if I'm only interested in targeting a specific cell like the picture below? How do I go about doing it?
edit: What I intend is for the tableview cell to expand when the collectionview gets populated with more cells. Thus allowing the entire page to scroll accordingly.
Are the images in the collection view always the same height ? If the images in the view are a static size, you could just divide the number of images, by the number that will fit on a line. Then multiply that by the height of the lines to set the tableview cell height.
This might be helpful:
Dynamic Sized Tableview Cells
I have got UiCollectionView with rounded cel (on iPad 3-4, on iPhone 1-2).
I need show view below any clicked cell as on screen (with change text length).
I spend a lot of time thinking about this.
My first step was make custom cell that show the frame below cells, but it was wrong step.
Rounded cells changed padding when this was added...
I am using RAReorderableLayout, additionally to swipe cells.
Any idea?
Please help me with this problem.
You could make it a custom UIView, which has 3 parts: the part before the tick, the image with the tick and the part after. Then in the delegate method for
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
you can call an update method on this view, that will change the widths of the three parts according to the selected index in the collection view.
You could even send the width of the collection view cell in this update method to use it for calculating the right widths.
Hope this helps! Good luck!
I have two UITableViewControllers which use the same set of cell templates, therefore I have created a table view controller in my Storyboard which contains these templates. My table view controllers instantiate an instance of this template holder tableview, then in -tableView:cellForRowAtIndexPath: they deque one of it's cells, and configure it as they need.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSDictionary *widgetDict = [self.widgets objectAtIndex:indexPath.row];
DMSWidget *widget = [self.widgetStorageTableViewController.tableView dequeueReusableCellWithIdentifier:#"Key Value Row"];
...
return widget;
}
These cells have their inner layouts set up entirely using AutoLayout.
Everything works fine, except that I get cells which have the standard 44 px height and width of the table view, with Content Views narrower than this (depending which they contain, the ones with less contents are smaller), and are longer than the cells themselves. So the Content Views overlap the next cell but don't fill the entire width.
I don't understand, how this could happen. How is it possible, that the UITableViewCell has different size than it's Content View? They should be the same, isn't it?
What I tried to do but failed:
implement -tableView:heightForRowatIndexPath:: tried to return UITableViewAutomaticDimension, but did not help
reload my table view when the sizes are calculated: does nothing
add hacks to cell implementations, like setting autoresizingMask in -awakeFromNib: I could make the Content View expand to the width of the cell itself, but it was still overlapping to the next cell
UPDATE: It looks like it is not related to the dual table view architecture. When I copy my cell to the tableView where it will show up, has the same issues.
I've found the solution: it was all my fault. In some of the ancestors of my cell has an init, which called -initWithFrame: explicitly with CGRectZero. After removing this, iOS 8 could use it's frame values and everything worked fine.
In my application, I am using custom table cells to populate UITableView (grouped). The tableView has only one section, and this section has 4 rows. however, I see an unwanted gap between the rows. How to remove this gap?
I am using a background view for the tableView:
In viewdidLoad, i have done
UIImageView *imageView1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"bluegrad.png"]];
self.customerCareTableView.backgroundView = imageView1;
And what i am getting is:
this is what i want
First suggestion for this cases (even though you already tried this) is checking that the separatorStyle property of your tableview is correctly settled to UITableViewCellSeparatorStyleNone for not having a
separator at all.
When using custom assets as background images, be sure to have the image resource sliced correctly. There shouldn't be any extra pixels neither in the bottom nor top of those assets. You can check this using another app like Preview.
Double check that you are setting the proper height of your cell, must be the same height of your background image. You should check that on the following method, (also you may want to check if there is any kind of constraint that may be causing a resize of your image at runtime
(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
Hope this helps!