Just My Life & My Work

[iOS] Label 文字分散對齊 (Label Text Decentralized Alignment)

2017 年 03 月 17 日

原本使用的元件UILabel只有置左、中、右三種選擇，然而有時候我們想要Label文字分散對齊，原本我想要找第三方套件，不過想起上個月研蘋果有在粉絲團上分享解法，於是就拿來嘗試，果真用內建的CATextLayer就能做到！

[iOS] Label 文字分散對齊 (Label Text Decentralized Alignment)

程式碼就是一些屬性設定，最後一行的「換行」和「空白」符號是關鍵！

/**
 Theme: Label Text Decentralized Alignment
 IDE: Xcode 8
 Language: Objective C
 Date: 106/03/08
 Author: HappyMan
 Blog: https://cg2010studio.wordpress.com/
 */
    CATextLayer *textLayer = [CATextLayer layer];
    textLayer.frame = memberCardNumberLabel.bounds;
    [memberCardNumberLabel.layer addSublayer:textLayer];
    // 讓 layer 屬性與 label 一致
    textLayer.foregroundColor = memberCardNumberLabel.textColor.CGColor;
    textLayer.backgroundColor = memberCardNumberLabel.backgroundColor.CGColor;
    textLayer.font = (__bridge CFTypeRef _Nullable)(memberCardNumberLabel.font);
    textLayer.fontSize = memberCardNumberLabel.font.pointSize;
    // 設定 layer 分散對齊
    textLayer.alignmentMode = kCAAlignmentJustified;
    // 設定文字戒溪度與螢幕解析度一致
    textLayer.contentsScale = [UIScreen mainScreen].scale;

    // 關鍵在於字串後的換行以及換行後的空白鍵
    textLayer.string = [cardNumber stringByAppendingString:@"\n "];

結果真的令人驚艷！

[iOS] Label 文字分散對齊 (Label Text Decentralized Alignment)2

參考：研蘋果粉絲團、iOS核心動畫高級技巧。

廣告

分類：

iOS, 教學

發表留言

Tagged with:

隨意留個言吧：）～

在下方填入你的資料或按右方圖示以社群網站登入：

Gravatar
WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 ( 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 ( 登出 /  變更 )

取消

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

標籤雲

%d 位部落客按了讚：