Android 离线缓存的快速实现

离线缓存是指在有网络的状态下将从服务器获取的网络数据，如Json 数据缓存到本地，在断网的状态下启动APP时读取本地缓存数据显示在界面上，常用的APP（网易新闻、知乎等等）都是支持离线缓存的，这样带来了更好的用户体验。

如果能够在调用网络接口后自动缓存返回的Json数据，下次在断网状态下调用这个接口获取到缓存的Json数据的话，那该多好呢？Volley做到了这一点。

因此，今天这篇文章介绍的就是使用Volley自带的数据缓存，配合Universal-ImageLoader的图片缓存，实现断网状态下的图文显示。

实现效果

如何实现？

1.使用Volley访问网络接口

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/**     * 获取网络数据     */</span>    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">getData</span>() {        StringRequest stringRequest = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> StringRequest(Request.Method.POST, TEST_API, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Response.Listener<String>() {            <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onResponse</span>(String s) {                textView.setText(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"data from Internet: "</span> + s);                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">try</span> {                    JSONObject jsonObject = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> JSONObject(s);                    JSONArray resultList = jsonObject.getJSONArray(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"resultList"</span>);                    JSONObject JSONObject = (org.json.JSONObject) resultList.opt(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);                    String head_img = JSONObject.getString(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"head_img"</span>);                    ImageLoader.getInstance().displayImage(head_img, imageView);                } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">catch</span> (JSONException e) {                    e.printStackTrace();                }            }        }, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Response.ErrorListener() {            <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onErrorResponse</span>(VolleyError volleyError) {            }        }) {            <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">protected</span> Map<String, String> <span class="hljs-title" style="box-sizing: border-box;">getParams</span>() <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">throws</span> AuthFailureError {                Map<String, String> map = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> HashMap<String, String>();                map.put(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"phone"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"15962203803"</span>);                map.put(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"password"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"123456"</span>);                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> map;            }        };        queue.add(stringRequest);    }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li></ul>

当接口访问成功以后，Volley会自动缓存此次纪录在/data/data/{package name}/cache/volley文件夹中。 
 
打开上面的文件，可以发现接口的路径和返回值都被保存在该文件里面了。 
 
当在断网状态时，如何获取到该接口的缓存的返回值呢？ 
使用RequestQueue提供的getCache()方法查询该接口的缓存数据

<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">queue</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>getCache()<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>get(TEST_API) <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">!=</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">null</span>) {                        <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">String</span> cachedResponse <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">new</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">String</span>(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">queue</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>getCache()<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>get(TEST_API)<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">data</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

2.使用Universal-ImageLoader加载图片

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">ImageLoader<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getInstance</span>()<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.displayImage</span>(head_img, imageView)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

注意点

1.观察上面的缓存文件可以发现，Volley只缓存了接口路径，并没有缓存接口的传入参数，因此如果做分页查询的话，使用此方法是不妥的。 
2.在测试过程中，依然发现有的时候获取不到缓存数据，有的时候却可以获取到。对获取缓存的代码延迟加载能够有效解决这个问题。 
3.如果考虑到缓存的过期策略，可以使用更好的ASimpleCache框架辅助开发。对缓存有更高要求的APP，依然应该使用文件缓存或数据库缓存。

源代码下载