Home > Article > Web Front-end > 使用UIWebView简单实现按钮与普通文字混排_html/css_WEB-ITnose
使用UIWebView简单实现按钮与普通文字混排_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:47:011654browse
150 KB
如上图所示，简单封装了一下webView，就能实现这些布局。学过HTML的人都造这件事。。。所以推荐大家去学学H5。
首先webView是用来显示网页内容的控件，它有一个方法叫做loadHTMLString(string: String, baseURL: NSURL?)可以单独用来加载一段HTML文本。所以我们只需要写好这段HTML让它去显示就行了。
结构：
YCMixedTextItem 封装了具有同样特征的标签和标签YCMixedTextView 封装了UIWebView
想要了解HTML的童鞋可以移步到http://www.w3school.com.cn/index.html 学习一下。
YCMixedTextItem：
enum YCMixedTextItemType { case PlainText; case Button;}class YCMixedTextItem: NSObject { var text = "" var type: YCMixedTextItemType = .PlainText var color: String = "#000000" var fontSize = 13 var textDecoration = false var html : String { return "<\(html_mark)" + html_href + " style=\"" + html_color + html_fontSize + html_textDecoration + "\">" + text + "</\(html_mark)>" } 这是一个继承自NSObject的类（可以不继承）。作用在于当取到我们定义的html这个属性的时候，就可以得到这样一个字符串：
<a href="#QOWwj+WFreWtkA==" style=" color: #354d80; font-size: 13px; text-decoration : none;">@小六子</a>或者<span style=" color: #000000; font-size: 13px; text-decoration : none;">：很有意思哈</span>
标签：去学习
定义和用法：
标签：去学习
定义和用法
- 标签被用来组合文档中的行内元素。
当调用YCMixedTextItem中html的getter的同时，还有这些属性：
private extension YCMixedTextItem { ///元素使用哪一个标签来修饰 var html_mark : String { switch type { case .Button: return "a" case .PlainText : return "span" } } ///元素是否含有一个锚 var html_href : String { switch type { case .Button: return " href=\"#\(hrefText)\"" case .PlainText : return "" } } ///元素的color属性 var html_color : String { return " color: \(color);" } ///元素的字体大小 var html_fontSize: String { return " font-size: \(fontSize)px;" } ///元素是否含有下划线 var html_textDecoration : String { return " text-decoration : \(textDecoration ? "underline" : "none");" }} 关于href="#QOWwj+WFreWtkA=="这个属性，等一下我们会说到。
YCMixedTextView：
这是一个继承自UIView的子类。基本方法有这些：
override init(frame: CGRect) { super.init(frame: frame) setupAllViews() } required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) setupAllViews() } private let webView = UIWebView(frame: .zero) func setupAllViews() { addSubview(webView) ///防止出现末尾黑线 webView.opaque = false ///防止出现末尾黑线 webView.backgroundColor = .clearColor() ///防止出现末尾黑线 webView.scrollView.backgroundColor = .whiteColor() ///禁止滚动 webView.scrollView.scrollEnabled = false webView.delegate = self webView.loadHTMLString(htmlString, baseURL: nil) } override func layoutSubviews() { webView.frame = bounds } 这样一个webView就加上去了，那么我们还需要将item和它结合起来：
var background_color: String = "#FFFFFF" { didSet { reload() }}private var items = [YCMixedTextItem]()func load(items: [YCMixedTextItem]) { self.items.removeAll() self.items += items reload()}private func reload() { webView.loadHTMLString(htmlString, baseURL: nil)}private var htmlString : String { return "<!DOCTYPE html><html><head><meta charset=\"utf-8\"><script type=\"text/JavaScript\">window.onload=function(){document.documentElement.style.webkitTouchCallout='none';document.documentElement.style.webkitUserSelect='none';};</script></head>" + "<body style=\"background-color: \(background_color); margin: 0; padding: 0; border: none; font-family: \"Helvetica\";\">" + (items.map{"\($0.html)"}).joinWithSeparator("") + "</body></html>"} htmlString属性组装了items之后，就形成了像下面这样的一段HTML代码：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script type="text/JavaScript"> window.onload=function(){///防止出现复制粘贴选中或一些反馈document.documentElement.style.webkitTouchCallout='none';document.documentElement.style.webkitUserSelect='none';}; </script> </head> <body style="background-color: #FFFFFF; margin: 0; padding: 0; border: none; font-family: "Helvetica";"> <a href="#QOWkp+ivneWUoA==" style=" color: #354d80; font-size: 13px; text-decoration : none;">@大话唠</a> <span style=" color: #000000; font-size: 13px; text-decoration : none;">：今天熊孩子补习完回来和我说：“能不能不去辅导班了？”我问：“为什么”“要是每个礼拜都叫你去加班，你喜欢吗？！”我。。。老子是不喜欢加班，还TM不喜欢上班呢，还不是为了赚钱让你上辅导班！！！怎么有种作孽的感觉？！</span> </body></html> 可以复制到一个文本文件中，改扩展名为html来查看这个代码的效果。
使用的时候呢：
let item0 = YCMixedTextItem(type: .Button)item0.text = model.replyToUserNamelet item1 = YCMixedTextItem(type: .PlainText)item1.text = model.replyContentmixedTextView.load([ item0, item1])
是不是非常简单呢~源码地址：https://github.com/ilakeYC/YCMixedTextViewDemo
希望能够解决大家的问题。（高手给个面子撒）iLakeYC 感谢各位的耐心阅读
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：网络请求封装_html/css_WEB-ITnoseNext article：使用PIE.htc让IE678支持CSS3部分属性_html/css_WEB-ITnose