UITextView 에서 단어 개별에 관한 특정 작업(색을 다르게 입힌다던가, 애니메이션, 이미지 추가)을 위해서는 단어가 출력되는 좌표와 크기를 알아야 합니다. 그 개별 개별 단어의 크기와 좌표를 알아내는 방법에 관한 글 입니다.
iPhone apps 개발하는 중에 문장이 쓰여져 있는 UITextView 에서 특정 단어에 효과를 주고 싶었습니다. UIWebView 를 이용해서 화면에 글을 출력하고 CSS 와 Javascript 를 이용해서 개발하면 된다는 소리가 있기는 하던데, 제가 잘 아는 분야와는 조금 거리가 있어서, UITextView 를 수정하기로 했습니다.
원리
원리는 쉽습니다. UITextView 에서 문장을 출력하는 경우라고 하면
1. 문장을 각 단어별로 쪼개서 NSArray 로 저장합니다.
2. 쪼개진 단어가 표시되는 좌표와 테두리 크기를 알아냅니다.
3. 변경을 주고 싶은 단어 위에 같은 크기(단어 와)의 UILabel 을 살짝 얹어줍니다.
4. UILabel 에 이미지나 폰트, 글자색을 변경해 줍니다.
즉 이렇게 보이는 화면이 있으면 , 아래쪽에 보이는 'Hello' 라는 버튼을 터치하면
이런식으로 각 단어들이 보이는 듯이 색이 입혀집니다.
구현
원리는 쉽지만, 막상 구현할려고 하니 힘들더군요. 비슷한 코드가 있나 찾아보는데만 반나절 이상을 소비했습니다. (결국 못찾아서 직접 만들어 줬습니다) 화면에 문장이 출력되는 부분에서 패딩을 생각 못해줘서 또 시간 많이 소비했구요.
Object-C 와 아이폰 개발에 익숙치 않아서 , 문법이 이상한 것들이 조금 보이더라도 고수분들께서는 이해해주시기 바랍니다. (지적도 감사합니다 )
- (IBAction) rePaintWord: (id) sender
{
// color Array 를 만든다.
NSArray * color_array = [NSArray arrayWithObjects:[UIColor grayColor] , [UIColor redColor] ,
[UIColor greenColor], [UIColor blueColor], [UIColor yellowColor],
[UIColor orangeColor], [UIColor brownColor], nil];
// 단어들 tokenizing 한다
NSArray * myWords = [overLookTextView.text componentsSeparatedByString:@" "]; // 문장에 쓰인
NSInteger count = [myWords count] ;
// 실제로 contents 가 뿌려지는 textview 크기 보정을 한다. padding 크기를
// 보정 안해주면 반나절 이상 테스트 한다고 해도 제대로 결과가 나오지 않는다.
// padding size 이 패딩 사이즈는 일명 마법숫자(magic number)이다.
// 원리도 모르고 어딘가에서 표시도 되지 않았다. -ㅅ-
int padding_size = 11;
CGSize content_size = CGSizeMake (overLookTextView.contentSize.width - padding_size ,
overLookTextView.contentSize.height - padding_size);
// 높이가 변하게 되는 단어를 지정하기 위한 산물이다. 즉 갑자기 높이가 변하는 단어는 lineBreak
// 됐다고 보면 된다. 바로 그 시점의 높이와 Range 를 저장하기 위해서 이다.
CGSize last_string_size = CGSizeMake(0,0);
NSRange last_result_range = NSMakeRange(0, 0);
NSRange result_range = NSMakeRange(0, overLookTextView.text.length);
for(int i = 0 ; i < count ; i++)
{
// 전체 문장에서 정확히 원하는 단어를 검색하기 위해서 이다. 정규표현식을 썼으며
// 단어 인 것들만 찾기 위해서 썼다. NSRegularExpressionSearch 는
// iOS 4.0 이상부터 지원한다고 한다.
result_range = [overLookTextView.text
rangeOfString:[NSString stringWithFormat:@"\\b%@",
[myWords objectAtIndex:i]]
options:NSRegularExpressionSearch range:result_range] ;
// 실제로 찾고자 하는 단어가 차지하는 영역 크기
CGSize wordSize = [[myWords objectAtIndex:i]
sizeWithFont:overLookTextView.font forWidth:content_size.width
lineBreakMode:UILineBreakModeWordWrap];
// 시작부터 단어를 포함한 줄까지 잘라내기
NSString* head = [overLookTextView.text
substringToIndex:result_range.location + result_range.length];
// 위에서 잘라낸 단어줄의 content 크기 알아내기 , 이는 높이를 비교하기 위해서
// 알아보는 것이다. 지난번 결과로 저장된 높이랑 틀려진다면
// 줄이 바꼈음을 알고 바로 그 시점이 마지막 범위와 높이가 저장되는 시점이다.
CGSize string_size = [head sizeWithFont:overLookTextView.font
constrainedToSize:content_size lineBreakMode:UILineBreakModeWordWrap];
if (string_size.height != last_string_size.height)
{
last_result_range = result_range ; // 줄바뀌는 첫번째 단어 의 시작 위치를 저장
last_string_size = string_size ;
}
// head 는 문장의 처음부터 단어를 포함하고 있는 문자열까지 잘라낸 것이다.
// tail 은 줄이 바뀐 첫 단어부터 단어를 포함하는 곳까지 잘라낸 것이다.
NSString * tail = [head substringFromIndex:last_result_range.location];
// lineSize 는 줄이 바뀐곳부터 단어를 포함한 곳까지의 크기를 얻어내서 저장하는 곳이다.
CGSize lineSize = [tail sizeWithFont:overLookTextView.font forWidth:content_size.width
lineBreakMode:UILineBreakModeWordWrap];
// temp_rect 는 단어가 위치하는 좌표값과 크기가 저장된다. 하지만 이는
// 실제로 위치한 곳과 확실하게 일치시켜 줄려면
// textView 가 위치한 실제 좌표 값과 글자가 실제로 출력되는
// 위치까지의 'padding' 값을 더해 주어야 한다.
// 심각한 문제는 여기서 더해주는 padding 은 위에서 content
// 윈도 크기를 보정하기 위해서 더해주는 padding_size 값과는
// 다르다는 것이다.
CGRect temp_rect = CGRectMake (lineSize.width - wordSize.width ,
last_string_size.height - wordSize.height ,
wordSize.width , wordSize.height);
// Test 삼아서 위치보정해주고 (textview , padding) 실제 글자 위치에
// 작은 Label 을 한개 만들어서 덮어놓는 함수를 작성했다.
[self make_label_on_screen:[myWords objectAtIndex:i]
rect:temp_rect color:[color_array objectAtIndex:( i % [color_array count]) ]];
// 검색 범위를 변경해 주는 곳이다. 단어를 찾은 크기만큼 이동해 주는 모듈
int new_location = result_range.location + result_range.length ;
result_range = NSMakeRange(new_location , overLookTextView.text.length - new_location);
}
}
- (void) make_label_on_screen:(NSString *) word rect:(CGRect)
label_rect color:(UIColor *) color
{
// 실제 위치를 표기해 주는 패딩과 textview 위치 찾기
CGFloat ui_padding_size = 7.9;
label_rect.origin.x += overLookTextView.frame.origin.x ;
label_rect.origin.y += overLookTextView.frame.origin.y ;
label_rect.origin.x += ui_padding_size;
label_rect.origin.y += ui_padding_size;
UILabel * nameLabel = [[UILabel alloc] initWithFrame:label_rect];
nameLabel.text = word ;
nameLabel.textColor = color;
nameLabel.backgroundColor = [UIColor clearColor];
nameLabel.textAlignment = UITextAlignmentRight;
nameLabel.font = overLookTextView.font ;
[self.view addSubview: nameLabel];
[nameLabel release];
}
'Hello' 버튼에 대응되는 함수와 UILabel 을 한개 얹어주는 함수 두개를 만들어 줬습니다. 혹시 몰라서 Test 로 만들어본 프로젝트를 첨부 합니다. 
TestView.zip
