69
68

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

NSAttributedString 属性付きのUIButtonや文字列の描画

Posted at

iOS6から使用可能な属性文字列の描画です。
こんな感じにいろいろな種類の文字列が描画出来ます。お手軽ですね。

ScreenShot

- (void)drawRect:(CGRect)rect
{    
    NSMutableAttributedString *attrStr = [[NSMutableAttributedString alloc] initWithString:@"文字色\n背景色\n文字間隔\n取り消し線\n下線\n中抜き文字 ABCD\n影 ABCD"];
        
    /* フォント */
    [attrStr addAttribute:NSFontAttributeName
                    value:[UIFont fontWithName:@"ChalkboardSE-Regular" size:30.f]
                    range:NSMakeRange(0, attrStr.length)];
    
    /* 文字色 */
    [attrStr addAttribute:NSForegroundColorAttributeName
                    value:[UIColor blueColor]
                    range:foreRange];
    
    /* 背景色 */
    [attrStr addAttribute:NSBackgroundColorAttributeName
                    value:[UIColor greenColor]
                    range:backRange];
    
    /* カーニング(文字間隔) 0は無効でデフォルトは0 */
    [attrStr addAttribute:NSKernAttributeName
                    value:[NSNumber numberWithFloat:20.f]
                    range:kernRange];
    
    /* 取り消し線 */
    [attrStr addAttribute:NSStrikethroughStyleAttributeName
                    value:[NSNumber numberWithInteger:NSUnderlineStyleSingle]
                    range:strikeRange];
    
    /* 下線 */
    [attrStr addAttribute:NSUnderlineStyleAttributeName
                    value:[NSNumber numberWithInteger:NSUnderlineStyleSingle]
                    range:underRange];
    
    /* 中抜き文字(枠線色, 枠線幅を組み合わせ) */
    [attrStr addAttributes:@{NSStrokeColorAttributeName : [UIColor blueColor], NSStrokeWidthAttributeName : [NSNumber numberWithFloat:3.f]}
                     range:outlineRange];
    
    /* 影 */
    NSShadow *shadow = [[NSShadow alloc] init];
    // 影のサイズ
    shadow.shadowOffset = CGSizeMake(1.f, 1.f);
    // 影の色
    shadow.shadowColor = [UIColor redColor];
    // ぼかしの半径
    shadow.shadowBlurRadius = 5.f;
    [attrStr addAttribute:NSShadowAttributeName
                    value:shadow
                    range:shadowRange];
    
    /* 属性文字列の描画*/
    [attrStr drawInRect:rect];
    
    /* 描画に必要な矩形の取得 */
    NSStringDrawingContext *context = [[NSStringDrawingContext alloc] init];
    CGRect drawnRect = [attrStr boundingRectWithSize:rect.size
                                            options:NSStringDrawingUsesLineFragmentOrigin
                                             context:context];
    
    /* パラグラフスタイルの設定しての描画 */
    attrStr = [[NSMutableAttributedString alloc] initWithString:@"truncatingTail"];
    NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc] init];
    // 矩形が描画に必要なサイズより小さい場合に末尾を省略文字にする
    style.lineBreakMode = NSLineBreakByTruncatingTail;
    [attrStr addAttributes:@{NSFontAttributeName : [UIFont systemFontOfSize:30.f], NSParagraphStyleAttributeName : style}
                     range:NSMakeRange(0, attrStr.length)];
    // 描画に必要なサイズを取得
    CGSize size = [attrStr boundingRectWithSize:rect.size
                                        options:NSStringDrawingUsesLineFragmentOrigin
                                        context:context].size;
    // 横幅を減らして描画(つまり描画に必要なサイズが足りない)
    [attrStr drawInRect:CGRectMake(0.f, drawnRect.size.height, size.width - 10.f, size.height)];
}
/* UIButtonにNSAttributedStringを使用 */
NSString *title = @"BUTTON";
NSShadow *shadow = [[NSShadow alloc] init];
shadow.shadowOffset = CGSizeMake(1.f, 1.f);
shadow.shadowColor = [UIColor blueColor];
shadow.shadowBlurRadius = 5.f;
NSDictionary *attr = @{NSStrokeColorAttributeName : [UIColor blueColor], NSStrokeWidthAttributeName : [NSNumber numberWithFloat:4.f]};
NSAttributedString *attrTitle = [[NSAttributedString alloc] initWithString:title attributes:attr];
[self.button setAttributedTitle:attrTitle forState:UIControlStateNormal];

69
68
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
69
68

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?