BLOG ARTICLE font | 1 ARTICLE FOUND

  1. 2009.01.13 UIView에서 텍스트 출력 10

iOS 2009. 1. 13. 19:49
아이폰 SDK의 UIKit에는 문자열의 출력을 위해 NSString에 추가된 메소드들을 제공합니다. 이를 이용해서 UIView의 drawRect에서 직접 문자열을 출력하는 간단한 방법을 알아 보겠습니다. UIKit에 추가된 NSString의 메소드들에 대한 자세한 설명은 iPhone DevCenterNSString UIKit Additions Reference 문서에서 확인하실 수 있습니다.

1. 폰트 설정

폰트는 UIFont를 사용하여 설정할 수 있습니다. iPhone과 터치에서 사용가능한 폰트는 아래의 소스를 이용하여 확인할 수 있습니다.
NSArray* familyArray = [UIFont familyNames];
for (NSString *familyName in familyArray) {
    NSLog(@"- %@", familyName);  
    NSArray *fontArray = [UIFont fontNamesForFamilyName:familyName];
       
    for (NSString *fontName in fontArray) {
        NSLog(@"%@", fontName);
    }  
}

위 소스를 실행하면 아래와 같이 폰트들의 목록이 출력됩니다. 전체목록은 아래의 '모든 폰트 보기'를 클릭하시면 확인하실 수 있습니다.
- Georgia
Georgia-Bold
Georgia
Georgia-BoldItalic
Georgia-Italic


폰트명을 보면 볼드는 -bold와 이텔릭은 -Italic과 같이 되어 있어 각각의 특징을 알 수 있습니다. 폰트는 일반적으로 UIFont의 아래와 같은 메소드를 사용하여 생성합니다.
+ (UIFont *)fontWithName:(NSString *)fontName size:(CGFloat)fontSize

fontName에는 폰트명을 fontSize에는 크기를 설정하여 UIFont 오브젝트를 생성합니다. 아래는 위의 메소드를 이용하여 19 사이즈의 'Verdana-Bold' 폰트를 생성하는 예입니다.
UIFont *generalFont = [UIFont fontWithName:@"Verdana-Bold" size:19];

한글은 다른 폰트로 설정을 해도 영향을 받지 않는 것 같고 'AppleGothic'만 사용할 수 있는 것 같습니다.
 

2. 컬러 설정

컬러는 UIColor의 'colorWith...' 류의 생성 메소드로 직접 생성할 수 있지만 아래와 같이 미리 지장된 색상을 간편하게 이용할 수도 있습니다.
UIColor *generalColor = [UIColor darkGrayColor];

UIColor에서 지정되어 있는 색상은 아래와 같습니다.
black, darkGray, lightGray, white, gray, red, green, blue, cyan, yellow, magenta, orange,
purple, brown

색상설정은 set을 이용하여 간편하게 적용할 수 있습니다.
[generalColor set]


3. drawAtPoint

지정된 위치에 문자열을 출력하는 간단한 메소드입니다. 반환값은 실제 문자를 출력한 크기입니다.
- (CGSize)drawAtPoint:(CGPoint)point withFont:(UIFont *)font

point에 출력될 위치를 font에 사용될 폰트를 지정합니다.  다소 복잡하지만 아래의 메소드도 많이 사용됩니다.
- (CGSize)drawAtPoint:(CGPoint)point
forWidth:(CGFloat)width
withFont:(UIFont *)font
lineBreakMode:(UILineBreakMode)lineBreakMode

forWith는 문자열이 출력될 너비를 구합니다. fotWidth를 넘어 가는 문자들은 출력되지 않으며, lineBreakMode에 설정된 값에 따라 잘리는 옵션을 선택할 수 있습니다. 옵션은 아래와 같습니다. lineBreakMode의 옵션은 아래와 같습니다.

  • UILineBreakModeWordWrap - 단어 단위
  • UILineBreakModeCharacterWrap - 문자 단위
  • UILineBreakModeClip - 영역
  • UILineBreakModeHeadTruncation - 앞에 '...' 표시
  • UILineBreakModeTailTruncation - 뒤에 '...' 표시
  • UILineBreakModeMiddleTruncation - 중간에 '...' 표시

각 옵션의 결과는 아래의 샘플에서 확인하실 수 있습니다.


4. drawInRect

지정된 영역에 문자를 출력하는 메소드 입니다. 가로정렬이 가능하고 긴 문자열의 경우에는 여러줄에 걸쳐 출력을 할 수 있습니다.
- (CGSize)drawInRect:(CGRect)rect
withFont:(UIFont *)font
lineBreakMode:(UILineBreakMode)lineBreakMode
alignment:(UITextAlignment)alignment

drawAtPoint와 동일하며 alignment의 옵션은 아래와 같습니다.
  • UITextAlignmentLeft - 좌측 정렬
  • UITextAlignmentCenter - 중앙 정렬
  • UITextAlignmentRight - 우측정렬

5. 출력전 크기 구하기

출력전에 미리 출력될 문자열의 크기를 알아 낼 수 있는 'sizeWith...'류의 메소드들을 제공합니다. 출력시 사용하는 font와 width, lineBreakMode과 동일하게 설정하고 호출하면 출력될 텍스트의 실제 크기를 반환합니다.
- (CGSize)sizeWithFont:(UIFont *)font
forWidth:(CGFloat)width
lineBreakMode:(UILineBreakMode)lineBreakMode


drawInRect로 긴 문자열을 여러줄에 출력할 시에는 아래의 메소드를 호출해여 크기를 구해 와야 합니다.
- (CGSize)sizeWithFont:(UIFont *)font
constrainedToSize:(CGSize)size
lineBreakMode:(UILineBreakMode)lineBreakMode


6. 샘플

위의 메소드들을 이용해서 아래와 같이 간단한 예제를 만들어 보겠습니다. drawAtPoint의 breakMode별로 출력하고, 마지막에는 drawInRect를 이용하여 여러행에 걸쳐 출력하도록 하였습니다.
UIView 서브클래스의 drawRect에 아래와 같이 소스를 입력합니다.
- (void)drawRect:(CGRect)rect {
// 시작 x 좌표
#define START_X        10
   
    /* 텍스트 설정 (from wikipedia) */
    NSString *title = @"Tiger";
    NSString *memo = @"The tiger (Panthera tigris) is a member of the Felidae family;" \
                      "the largest of the four big cats";
   
    /* 폰트 설정 */
    UIFont *titleFont = [UIFont fontWithName:@"Arial-BoldItalicMT" size:40];
    UIFont *memoFont = [UIFont fontWithName:@"ArialMT" size:16];
   
    /* 칼라 설정 */
    UIColor *blackColor = [UIColor blackColor];
    UIColor *blueColor = [UIColor blueColor];
    UIColor *redColor = [UIColor redColor];
    UIColor *userColor = [UIColor colorWithRed:0.2 green:0.4 blue:0.2 alpha:0.8];
   
    CGFloat yPosition = 10;
    CGFloat viewWidth = [self bounds].size.width;
    CGSize textSize;
   
    /* 타이틀 출력 */
    [blueColor set];
    textSize = [title drawInRect:CGRectMake(0, yPosition, viewWidth, 30)
                        withFont:titleFont
                   lineBreakMode:UILineBreakModeWordWrap
                       alignment:UITextAlignmentCenter];
    yPosition = (textSize.height + 20);
       
    int mode = 0;   
    NSArray* breakModeArray = [NSArray arrayWithObjects:@"WordWrap",
                               @"CharacterWrap",
                               @"Clip",
                               @"HeadTruncation",
                               @"TailTruncation",
                               @"MiddleTruncation",
                               nil];

    /* breakMode 설정별로 텍스트 출력 */
    [blackColor set];
   
    for (NSString *modeName in breakModeArray) {
        /* 현재 breakMode 출력 */
        [redColor set];
        textSize = [modeName drawAtPoint:CGPointMake(START_X, yPosition)
                                forWidth:viewWidth
                                withFont:memoFont
                           lineBreakMode:UILineBreakModeWordWrap];
        yPosition += textSize.height;
       
        /* 텍스트 출력 */
        [blackColor set];
        textSize = [memo drawAtPoint:CGPointMake(START_X, yPosition)
                            forWidth:viewWidth-80
                            withFont:memoFont
                       lineBreakMode:mode];
        yPosition += (textSize.height + 8);
       
        mode++;
    }
   
    /* drawInRect 타이틀 출력 */
    [redColor set];
    textSize = [@"* drawInRect" drawAtPoint:CGPointMake(START_X, yPosition)
                                   forWidth:viewWidth
                                   withFont:memoFont
                              lineBreakMode:UILineBreakModeWordWrap];
    yPosition += textSize.height;
   
    /* memo를 drawInRect로 출력 */
    [userColor set];
    textSize = [memo drawInRect:CGRectMake(START_X, yPosition, viewWidth-80, 100)
                       withFont:memoFont
                  lineBreakMode:UILineBreakModeWordWrap];
}

AND