아이폰 SMS 말풍선을 만들어 보기

참고 : http://vimeo.com/8718829

혼자 구현해보다가 몇가지 문제를 해결하지 못하고 성질버려서 구굴링한  결과 동영상으로 튜토리얼까지
만든 사이트를 찾았습니다.

위 사이트는 오른쪽, 왼쪽 말풍선 두개를 사용하는데 전 왼쪽용 말풍선을 도저히 구하지 못해서 결국
이미지를 반전시켰습니다. 

나중에 사용할 요량으로 우선 저장

//MainViewController.h

@interface MainViewController : UITableViewController
{
    NSMutableArray *arrSms;
}

@property (nonatomic, retain) NSMutableArray *arrSms;

- (void)initResource;

@end

//MainViewController.m 

#import "MainViewController.h"

@implementation MainViewController

@synthesize arrSms;

#pragma mark-
#pragma mark resource

- (void)dealloc
{
    [arrSms release];
    
    
    [super dealloc];
}

- (void)initResource
{
    // Custom initialization
    self.tableView.frame = [[UIScreen mainScreen] applicationFrame];

    
    arrSms = [[NSMutableArray alloc] initWithObjects:@"안녕하세요"
              , @"네 안녕이요"
              , @"이건 조금 긴 글 입니다. ^^"
              , @"이건 더 긴글 입니다. 하하하하 "
              , @"아이폰도 UI를 이쁘게 만들려면 결국 노가다가 많군요."
              , @"디자인에 잼병인 저로서는 정말 좌절을 느끼는 중입니다. 이 쉬운 이미지를 찾기 위해서 하루종일 뒤졌어요"
              , @"결국 반대이미지를 찾지 못해서 결국 프로그램에서 이미지 뒤집는 일까지 있어요 그냥 반대 이미지 사용하면 쉬운데...."
              , nil];    
}

#pragma mark-

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if ( self ) {
        [self initResource];
    }
    
    return self;
}

- (id)initWithStyle:(UITableViewStyle)style
{
    self = [super initWithStyle:style];
    if (self) {
        [self initResource];
    }
    return self;
}

- (void)didReceiveMemoryWarning
{
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
    
    // Release any cached data, images, etc that aren't in use.
}

#pragma mark - View lifecycle

- (void)viewDidLoad
{
    [super viewDidLoad];

    // Uncomment the following line to preserve selection between presentations.
    // self.clearsSelectionOnViewWillAppear = NO;
 
    // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
    // self.navigationItem.rightBarButtonItem = self.editButtonItem;
    
    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    
//    self.tableView.backgroundColor = [UIColor colorWithRed:219.0/255.0 green:226.0/255.0 blue:237.0/255.0 alpha:1.0];
}

- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
    self.arrSms         = nil;
}

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
}

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
}

- (void)viewWillDisappear:(BOOL)animated
{
    [super viewWillDisappear:animated];
}

- (void)viewDidDisappear:(BOOL)animated
{
    [super viewDidDisappear:animated];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    // Return YES for supported orientations
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}

#pragma mark - Table view data source

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    // Return the number of sections.
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    // Return the number of rows in the section.
    return [arrSms count];
}

#define TAG_IMAGEVIEW   1
#define TAG_LABEL       2
#define TAG_MESSAGE     3

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    
    UIImageView *imageView = nil;
    UILabel *label = nil;
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
        cell.selectionStyle = UITableViewCellSelectionStyleNone;
        
        imageView = [[UIImageView alloc] init ];
        imageView.tag = TAG_IMAGEVIEW;
        label = [[UILabel alloc] init];
        label.tag = TAG_LABEL;
        label.backgroundColor = [UIColor clearColor];
        label.numberOfLines = 0;
        label.lineBreakMode = UILineBreakModeWordWrap;
        label.font = [UIFont systemFontOfSize:14.0];
        
        UIView *message = [[UIView alloc] initWithFrame:CGRectMake(0, 0, cell.frame.size.width, cell.frame.size.height) ];
        message.tag = TAG_MESSAGE;
        
     
        [message addSubview:imageView];
        [message addSubview:label];
        
        message.autoresizingMask = UIViewAutoresizingFlexibleWidth;
        
        
        [cell.contentView addSubview:message];
        
        
        [imageView release];
        [label release];
        [message release];
    }
    else 
    {
        imageView = (UIImageView *)[[cell.contentView viewWithTag:TAG_MESSAGE] viewWithTag:TAG_IMAGEVIEW];
        label     = (UILabel *)[[cell.contentView viewWithTag:TAG_MESSAGE] viewWithTag:TAG_LABEL];
    }
    
    // Configure the cell...
    
    NSString* text = [arrSms objectAtIndex:indexPath.row];
    CGSize size = [text sizeWithFont:[UIFont systemFontOfSize:14.0] 
                   constrainedToSize:CGSizeMake(220.0f, 480.0f) 
                       lineBreakMode:UILineBreakModeWordWrap];
    
    UIImage *image = nil;
    if ( indexPath.row%2 == 0 ) {
        imageView.frame = CGRectMake(320.0f-(size.width+35.0f), 2.0f, size.width+35.0f, size.height+24.0f);
        imageView.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin;
        image = [[UIImage imageNamed:@"Balloon_1@2x.png"] stretchableImageWithLeftCapWidth:28.0f 
                                                                              topCapHeight:24.0f];
        
        label.frame = CGRectMake(307.0f-(size.width+5.0f), 10.0f, size.width+8.0f, size.height+5.0f);
        label.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin;
    }
    else {
        imageView.frame = CGRectMake(0, 2.0f, size.width+35.0f, size.height+24.0f);
        imageView.autoresizingMask = UIViewAutoresizingFlexibleRightMargin;
        UIImage *tempImage = [UIImage imageNamed:@"Balloon_2@2x.png"];
        UIImage *covertImage = [UIImage imageWithCGImage:(CGImageRef)tempImage.CGImage 
                                                   scale:1.0f 
                                             orientation:UIImageOrientationUpMirrored];
        image = [covertImage stretchableImageWithLeftCapWidth:28.0f 
                                                 topCapHeight:24.0f];
        
        label.frame = CGRectMake(25.0f,10.0f, size.width+5.0f, size.height);
        label.autoresizingMask = UIViewAutoresizingFlexibleRightMargin;
    }
    imageView.image = image;
    label.text = text;
    
    return cell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSString* text = [arrSms objectAtIndex:indexPath.row];
    CGSize size = [text sizeWithFont:[UIFont systemFontOfSize:14.0] 
                   constrainedToSize:CGSizeMake(220.0f, 480.0f) 
                       lineBreakMode:UILineBreakModeWordWrap];
    return size.height+28.0f;
}


#pragma mark - Table view delegate

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    // Navigation logic may go here. Create and push another view controller.
    /*
     <#DetailViewController#> *detailViewController = [[<#DetailViewController#> alloc] initWithNibName:@"<#Nib name#>" bundle:nil];
     // ...
     // Pass the selected object to the new view controller.
     [self.navigationController pushViewController:detailViewController animated:YES];
     [detailViewController release];
     */
}

@end