Applying Style Sheets Client-Side in iOS
In this post we take a look at how to make use of style sheets in an iOS application instead of needing to download them as part of a web view. Read on for the details.
Join the DZone community and get the full member experience.
Join For FreeWhile native mobile applications can often provide a more seamless and engaging user experience than a browser-based app, it is occasionally convenient to present certain types of content using a web view. Specifically, any content that is primarily text-based and requires minimal user interaction may be a good candidate for presentation as HTML; for example, product descriptions, user reviews, or instructional content.
However, browser-based content often tends to look out of place within a native app. For example, consider the following simple HTML document:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0"/>
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>
<li>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>
</body>
</html>Rendered by WKWebView, the result looks like this:
Because the text is displayed using the default browser font rather than the system font, it is immediately obvious that the content is not native. To make it appear more visually consistent with other elements of the user interface, a stylesheet could be used to render the document using the system font:
<head>
...
<style>
body {
font-family: '-apple-system';
font-size: 10pt;
}
</style>
</head>The result is shown below. The styling of the text now matches the rest of the UI:
However, while this approach may work for this simple example, it does not scale well. Different app (or OS) versions may have different styling requirements.
By applying the stylesheet on the client, the presentation can be completely separated from the content. This can be accomplished by linking to the stylesheet rather than embedding it inline:
<head>
...
<link rel="stylesheet" type="text/css" href="example.css"/>
</head>However, instead of downloading the stylesheet along with the HTML document, it is distributed with the application itself and applied using the loadHTMLString:baseURL: method of the WKWebView class. The first argument to this method contains the (unstyled) HTML content, and the second contains the base URL against which relative URLs in the document (such as stylesheets) will be resolved:
class ViewController: UIViewController {
var webView: WKWebView!
var serviceProxy: WSWebServiceProxy!
override func loadView() {
webView = WKWebView()
view = webView
}
override func viewDidLoad() {
super.viewDidLoad()
title = "Local CSS Example"
serviceProxy = WSWebServiceProxy(session: URLSession.shared, serverURL: URL(string: "http://localhost")!)
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
serviceProxy.invoke("GET", path: "example.html") { result, error in
if (result != nil) {
self.webView.loadHTMLString(result as! String, baseURL: Bundle.main.resourceURL!)
}
}
}
}In this example, the document, example.html, is loaded using the HTTP-RPCWSWebServiceProxy class. The stylesheet, example.css, is stored in the resource folder of the application's main bundle:
body {
font-family: '-apple-system';
font-size: 10pt;
}The results are identical to the previous example. However, the content and visual design are no longer tightly coupled and can vary independently:
For more ways to simplify iOS app development, please see my projects on GitHub:
Published at DZone with permission of Greg Brown, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments