180
175

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.

UILabelを使って行間や文字間を簡易的に調整する。

Posted at

 
今さら感たっぷりですが、iOS 6から(?)UILabelで行間や文字間を簡単に調整出来るようになっていたのでメモ。
iOS 7では必須かも。
 

文字間を調整する。

 
まずは文字間(LetterSpacing)です。
NSMutableAttributedStringNSKernAttributeNameを利用します。
 

XxxViewController.m
   
#define FONT_SIZE 18.0f
- (void)viewDidLoad
{
    [super viewDidLoad];

    NSString *text = @"テキスト";
    
    CGFloat customLetterSpacing = 10.0f;
    
    // NSAttributedStringを生成してLetterSpacingをセット
    NSMutableAttributedString *attributedText = [[NSMutableAttributedString alloc] initWithString:text];
    [attributedText addAttribute:NSKernAttributeName
                           value:[NSNumber numberWithFloat:customLetterSpacing]
                           range:NSMakeRange(0, attributedText.length)];
    
    UILabel *label = [[UILabel alloc] initWithFrame:FRAME];
    label.font = [UIFont systemFontOfSize:FONT_SIZE];
    // label.textではなくattributedTextを使用。
    label.attributedText = attributedText;
    [self.view addSubview:label];
}

 
 

行間を調整する。

 
お次ぎは行間(正確には行の高さ)です。
 
NSMutableParagraphStyleを利用するのですが、残念ながらsetLineHeightというプロパティがないので、setMinimumLineHeightsetMaximumLineHeightを利用して行間をカスタムします。
 

XxxViewController.m
   
#define FONT_SIZE 18.0f
- (void)viewDidLoad
{
    [super viewDidLoad];

    UIFont *font = [UIFont systemFontOfSize:FONT_SIZE];
    NSString *text = @"複数行分のテキスト";
    
    // カスタムLineHeightを指定
    CGFloat customLineHeight = 32.0f;
    
    // パラグラフスタイルにlineHeightをセット
    NSMutableParagraphStyle *paragrahStyle = [[NSMutableParagraphStyle alloc] init];
    paragrahStyle.minimumLineHeight = customLineHeight;
    paragrahStyle.maximumLineHeight = customLineHeight;
    
    // NSAttributedStringを生成してパラグラフスタイルをセット
    NSMutableAttributedString *attributedText = [[NSMutableAttributedString alloc] initWithString:text];
    [attributedText addAttribute:NSParagraphStyleAttributeName
                           value:paragrahStyle
                           range:NSMakeRange(0, attributedText.length)];
    
    UILabel *label = [[UILabel alloc] initWithFrame:FRAME];
    label.font = font;
    label.numberOfLines = 0;
    label.attributedText = attributedText;
    [self.view addSubview:label];
}

これで、32ptのLineHeightで表示されます。
(シミュレータのキャプチャを計ってみましたがジャスト32ptになってました。)

和欧混合文で英文字のみの行と日本語も含まれる行でLineHeightが違ってしまう。ということもなかったです。

 

行間を詰めたい場合は?

 
ちなみに前述の場合、デフォルトよりも行間を拡げる場合は良いのですが、詰めることは出来ません。
そんな時はNSMutableParagraphStyleを以下のように変えると詰めも出来ます。
 

XxxViewController.m
   
    NSMutableParagraphStyle *paragrahStyle = [[NSMutableParagraphStyle alloc] init];
    paragrahStyle.lineSpacing = - 4.0f;

※ 自分の環境では、lineSpacingに負の値を入れた場合で text に改行コードが含まれていると、その行ではlineSpacingが無視されてしまうようでしたのでご注意を。
 
 

cssのように"1.4em"みたいに指定したい。

 
ここまではポイント指定でしたが、cssのような指定も出来るっぽいです。
 
その場合は、同じくNSMutableParagraphStyleを書き換えます。
 

XxxViewController.m
   
    NSMutableParagraphStyle *paragrahStyle = [[NSMutableParagraphStyle alloc] init];
    paragrahStyle.lineHeightMultiple = 1.4f;

このlineHeightMultipleは、cssのようなフォントに対しての倍率、というよりはデフォルトのlineHeightに対しての倍率なのかな?って感じですが、正確に計ってみてはいないので詳しい人は教えてもらえると有り難いです(^〜^;)

 
また、paragrahStyleには以下のread, writeなプロパティもあるのでご参考まで。

CGFloat lineSpacing;
CGFloat paragraphSpacing;
NSTextAlignment alignment;
CGFloat firstLineHeadIndent;
CGFloat headIndent;
CGFloat tailIndent;
NSLineBreakMode lineBreakMode;
CGFloat minimumLineHeight;
CGFloat maximumLineHeight;
NSWritingDirection baseWritingDirection;
CGFloat lineHeightMultiple;
CGFloat paragraphSpacingBefore;
float hyphenationFactor;

180
175
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
180
175

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?