customization example uitableview (grouped style) - iphone

all iphone developers
I am currently developing an iphone application in which I am showing a uitableview in grouped style in one of the segments of the segmented control.
My problem is that I don't know how to show a small image dynamically in the table header view.
Another issue is that i don't know how to show labels and button or any other control in one cell of a particular section and also make them multi line.
If any one have code or example please help me doing this.

This one will replace your header with a view, you can add anything there:
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
}

it can be done by this code:
GRect newFrame = CGRectMake(0.0, 0.0, self.myDetailView.bounds.size.width, 50.0);
UIView *trialHeaderView = [[UIView alloc] initWithFrame:newFrame];
trialHeaderView.backgroundColor = [UIColor clearColor];
UIImageView *myImageView = [[UIImageView alloc]initWithFrame:CGRectMake(15, 10, 35, 35)];
myImageView.image = [UIImage imageNamed:#"r1.jpg"];
myImageView.contentMode = UIViewContentModeScaleToFill;
[trialHeaderView addSubview:myImageView];
myDetailView.tableHeaderView = trialHeaderView;
ok..

Related

UITableViewStyleGrouped with a right angle

When I create table view with
myTableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, 320, 400) style:UITableViewStyleGrouped];
table view has rounded corners, but I wanna have right angle (so table view cell should look like rectangles, but table view still should have many sections).
The question is: how can I create table view with many sections and right angles?
In the TableView datasource. In the cellForRowAtIndexPath you can set the background of the cell to be blank...
cell.backgroundView = [[UIView alloc] initWithFrame:CGRectZero()];
Then you can put an image or rect or whatever in the back of the cell.
You could even create a new UIView and put that in place of the backgroundView.
Then you can put whatever you want in it, images, labels, etc... and they will go behind the content of the cell.
The rounded corners of the cell in grouped style is just an image so can be replaced by you.
set image as a background image to cell and give the backgroundcolor of UITableView to clearColor and set image like bellow..
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
///write your code..
UIImageView *img = [[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 320, 45)] autorelease]; // set frame as your cell frame
img.image = [UIImage imageNamed:#"yourImageName"];
cell.backgroundView = img;
////write your code
}
For Sections you can code a delegate method like
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
// Return the number of sections.
return 1;//how many sections you want you can write a value after return type
}
Best way I found to make the corners right angled is to set the background view to nil and then put a view in it.
[cell setBackgroundView:nil];
cell.backgroundView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];

Is there a way to customize the size of the UITableViewCell's backgroundView?

I'm trying to assign a custom backgroundView to a UITableViewCell. The table is Grouped.
I'm a bit of a trailblazer so instead of using the typical width of a background view, 302 pixels, I'm trying to use a 300 px wide image.
Here's my code:
- (void)tableView:(UITableView*)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
// a 300 pixel wide image
UIImage *backgroundImage = [UIImage imageNamed:#"tableViewCellBackgroundTop"];
UIImageView *theBackgroundView = [[UIImageView alloc] initWithImage:backgroundImage];
theBackgroundView.frame = CGRectMake(10, 0, 300, 49);
cell.backgroundView = theBackgroundView;
}
If I run this in the simulator and measure with xScope, the cell still appears to be 302 pixels wide. What gives? Is there some other property I need to set to make the framework respect the frame I've assigned to the background view, or were table view cells not intended to be customized in this fashion?
You can create a UIView instance and make theBackgroundView a subview of it, and then set cell.backgroundView to the created view:
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(10, 0, 300, 49)];
[view addSubview:theBackgroundView];
cell.backgroundView = view;

How to resize a UIButton in a UITableView footer when orientation changes

I'm using two UIButtons in a footer of a UITableView (both subviews of a single UIView). I am not using a UITableViewCell because I wanted to skin the button so it looks like the red Delete button at the bottom of some iPhone screens such as when editing a contact.
It is sized and works correctly. However, the table will resize itself on device orientation changes (landscape, portrait and so on) and the button stays its original width. I tried using autoresizing masks but nothing worked.
Is there a trick to it, or a better way?
It should work with autoresizingmasks, I've done it before but it's important to set the width of your view correctly and add the correct sizingmasks.
Some sample code to show how it works. This creates two buttons resizing whem you rotate.
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section {
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.frame.size.width, 50)];
view.backgroundColor = [UIColor redColor];
UIButton *buttonA = [UIButton buttonWithType:UIButtonTypeRoundedRect];
buttonA.frame = CGRectMake(20, 5, 125, 40);
[buttonA setTitle:#"ButtonA" forState:UIControlStateNormal];
buttonA.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
[view addSubview:buttonA];
UIButton *buttonB = [UIButton buttonWithType:UIButtonTypeRoundedRect];
buttonB.frame = CGRectMake(175, 5, 125, 40);
[buttonB setTitle:#"ButtonB" forState:UIControlStateNormal];
buttonB.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
[view addSubview:buttonB];
return [view autorelease];
}
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
return 50;
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation {
return YES;
}
Please use 2 frames for button one for landscape mode and another for portrait mode..this will work out..so when orientatin changes check whetehr its landscape or portrait and assign frame for it...check mode here
willrotatetointerfaceorientation
Best i've come up with is, use one button and one cell in its own section, then each will resize appropriately.
I do something very similar to yours except I only have one button. the uiview that you are returning should be the same width as the tableView itself.
CGFloat footerWidth = mainTableView.frame.size.width;
CGRect frameTableFooter = CGRectMake(0.0, 0.0, footerWidth, 60.0);
viewForTableFooter.frame = frameTableFooter;
// buttons addition
mainTableView.tableFooterView = viewForTableFooter;

UIScrollView and UIPageControl within UITableView

I've seen lots of sources saying it is possible to include a UIScrollView with UIPageControl inside a UITableViewCell to be able to scroll horizontally (through a list of selectable images), but can't find any raw examples that does what I want. I've gotten my scroll view "working", but I am unsure how to go forward - hopefully someone can send me some guidance.
Within my cellForRowAtIndexPath, I create a cell, and add both a scrollView and pageControl as subviews.
UITableViewCell *cell = [self.challengeListView dequeueReusableCellWithIdentifier:SubmitChallengeCellIdentifier];
if(cell == nil){
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:SubmitChallengeCellIdentifier] autorelease];
cell.frame = CGRectMake(0, 0, 1000, 50);
}
scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, tv.frame.size.width, 50)];
[scrollView setContentSize:CGSizeMake(1000, 50)];
[[cell contentView] addSubview:scrollView];
pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 50, tv.frame.size.width, 50)];
[pageControl setNumberOfPages:4];
[[cell contentView] addSubview:pageControl];
I've attached a screenshot of what's being displayed
the bottom portion of the main view is my UITableView that contains the scrollView/pageControl (and it will scroll horizontally, as I can see the scrollerIndicator showing this), and I've got its method's set to the following:
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}
-(NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 1;
}
My Scroll view will indicate a "horizontalScroller" and I am able to scroll back and forth, but obviously there's no content there. How do I go about populating the tableView/scrollView with say, a list of "clickable" images? Any direction would be greatly appreciated - preferably not a "hey this guy's done it somewhat similar, check out this link" but maybe more an explanation of how this functionality should be implemented correctly (ESPECIALLY in regards to iOS 3.0+ - it is my understanding Apple has made our lives easier in implementing this)
I've solved my own problem; maybe the reason no once answered me is because its a minor implementation once you understand each view's purpose.
From within cellForRowAtIndexPath:
I created a standard UITableViewCell, however I altered the frame of the cell to my own custom frame of 1000 width by 50 height (catered to my needs for project).
I then created a UIScrollView, set it to the following (keep in mind I have my tableView defined in IB, so I'm mapping some of my height/widths to those values):
scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, tv.frame.size.width, 78)];
I then create the desired image view (I realize I will next create a loop that does many images and lays them out across the scroll view):
UIImage *image = [UIImage imageNamed:#"dummy.png"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.frame = CGRectMake(0, 0, 80, 78);
[scrollView addSubview: imageView];
Here's the part I was missing. After adding the scrollView to the cell contents, you need to use the UIPageControl (which didn't seem obvious to me for this implementation at first) to setup the actual "visual horizonal scrolling" affect:
[[cell contentView] addSubview:scrollView];
pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 50, tv.frame.size.width, 50)];
[pageControl setNumberOfPages:4];
[[cell contentView] addSubview:pageControl];
Hope that helps someone's search - I spent quite some time on Google looking for the example I just explained and didn't have much luck other than the general overview of how it would work.

Customize UITableView section border color for each section

I am using a UITableView with grouping. My first group I have built a custom cell with no background color, and I would also like to remove the border around the cell. How can I do this just for one section?
For my first cell, I would like to set the border/seperator style to [UIColor clearColor].
EDIT: Apple does this in their contacts app, and I wanted to design something similar.
-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
if(indexPath.section == 0){
cell.backgroundView = [[[UIView alloc] initWithFrame:CGRectZero] autorelease];
}
}
I believe what Apple uses for its contact heading is tableView:viewForHeaderInSection: for section 0, instead of a cell in the first section. You can still specify a transparent background and the pinstripe will show behind it. The border will not be there as grouped table view section headers do not have borders.
Whether you built your custom cell in Interface Builder or using code, it should be a fairly trivial task to migrate those views from a UITableViewCell to a UIView for use with tableView:viewForHeaderInSection:.
I don't know if you'll be able to keep the Details title for, say, section 1, unless you make a label containing that word and add it to the section 0 header view manually.
If i understood your question, in the cellForRawIndexPath you should add-
if(indexPath.section==0){
//set the style you wish to add only to the first section
}
good luck
EDIT
I use this function for that -
+(void)setTransparentBgToCell:(UITableViewCell*)cell{
UIView *backgroundView = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 320.0f, 44.0f)];
backgroundView.backgroundColor = [UIColor clearColor];
cell.backgroundView = backgroundView;
[backgroundView release];
cell.selectionStyle=UITableViewCellSelectionStyleNone;
cell.textLabel.backgroundColor = [UIColor clearColor];
cell.detailTextLabel.backgroundColor = [UIColor clearColor];
}
shani