UILabel之前底部對齊是很常見的布局需求峰鄙,但是你的UILabel之間真的底部對齊了嗎塔嬉?
由于iOS UILabel文字底部都有留白的原因独榴,而且文字的(字號/字體)不同底部留白的距離也不同贮尉,如果兩個UILabel的文字字號不同块饺,我們是很難將其完全對齊的赞辩。但是系統(tǒng)又沒有提供得到文字底部留白距離的方法,我們只能通過微調(diào)frame的方法使它們?nèi)庋劭雌饋硎菍R了授艰。
然而好景不長辨嗽,產(chǎn)品經(jīng)理提出APP可調(diào)節(jié)字號的需求后,之前那種將就的做法徹底行不通了淮腾!所以不得不另辟蹊徑糟需,找出計算文字底部留白的方法。
- 首先我們發(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)
- 具體代碼運行結(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
- 實際行與行之間就是存在間隙的洲押,間隙大小即為 lineHeight - pointSize,在富文本中設(shè)置行高的時候圆凰,其實際文字間的距離就是加上這個距離的:行間隙 = 行間距 + (lineHeight - pointSize)杈帐。(原來一直錯誤的理解兩行文字間的距離就是行間距)
1322408-454a941cd157f3a9.png
- 我們發(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
}
- 實際應(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);