タグ別アーカイブ: 右揃え

UILabel の文字を左揃え、中央揃え、右揃え、両端揃え、で表示する

UILabel で文字列を表示する場合は setTextAlignment を使って、左、中央、右に文字列を表示できます。

また、両端を揃えたい場合は NSAttributedString という属性付き文字列を指定して表示することで可能です。

左詰めサンプル

文字列を左側に揃える場合は setTextAlignment にNSTextAlignmentLeft を指定します。

ちなみに、何も指定しない状態(デフォルト)だと NSTextAlignmentLeft で表示されるようです。

- (void)sampleUILabelSetTextAlignmentLeft
{
    UILabel *label = [[UILabel alloc] initWithFrame:viewFrame] ;
    [label setText:@"Sample Left Text"] ;
    [label setTextAlignment:NSTextAlignmentLeft] ;
    [self.view addSubview:label] ;
}

 左詰め表示結果

NSTextAlignmentLeft を指定して表示した結果です。

UILabel_1_606

中央サンプル

文字列を中央に揃える場合は setTextAlignment にNSTextAlignmentCenterを指定します。

- (void)sampleUILabelSetTextAlignmentCenter
{
    UILabel *label = [[UILabel alloc] initWithFrame:viewFrame] ;
    [label setText:@"Sample Center Text"] ;
    [label setTextAlignment:NSTextAlignmentCenter] ;
    [self.view addSubview:label] ;
}

中央表示結果

NSTextAlignmentCenter を指定して表示した結果です。

UILabel_1_826

右詰めサンプル

文字列を右側に揃える場合は setTextAlignment にNSTextAlignmentRightを指定します。

- (void)sampleUILabelSetTextAlignmentRight
{
    UILabel *label = [[UILabel alloc] initWithFrame:viewFrame] ;
    [label setText:@"Sample Right Text"] ;
    [label setTextAlignment:NSTextAlignmentRight] ;
    [self.view addSubview:label] ;
}

右詰め表示結果

NSTextAlignmentRightを指定して表示した結果です。

UILabel_2_140

両端揃えサンプル

文字列の両端を揃える場合は NSAttributedString という属性付き文字列を使用します。

まずは NSMutableParagraphStyle というクラスのインスタンスを生成して setAlignment に NSTextAlignmentJustified を指定します。

また setFirstLineHeadIndent で最初の行のインデントを指定します。

setFirstLineHeadIndent を指定しなかったり、0 を指定したりするとなぜか両端揃えになりません。インデントを設定したくない場合は 0.01 などの小さな値を指定して実質 0 の状態にしておきましょう。

その後、NSMutableParagraphStyle  を指定して  NSAttributedString を生成します。

そして生成した NSAttributedString を UILabel の setAttributedText で指定すれば両端揃えで表示されます。

- (void)sampleUILabelSetAttributedTextJustified
{
    NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init] ;
    [paragraphStyle setAlignment:NSTextAlignmentJustified] ;
    [paragraphStyle setFirstLineHeadIndent:0.01] ;
    
    NSString *stringToBeJustified = @"Sample Justified Text Sample Justified Text Sample Justified Text Sample Justified Text" ;
    NSDictionary *attributes = [NSDictionary dictionaryWithObjectsAndKeys:paragraphStyle,NSParagraphStyleAttributeName,nil] ;
    NSAttributedString *attributedText = [[NSAttributedString alloc] initWithString:stringToBeJustified attributes:attributes] ;
    
    UILabel *label = [[UILabel alloc] initWithFrame:viewFrame] ;
    [label setNumberOfLines:3] ;
    [label setBackgroundColor:[UIColor grayColor]] ;
    [label setAttributedText:attributedText] ;
    [self.view addSubview:label] ;
}

両端揃え表示結果

NSAttributedString を指定して表示した結果です。

一行目の単語の間の幅と、二行目の単語の間の幅が違うのがわかると思います。

単語の間の幅を自動的に調整して両端が揃うようになっています。

UILabel_2_360