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

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

この記事を読むのに必要な時間:およそ 4 分

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を紹介しました。

著者プロフィール

堤修一(つつみしゅういち)

1978年生まれ。京都大学工学部を卒業後,同大学院修了。その後,NTTデータにて音声認識技術の研究開発,キヤノンにて画像処理機能の設計に携わる。

2010年より面白法人カヤックに入社。3年間ほぼiOSアプリ開発に専念し,フルスクラッチで開発しリリースしたアプリは30本以上。代表作は150万ユーザを突破した「バウンドモンスターズ」,AppStore Best of 2012を獲得した「タップ忍者」,カンヌ国際広告祭でブロンズを獲得した「Domino's App」など。

現在は,米国シリコンバレーのマウンテンビューにあるAppSocially社の一員として活躍中。

著書=『iOSアプリ開発 達人のレシピ100―開発現場で実証された実用コード集』

ブログ=Over&Outその後

Github=shu223

Twitter=shu223