iOS開發筆記常用工具之文本寬度和高度計算

開發中經常會去計算一段文本的高度和寬度,常用的方法一般有兩個:

第一個:

- (CGSize)sizeWithAttributes:(nullable NSDictionary *)attrs NS_AVAILABLE(10_0, 7_0);

包含一個NSDictionary類型的參數Attributes

key值可以指定:NSFontAttributeName(字體) 、NSParagraphStyleAttributeName(段落)等;

id是key對應的值,比如字體UIFont,段落NSParagraphStyle等等。

具體的的說明可以看下這篇文章

實例:

//定義一個字符串

static NSString *const kTestString1 = @"我的發小蘇禾是兜兜轉轉一圈后,\n嫁給梁凱的。\n我的發小蘇禾是兜兜轉轉一圈后,嫁給梁凱的。";

///然后計算size

//label1

CGSize textSize1 = [kTestString1 sizeWithAttributes:@{NSFontAttributeName:self.testLabel1.font}];

self.testLabel1.text = kTestString1;

self.testLabel1.frame = CGRectMake(0, 100, textSize1.width, textSize1.height);

文本計算結果:

顯示效果1.png

這個方法使用的時候如果有一段文字計算結果的width超過了屏幕的寬度那么顯示效果會超出屏幕,所以一般用于較短的文本計算。

Tip:可以動態創建一個button或者label的時候可以根據文字寬度來指定frame。像很多搜索界面下面的標簽就可以使用這個方法來實現

顯示效果2.png

如果想要更為詳細的文本計算的話,上面的方法達明顯不滿足要求。在實際開發過程中很多地方會用到動態獲取文字高度的情況,比如表格Cell的高度,HUD上面的label大小等等,我們可以使用下面的方法來達到效果。

第二個:

- (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options attributes:(nullable NSDictionary *)attributes context:(nullable NSStringDrawingContext *)context NS_AVAILABLE(10_11, 7_0);

里面包括四個參數size、options、attributes、context。

size:一個指定的矩形的大小,一般我們會指定一個矩形區域的Size,比如CGSizeMake(100, 100),具體的值是根據需要來設置。

我一般使用CGSizeMake ('需要的寬度',CGFLOAT_MAX),這樣會得到一個指定寬度動態高度的size。

options:這個是一個NS_OPTIONS的枚舉表示計算的類型

包括:

1.NSStringDrawingUsesLineFragmentOrigin:繪制文本時使用 line fragement origin 而不是 baseline origin。一般使用這項

2.NSStringDrawingUsesFontLeading:根據字體計算高度

3.NSStringDrawingUsesDeviceMetrics:使用象形文字計算高度

4.NSStringDrawingTruncatesLastVisibleLine:這個目前我沒怎么用過

一般使用NSStringDrawingUsesFontLeading

和NSStringDrawingUsesLineFragmentOrigin的組合

attribute:和上面介紹的一樣;

context:包括一些信息,例如如何調整字間距以及縮放。該參數一般可為 nil 。

實例:

CGSize textSize2 = [kTestString2 boundingRectWithSize:CGSizeMake(kWidth - 20, CGFLOAT_MAX)

options:NSStringDrawingUsesFontLeading | NSStringDrawingUsesLineFragmentOrigin

attributes:@{NSFontAttributeName:self.testLabel2.font}

context:nil].size;

self.testLabel2.text = kTestString2;

self.testLabel2.frame = CGRectMake(10, 200, textSize2.width, textSize2.height);

運行結果如圖:

顯示效果3.png

第二個方法除了用于普通文本計算以外,還可以計算attributeString的計算,上代碼:

static NSString *const kTestTitle = @"這是一個測試標題\n";

static NSString *const kTestString3 = @"我的發小蘇禾是兜兜轉轉一圈后,嫁給梁凱的。讀書的時候,梁凱暗戀蘇禾。可蘇禾是班花呀,身邊圍著一堆男生,梁凱有點不起眼。關于喜歡的話,梁凱從來沒敢說出口。畢業后,蘇禾考了公務員。工作穩定,人又漂亮,走到哪都是風景。遺憾的是,她始終沒有遇到可以塵埃落定的良人。談了一場又一場戀愛后,漸漸有些心灰意冷\n\n我的發小蘇禾是兜兜轉轉一圈后,嫁給梁凱的。讀書的時候,梁凱暗戀蘇禾。可蘇禾是班花呀,身邊圍著一堆男生,梁凱有點不起眼。關于喜歡的話,梁凱從來沒敢說出口。畢業后,蘇禾考了公務員。工作穩定,人又漂亮,走到哪都是風景。遺憾的是,她始終沒有遇到可以塵埃落定的良人。談了一場又一場戀愛后,漸漸有些心灰意冷";

//1 創建一個attributeString

NSMutableAttributedString *attributeString = [[NSMutableAttributedString alloc] init];

//標題

NSRange titleRange = NSMakeRange(0, kTestTitle.length);

NSMutableAttributedString *titleAttributeString = [[NSMutableAttributedString alloc] initWithString:kTestTitle];

NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];

paragraphStyle.alignment = NSTextAlignmentCenter;

[titleAttributeString addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:titleRange];

[titleAttributeString addAttribute:NSFontAttributeName value:[UIFont boldSystemFontOfSize:18.f] range:titleRange];

[attributeString appendAttributedString:titleAttributeString];

//內容

NSRange contentRange = NSMakeRange(0, kTestString3.length);

NSMutableAttributedString *contentAttributeString = [[NSMutableAttributedString alloc] initWithString:kTestString3];

NSMutableParagraphStyle *contentParagraphStyle = [[NSMutableParagraphStyle alloc] init];

contentParagraphStyle.lineSpacing = 10.f;

[contentAttributeString addAttribute:NSParagraphStyleAttributeName value:contentParagraphStyle range:contentRange];

[contentAttributeString addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:14.f] range:contentRange];

[contentAttributeString addAttribute:NSKernAttributeName value:@(1) range:contentRange];

[attributeString appendAttributedString:contentAttributeString];

//計算標題size

CGSize size = CGSizeMake(kWidth - 20, CGFLOAT_MAX);

NSDictionary *titleAttribute = @{NSFontAttributeName:[UIFont boldSystemFontOfSize:18.f], NSParagraphStyleAttributeName:paragraphStyle};

CGSize titleSize = [kTestTitle boundingRectWithSize:size

options:NSStringDrawingUsesFontLeading | NSStringDrawingUsesLineFragmentOrigin

attributes:titleAttribute

context:nil].size;

//計算內容size

NSDictionary *contentAttribute = @{NSFontAttributeName:[UIFont systemFontOfSize:14.f],

NSParagraphStyleAttributeName:contentParagraphStyle,

NSKernAttributeName:@(1)};

CGSize contentSize = [kTestString3 boundingRectWithSize:size

options:NSStringDrawingUsesFontLeading | NSStringDrawingUsesLineFragmentOrigin

attributes:contentAttribute

context:nil].size;

self.testLabel3.attributedText = attributeString;

self.testLabel3.frame = CGRectMake(10, 100, size.width, titleSize.height + contentSize.height);

[self.view addSubview:self.testLabel3];

運行結果:

顯示效果4.png

先就這么多內容,一般情況下計算文本基本上也就這樣了,后續會補充一下圖文計算。

如果您有意見或者建議歡迎留言評論

作者:ForKid

鏈接:http://www.lxweimin.com/p/7388ef05f32c

來源:簡書

著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,321評論 6 543
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,559評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,442評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,835評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,581評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,922評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,931評論 3 447
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,096評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,639評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,374評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,591評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,104評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,789評論 3 349
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,196評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,524評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,322評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,554評論 2 379

推薦閱讀更多精彩內容