移动APP开发――主流APP是如何来控制文本样式的?
我们能够看到精美的网页,是因为浏览器支持CSS样式;但是在APP开发工具里面,文本样式的控制还停留在字号大小层面上,CSS可以简单控制的文本样式想要在APP里面显示的一样漂亮并非易事。而如今手机平板已成为我们主要的阅读设备,只要涉及资讯阅读的APP都需要解决这一问题,本篇就简单介绍下主流APP是如何来控制文本样式的:
简单粗暴的使用开发工具控制
文本展示最简单粗暴的就是用程序语言直接呈现文本,在OS X平台下的开发工具Xcode主要的文本样式控制包括:
如上图所示,原生iOS应用的文本样式控制缺少常用的文字行间距控制,而且只能以整体区域为单位控制样式。而Android开发工具下使用TextView理论上可以写出更多的文本样式,但也比较难控制。使用程序语言来实现文本样式只能适和较少文字的展示,当需要展示较多文字时,则会相当难看,比如豆瓣电影:
豆瓣电影作为一款知名应用,使用这样简单粗暴的文本实现方式实在愧对这么多的忠实用户。
H5承载页 + WebView
鉴于原生开发工具在文本样式上控制的局限性,行业内成熟的APP应用都采用了Native+Web的混合视图,即在APP中嵌入浏览器框架,加载HTML网页。这样就可以完美的呈现富文本样式。比如微信的自媒体:
这样的方式需要建立独立的H5站点,考虑到资讯页面一般都需要以链接的方式分享到站外,所以大都数阅读类的APP都是同时开发H5站和APP,利用一个后台提供内容给H5站和APP;业务模型如下图所示:
在APP中嵌入浏览器加载内容唯一的缺点就是加载速度相对慢一些。但普通用户基本上看不出区别,所以是当前最流行的实现方式;
使用DTCoreText等文字效果代码类库(iOS平台)
H5承载页 + 内嵌浏览器框架的方式虽然可以完美的呈现文本内容,但加载速度会慢一些,而且展示风格会有一点点突兀;那么还有一种方法就是使用DTCoreText;
DTCoreText 是一个功能十分强大的文字效果代码类库。在UITextView上实现十分丰富的文字效果,包括文字大小、颜色、字体、下划线,链接,给文字加上图片、视频,文字任意间距等等。实现类似于CSS网页的文字效果。
使用这种实现方法的APP比如知乎,同样是以文字评论为主的APP,用户体验相比豆瓣电影就立刻显得高大上了:
这种方式可以直接实现富文本效果,但鉴于应用本身也需要以外链的方式分享到SNS站点,所以同样需要建立独立的H5站点;
本篇的主要目的是想让产品角色或设计角色对这方面的知识有个初步了解。因为本人非开发出身,写这篇文章时基本上也是参考网上的一零散资料,如有错误,欢迎指出…