iOS UILabel底部對齊痛點解決方案

UILabel之前底部對齊是很常見的布局需求峰鄙,但是你的UILabel之間真的底部對齊了嗎塔嬉?

由于iOS UILabel文字底部都有留白的原因独榴,而且文字的(字號/字體)不同底部留白的距離也不同贮尉,如果兩個UILabel的文字字號不同块饺,我們是很難將其完全對齊的赞辩。但是系統(tǒng)又沒有提供得到文字底部留白距離的方法,我們只能通過微調(diào)frame的方法使它們?nèi)庋劭雌饋硎菍R了授艰。

然而好景不長辨嗽,產(chǎn)品經(jīng)理提出APP可調(diào)節(jié)字號的需求后,之前那種將就的做法徹底行不通了淮腾!所以不得不另辟蹊徑糟需,找出計算文字底部留白的方法。

  1. 首先我們發(fā)現(xiàn)Font有一些看似有用的屬性
// Font attributes
@property(nonatomic,readonly,strong) NSString *familyName;//字體家族的名字
@property(nonatomic,readonly,strong) NSString *fontName;//字體的名字
@property(nonatomic,readonly)        CGFloat   pointSize;//字體大小
@property(nonatomic,readonly)        CGFloat   ascender;//基準線以上的高度
@property(nonatomic,readonly)        CGFloat   descender;//基準線以下的高度
@property(nonatomic,readonly)        CGFloat   capHeight;//大寫X的高度
@property(nonatomic,readonly)        CGFloat   xHeight;//小寫x的高度
@property(nonatomic,readonly)        CGFloat   lineHeight API_AVAILABLE(ios(4.0));//當(dāng)前字體下的行高
@property(nonatomic,readonly)        CGFloat   leading;//行間距(一般為0)
  1. 具體代碼運行結(jié)果可以更加清楚的說明各個屬性的值谷朝,代碼以14號字體為例
UIFont *font = [UIFont systemFontOfSize:14];
NSLog(@"font.pointSize = %f,font.ascender = %f,font.descender = %f,font.capHeight = %f,font.xHeight = %f,font.lineHeight = %f,font.leading = %f",font.pointSize,font.ascender,font.descender,font.capHeight,font.xHeight,font.lineHeight,font.leading);

運行結(jié)果如下

font.pointSize = 14.000000,
font.ascender = 13.330078,
font.descender = -3.376953,
font.capHeight = 9.864258,
font.xHeight = 7.369141,
font.lineHeight = 16.707031,
font.leading = 0.000000

其中可以很明顯的看到:

設(shè)置的字體大小就是 pointSize
ascender - descender = lineHeight

  1. 實際行與行之間就是存在間隙的洲押,間隙大小即為 lineHeight - pointSize,在富文本中設(shè)置行高的時候圆凰,其實際文字間的距離就是加上這個距離的:行間隙 = 行間距 + (lineHeight - pointSize)杈帐。(原來一直錯誤的理解兩行文字間的距離就是行間距)
1322408-454a941cd157f3a9.png
  1. 我們發(fā)現(xiàn)漢字和數(shù)字的的高度是不同的,但是行高相同,所以底部留白也就不同挑童。
    經(jīng)過測試我們找出了計算數(shù)字底部留白的公式:
- (CGFloat)getNumBottomGapByFont:(UIFont *)font {
    return roundf(-font.descender);//roundf四舍五入取整
}

計算漢字底部留白的公式:

- (CGFloat)getChineseBottomGapByFont:(UIFont *)font {
    return roundf((font.lineHeight - font.pointSize) / 2.0 + font.pointSize / 20.0);//在(font.lineHeight - font.pointSize) / 2.0的基礎(chǔ)上每增加10個字號留白增加1像素累铅,所以加上font.pointSize / 20.0
}
  1. 實際應(yīng)用中,例如UILabel A站叼、B争群、C需求底部對齊,我們根據(jù)A的frame和bottomGap(底部留白),調(diào)整B大年、C的originY即可(如果UILabel為純數(shù)字用- (CGFloat)getNumBottomGapByFont:(UIFont *)font函數(shù),如果有漢字用- (CGFloat)getChineseBottomGapByFont:(UIFont *)font函數(shù)):
B.bottomGap = [self  getNumBottomGapByFont:B.font];
B.frame = CGRectMake(B.frame.origin.x, B.frame.origin.y + B.bottomGap - A.bottomGap, B.frame.size.width, B.frame.size.height);

C.bottomGap = [self  getNumBottomGapByFont:C.font];
C.frame = CGRectMake(C.frame.origin.x, C.frame.origin.y + C.bottomGap - A.bottomGap, C.frame.size.width, C.frame.size.height);

或者我們計算UILabel高度的時候直接去掉上下空隙玉雾,純數(shù)字label:

label.frame = CGRectMake(x, y, width, label.font.ascender + label.font.descender);

有漢字的label(每增加10個字號留白增加1像素翔试,所以減去font.pointSize / 20.0):

label.frame = CGRectMake(x, y, width, label.font.pointSize - label.font.pointSize / 20.0);
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
禁止轉(zhuǎn)載,如需轉(zhuǎn)載請通過簡信或評論聯(lián)系作者复旬。
  • 序言:七十年代末垦缅,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子驹碍,更是在濱河造成了極大的恐慌壁涎,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,383評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件志秃,死亡現(xiàn)場離奇詭異怔球,居然都是意外死亡,警方通過查閱死者的電腦和手機浮还,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評論 3 385
  • 文/潘曉璐 我一進店門竟坛,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人钧舌,你說我怎么就攤上這事担汤。” “怎么了洼冻?”我有些...
    開封第一講書人閱讀 157,852評論 0 348
  • 文/不壞的土叔 我叫張陵崭歧,是天一觀的道長。 經(jīng)常有香客問我撞牢,道長率碾,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,621評論 1 284
  • 正文 為了忘掉前任屋彪,我火速辦了婚禮播掷,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘撼班。我一直安慰自己歧匈,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,741評論 6 386
  • 文/花漫 我一把揭開白布砰嘁。 她就那樣靜靜地躺著件炉,像睡著了一般勘究。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上斟冕,一...
    開封第一講書人閱讀 49,929評論 1 290
  • 那天口糕,我揣著相機與錄音,去河邊找鬼磕蛇。 笑死景描,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的秀撇。 我是一名探鬼主播超棺,決...
    沈念sama閱讀 39,076評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼呵燕!你這毒婦竟也來了棠绘?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,803評論 0 268
  • 序言:老撾萬榮一對情侶失蹤再扭,失蹤者是張志新(化名)和其女友劉穎氧苍,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體泛范,經(jīng)...
    沈念sama閱讀 44,265評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡让虐,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,582評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了罢荡。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片澄干。...
    茶點故事閱讀 38,716評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖柠傍,靈堂內(nèi)的尸體忽然破棺而出麸俘,到底是詐尸還是另有隱情,我是刑警寧澤惧笛,帶...
    沈念sama閱讀 34,395評論 4 333
  • 正文 年R本政府宣布从媚,位于F島的核電站,受9級特大地震影響患整,放射性物質(zhì)發(fā)生泄漏拜效。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,039評論 3 316
  • 文/蒙蒙 一各谚、第九天 我趴在偏房一處隱蔽的房頂上張望紧憾。 院中可真熱鬧,春花似錦昌渤、人聲如沸赴穗。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽般眉。三九已至了赵,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間甸赃,已是汗流浹背柿汛。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留埠对,地道東北人络断。 一個月前我還...
    沈念sama閱讀 46,488評論 2 361
  • 正文 我出身青樓,卻偏偏與公主長得像项玛,于是被迫代替她去往敵國和親貌笨。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,612評論 2 350