Help With TableViews

Hi Everyone,

I'm creating an application that needs to look and feel similar to the Alarm Clock on the iPhone. Its needs to have a nagivation bar, the ability to add and remove items of the TableView, and when you are in "edit mode", be able to switch to a new View to allow editing if the Cell is clicked.

The main problem I'm having is figuring out how to make a background image of UITableViewCell. What i really need is a background image, then the ability to have UILabels on top of each Cell with transparent backgrounds (so the white background doesn't overlap).

I know this seems quite simple, but I'm getting stuck on some essential things:

1) How do you make a UICustomTableViewCell (Pre defined class that is extended from UITableViewCell) Have a background image (Like a gradiant... similar to the iPhone alarm clock).
2) How do you set UITableViewCells to be editable, so you can then click on them (Do you need to make each a button while in edit mode)?
3) Once they're in edit mode, how do you push the new editing view to the front, without losing the previous TableView?

If you guys have some ideas on this, please let me know! I'll be willing to share my code once I can get it to run properly.. the last update broke my app

Thanks in advance!
-CoffeeKid

[Kilopound]

Hey I don't know if you have done this or not, but try checking your local API documentation. If you don't know where it is at, it is under Developer->Documentation->DocSets. Or you can right click UITableViewCell in your code and select Find Selected Text in API Reference.

Things I noticed in the API that may help you out:
Most of what is under Editing the Cell, it offers editing styles and transition.
Under Configuring Cell Background you can choose a view to use as the cells background, which you can either color manually or choose an image.

Let me know if any of that is helpful, if so let me know if you need any more help, and I apologize if I am reiterating things you knew.

[Kilopound]

I also found the CGShading that will create a handful of different gradient effects.

It doesn't look like CGShading is part of the iPhone SDK? Perhaps I just can't find it in the documentation.

Any pointers on how to set a background image on a UITableViewCell? I'm guessing i would make a new view then attach that as the background, but can you make an image cover the entire view?

Thanks,
CoffeeKid

[jeff_lamarche]

What kind of table view style are you using? There is a backgroundView property, but it is documented as not working with UITableViewStylePlain or UITableViewStyleGrouped, which could be your problem. Another option would be to put a UIImageView subview that covers the full bounds of the text cell.

I dunno... don't think we can really go into details on this - it's covered by NDA.

[Kilopound]

Originally Posted by CoffeeKid

It doesn't look like CGShading is part of the iPhone SDK? Perhaps I just can't find it in the documentation.

Thanks,
CoffeeKid

All you have to do is search for it in the API Reference. It does show up under iPhone OS API. Also check out the demo apps on the dev site, there is a Quartz Demo, which has a gradient demo, and one of the View Table demo shows you more about custom settings.

You should be able to use that gradient on a rectangle, create a rectangle from that view, and use that view as a background. That might not all be needed, but that is what I got out of the API Reference.

[riz]

You can set the backgroundView of the cell to nil in drawRect, that will remove the background from drawing for that cell.

If you have your custom background just added as a subview (before adding your text views and everyting else of course), then you can have a custom background.

To make the text's backgrondColor be transparent set it to [UIColor clearColor]

At least, this is one way to get what you are trying to do

[ash]

i was trying to make something similar to the add new contact screen in iphone, specifcally the first row which gives the option of Add New Photo on the left side and the name displayed on the right.

any thoughts, suggesstions??

[Jume]

Maybe I can help.. this screen is from myApp. If this is something similar you want to achieve than here how I do it.



1) table view controller file

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
   //create my own cell view
  ChannelTableViewCell *cell = (ChannelTableViewCell *)[tableView dequeueReusableCellWithIdentifier:@"ChannelTableViewCell"];

   //create my view for cell bacground (just draw gradient)
   ChannelTableCellBackgroundView *cellBgView = [[ChannelTableCellBackgroundView alloc] initWithFrame:CGRectZero];
   cell.backgroundView = cellBgView;
   [cellBgView release];

   // .... other code continues ...
}

2. custom cell view code (subclass of UITableViewCell, this layouts labels images for tile view)

- (id)initWithFrame:(CGRect)frame reuseIdentifier:(NSString *)reuseIdentifier {
	
    if (self = [super initWithFrame:frame reuseIdentifier:reuseIdentifier]) {
		channel = nil;
		channelTileView = nil;
		labelView = nil;		
		
		// create the channelTileView and the labelView
		// both of these will be laid out again by the layoutSubviews method
		ChannelTileView *tileView = [[ChannelTileView alloc] initWithFrame:CGRectZero];
		self.channelTileView = tileView;
		[self.contentView addSubview:tileView];
		[tileView release];
		
		UILabel *label = [[UILabel alloc] initWithFrame:CGRectZero];
		// set the label view to have a clear background and a 20 point font
		label.backgroundColor = [UIColor clearColor];
		label.font = [UIFont systemFontOfSize:18];
		self.labelView = label;
		[self.contentView addSubview:label];
		[label release];
		
		
		// add both the label and channelTile to the TableViewCell view
    }
    return self;
}

- (void)layoutSubviews {
	[super layoutSubviews];

	// determine the content rect for the cell. This will change depending on the
	// style of table (grouped vs plain)
	CGRect contentRect = self.contentView.bounds;
	
	// position the image tile in the content rect.
	CGRect channelTileRect = self.contentView.bounds;
	channelTileRect.size = [ChannelTileView preferredViewSize];
	channelTileRect = CGRectOffset(channelTileRect,10,9);
	channelTileView.frame = channelTileRect;
	
	// position the channel name in the content rect
	CGRect labelRect = contentRect;
	labelRect.origin.x = labelRect.origin.x+80;
	labelRect.origin.y = labelRect.origin.y-1;
	labelView.frame = labelRect;	
}

3. and the code of custom background view (subclass of UIView, this just draws a simple gradient)

- (id)initWithFrame:(CGRect)frame {
	if (self = [super initWithFrame:frame]) {
		// Initialization code
	}
	return self;
}


- (void)drawRect:(CGRect)rect {
	CGContextRef myContext = UIGraphicsGetCurrentContext();
	CGGradientRef myGradient;
	CGColorSpaceRef myColorspace;

	size_t num_locations = 2;
	CGFloat locations[2] = { 0.0, 1.0};
	CGFloat components[8] = {  0.92, 0.92, 0.92, 1.0,
								0.82, 0.82, 0.82, 1.0 };
	
		
	myColorspace = CGColorSpaceCreateWithName(kCGColorSpaceGenericRGB);
	myGradient = CGGradientCreateWithColorComponents (myColorspace, components,
													  locations, num_locations);

	CGPoint myStartPoint, myEndPoint;
	myStartPoint.x = 0.0;
	myStartPoint.y = 0.0;
	myEndPoint.x = 1.0;
	myEndPoint.y = 100.0;
	CGContextDrawLinearGradient (myContext, myGradient, myStartPoint, myEndPoint, 0);	
}

Hope you can help ourself with this. It's pretty straight forward all you need to do is:
- subclass UITableViewCell
- set cell.backgroundView to your custom view you want for cell background;

[ash]

Hey thanks a lot for your reply. this was usefull information for me.

Im actually looking to develop this screen



incase u cant see the image in the post , here is the url

http://72.167.31.105:8090/demo/Canvas_14.jpg

[ash]

ok, i just looked up in detail the refernce for UITableViewCell and there are two properties related to indentationLevel and indentationWidth .
I believe that might help me change the cell width....

My question is now, when and how do i set them?

[ash]

i cant seem to set the indentationLevel of the cell .... Please help. Tried everything....!!

[dizy]

Hey Jume,

Thanks for posting that code, it was exactly what I was looking for (gradients cells)

I was wondering if you knew how to also add the shadow effect for the cell... the way the alarm clock app has.

thanks!

Originally Posted by Jume

Maybe I can help.. this screen is from myApp. If this is something similar you want to achieve than here how I do it.

[Jume]

Originally Posted by dizy

Hey Jume,

Thanks for posting that code, it was exactly what I was looking for (gradients cells)

I was wondering if you knew how to also add the shadow effect for the cell... the way the alarm clock app has.

thanks!

Hi,

glad you found that code useful. Concerning the shadow effect... I think the "table" view from the alarm clock is not really table view. I would say they use UIScrollView and on top they stack UIViews which then act as table rows... and after the last view is layered they ad another image view, which is shadow.

But that's just my opinion, I might be wrong.

[ash]

Hi Jume

When i use this kCGColorSpaceGenericRGB, it gives me deprecated warning.
Any clue as to why?

--
Thanks
Ashar

[fordracerguy]

Taken from another author in another thread:

Originally Posted by realberen

Great, thank you for that link! :-)

For people reading this, all I had to change was really the colourspace, I had to set

colorSpace = CGColorSpaceCreateDeviceRGB();

instead of

colorSpace = CGColorSpaceCreateWithName(kCGColorSpaceGenericRGB);

Cheers

Nik