SMS balloon cell??

javid.alimohideen · 05-01-2008, 11:15 AM

Hi,
I was just wondering if anyone has a created a SMS type balloon cell for their application. If so, will you be able to share your code? I am just too bad at Graphics and Animations and any help is greatly appreciated.

Thanks,
Javid

javid.alimohideen · 05-14-2008, 04:15 PM

Finally, I was able to figure out how to draw a balloon cell as a background for my table view cell. If anyone is looking for code it is very sraightforward. I have attached a balloon image incase you need one.

Code:

-(void)drawRect:(CGRect) aRect {
   UIImage* balloon = [[UIImage imageNamed:@"balloon.png"] stretchableImageWithLeftCapWidth:15  topCapHeight:15]; // you need to have the .png image, it's not a system one.
  [balloon drawInRect: aRect];
}

BuschyBoy · 05-14-2008, 08:27 PM

That just might come in handy in one of my apps.

Thanks.

scottiphone · 05-15-2008, 12:48 AM

Thanks for sharing. I don't need it for anything now but it could be useful on future projects.

turinreza · 06-17-2008, 02:59 AM

Quote:

Originally Posted by javid.alimohideen

Finally, I was able to figure out how to draw a balloon cell as a background for my table view cell. If anyone is looking for code it is very sraightforward. I have attached a balloon image incase you need one.

Code:

-(void)drawRect:(CGRect) aRect {
   UIImage* balloon = [[UIImage imageNamed:@"balloon.png"] stretchableImageWithLeftCapWidth:15  topCapHeight:15]; // you need to have the .png image, it's not a system one.
  [balloon drawInRect: aRect];
}

how did you attach it to a uitablviewcell?

javid.alimohideen · 06-17-2008, 09:54 AM

You extend UITableViewCell and override the drawRect method..

Code:

MyTableViewCell : UITableViewCell

-(void) drawRect:
{
  // the code goes here.
}

turinreza · 06-17-2008, 03:07 PM

thanks..
but whenever i write somethign to the cell the image gets clipped
it seems that the text is blocking the image ...
anyway you fixed that?
TIA

Quote:

Originally Posted by javid.alimohideen

You extend UITableViewCell and override the drawRect method..

Code:

MyTableViewCell : UITableViewCell

-(void) drawRect:
{
  // the code goes here.
}

victor_zzm · 07-30-2008, 08:35 AM

Hi Javid,

I could not find your attached balloon.png?
Could you please send me the file? Or let me know where can I get it?
Thanks a lot.

javid.alimohideen · 09-30-2008, 04:03 PM

Sorry about not responding. I have been away for past few months and was not able to participate or develop any iPhone related code for a while. I have uploaded the ballooncell image file.

Sorry again,
Javid

MacBuddy · 10-24-2008, 11:48 PM

Could someone post some code with this added. Please Please Please Please Please Please Please Please Please Please Please Please PPPPPPPPPPPPPPPPPPPPPPPllllllllllllllllllllllleeee eeeeeeeeeeeeeeeeeeeeaaaaaaaaaaaaaaaaaassssssssssss sssssseeeeeeeeeeeeeeeeeeeeeee

ash · 10-26-2008, 01:20 PM

Hi Guys

Actually i wanted to make a screen similar to the iPhone SMS screen, the part where the user can enter the message (the textfield expands as a message is entered)

Any help would be appreciated.

--
Thanks

YARG · 03-14-2009, 03:38 AM

Yeah I could do with the same thing. I'm trying to learn iPhone development so if anyone does manage to get a project that visually looks like the SMS please post a link here.

Thanks! ;-)

Steve

yecine06 · 03-24-2009, 10:15 AM

How did you manage for the backgournd to fit the content? specially the width of the baloon?

pcmofo · 05-05-2009, 05:04 PM

Quote:

Originally Posted by yecine06

How did you manage for the backgournd to fit the content? specially the width of the baloon?

Here is how I did it....

Code:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
	
	ThreadSCell *cell = (ThreadSCell*)[tableView dequeueReusableCellWithIdentifier:@"MsgListCell"];
	
	// If no cell is available, create a new one using the given identifier
	if (cell == nil) {
		cell = [[[ThreadSCell alloc] initWithFrame:CGRectMake(0,0,0,0) reuseIdentifier:@"MsgListCell"] autorelease];
		cell.accessoryType = UITableViewCellAccessoryNone;
	}
	
	
	
	NSMutableDictionary *tempMsg = [myMessages objectAtIndex:indexPath.row];
	
	
	CGFloat	result = 20.0;
	CGSize	textSize = { 260.0, 20000.0 };		// width and height of text area
	
	NSMutableDictionary *dict = [myMessages objectAtIndex:indexPath.row];
	NSString *aMsg = [dict objectForKey:@"msgBody"];
	
	CGSize size = [aMsg sizeWithFont:[UIFont systemFontOfSize:13.0] constrainedToSize:textSize lineBreakMode:UILineBreakModeWordWrap];
	
	result = MAX(size.height + 20, 30.0);
	//NSLog(@"Height for row2:%i %f", indexPath.row, result);
	
	// Set the cell properities 
	[cell.msgText setText:[tempMsg objectForKey:@"msgBody"]];
	[myTable setSeparatorStyle:UITableViewCellSeparatorStyleNone];
	[cell setSelectionStyle:UITableViewCellSelectionStyleNone];
	if ( indexPath.row % 2 == 0 ) {
		 
		
		[cell.msgText setFrame:CGRectMake(20.0, 0.0, size.width, cell.frame.size.height-10)];
		//[cell.msgText setBackgroundColor:[UIColor colorWithRed:.788 green:.788 blue:.788 alpha:1]];
		//[cell.msgText setText:[NSString stringWithFormat:@"H1: %f H2: %f", result, cell.frame.size.height]];
		
		UIImage* balloon = [[UIImage imageNamed:@"msgGray.png"] stretchableImageWithLeftCapWidth:24  topCapHeight:15];
		UIImageView *newImage = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, size.width+35, size.height+20)];
		UIView *newView =[[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, cell.frame.size.width, cell.frame.size.height)];

		[newImage setImage:balloon];
		[newView addSubview:newImage];
		[cell setBackgroundView:newView];
		
        
		
	}

Basically I create a view the same size as the cell, and a view the size of the balloon. add the balloon view to the cell view and it works. Its kinda hacked together but its good enough for now.

jumpingGrendel · 05-31-2009, 11:29 AM

Hi-
This is perfect, works exactly as expected. But how can I make it respond to orientation changes? I tried setting the width to a value based on the cell size, but it still doesn't change on rotate.

Thanks!

John

Quote:

Originally Posted by pcmofo

Here is how I did it....

Code:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
	
	ThreadSCell *cell = (ThreadSCell*)[tableView dequeueReusableCellWithIdentifier:@"MsgListCell"];
	
	// If no cell is available, create a new one using the given identifier
	if (cell == nil) {
		cell = [[[ThreadSCell alloc] initWithFrame:CGRectMake(0,0,0,0) reuseIdentifier:@"MsgListCell"] autorelease];
		cell.accessoryType = UITableViewCellAccessoryNone;
	}
	
	
	
	NSMutableDictionary *tempMsg = [myMessages objectAtIndex:indexPath.row];
	
	
	CGFloat	result = 20.0;
	CGSize	textSize = { 260.0, 20000.0 };		// width and height of text area
	
	NSMutableDictionary *dict = [myMessages objectAtIndex:indexPath.row];
	NSString *aMsg = [dict objectForKey:@"msgBody"];
	
	CGSize size = [aMsg sizeWithFont:[UIFont systemFontOfSize:13.0] constrainedToSize:textSize lineBreakMode:UILineBreakModeWordWrap];
	
	result = MAX(size.height + 20, 30.0);
	//NSLog(@"Height for row2:%i %f", indexPath.row, result);
	
	// Set the cell properities 
	[cell.msgText setText:[tempMsg objectForKey:@"msgBody"]];
	[myTable setSeparatorStyle:UITableViewCellSeparatorStyleNone];
	[cell setSelectionStyle:UITableViewCellSelectionStyleNone];
	if ( indexPath.row % 2 == 0 ) {
		 
		
		[cell.msgText setFrame:CGRectMake(20.0, 0.0, size.width, cell.frame.size.height-10)];
		//[cell.msgText setBackgroundColor:[UIColor colorWithRed:.788 green:.788 blue:.788 alpha:1]];
		//[cell.msgText setText:[NSString stringWithFormat:@"H1: %f H2: %f", result, cell.frame.size.height]];
		
		UIImage* balloon = [[UIImage imageNamed:@"msgGray.png"] stretchableImageWithLeftCapWidth:24  topCapHeight:15];
		UIImageView *newImage = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, size.width+35, size.height+20)];
		UIView *newView =[[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, cell.frame.size.width, cell.frame.size.height)];

		[newImage setImage:balloon];
		[newView addSubview:newImage];
		[cell setBackgroundView:newView];
		
        
		
	}

Basically I create a view the same size as the cell, and a view the size of the balloon. add the balloon view to the cell view and it works. Its kinda hacked together but its good enough for now.

jumpingGrendel · 06-01-2009, 09:49 AM

Ah, I found it: autoresizingMask

Thanks,

John

Quote:

Originally Posted by jumpingGrendel

Hi-
This is perfect, works exactly as expected. But how can I make it respond to orientation changes? I tried setting the width to a value based on the cell size, but it still doesn't change on rotate.

Thanks!

John

timothy1ee · 07-12-2009, 02:44 PM

Quote:

Originally Posted by javid.alimohideen

Sorry about not responding. I have been away for past few months and was not able to participate or develop any iPhone related code for a while. I have uploaded the ballooncell image file.

Sorry again,
Javid

I don't seem to have permission to download this image. Has anyone else had an issue with that?