How to add image on UITableView cells? - iphone

How can I add one image on several cells of UITableView?
I add an image to one top cell, like this:
But after scroll to bottom and top I see this:
Second and third cell has a z-index more that first cell.
How I can do this?
Thanks..

UIImageView *imgView = [[UIImageView alloc]initWithFrame:CGRectMake(3,2, 20, 25)];
imgView.image=[UIImage imageNamed:#"img.png"];
[cell addSubview:imv];
neither you can directly add image to cell
-(UITableViewCell*)tableView:(UITableView*)tableView cellForRowAtIndexPath:(NSIndexPath*)indexPath
{
static NSString* CellIdentifier = #"Cell";
UITableViewCell* cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil)
cell = [[[UITableViewCell alloc] UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
cell.textLabel.text = #"I'm a UITableViewCell!";
cell.imageView.image = [UIImage imageNamed:#"image.png"];
return cell;
}
try this code....
and adjust the image size....

Are you adding the image to the CellView or to the TableView?
You can try the following function in which you have to specify the filename, position of the picture, size and view to which you want to add it.
- (void)createImage:(NSString *)name
inX:(NSInteger)x
inY:(NSInteger)y
width:(NSInteger)w
height:(NSInteger)h
view:(UIView *)v{
UIImage *background = [UIImage imageNamed:name];
CGRect rect = CGRectMake(x, y, w, h);
UIImageView *yourImageView = [[UIImageView alloc] initWithFrame:rect];
yourImageView.image = background;
[v addSubview:yourImageView];
}

if you want to add the image on the tableView, get the scroll view instance from the tableview using tableviewobj.scrollview and then add the image as subview on the scrollview and make the image come front using bringsubviewtofront method.

Adjust your cell height as a image size.

If you want to add image on cell then I would recommend you to make custom cell with imageView .

You can add image as subview to table
UIImageView *imgView = [[UIImageView alloc]initWithFrame:CGRectMake(3,2, 20, 25)];
imgView.image=[UIImage imageNamed:#"img.png"];
[UITableview addSubview:imv];
or
you can increase the height of cell

I did it.
Add UIImageView (let's say img1) object to UITableView (table1)
Set img1.Layer.ZPosition to 1 that the image was above cells in the table1
For Headers in sections of table set img1.Layer.ZPosition to 2 that a header was above an image
Thanks all for help!

You wouldn't add it to a single cell, but to the tableview itself. Then - in a tableview subclass - you would make sure that in the layoutSubviews the image view stays on top and the position gets adjusted to stay in a fixed place. Or next to a specific cell if you want that.

Use addSubview on tableview directly.
let imageView = UIImageView(frame: CGRectMake(0, 0, width, height))
imageView.image = UIImage(named: "My Image")
self.tableView.addSubview(imageView)

Related

Creating a smaller UIPickerView for use in table

I'm trying to create a smaller UIPickerView for use in a table and I can't work out how to make the actual control resize correctly.
What I'm trying to achieve is something like the following:
I am creating my picker in the cellForRowAtIndexPath: method:
cell = [tableView dequeueReusableCellWithIdentifier:#"Cell" forIndexPath:indexPath];
cell.accessoryType = UITableViewCellAccessoryNone;
cell.contentView.clipsToBounds = YES;
UIPickerView *myPickerView = [[UIPickerView alloc] initWithFrame:
CGRectMake(0, 0, cell.frame.size.width, 85)];
myPickerView.delegate = self;
myPickerView.showsSelectionIndicator = YES;
[myPickerView selectRow:3 inComponent:0 animated:YES];
[cell.contentView addSubview:myPickerView];
No matter what I set the height to, I get the same size UIPickerView. The first image is with 85 for the height. The second image is with 200 for the height.
The one thing I can do is change the cell height, but if I do this and set the height of the UIPickerView to the same value as the cell height, the picker isn't centred in the cell and the actual touch control point is near the bottom of the cell. The final image in this post illustrates this...
Result of "CGRectMake(0, 0, cell.frame.size.width, 85)"
Result of "CGRectMake(0, 0, cell.frame.size.width, 200)"
Picker Frame and Cell Height set to 100
Try to shrink the "height" of the UIPickerView
myPickerView.transform = CGAffineTransformMakeScale(0.7, 0.7);

Table view cell Accessory type Check mark in custom place

Here is my code,
UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:#"Cell"];
cell=[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:#"Cell"];
if ([cell.textLabel.text isEqualToString:#"Small" ]) {
cell.imageView.image=nil;
cell.accessoryView = nil;
cell.accessoryType=UITableViewCellAccessoryCheckmark;
return cell;
}
But checkmark is adding to the right corner of the cell
I want to add it to another position inside the cell, place like below,
[[chkmrk alloc]initWithFrame:CGRectMake(200, -4, 100, 50)];
try the following code. Actually the accessory View is button in the cell. Make a custom cell and inside that cell position the AccessoryView layout in the CustomCell.m file in -layoutSubviews Method. The code is as following:
- (void) layoutSubviews
{
[super layoutSubviews];
UIView * arrowView = nil;
for (UIView* subview in self.subviews)
{
if ([subview isKindOfClass: [UIButton class]])
{
arrowView = subview;
break;
}
}
CGRect arrowViewFrame = arrowView.frame;
arrowViewFrame = CGRectMake(200, -4, 100, 50);
arrowView.frame = arrowViewFrame;
}
This will help you sure.
You could hack it - but safer is to just add new subview with the desired image.
[cell.contentView addSubview:yourAccesorView];
You can control position of that by setting frame.origin.x, y
No it is not possible to change position of accessoryView of UITableViewCell. You need to customize your cell.
Such like add button in cell.contentView and put image (check/uncheck image) on Button and manage (check or uncheck) it on its click event by button tag.
Add a custom buttom to your cell where you want, and add an action too. If you do this you can add the button everywhere you want to be placed in the cell.
UIButton* yourCustomAccessoryButton = [[UIButton alloc]initWithFrame:CGRectMake(x, y, width, height)];
[cell addSubview:yourCustomAccessoryButton];

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)];

Having issue with reusing UITableViewCell

I have the following code which draws a separator line and text for a UITableViewCell. It looks fine but when I scroll off screen then back, the separator line is gone but the text is still fine. Any ideas?
static NSString *aProgressIdentifier = #"CustomerCell";
UITableViewCell *aCustomerCell = [iTableView dequeueReusableCellWithIdentifier:aProgressIdentifier];
if (!aCustomerCell) {
aCustomerCell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:aProgressIdentifier] autorelease];
aCustomerCell.contentView.backgroundColor = [UIColor whiteColor];
UIImageView *aLine = [[UIImageView alloc] initWithFrame:CGRectMake(0, 72, 800, 1)];
aLine.backgroundColor = [UIColor colorWithWhite:0.9 alpha:1.0];
[aCustomerCell addSubview:aLine];
[aLine release];
}
CMACustomer *aCustomerObject = aCellObject;
aCustomerCell.textLabel.text = aCustomerObject.customerFullName;
aCustomerCell.detailTextLabel.text = nil;
aCell = aCustomerCell;
Try to add the "aLine" image view as subview of the contentView and not the whole table itself. Probably when the cell is reused and then layoutSubviews is called again, the contentView overlaps (white background) your aLine. Infact consider that iOS default cells have their subviews dynamically redrawn and resized each time they are displayed on screen.
So I would try this:
[aCustomerCell.contentView addSubview:aLine];
If this doesn't work, what can you do is to remove the contentView completely and add your own custom subviews (do this inside the if(!aCustomerCell) and not outside unless you will not get the benefits of the cell re-use):
if (!aCustomerCell) {
aCustomerCell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:aProgressIdentifier] autorelease];
[cell.subviews makeObjectsPerformSelector:#selector(removeFromSuperview)];
UIImageView *aLine = [[UIImageView alloc] initWithFrame:CGRectMake(0, 72, 800, 1)];
aLine.backgroundColor = [UIColor colorWithWhite:0.9 alpha:1.0];
[aCustomerCell.contentView addSubview:aLine];
[aLine release];
}
Finally another check is verify that the cell height is > 72 (it seems a trivial check but its often source of headaches!).
The table view is using a pool of cells, so you can't be sure which one you're getting for any given index path. You can use the cell or the content view, but be sure to add only one of your custom lines per cell.
UIImageView *aLine = (UIImageView *)[cell viewWithTag:64];
if (!aLine) {
// etc.
UIImageView *aLine = [[UIImageView alloc] initWithFrame:CGRectMake(0, 72, 800, 1)];
aLine.tag = 64;
[cell addSubview:aLine];
//
}
// other formatting logic here, you can also hide/show aLine based on biz logic
try adding it to the contentView
[aCustomerCell.contentView addSubview:aLine]

Why does UITableViewCell backgroundView blur an image

I am subclassing a UITableViewCell and in the init function I am doing the following:
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"packagelistcell_background.png"]];
[imageView setFrame:CGRectMake(0, 0, 300, 81)];
self.backgroundView = imageView;
[imageView release];
When that displays on the screen, the image appears slightly blurred. For testing, I placed a straight UIImageView above the table view and the image looks perfect and crisp. The table view is a grouped table view. Do you know why it is blurring the image?
I think the cell has been resized and so is the backgroundView.
Try
imageView.autoresizingMask = UIViewAutoresizingNone;
Try shifting the imageView by 0.5 pixels.
Unfortunately #freytag's solution didn't work for me.
To solve this problem I had to add the UIImageView to a UIView container and set this last as background view of my Custom Cell instead of setting directly the UIImageView:
UIImageView *imgView = [[UIImageView alloc] initWithImage:#"cellBackground.png"];
UIView *backgrContainer = [[UIView alloc] initWithFrame:self.backgroundView.frame];
[backgrContainer addSubview:imgView];
[self setBackgroundView:backgrContainer];// instead of [self setBackgroundView:imgView];
[backgrContainer release];
[imgView release];
For some reason setting directly the UIImageView makes it blurry (even if no resize ocurrs). Setting autoresizingMask = None or contentMode <> ScaleToFill for the UIImageView did not fix my problem.
Also beware of the UITableView style, since using a Grouped Style will result in less width for the cell's background view, and this can also resize the image.
( Retina device/simulator doesn't seem to have this problems about blurry image in the cell backgroundVIew)