gihyo.jpサイトのロゴ

職人が教える！iOSアプリ開発で使いこなしたいとっておきのOSS

第4回UILabelでのテキスト表示をリッチにする機能拡張サブクラス3種

2012-04-19

UILabelは、iOSアプリ開発において使用頻度の高いクラスですが、カユいところに手が届かなかったりします。たとえばテキストの一部だけ強調表示するといった使い方はできませんし、動的に更新されるテキストを上寄せにしようと思ったら、そのテキストがちょうど納まるUILabelのサイズを算出するメソッドをコールしてサイズを指定する必要があります。

今回はそんなUILabelの機能を拡張してくれるサブクラス3種を紹介します。

OHAttributedLabel

特徴

NSAttributedStringをラップしてUILabelに持たせたもので、テキストの一部だけフォントや色を変えたりといった指定が簡単にできるようになります。

またリンクの付与、テキスト上寄せといったことも簡単にできます。

OHAttributedLabelの使用例
OHAttributedLabelの使用例

使用準備

  1. ソースコードを以下のURLよりダウンロード

  2. CoreText.frameworkをプロジェクトに追加

  3. OHAttributedLabel.hとNSAttributedString+Attributes.hをインポート

    #import "OHAttributedLabel.h"
#import "NSAttributedString+Attributes.h"

テキストの一部を赤字にする

  1. NSMutableAttributedStringのインスタンスを生成します。引数には表示する文字列を渡します。

    NSString *txt = @"『モンスターを集めてまいれ』というアプリをリリースしました。無料ですのでぜひお試しください！";
NSMutableAttributedString *attrStr = [NSMutableAttributedString attributedStringWithString:txt];

  2. setTextColor:range:メソッドで、変更するフォントカラーと、変更する範囲を指定します。

    NSRange range = [txt rangeOfString:@"無料"];
UIColor *color = [UIColor colorWithRed:0.5f green:0.f blue:0.f alpha:1.f];
[attrStr setTextColor:color range:range];

  3. OHAttributedLabelオブジェクトのattributedTextプロパティにNSMutableAttributedStringオブジェクトをセットして適用完了です。

    self.ohLabel.attributedText = attrStr;

    ちなみに、setTextColor:range:の代わりにrange引数のないsetTextColor:メソッドを用いると、文字列全体に適用されます。

    [attrStr setFont:[UIFont fontWithName:@"Helvetica" size:18]];
[attrStr setTextColor:[UIColor grayColor]];

    また、太字指定はsetTextBold:range:メソッドでYESをセットするだけです。

    [attrStr setTextBold:YES range:range];

その他の使い方

リンクを貼る場合は、addCustomLink:inRange:メソッドにURLと範囲を指定します。

NSRange linkRange = [txt rangeOfString:@"モンスターを集めてまいれ"];
NSURL *linkUrl = [NSURL URLWithString:@"http://itunes.apple.com/jp/app/id491657299?mt=8"]; 
[self.ohLabel addCustomLink:linkUrl inRange:linkRange];

OHAttributedLabelのソースコードに付属しているサンプルプロジェクトには、デリゲートメソッドを実装してアラートを出したり、タップ済みのリンクの文字色を変えたりといったサンプルも入っています。

centerVerticallyプロパティにYESをセットすると中央揃え、NOで上寄せになります。

self.ohLabel.centerVertically = YES;

UILabelのtextAlignmentに指定できる値として、UITextAlignmentJustifyが追加されています。

これは

#define UITextAlignmentJustify ((UITextAlignment)kCTJustifiedTextAlignment)

このようにCoreTextで定義されているアライメントタイプであるkCTJustifiedTextAlignmentをUITextAlignment型にキャストしたもので、これを指定するとパラグラフの末尾が自然に揃えられます。

self.ohLabel.textAlignment = UITextAlignmentJustify;

TTTAttributedLabel

特徴

OHAttributedLabelと同じく、NSAttributedStringの機能をUILabelに持たせたものです。

OHAttributedLabelの後発なので、できることはこちらのほうが多いのですが、APIとしては手軽さに欠ける印象です。

OHAttributedLabelとTTTAttributedLabelのAPIの違いを比較しやすいよう、両クラスで同様の機能を実装したサンプルアプリを作成し下記URLにアップしました。動作やコードの確認にご利用ください。

使用準備

  1. ソースコードを以下のURLよりダウンロード

  2. CoreText.frameworkをプロジェクトに追加

  3. TTTAttributedLabel.hをインポート

    #import "TTTAttributedLabel.h"

使い方

OHAttributedLabelと使用方法の比較ができるよう、テキストの一部を赤字・太字にする方法、リンクを貼る方法を紹介します。

赤字・太字等の属性の指定処理は、setText:afterInheritingLabelAttributesAndConfiguringWithBlock:メソッドのブロック内に記述します。

属性の指定にはaddAttribute:value:range:メソッドを用いるのですが、これはNSAttributedStringクラスに定義されているもので、OHAttributedLabelのようにラップしてくれていないため、フォントを指定する場合にはCTFontRef型にする必要があったりと扱いが煩雑になります。

[self.tttLabel setText:txt afterInheritingLabelAttributesAndConfiguringWithBlock:^NSMutableAttributedString *(NSMutableAttributedString *mutableAttributedString) {

    CTFontRef baseFontRef = CTFontCreateWithName((CFStringRef)baseFont.fontName, baseFont.pointSize, NULL);
    if (baseFontRef) {
        NSRange allRange = NSMakeRange(0, [txt length]);
        [mutableAttributedString addAttribute:(NSString *)kCTFontAttributeName
                                        value:(id)baseFontRef
                                        range:allRange];
        [mutableAttributedString addAttribute:(NSString *)kCTForegroundColorAttributeName
                                        value:(id)[[UIColor grayColor] CGColor]
                                        range:allRange];
        CFRelease(baseFontRef);
    }

    UIFont *boldFont = [UIFont boldSystemFontOfSize:18];
    CTFontRef boldFontRef = CTFontCreateWithName((CFStringRef)boldFont.fontName, boldFont.pointSize, NULL);
    if (boldFontRef) {
        [mutableAttributedString addAttribute:(NSString *)kCTFontAttributeName
                                        value:(id)boldFontRef
                                        range:strongRange];
        [mutableAttributedString addAttribute:(NSString *)kCTForegroundColorAttributeName
                                        value:(id)[strongColor CGColor]
                                        range:strongRange];
        CFRelease(boldFontRef);
    }
    
    return mutableAttributedString;
}];

リンクの指定はaddLinkToURL:withRange:メソッドをコールします。

[self.tttLabel addLinkToURL:linkUrl withRange:linkRange];

このメソッドだけ見るとOHAttributedLabelとほぼ同じなのですが、TTTAttributedLabelの場合はリンクをタップされたときの処理用のdelegateメソッドを実装する必要があります。

- (void)attributedLabel:(TTTAttributedLabel *)label didSelectLinkWithURL:(NSURL *)url {
    [[UIApplication sharedApplication] openURL:linkUrl];
}

OHAttributedLabelはここはラップしてくれているのでひと手間増えることになりますが、openURL:ですぐにSafariやiTunesに飛ばすのではなく、一旦確認を挟みたい場合には便利です（ただし、OHAttributedLabelもデリゲートメソッドのattributedLabel:shouldFollowLink:を実装すれば同等のことができます⁠）⁠。

FxLabel

FxLabelは、表示文字列に影をつけたり、グラデーションカラーを適用したりと、見た目をカスタマイズする機能を拡張したUILabelのサブクラスです。

FxLabelを用いると、下記のような効果が得られます。

FxLabelの使用例
FxLabelの使用例

使用準備

  1. ソースコードを以下のURLよりダウンロード

  2. FXLabel.hをインポート

    #import "FXLabel.h"

使い方

文字列に影を付けたい場合は、shadowColor、shadowOffset、shadowBlurプロパティを指定します。

label1.shadowOffset = CGSizeMake(0.0f, 2.0f);
label1.shadowColor = [UIColor colorWithWhite:0.0f alpha:0.75f];
label1.shadowBlur = 5.0f;

サンプルにあるエンボス効果は、下記のように文字の外側へ白い影をつけ、内側に黒い影をつけることでそれっぽく見せているようです。

label2.shadowColor = [UIColor colorWithWhite:1.0f alpha:0.8f];
label2.shadowOffset = CGSizeMake(1.0f, 2.0f);
label2.shadowBlur = 1.0f;
label2.innerShadowColor = [UIColor colorWithWhite:0.0f alpha:0.8f];
label2.innerShadowOffset = CGSizeMake(1.0f, 2.0f);

グラデーションカラーは、始点の色と終点の色を指定します（グラデーションの方向は、デフォルトではy軸方向⁠）⁠。

label3.gradientStartColor = [UIColor redColor];
label3.gradientEndColor = [UIColor blackColor];

グラデーションの方向を指定する場合は始点の座標と終点の座標を指定します。また複数色指定したい場合はgradientColorsプロパティにUIColorの配列をセットします。

label4.gradientStartPoint = CGPointMake(0.0f, 0.0f);
label4.gradientEndPoint = CGPointMake(1.0f, 1.0f);
label4.gradientColors = [NSArray arrayWithObjects:
                         [UIColor redColor],
                         [UIColor yellowColor],
                         [UIColor greenColor],
                         [UIColor cyanColor],
                         [UIColor blueColor],
                         [UIColor purpleColor],
                         [UIColor redColor],
                         nil];

まとめ

テキストにフォントや色等の属性を指定したり、リンクを貼ったりできるようになるOHAttributedLabel、TTTAttributedLabelと、文字列にエフェクト効果をかけることのできるFxLabelを紹介しました。

おすすめ記事

記事・ニュース一覧