UITableView with drop shadow - ios

I know how to add a shadow around UIViews and even to animate them when the views bounds change. However I've come across a view that is a little more tricky it seems. UITableView
Adding a shadow around this view is easy enough and even going by this example: Adding drop shadow to UITableView
It works well. However my problem is that I need the shadow to go around the last cell in the UITableView and not it's bounds. So, top, sides and bottom would be the last cell in the UITableView.
Thinking about how it'd work leaves me to believe there is a better solution. Maybe if I was able to adjust the UitableViews frame based on the number of cells? However the cells are dynamic and I don't know their heights until runtime.
Any suggestions would greatly be appreciated.
Thanks!

something like...
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
if (indexPath.row == [self tableView:tableView numberOfRowsInSection:indexPath.section] - 1) {
// last row
cell.layer.shadowOpacity = 0.5;
cell.layer.shadowPath = [UIBezierPath bezierPathWithRect:cell.bounds].CGPath;
cell.layer.masksToBounds = NO;
}
}

Only one option for your requirement :
1) Add shadow for top, left and right of UITableView.
2) Add shadow to bottom of last UITableViewCell. For this you might need to increase height of last cell of UITableView;

Related

UITableView static cell's number of row is changed

I make one UITableView Controller had static cell. And I set number of rows 3 in Storyboard. But rows does not set 3, just be made more and more like this screen shot. I don't touch any programatic code. Did I have to make it programmatically?
That's the normal behavior of a UITableView. Even though you only have 3 rows, the view itself extends to the bottom, and it shows where the cells would be if you had data in them. To fix, do one of two things: customize the UITableView so the dividing line between cells is invisible [UIColor clearColor], or change the size of the UITableView's height depending on how many cells you have.
If you add a footerView to the UITableView then it will not extend all the way to the bottom.
I solve this problem on the story board.
Create one more cell. if you want 3cells, then make 4cells.
Make whatever you want on cell. put the UIButton or UILabel any way. But except 4th cell.
Expend your 4th cell's height, to the bottom.
And finally, check hidden in attributes inspector. It makes 4th cell hidden.
That's it!
And I add one image file. I hope it help your work. Thanks.
Simple solution is to set footer's frame to nil:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
/*........*/
tableView.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero];
return cell;
}
I would use a regular View Controller and insert a TableView of the required table height.
Then if you really want to you can do stuff with the cell height and label sizes.

Horizontal and Vertical scrolling UITableViews

I am trying to implement a horizontal scrolling UITableView on the iPad, just like the Raombi app, in which the left panel sticks to its own place when scrolling horizontally. Moreover the UITableView is based on a columnar approach so it should scroll seamlessly together.
I have no idea how to start in order to fulfil these requirements.
Here is the screenshot of the desired functionality.
In viewDidLoad just rotate your table to 90 degree and load cells by rotating every cells to -90 degree. Consider your first column as table header and rest every column as table cell.
Go through below.Add this in viewDidLoad
self.tblDetail.transform = CGAffineTransformMakeRotation(-M_PI_2);
And below lines in cellForRowAtIndexPath method
if(!cell){
UIViewController *controller=[[UIViewController alloc] initWithNibName:CellIdentifier bundle:nil];
cell=(MyCustomCell *)controller.view;
cell.transform = CGAffineTransformMakeRotation(M_PI_2);
}
Apart from that design your header and cell in different nib files. For header just do as below:
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
MyHeaderView *myView = //Your view instantiation code
myView.transform = CGAffineTransformMakeRotation(M_PI_2);
return myView;
}
I think this view is too complex to show in the one screen and generate it.
Since the iphone size is too less to display above view easily. Still if the following links useful to you please use it and get back to me.
I hope the following links are useful to you.
1)
http://code4app.net/ios/Multiple-Columns-TableView/4f901ef306f6e7123a000000
2)
http://code4app.net/ios/XCMultiSortTableView/520881e56803fa991f000000
3)
http://code4app.net/ios/RATreeView/524e2f896803fa6e31000001
4)
http://code4app.net/ios/Multiple-columns-Table/51e4dd116803fa1026000000
5)
http://code4app.net/ios/Static-column-table/50fe649d6803fa7b65000001

Rearranging Cell Subviews When UITableViewCell Resizes

I have a UITableViewCell that is implemented using storyboard that looks like:
Here is what the cell should look like without an image:
I have been fiddling with the constraints and banging my head trying to figure this out but have had no luck. I have a pretty good understanding of constraints and how to add them programmatically but have had no luck with this specific problem and feel like I am just adding layout constraints to the cell willy-nilly with no logical thought process. The cell represents a newsfeed post which may or may not have an image in the main image view at the top, and should behave as follows. If the cell doesn't have an image in it the bottom bar with the like and comment counts, moves up to align with the top of the cell. I achieved this behaviour by setting a constraint that kept the smaller image view, post title, post time and the post content a set distance away from the bottom of the cell. This approach works and when the cell is resized in the heightForRowAtIndexPath method the subviews move appropriately. The problem comes when the text in the post content is larger then a single line. The height of the cell adjusts correctly but the top of the text view stays at the same location and grows downward and overflows into the next cell. When I place the constraints to align the four subviews with the top of the cell I run into issues when there is no image and the post content is larger then a single line. In this case, the cell resizes to be smaller than its original size and the subviews stay at the distance specified by the constraint. The smaller image, post title, time and content are clipped and don't display. This is such an odd problem with so many different cases. I have been working at this for almost two days and could really use someone else's thoughts on how to solve this issue. I hope this isn't too confusing, thanks for the help!
I have one way to solve this, but I'm sure there are many others. I gave both image views a fixed height constraint. The small image view and the top label (Post Title) have fixed heights to the top of the cell -- both of these as well as the height constraint of the large image view have IBOutlets to them so they can be changed in code. The bottom label (Post Content) has its number of lines set to 0, and has an IBOutlet to its height constraint (all the labels had the standard 21 point height to start). In code, I check for the existence of an image at each indexPath, and change the constraints accordingly.
- (void)viewDidLoad {
UIImage *image1 = [UIImage imageNamed:#"House.tiff"];
[super viewDidLoad];
self.theData = #[#{#"pic":image1, #"post":#"short post"},#{#"post":#"short post"},#{#"pic":image1, #"post":#"Long long post with some extra stuff, and even some more"},#{#"post":#"Long long post with some extra stuff, and even some more"}];
[self.tableView reloadData];
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return self.theData.count;
}
-(CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
CGFloat ivHeight = (self.theData[indexPath.row][#"pic"])? 215 : 0; // 215 is the fixed height of the large image view
CGSize labelSize = [self.theData[indexPath.row][#"post"] sizeWithFont:[UIFont systemFontOfSize:17] constrainedToSize:CGSizeMake(152, CGFLOAT_MAX)];
return 140 + ivHeight + labelSize.height; // the 140 was determined empirically to get the right spacing between the 3 labels and the bottom bar
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
RDCell *cell = [tableView dequeueReusableCellWithIdentifier:#"Cell" forIndexPath:indexPath];
cell.label.text = self.theData[indexPath.row][#"post"];
cell.iv.image = self.theData[indexPath.row][#"pic"];
if(self.theData[indexPath.row][#"pic"] == nil){
cell.heightCon.constant = 0; // heightCon is the outlet to the large image view's height constraint
cell.ivTopCon.constant = 8; // ivTopCon is the outlet to the small image view's spacing to the top of the cell
cell.labelTopCon.constant = 8; // labelTopCon is the outlet to thetop label's spacing to the top of the cell
}else{
cell.heightCon.constant = 215; // this number and the following 2 are taken from the values in IB
cell.ivTopCon.constant = 185;
cell.labelTopCon.constant = 233;
}
CGSize labelSize = [self.theData[indexPath.row][#"post"] sizeWithFont:[UIFont systemFontOfSize:17] constrainedToSize:CGSizeMake(152, CGFLOAT_MAX)];
cell.labelHeightCon.constant = labelSize.height;
return cell;
}
Hey #rdelmar thanks for the solution! Eventually I ended up just designing two different cells in the storyboard file with different reuse identifiers but the same subclass. I then checked in the cellForRowAtIndexPath method if the cell had content or not, and assigned the correct identifier. If this is the incorrect way of doing this, or will cause problems down the road please let me no in the comments.

Adding space between UITableView cells and making them round cornered

I have a UItableView in which I am loading RSS. I would like to leave a space between each cell in the table view, as well as giving round corners to each cell, to give an effect like this one:
The problem is that I can't seem to find working code. Using:
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
return 10.; // you can have your own choice, of course
}
only adds space on top of the UITableView...
The easiest way to create this UI is to create a custom UITableViewCell that will have that extra space at bottom, if you can create a .png file that will be the gray background with the rounded corners or you can round the corners with view.layer.cornerRadius (don't forget to include QuartzCore for cornerRadius), add a label and an arrow and that's it.
No need to customize anything.
You have to initialize your tableView with a "groupedStyle". Or, if you you're using storyboard, set the style there. Then make the tableView background color to whatever you want.
myTableViewContoller = [[UITableViewController alloc] initWithStyle:UITableViewStyleGrouped];
the heightForHeaderInSection thing is for sections, not rows.
you can do heightForRowAtIndexPath if you really need to for some reason.
You can first make cells to be clear color background, then add a rounded corner view which should be smaller than the cell. This makes it looks like it gets a spacing around the cell.
This is an older one, but I ran into this problem recently. If your cells have a custom uiTableViewCell class add this to the bottom of the .m file of the class (just above #end)
- (void)setFrame:(CGRect)frame {
frame.origin.y += 4;
frame.size.height -= 2 * 5; //adds the space and gives a 5 point buffer, can also indent the width using frame.size.width
[super setFrame:frame];
}

UITableView separator lines disappear between cells on scroll

Problem: The separator between cells in a table view appear only for those cells shown when the view loads, and only at load time. When the tableview is scrolled down, the cells scrolled into view show no separator between them, then when the tableview is scrolled back up, the initial cells show no separator.
Details: I've got a UITableView to which I'm adding standard UITableViewCells. These cells are created with initWithFrame, frame height = 90px. I'm adding a custom view created from a nib to this cell's view, height = 90px. The cell height is specified at 90px in tableView:heightForRowAtIndexPath:.
Has anyone experienced this behavior?
I had a feeling the solution to this would be simple...
I made the height of my cells 91px and the separator lines appear as they should on scroll.
I couldn't use Douglas's solution because my tables have a huge amount of cells and would become pretty much unusable on older phone. Reusing cells is key for performance.
BUT, I managed to workaround the problem using a transparent separator and adding my own in the contentView of the cell, as follows:
yourTable.separatorColor = [UIColor clearColor];
separatorView.frame = FactRectMake(0, rowHeight-1, appFrame.size.width, 0.2);
I had the same problem, but I used a different solution.
My separators were disappearing because I was clearing my cell using:
for (UIView *eachView in self.subviews) {
[eachView removeFromSuperview];
}
This removed the separator view as well!
Instead, I assigned a tag for each of my customs views (three labels) right before adding them to the sub view:
tempFirstNameLabel.tag = 100;
self.firstNameLabel = tempFirstNameLabel;
[self addSubview:self.firstNameLabel];
Then when I cleared the cell, I just removed those views:
for (int i = 100; i<103; i++) {
UIView *eachView = [self viewWithTag:i];
[eachView removeFromSuperview];
}
Hope this helps!
This also avoids the memory management issues that #Douglas Smith's solution posed.
You should set separator none and then single line again
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
// it is a bug in iOS 7
tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
tableView.separatorStyle = UITableViewCellSeparatorStyleSingleLine;

Resources