[iOS] 라벨에 링크 넣기 TTTAttributedLabel 예제

Cocoa Touch 프레임워크에서 제공되는 UILabel 은 UI에 글자를 표시하기 위한 가장 기본적인 컴포넌트이다. 하지만 텍스트를 표시하기 위한 기능이 풍부하다고는 할 수 없다. 예를 들어 세로 정렬(Vertical Align) 이라던가 문자열에 링크를 넣어 이 링크가 터치되었을 때의 반응을 처리한다던가 등의 기능이 제공되지 않는다.

이번 포스팅은 3rd-Party 확장 클래스인 TTTAttributedLabel에 대한 소개 및 간단한 예제에 관한 것이다. 이 확장은 아래 github 저장소에서 구할 수 있다.

https://github.com/mattt/TTTAttributedLabel

TTTAttributedLabel.m, TTTAttibutedLabel.h 파일 두 개로 구성된 간단한 프로젝트이기 때문에 이 두 파일을 프로젝트에 넣기만 하면 사용 준비는 끝난다.

UILabel을 상속받아 구현한 클래스이기 때문에 인터페이스 빌더에서 사용하려면 클래스 타입을 TTTAttiributedLabel 로 설정하면 된다. 여기서는 코드레벨의 사용법으로 정리한다.

앞서 이야기 한 대로 UILabel을 베이스로 한 클래스이기 때문에 기본 사용법은 동일하다. 하지만 링크를 지원하기 위해서는 좀 복잡한 방법을 요구한다. 아래와 같은 스크린샷의 라벨을 어떻게 만드는지 살펴보자.

아래의 샘플 코드는 위의 라벨을 만들기 위해 폰트, 텍스트 색상, 가운데 정렬, 링크 색상 등을 지정하는 것을 보여준다.

// 라벨에 표시할 문자열
NSString *string = @"Simple Text contain touchable SOME LINK using TTTAttributedLabel";
    
// 문단(Paragraph) 스타일 설정
NSMutableParagraphStyle *ps = [[NSParagraphStyle defaultParagraphStyle] mutableCopy];
ps.alignment = NSTextAlignmentCenter;
    
// 텍스트 속성 설정
NSDictionary *textAttr = @{ NSFontAttributeName: [UIFont systemFontOfSize:16],
                            NSParagraphStyleAttributeName: ps,
                            NSForegroundColorAttributeName: [UIColor blackColor] };
    
// 문자열을 NSString이 아닌 NSAttributedString 으로 생성한다.
NSAttributedString *str = [[NSAttributedString alloc] initWithString:string attributes:textAttr];
    
TTTAttributedLabel *attrLabel = [[TTTAttributedLabel alloc] initWithFrame:CGRectMake(10, 30, 300, 300)];
    
// textColor는 위 textAttr에서 설정하기 때문에 사실상 의미없는 설정이다.
attrLabel.textColor = [UIColor blackColor];
    
attrLabel.lineBreakMode = NSLineBreakByWordWrapping;
    
// font도 위 textAttr에서 설정하고 있다. 별 의미 없다.
attrLabel.font = [UIFont systemFontOfSize:16];
    
attrLabel.backgroundColor = [UIColor whiteColor];
attrLabel.numberOfLines = 0;    // no limit multi-line
attrLabel.text = str;
    
// textAlignment는 textAttr에서 설정해야 한다. 이 코드는 무의미하다.
attrLabel.textAlignment = NSTextAlignmentCenter;
    
// 링크를 받을 delegate
attrLabel.delegate = self;
    
// 링크 색상 및 언더라인 스타일 설정
NSDictionary *linkAttr = @{ NSForegroundColorAttributeName: [UIColor redColor],
                                NSUnderlineStyleAttributeName: [NSNumber numberWithInt:1] };
attrLabel.linkAttributes = linkAttr;
attrLabel.activeLinkAttributes = linkAttr;
attrLabel.inactiveLinkAttributes = linkAttr;
    
// 링크 추가하기 - "SOME LINK" 라는 문자열을 찾아서 링크를 건다
NSRange range = [string rangeOfString:@"SOME LINK"];
NSURL *url = [NSURL URLWithString:@"http://google.com/"];
[attrLabel addLinkToURL:url withRange:range];
    
[self.view addSubview:attrLabel];

최종적으로 addSubview를 이용해 TTTAttributedLabel을 원하는 뷰(view)에 붙인다.

위의 예제는 Cocoa에서 제공하는 NSAttributedString 이라는 '속성을 가질 수 있는 문자열 클래스'를 이용한다. 이것을 사용하지 않으면 몇 가지 색상 속성이나 폰트, 좌/우/가운데 정렬 등이 동작하지 않는다. 실제로 위 코드에서 textAlignment 를 설정하는 부분에서 주석을 달아놨지만 이 값을 NSTextAlignmentCenter로 설정해도 가운데 정렬이 되지 않는다. 따라서 수평정렬(text alignment)는 NSParagraphStyle을 이용해 정의한다.

즉 위 코드를 제대로 이해하려면 NSParagraphStyle 이나 NSAttributedString 에 대한 지식이 필요하다. 직접 Xcode 상에서 Documentation을 검색해서 공부하자.

추가로 delegate 를 설정하고 있으므로 인터페이스 정의에서 TTTAttributedLabelDelegate 프로토콜을 이용하도록 명시하고 delegate 를 구현한다.

- (void)attributedLabel:(TTTAttributedLabel *)label didSelectLinkWithURL:(NSURL *)url
{
    NSLog(@"Touched %@", [url absoluteString]);
    [[UIApplication sharedApplication] openURL:url];
}

delegate에서 구현되는 내용은 앱 개발을 조금이라도 해 봤다면 바로 알 만한 내용이다. 첫 줄은 로그로 터치된 URL이 무엇인지 표시해 주고 그 다음줄은 openURL 즉 여기서는 google.com을 사파리로 띄워준다.

이 밖에도 링크 URL 형식을 찾아 자동으로 링크를 걸어주는 기능을 제공했던 것 같기도(?) 하다. 자세한 건 직접 구글신에게 빌어보자.