After the user taps a tableview cell, I'd like to slide open a small view just below the cell . The first screenshot of these two apps show this:
Tweetie 2: http://itunes.apple.com/us/app/tweetie-2/id333903271?mt=8
Pastebot: http://itunes.apple.com/us/app/id344614116?mt=8
I know how to dynamically increase the height of a cell but that is a different effect than the above. The slide out view affect doesn't seem to increase the cell's height. Also, the new view isn't as wide. Any suggestions on how to go about designing that?
You could create and insert, with animation, a new custom cell under it. Check out insertRowsAtIndexPaths:withRowAnimation:.
UPDATE
I also really like your idea of using a "slideout" view, but I agree with TechZen that this should be added as a subview of the cell.
If you want to increase the height of the cell, you need to return the correct heights for all the cells from the delegate method tableView:heightForRowAtIndexPath:. You will need to return the same height (standard is 44) for all rows except the one with the extra view which will be increased by the height of the new view.
I don't think they're sliding a view beneath the cell view, I think they're inserting the view into the cell itself and modifying the graphics to create the illusion of an overlying view.
I don't really know how they did that, but in the last minutes I tried some experiments and... the easiest solution is definitely:
NSIndexPath *myIndexPath = [NSIndexPath indexPathForRow:[selectedCell intValue]+1 inSection:0];
[tableView insertRowsAtIndexPaths:[NSArray arrayWithObject:myIndexPath] withRowAnimation:UITableViewRowAnimationTop];
Insert some custom graphics (cellForRowAtIndexPath) and it looks quite the same.
Those two apps are doing things that are quite different. Tweetie is overlaying a new cell on top of an existing one, while PasteBot is creating a new one underneath, and animating the expansion of the table view. Mooch! does the same thing as PasteBot, and it's a really cool effect that I'd like to duplicate.
Related
i want to create a a TableView with expand/collapse cells, and i thought 2 ways to achieve that:
Play with the heightForRowAtIndexPath
Create 2 different cell, with different identifier, and each time load the right one.
I want the cell to expand/collapse with animation, and the user can expand more then one cell.
Which one is better?
Thanks in advance!
Depends on your cell, before and after collapsing, and whether you want to animate it or not.
Options:
If the contents are the same, or with some small additions, and you wanna animate it. Use this option.
If the contents changes dramatically, go with this option. And I'm not sure if animation in this case is easy.
Good luck, need more help, let me know! ;D
I think you want this: https://github.com/seletz/CocoaTreeViewExample
I have made a expandable/collapsable treeview using the same code that is looking like this in my application now:
I was after something similar, I wanted to be able to show and hide contextMenu for a table view cell. So I ended up using just one cell for both expanded and collapsed state, and I had a "context menu subview" (that's what I wanted for the expanded look) and updated it's frame for the animation.
The trick is that when you want to expand/collapse you cell with a nice animation you'd better use beginUpdates and endUpdates instead of reloadData or reloadRowsAtIndexPaths:withRowAnimation: methods. Something like that:
// setContextMenuHidden:animated: updates frame and alpha for the context menu
// view (which is a subview of cell content view)
[cell setContextMenuHidden:NO animated:YES];
[self.tableView beginUpdates];
[self.tableView endUpdates];
I am working on a app where I want to expand a tableviewcell to cover almost all the screen with animation when it is selected by user. I am looking to create a uiview on the tableviewcell and expend it to cover major portion of the screen when user selects the row.
The main problem I am having is to get the frame from where my pop up view will start expending. How will I get the frame of the row which is touched?
Thanks
Pankaj
Is it crucial that the cell should not reposition?
If not ( i am guessing not, as you are anyway planning to cover whole screen):
When the cell is selected, scroll the cell to top (using scrollToRowAtIndexPath) and either insert your custom view to cell's contentView or modify its parameters if its already there with different opacity/size etc
Use UITableView function to get the rect for the row by passing the its NSIndexPath.
- (CGRect)rectForRowAtIndexPath:(NSIndexPath *)indexPath
Stackoverflow seems to be one of the most authoritative and easy to use technical forums on the internet so I figured that this would be the best place to start. I have done considerable research on this particular issue and so far I have not found a definitive answer and was hoping that someone here would have a solution or at least an answer as to why this is not working. This is for iPhone SDK 4.1 with xcode 3.2.4.
I have a grouped table view containing 2 sections with 3 rows in each section. By design the entire table view is visible when not being obscured. When a user touches any of the cells a picker view is displayed and as selections are made on the picker they are reflected in the selected table view cell. This picker view obscures the bottom three cells so I would like to have the bottom cells slide up and be visible but when using the following code nothing happens:
NSIndexPath* ip = [NSIndexPath indexPathForRow:0 inSection:1];
[tableView scrollToRowAtIndexPath:ip
atScrollPosition:UITableViewScrollPositionTop animated:NO];
There are no compiler errors or warnings and I have verified that it is getting executed and that scrolling is enabled on the table view. As would be expected when unobscured the table view does not scroll but bounces since all of the cells are already visible. I've thought of a couple of workarounds neither of which are very appealing. One would be to create two separate table views but this would involve a considerable amount of work since I have proceeded with further development predicated on being able to get the bottom section to scroll. The other possible solution is to have the frame set to display the picker on the top when selecting from the bottom section and vice versa when selected from the top. I do not like this solution much for aesthetic reasons. I am hoping that someone has a solution or at least an explanation for why this is not working as expected.
Many thanks,
Tom
When the table is unobscured by the picker view
Right, the tableview will not scroll beyond the cells it contains. Just resize the tableview when the picker view is presented so that they don't overlap.
Try getting the frame of the tableView and then moving that.
In the UITableViewController :
//change the height value to accomodate the pickerView
CGRect newFrame = CGRectMake(0.0f, 0.0f,320.0f,240.0f); //guessing on height of 240
self.tableView.frame = newFrame;
When you're done, just put it back
CGRect oldFrame = CGRectMake(0.0f,0.0f,320.0f,480.0f);
self.tableView.frame = oldFrame;
You could always put it in a nice animation block to slide it up or down.
Good luck
Hello all – I'm getting into iPhone development and have hit my first confusing UI point. Here's the situation:
My app is tab-based, and the view that I'm confused about has a static featured content image at the top, then a dynamic list below into which X headlines are loaded. My goal is to have the height of the headline table grow as elements are added to it, and then to have the whole view scroll (both featured image on top and headline list below). So, I guess my question comes in two parts:
1) First, how do you set up a dynamic-height table view that will grow as cells are added to it. So far I've only been able to have my tables handle their own scrolling.
2) Then, what is the root NIB view that the featured image and the table should live in to enabled scrolling? I've dropped oversized content into a UIScrollView now, although did seem to have any success with having it automatically scroll.
Thanks in advance for any help on this subject!
To the first:
As i understand your situation:
You want to add a image to the top of the UITableView and the image should scroll with the UITableView, shouldn't?
The UITabeView has a property called tableHeaderView. It's just a view, so you can set a UIImageView to it.
(I have no xCode at the current time, you need to edit the code)
UIImage *image = [UIImage imageNamed:#"myCoolPic.png"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.frame =CGRectMake(0,0,width,height);
tableView.tableHeaderView = imageView;
[imageView release];
What you're asking is probably doable with Interface Builder (or not, I don't know) but I know the code way to do it.
To change the height of the table all you do is set the frame of the UITableView object. The default height of a UITableViewCell is 44 I believe, so set it to multiples of that depending on how many cells you have. Of course your cells can be any height so you will need to keep track of what you report in heightForRowAtIndexPath and set the table frame accordingly.
UITableView will certainly live in a UIScrollView and both components can scroll. The table view needs to become a subview of the scroll view, so does the image. Then you will scroll the table if you drag on it directly or scroll the scroll view if you drag the image or the scroll view.
For the first question, I'm a little confused by the way you ask it: "how do you set up a dynamic-height table view that will grow as cells are added to it." Table views have a function that it calls before the table is fully loaded with data called "numberOfRowsInSection." So the number of cells is based on that function, and should you update the variable used to determine the return value of that function (usually [myArray count]) it should automatically find the right size for the whole table.
However, variable height cells are something that I found kinda tricky and I've solved it using the following:
There are some UIKit NSString additions that you might find useful.
http://developer.apple.com/iphone/library/documentation/uikit/reference/NSString_UIKit_Additions/Reference/Reference.html
Particularly the sizeWithFont: functions.
Table views also have a 'heightForRowAtIndexPath:' function that is called 'numberOfRowsInSection' amount of times. Each call determines the height of the cell at the indexpath.
So, for example: (assuming myArray is an array of NSStrings)
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return [[myArray objectAtIndex:indexPath.row] sizeWithFont:myFont];}
This will return a height based off of your actual data, piece by piece. There are other functions to specify how the text wraps and truncates, etc. as well.
It doesn't feel like a great solution because you end up fetching your data twice, once to determine the height, and then again when you configure the cell in 'cellForRowAtIndexPath:' However, it does work!
I've learned a lot in the past few weeks and have gone through a few iterations of addressing this problem. My first solution was to manually measure the table height, then set the table rect to display at that height, and finally to set the scrollView's content rect to encompass the the table and top feature. What that solution did basically work, I started encountering some display issues when branching out into new views with different toolbar configurations. It seemed that my manual frame size was interfering with iPhone's native content scaling.
So, I scrapped the manual sizing and went to just making that top feature block be a custom table cell that displayed within its own section at the top of the table. I made a hard logic definition that section 0 only had one table cell, and that cell was my custom layout that I linked in through Interface Builder. I was then able to get rid of ALL my messy custom scaling logic, and the whole system is cleaner, smoother, and works reliably.
This is driving me nuts.
I have a TableView with custom cells. My cell contains a editble textview. Is it possible to change rowheight on cell and textview dynamicly (when I editing the textView) ?
best regards
You can't change the height of a tableview cell without reloading the table. This means that every time a new line is needed in the textview, the tableview needs to reload.
While this can be done (with much manual tweaking,) I don't think the results will make for a good interface. Instead, you should have the cell open a detail view and let the user type there. This is how all the Apple apps handle the same problem and it is the solution most users will expect.
It will also save you a heck of a lot time and frustration.
The row height is calculated from either the delegate or the table view's property. I think the height is determined when the cell comes into view.
One possible avenue is to use - (void)reloadRowsAtIndexPaths:(NSArray *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation.
Is the cell with with the text view unique in the table? You may run into problems if the user is in the middle of editing and the cell needs to be re-layed out and the text view is not unique.
yup!
try resizing your cell and calling
[tableView beginUpdates];
[tableView endUpdates];
every time you need to resize your cell.
that will call heightForRowAtIndexPath: and resize all your cells accordingly
so you want to return the proper height there..
hope that helps:)