tablewidget字体显示不全_ios 容器内容显示原理及调整
先發一行文字,看一下奇特之處:
09afgjkpqz漢字
這是編輯器自動加的橫線
iOS,OS文本容器中都是基線對齊,所謂的基線對齊就是指無論中文字符,數字,英文字符,表情等它們在一行的時候,基線是在同一高度的。圖例中的紅線就是基線。
1
2
概念:
baseline: 相當于坐標原點。大部分的拉丁字母底部與此對齊,漢字的中下部與此對齊(這是設定)
ascent, descent: 相當于字體可繪制區域的上下最大值。根據自己的觀察,ascent 并不一定是最高字符的高度(比如上圖的 f),在大部分字體中,ascent 會比最高的字符還要高一些,上面會有個空間。 desecnt 同理。(descent 為負值)
leading: 即行間距。但這個行間距與平時所說的行間距并不是一個東西。在文本編輯器中,選擇不同字體的時候,視覺上的每行的距離并不是一樣的。有可能就是 leading 不同。這個值可能為 0。(對于 iOS 上的 SF 系列字體,它的值就是 0 )
line height: 即行高。它的值定義為 ascent + descent + leading。(descent 為負值,所以準確的寫應該取絕對值)。這也是我們最關心的一個值。
這些值都是字體的屬性,是字體的設計者制定的,不可變,不同的字體會不一樣。
平時用來表示字體大小的「字號」并不對應上圖中的任何值,也就沒有一個直接的幾何意義。字號準確的說法是 point size。對于一個 point size 是 15 的 SFUI 字體,它的 line height 為 17.900390625, 約為 point size 的 1.2 倍。所以對于這個字體的一行文字,它的行高為 17.900390625。如果硬要顯示在 15.0 高度的矩形內,g 和 f 應該會顯示不全。
行間距
line height 所代表的高度只是一行文字的高度。可以把一行文字看做以 line height 為高的矩形,多行文字就是這些矩形縱向排列。矩形的間距就是通常我們說的行間距:
而通常所說的「行間距」「行高」「line height mutiple」 這樣的詞語,描述的就是這個間距的大小。
「行間距」: 直接對應間距的值
「行高」: line height + 間距。可以認為是,除了首行與尾行,每行實際所占的高度
line height mutiple: 即是「 x 倍行高」中的數值。line_height_mutiple = 「行高」/ line_height
不同平臺的實現效果
iOS
使用 autolayout 的一行 UIlabel 的高度即為所使用字體的 line height。但 autolayout 中,view 的 frame 的小數點精度會對齊到像素精度。所以 15 號字體的 label 高度為 18.0 point 。
對于多行文字的行間距,可以通過 attributedString 中的 paragraph style 來控制。paragraph style 可以設定如下值:
lineHeightMultiple: 同上面所說的。
minimumLineHeight/maximumLineHeight: 即「行高」
這兩個值都會改變行高,只是寫法不同而已。但使用它們控制行間距有一個問題,如果行高大于字體的 line height,那么多余的空間將會放在這行的上面: baseline 所在的位置是矩形底邊 + ( leading + descent ) 的位置。一個常見的情況,圓形的 avatar 與右側的 label 頂端對齊,如果使用 lineHeightMultiple,那么為了達到視覺上的對齊,avatar 與 label 的 frame.y 就會不一樣。不是很理想。(在使用 insets 或 background color 的時候就會很麻煩)
lineSpacing: 即行間距。
使用 lineSpacing 只會在每行之間添加間距。在首行與尾行外側并沒有額外的空白(當然,line height 里所帶的空白仍然存在)。比較符合我們行間距的設定,不存在上面提到的問題。但不同 point size 為了有同樣的效果,需要設定不同的 lineSpacing,不如 lineHeightMultiple 使用方便。
實際使用:
4
假設UI提供了這樣一種效果,讓開發來實現。
5
你開發完之后發現是這樣的。
這時候就需要設置富文本的NSBaselineOffsetAttributeName來實現不同字號的文字的垂直居中對齊了。
NSBaselineOffsetAttributeName:@(0.36*(a-b)),a是本行文本最大字號,b是當前文本段的字號。設置為就可以實現4的效果了。至于為什么用0.36這個神奇數字,暫時未知 ̄□ ̄||
6
對于圖6的難以理解的UI設計,實現亦可以通過設置NSBaselineOffsetAttributeName來實現。
總結
以上是生活随笔為你收集整理的tablewidget字体显示不全_ios 容器内容显示原理及调整的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 下列哪个适合做链栈_很多朋友在问:多层实
- 下一篇: wpf 如何设置弹出窗口必须关闭才能打开