Just a Computer Graphics Studio & My Life

原本使用的元件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核心動畫高級技巧

Advertisements

發表留言

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

WordPress.com Logo

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

Twitter picture

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

Facebook照片

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

Google+ photo

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

連結到 %s

標籤雲

%d 位部落客按了讚: