What I'm trying to do is to customize the look of UITableView index. After some search I came to the conclusion that this is not possible and I have to make a custom view to accomplish something like the screen shot below.
example http://img705.imageshack.us/img705/8573/57screenshot20111231at9.png
My table view doesn't have sections, so what I want to do is to scroll one "page" down or up when one of the little dots is tapped. Also I want the user to be able to swipe over the view to jump over pages quickly just like the standard table view index.
I will be grateful if you provide me with an example of something similar to this or at least some guidelines on where to start.
As long as you don't mind the 'dots' being a fixed colour, this is indeed possible to accomplish with the already provided methods. You need only use the 2 methods:
- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView;
- (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index;
You will also need a UIImageView that holds the transparent image you have over the selected 'dot'.
In the first method, return an NSArray for the form: [NSArray arrayWithObjects:#".", #".", ..., #".", nil];. This will enter in 'dots' in the side bar, where each dot represents 1 section of the UITableView. When the user taps on one of the 'dots', the UITableView will move to the corresponding section. Since you want the sections to be each 1 page length, just section your data accordingly.
As for the second method, this is where you adjust the frame of the UIImageView holding the transparent image which covers the selected dot. Just change the .frame. property to line up with the new selected section. You'll need to do a bit of math to get this lined up right, but it's fairly easy.
You'll also need to use the UIScrollViewDelegate methods to handle moving the transparent image while the user is scrolling. They are:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView;
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView;
These will allow you to have the UIImageView move to the appropriate section while the user is scrolling. Again, you'll have to do a bit of math to get everything lined up perfectly.
Hope that Helps!
Related
is there any possible way to set a UIImageView as a background for a section (let's say section #3) in a grouped UITableView?
I'm not asking about viewForHeaderInSection 'coz I tried it but didn't work as expected.
thanks so much in advance ...
My guess is that if you were to think very creatively, you could come up with a way to essentially swap the UITableView's backgroundView property as different sections are visible. This doesn't strike me as particularly elegant given that multiple sections might occupy the visible screen at one time, but perhaps I don't understand the question clearly.
The short answer is that there is not a defined/simple way to achieve this. The composition of a section is far removed from the background of a UITableView, and essentially the architecture isn't setup for what you want. I wouldn't assume to know the details of your implementation, but I would also urge caution: The visual and architectural characteristics of UITableView's are pretty well-considered. My personal opinion (again, I haven't seen what you're working on), is that different section backgrounds might overwhelm the user experience in many cases. I can also see cases where it may be a nice UI touch if executed properly.
In this case, if you still want to do it, here is the approach I'd take:
Essentially you're going to watch the position of your tableview's cells. You could do this in scrollViewDidScroll, or tableViewWillDisplay cell - or other places, I'm sure. But you need to know which cells are scroll on and off the screen, and you then need to be able to ask the upper-most-visible cell what it's section is. Once you've established which section it is you should currently be displaying, you can use that to scroll your own set of views representing each section's background.
Essentially, you're going to create each of your dynamic section background views in code, just UIView's, each with it's backgroundProperty set to a repeating pattern (obviously, heights will be dynamic). Add all your section background subviews (or preferably do it lazily) to your UITableView's backgroundView.
Now, as your scroll view scrolls, you're going to observe which rows and sections are coming in and out of the table's view. As rows in sections are scrolled, calculate the height of the section background (multiply the quantity of rows in the section by their heights) and adjust it's Y axis, which is sitting in but clipped by your tableView's backgroundView. As sections scroll on, you'll update the Y offset of the relevant section's background view. Phew!
Another idea might be to toss all your section background views, laid out vertically, in a UIScrollView, user interaction disabled. Place that scroll view in your table view's backgroundView, and then figure out the math to essentially "forward" scroll events from the tableview's scrolling view to your background scrolling view.
This will probably take a bit of work to find an implementation that keeps your animations all smooth and in sync, but, it's an approach that I think could be made to work.
Use myTable.tableHeaderView = customHeaderView if your table has only one section.
viewForHeaderInSection might not have worked if you didn't return an object of type UIView or a subclass in your method. Add some code from your viewForHeaderInSection method to your question for a more precise answer.
EDIT- If by viewForHeaderInSection didn't work as expected, you mean that the header was clipped, then it might be because you have not have implemented the following method:
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
If not implemented, each section's height is set to an iOS default value.
create a custom headerView that looks something like this.
.h
#interface CustomViewForHeader: UIView
#end
.m
#import "CustomViewForHeader.h"
#implementation CustomViewForHeader
-(id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self != nil) {
UIImageView *bgImage = [[UIImageView alloc]initWithFrame:self.frame];
bgImage.image = [UIImage imageNamed:#"bill_headerBg.png"];
[self addSubview:bgImage];
}
return self;
}
#end
use it like:
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
return 50.0;
}
-(UIView*)tableView:(UITableView*)tableView viewForHeaderInSection:(NSInteger)section {
CustomViewForHeader *customView = [[CustomView alloc]initWithFrame:CGRectMake(0,0,320,50)]
return customView;
}
I recall something about methods to find the rectangles of each section. Having those, you could appropriate sized images to the scroll view underlying the table view.
Aside from that, you could put the background image into the background of the cells themselves. When the tableview calls for a cell in a given section, you can pick the appropriate image or image tile.
I'd like to have an image next to the text on each row of a pickerview, as you can with cells in a Table View. Is this possible?
Specifically I'm trying to put a tick or arrow next to the currently selected row to indicate it as selected rather than have the transparent bar over the top which just looks messy... Don't have any code to post yet as I'm a bit lost with it, but I assume it would be in viewForRow?
Any pointers would be appreciated.
Yup, you can use the - (UIView *)viewForRow:(NSInteger)row forComponent:(NSInteger)component to pass your custom UIView of the UIPickerView. Also take this point in consideration:
Return Value
The view provided by the delegate in the
pickerView:viewForRow:forComponent:reusingView: method. Returns nil if
the specified row of the component is not visible or if the delegate
does not implement pickerView:viewForRow:forComponent:reusingView:.
Hope this helps.
i have been looking, but can't find my answer.
my question is how to make a tableview with two buttons above it.
here is a pic of something i would like to do.
I have the grouped tableview, but can't figure out how to make it look like the image.
thanks for the help
http://img137.imageshack.us/i/imagezjb.png/
Create a view with your two buttons as subviews, then set the tableHeaderView property on your table view to be that view.
#LucasTizma's answer is valid but you can also return views for header sections by implementing the method below, which returns a UIView. In this case, you will be able to return different views for different header sections so if for instance you had a header for Games and a header for Utilities on the same tableView, you could return different images/buttons for each header (i.e. a special game promo in the game section and a different one for Utilities).
Basically the process is the same: you create a UIView, add the buttons/images as subviews and then return it on the method.
- (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section;
Cheers,
Rog
Is there any way to decrease the standard width of grouped UITableViewCell and put a custom button on the left side(outside of cell boundary)? I tried to change the cell size but it keeps same
You are going to have to fake the editing mode.
What I mean by that is that as AtomRiot said you have to subclass UITableViewCell so that when in editing mode you show the button you want on the left, outside the cell.
But first things first.
To change the indentation level for your cells all you need to do is implement this delegate method for the UITableView
- (NSInteger)tableView:(UITableView *)tableView indentationLevelForRowAtIndexPath:(NSIndexPath *)indexPath
So that takes care of it. Then in your UITableViewCell subclass all I would do is to implement the method
- (void)setEditing:(BOOL)editing animated:(BOOL)animated {
which I assume is called when the table the cell belongs to has changed to editing mode.
There I would fade in (or animate in any way you want) a button to appear on the left of your cell.
I have done it inside a grouped-style cell but never on the outside.
Give it a try!
You could subclass UITableCell and add your own custom views inside of it. I have not personally added a button inside one but it should work. It may get confused with the row selected call the tableview makes if you are implementing that.
The Cocoanetics blog seems to have a pretty good solution to this:
http://www.cocoanetics.com/2010/03/how-to-shrink-cells/
I'm trying to create a grouped table view with two sections. For the first section I would like the width to be only half the screen. For the second section it would be the standard width. Also, next to the first section I would like to put a button.
How is this done?
Thanks!
To put a button in a section what I've done in the past is create a section that has no rows in it. Then, I respond to the - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section method with a view that contains a button that is rigged to whatever delegate I need. This will give you the appearance of having a button sitting in a section with no data. This is how buttons appear in the Contacts view/edit screens in the stock iPhone apps.
Table view sections are fixed with to the size of the screen. If you want the individual cells to appear narrower in one section and wider in another, then you can control the size of the view itself with the data source delegate, though you might have to set the background of the table view to transparent so users can actually see the smaller view on top of the table view.