OS中支持HTML文本的標簽控件——MDHTMLLabel

一、引言

在iOS開發(fā)中對HTML的處理很多時候除了使用WebView外，還需要原生的控件對其進行渲染，例如將HTML字符串渲染為圖文混排的View視圖。Git上有很多輕量級的HTML渲染框架，列舉一些如下：

RTLabel：基于UIView的HTML文本渲染控件，git地址：https://github.com/honcheng/RTLabel。

RCLabel：與RTLabel思路相同，基于RCLabel之上，也是UIView的子類，支持了對HTML中的本地圖片標簽進行渲染。git地址：https://github.com/Janak-Nirmal/RichContentLabel。

MDHTMLLabel：與RTLabel和RCLabel不同的是，其是UILabel的子類，更加輕量級，不能支持圖片標簽。git地址：https://github.com/mattdonnelly/MDHTMLLabel。

關于RCLabel對圖片便簽的支持，其只能支持本地的圖片，不能支持遠程URL圖片鏈接，這在開發(fā)中將十分局限，以前我曾加RCLabel做了改造，加了支持遠程圖片URL的方法，我把它集成在了一個基礎框架中，需要的伙伴可以參考下，git地址：https://github.com/ZYHshao/YHBaseFoundationTest。配套的講解博客地址如下：http://my.oschina.net/u/2340880/blog/499311。

本篇博客主要討論MDHTMLLabel的使用。

二、MDHTMLLabel的創(chuàng)建與設置

MDHTMLLabel框架十分小巧，其中只有兩個文件，總計2000余行代碼。通過HTML字符串來創(chuàng)建一個MDHTMLLabel控件示例代碼如下：

    NSString * kDemoText=@"<a >MDHTMLLabel</a> is a lightweight, easy to use replacement for <b>UILabel</b> which allows you to fully <font face='Didot-Italic' size='19'>customize</font> the appearence of the text using HTML (with a few added features thanks to <b>CoreText</b>), as well letting you handle whenever a user taps or holds down on link and automatically detects ones not wrapped in anchor tags/>";
    MDHTMLLabel *htmlLabel=[[MDHTMLLabel alloc] initWithFrame:self.view.frame];
    htmlLabel.numberOfLines=0;
    htmlLabel.htmlText=kDemoText;
    [self.view addSubview:htmlLabel];

效果如下圖所示：

MDHTMLLabel中可以設置的一些屬性解析如下：

//設置超鏈接文字的屬性字典 和設置AttributeString方法一致
@property (nonatomic, strong) NSDictionary *linkAttributes;
//設置超鏈接文字激活時的屬性字典
@property (nonatomic, strong) NSDictionary *activeLinkAttributes;
//設置超鏈接非激活時的屬性字典
@property (nonatomic, strong) NSDictionary *inactiveLinkAttributes;
//設置超鏈接文字觸發(fā)長按事件的最小按下時間
@property (nonatomic, assign) NSTimeInterval minimumPressDuration;
//設置label文件陰影的模糊半徑
@property (nonatomic, assign) CGFloat shadowRadius;
//設置label在高亮狀態(tài)下的文字模糊半徑 注：非高亮狀態(tài)的由原生UILabel的屬性設置
@property (nonatomic, assign) CGFloat highlightedShadowRadius;
//設置label在高亮狀態(tài)下的文字陰影偏移 注：非高亮狀態(tài)的由原生UILabel的屬性設置
@property (nonatomic, assign) CGSize highlightedShadowOffset;
//設置在label高亮狀態(tài)下的文字陰影顏色 注：非高亮狀態(tài)的由原生UILabel的屬性設置
@property (nonatomic, strong) UIColor *highlightedShadowColor;
//設置首行文字的縮進距離
@property (nonatomic, assign) CGFloat firstLineIndent;
//設置文字的行間距
@property (nonatomic, assign) CGFloat leading;
//設置行高的倍數(shù)
@property (nonatomic, assign) CGFloat lineHeightMultiple;
//設置文字內(nèi)容的邊距
@property (nonatomic, assign) UIEdgeInsets textInsets;
//設置文字垂直方向的對其模式 默認為居中對其 MDHTMLLabelVerticalAlignment枚舉意義如下:
/*
typedef NS_ENUM(NSUInteger, MDHTMLLabelVerticalAlignment) {
    MDHTMLLabelVerticalAlignmentCenter=0, //居中對其
    MDHTMLLabelVerticalAlignmentTop=1, //頂部對其
    MDHTMLLabelVerticalAlignmentBottom=2, //底部對其
};
*/
@property (nonatomic, assign) MDHTMLLabelVerticalAlignment verticalAlignment;
//設置文字的截斷模式
@property (nonatomic, strong) NSString *truncationTokenString;
//根據(jù)內(nèi)容獲取控件尺寸
+ (CGFloat)sizeThatFitsHTMLString:(NSString *)htmlString
 withFont:(UIFont *)font
 constraints:(CGSize)size
 limitedToNumberOfLines:(NSUInteger)numberOfLines;

關于HTML數(shù)據(jù)中的超鏈接的相應，MDHTMLLabel是通過代理回調的方式處理的，如下：

esium.knock能夠使Cesium球體監(jiān)聽html控件，從而根據(jù)控件的值實時改變一些場景屬性。

添加html控件

<div id="toolbar" class="param-container tool-bar">
		<table>
			<tbody>
  			<tr>
					<td>亮度</td>
					<td>
						<input type="range" min="0" max="2" step="0.02" data-bind="value: brightness, valueUpdate: 'input'">
					</td>
				</tr>
			</tbody>
	</table>
</div>

使用knockout雙向綁定數(shù)據(jù)