【轉】關於UILabel UITextView UIWebView 行間距文字排版

最新推荐文章于 2019-09-15 21:26:00 发布

转载最新推荐文章于 2019-09-15 21:26:00 发布 · 1.6k 阅读

Ios 专栏收录该内容

266 篇文章

订阅专栏

本文探讨了在iOS开发中UILabel和UITextView行间距不可控的问题，并提出使用UIWebView作为替代方案来实现自定义行间距的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【轉】關於UILabel UITextView UIWebView 行間距文字排版

時間:2013-02-19 18:57來源:Internet 作者:Internet 點擊: 972 次

有時候可用 UIWebView 代替 UITextView，解决行間距問題 2011-12-10 — Unmi 我們在使用 UILabel 或是 UITextView 時，如果文字出現了換行，目前

有時候可用 UIWebView 代替 UITextView，解决行間距問題

2011-12-10 — Unmi

我們在使用 UILabel 或是 UITextView 時，如果文字出現了換行，目前我還不知道如何去控制行間距，固定的 Label 文字可以折成兩個 Label 上下顯示，但是對應大段顯示的段落要多行顯示時該如何呢，多行單獨控制就變得不現實了。

由於 UILabel 或 UITextView 並不提供對行間距 line-height 的設置，要達成所願指定行間距的方法，我可以想到三種方式：

1. 自定義相應的控件，在控件內部方法中去做文章，未實踐，可能是個好方法
2. 修改字體，由於默認行間距是由字體本身特性决定的，所以可以修改字體來滿足有限的需求，不是很現實
3. 用 UIWebView 來代替 UITextView，這是本文的思想

先看個圖片，看看在使用某些字體時失控的行間距是什麼样的效果：

UIWebView replace UITextView
說明：上圖左邊是用 UITextView 來顯示一段文字，由於行間距不可控，不是我們想要的。右邊就是用 UIWebView 來顯示的同一段文它，它的行間距我們可以隨意控制。

思才過程是這样的，對於 UITextView 多行文字顯示時行間距不能直接用代碼來設置，特別是對於某些字體來說行間距確有些誇張。然後首先想到的解决方式是創建自己的 UITextView 子類，重新實現某些方法，似乎不那麼容易。

進而也不能不研究，這默認的行間距內部是由什麼控制着的，是字體，看用 FontCreator 打開的一個字體文件中的字符：

fontcreator font line height 看字體的 WinAscent, WinDescent 在上下决定了字符上下間的距離了，所以你當然可以修改字體文件的屬性了，存成新的字體文件，那如果一個應用中會有多種行間距的話那就痛苦了，且不說中文字體文件都不算小的。

再就是想到 Web 中的 CSS 對字體什麼想怎麼就怎麼，所以想到用 UIWebView 來代替 UITextView，而且 iOS 下的 Safari 對 HTML5 也支持的不錯，那就嘗試吧，不過首先得解决下面幾個問題：

1. 可以使用本地字體，因为自己的應用中可能會加入自定義的字體，不僅僅是用系統字體，HTML5 可以支持服務器端字體，用 @font-face

2. 像 UITextView 那样背景要能透明化，HTML5 支持 rgba 附加 Alpha 通道來指定顏色，且可設置 opacity, transparent 样式

下面貼下我的解决辦法及步驟，如果在設置样式上還有新方法，可繼續發掘。

第一步：引入自定義字體，一個 ttf 文件

把你的字體文件添加到項目中去，然後在項目的 Target 的 Info 標簽頁中，添加到 Fonts provided by application 屬性中，如圖：

Xcode use custom font

在 Fonts provided by application 中添加一項 Item 0，並指定字體文件，可添加多個，每個字體文件的 Font-Family 名稱你應要知道。

第二步：添加 UIWebView，並對 WebView 應用如下代碼：

//下面兩行協助
 UIWebView 背景透明化，這兩屬性可以在 xib 中進行設置

webview.backgroundColor
 = [UIColor clearColor]; 
//但是這個屬性必須用代碼設置，光
 xib 設置不行

webview.opaque
 = NO;

 

//這行能在模擬器下明下加快
 loadHTMLString 後顯示的速度，其實在真機上沒有下句也感覺不到加載過程

webview.dataDetectorTypes
 = UIDataDetectorTypeNone;

 

//下面的
 backgroud-color:transparent 結合最前面的兩行代碼指定的屬性就真正使得 WebView 的背景透明了

//而後的
 font:16px/18px 就是設置字體大小为 16px, 行間距为 18px，也可用  line-height: 18px 單獨設置行間距

//最後的
 Custom-Font-Name 就是前面在項目中加上的字體文件所對應的字體名稱了

NSString *webviewText
 = @"<style>body{margin:0;background-color:transparent;font:16px/18px
 Custom-Font-Name}</style>";

NSString *htmlString
 = [webviewText stringByAppendingFormat:@"%@",
 textview.text];

[webview
 loadHTMLString:htmlString baseURL:nil];
//在
 WebView 中顯示本地的字符串

執行之後顯示的就是第一個圖中的效果了。有可能出現在 iOS4 下背景未能透明化的問題，是可能，我有碰到過，也許哪裏設置的問題。

注意，很重要的一點，上面 iOS4 下背景可能不透明的情況是因为：雖然可以在 xib 中對 UIWebView 設置它的 backgroundColor 为 clearColor，但是 Xcode 似乎不怎麼認账，所以必須在代碼中用 webview.backgroundColor = [UIColor clearColor]; 設置 UIWebView 的背景才成，opaque 在 xib 還是在代碼中設置都行。

另外，也可以用 background-color: rgba(0,0,0,0) 样式，最後一個 0 表示 Alpha 值，即完全透明，甚至是用 background-color:hsla(120,50%,50%,0) 也是可行的。

對於 UIWebView 來說，你能夠應用 HTML5 很多特性，所以不要求有很規範的 HTML 格式，像無需寫成 <html><head>....... 那样。

嘗試了用 @font-face 來使用自定義字體，未能成功，再就是對 UIWebView 的用戶交互及滾動條風格調一調，可讓它更像是個 UITextView，完全的代替 UITextView 來顯示一段文字某些地方有可能仍需作微調。