/
group___nimbus_network_image.html
143 lines (122 loc) · 7.27 KB
/
group___nimbus_network_image.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<title>Nimbus: Nimbus Network Image</title>
<link href="tabs.css" rel="stylesheet" type="text/css"/>
<link href="navtree.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="resize.js"></script>
<script type="text/javascript" src="navtree.js"></script>
<script type="text/javascript">
$(document).ready(initResizable);
</script>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-24278774-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="page">
<div style="position:relative">
<div id="top"><!-- do not remove this div! -->
<div id="titlearea">
<a style="float: right;margin-right:20px;margin-top:20px" href='http://www.pledgie.com/campaigns/15519'><img alt='Click here to support Nimbus development and make a donation at www.pledgie.com !' src='http://www.pledgie.com/campaigns/15519.png?skin_name=chrome' border='0' /></a>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr style="height: 56px;">
<td style="padding-left: 0.5em;">
<div id="projectname">Nimbus
 <span id="projectnumber">0.9.1 - <a href="http://github.com/jverkoey/nimbus">Nimbus is proudly hosted on Github</a></span>
</div>
<div id="projectbrief">An iOS framework whose growth is bounded by O(documentation).</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Generated by Doxygen 1.7.4-20110629 -->
</div>
<div id="side-nav" class="ui-resizable side-nav-resizable">
<div id="nav-tree">
<div id="nav-tree-contents">
</div>
</div>
<div id="splitbar" style="-moz-user-select:none;"
class="ui-resizable-handle">
</div>
</div>
<script type="text/javascript">
initNavTree('group___nimbus_network_image.html','');
</script>
<div id="doc-content">
<div class="header">
<div class="summary">
<a href="#groups">Modules</a> </div>
<div class="headertitle">
<div class="title">Nimbus Network Image</div> </div>
</div>
<div class="contents">
<hr/><a name="details" id="details"></a><h2>Overview</h2>
<p>Image views that load images from the network and efficiently store the result in memory and on disk. </p>
<p>Presented below is an architectural overview of the <a class="el" href="interface_nimbus.html" title="The Nimbus state interface.">Nimbus</a> network image library.</p>
<div class="image">
<img src="NINetworkImageDesign1.png" alt="NINetworkImageDesign1.png"/>
<div class="caption">
NINetworkImage Design</div></div>
<ol type="1">
<li>To begin using a network image view, simply create an instance of an <a class="el" href="interface_n_i_network_image_view.html" title="A network-enabled image view that consumes minimal amounts of memory.">NINetworkImageView</a> and use it as you would a UIImageView. The initial image you assign to the view will be used as the "loading" image and must be a locally accessible image. Note that this image will not be cropped and resized in any way, so you should take care to crop and resize it beforehand as necessary.</li>
<li>Once you have created your network image view and assigned the initial image, the next step is to load the network image. Call any of the <a class="el" href="interface_n_i_network_image_view.html#af0531138d9eb4de6275b3704b7e293c2">setPathToNetworkImage</a> methods to fire off a network request for the image on a separate thread.</li>
<li>A new <a class="el" href="interface_n_i_network_image_request.html" title="A threaded network request for an image that chops up and resizes the image before returning to the U...">NINetworkImageRequest</a> thread will spin off and initiate the request to the network.</li>
<li>Once the image has been retrieved from the net, the thread crops and resizes the image depending on the presentation configurations specified by the image view. In this example, <a class="el" href="interface_n_i_network_image_view.html#ae89362b1efb1347953529ddec044787f">sizeForDisplay</a> and <a class="el" href="">cropImageForDisplay</a> are enabled. In this step the image is resized to fit the aspect ratio of the display size.</li>
<li>We then crop the image to fit the display frame.</li>
<li>Upon completion of all image modifications, we complete the request and return only the modified image to the image view. This helps to reduce memory usage.</li>
<li>The resized and cropped image is then stored in the in-memory image cache for quick access in the future.</li>
<li>At last, the image view sets the new image and displays it.</li>
</ol>
<h3>Demo Applications</h3>
<p><b>BasicNetworkImage</b> - Demos each of the image content modes. [<a href="https://github.com/jverkoey/nimbus/tree/master/examples/networkimage/BasicNetworkImage/README.mdown">README</a>]</p>
<p>This demo sets up a scroll view of network images that each show a different UIViewContentMode of the same image. The in-memory cache size is also displayed as the images are loaded.</p>
<div class="image">
<img src="NINetworkImageViewExample1.png" alt="NINetworkImageViewExample1.png"/>
<div class="caption">
Screenshots of the BasicNetworkImage demo application.</div></div>
<table class="memberdecls">
<tr><td colspan="2"><h2><a name="groups"></a>
Modules</h2></td></tr>
<tr><td class="memItemLeft" align="right" valign="top"> </td><td class="memItemRight" valign="bottom"><a class="el" href="group___network-_image-_user-_interface.html">User Interface</a></td></tr>
<tr><td class="memItemLeft" align="right" valign="top"> </td><td class="memItemRight" valign="bottom"><a class="el" href="group___network-_image-_requests.html">Network Requests</a></td></tr>
</table>
<div id="disqus_thread"></div></div>
</div>
<div id="nav-path" class="navpath">
<ul>
</div><!-- .fixedwidth -->
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'nimbusdocumentation'; // required: replace example with your forum shortname
// The following are highly recommended additional parameters. Remove the slashes in front to use.
// var disqus_identifier = 'unique_dynamic_id_1234';
// var disqus_url = 'http://example.com/permalink-to-page.html';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<span class="footer">Generated for Nimbus by
<a href="http://www.doxygen.org/index.html">
<img class="footer" src="doxygen.png" alt="doxygen"/></a> 1.7.4-20110629 </span>
</ul>
</div>
</div> <!-- page -->
</body>
</html>