有時候可用 UIWebView 代替 UITextView,解決行間距問題

我們在使用 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 應用如下代碼:
01
02
03
04
05
06
07
08
09
10
11
12
13
//下面兩行協助
 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 來顯示一段文字某些地方有可能仍需作微調。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章