Titaniumでlabelの文字間（letter-spacing）を調節する方法

タイトルの件、苦しんでる方多かったのではないでしょうか。
デザイナーさんにこれもう少し文字間空けてって気軽に言われても
対応できないむむむ。。CSSなら簡単なのに！
っていう。

Attributed Stringsを使う

早速やり方なんですが、
Attributed Strings　というものを使うことで実現が可能です。（4.1.2時点ではiphoneだけです）
実は3.2.0から使えるようになっていたらしいんですが、
全然知らなくて、今更知りました。

http://docs.appcelerator.com/platform/latest/#!/guide/Attributed_Strings-section-37538231_AttributedStrings-Font

書き方はこんな感じ。

var attr = Ti.UI.createAttributedString({
    text: text,
    attributes: [
        {
            type: Ti.UI. ATTRIBUTE_KERN,
            value: 5.0,
            range: [0,text.length]
        }
    ]
});
var label = Ti.UI.createLabel({
    attributedString: attr
});

注意点としては、対象のlabelにすでに色や文字列の設定がついている状態だと、
変になることがあるので、
設定する際は文字、色、フォントなどはlabel自体には設定せず、
AttributedStringでフォントや色なども一緒に設定したほうがいいです。

なので実際はこんな感じ。

var attr = Ti.UI.createAttributedString({
    text: text,
    attributes: [
        {
            type: Ti.UI.iOS.ATTRIBUTE_FONT,
            value:{fontSize:18,fontFamily:'HiraKakuProN-W3'},
            range:[0,text.length],
	},{
            type: Ti.UI.iOS.ATTRIBUTE_FOREGROUND_COLOR,
            value:'#ff0000',
            range:[0,text.length],
	},{
            type:Ti.UI.iOS.ATTRIBUTE_KERN,
            value:5.0,
            range:[0,text.length],
        }
    ]
});
var label = Ti.UI.createLabel({
    attributedString: attr
});

rangeの所を細かくいじれば　１文字目から１０文字目まで赤くするとかもできるので、
今まで複数のlabelを使い分けていた人なんかにとっては
めちゃくちゃうれしい機能だと思います。

Androidに期待

このAttribute stringsは徐々にandroidも対応してきているので、
（現在の所フォント、色、アンダーライン、リンクなど）
androidでも文字間調節ができるようになることに期待です！

Tweet