列表的单元格中包含有图片在开发中很常见。通常我们可以直接在tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath)中给单元格设置图片。
但有时这些图片要从远程加载,或者要给图片作裁减,添加滤镜等操作。如果这些操作还是直接在主线程中进行,由于上下拖动表格滚动条的时候,单元格渲染是实时进行的。那么单元格便会不断地进行图片加载,渲染,影响效率造成卡顿。如果图片大的话还会浪费流量。
下面通过一个展示“热门电影”表格,演示如何进行优化。
1,最初的代码
这个是功能的最简单实现,后面我们要在这个基础上进行改进。
UITableView里除了显示文字,还从网络下载海报图片。同时为了使CPU资源占用更明显,还给图片添加了棕褐色滤镜。
由于这些都在主线程操作,可以发现滚动表格的时候,界面比较卡。(而且下载过的图片由于没有保存本地,来回拖动滚动条会发现图片在重复下载。)
movies.plist - 存储电影名字和对应的海报url地址
(下面是部分代码片断)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | |
ListViewController.swift - 主页面代码
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 |
|
源码下载: T1.zip
2,功能改进:使用后台线程进行图片下载,和滤镜添加
(1)通过使用NSOperation和NSOperationQueue,创建两个队列。一个用来下载图片,一个用来处理图片。由于这些不在主线程中进行,所以拖动滚动条的时候就不会卡顿了。
(2)下载和滤镜是分别实现,因为有可能在图片下载时,用户将图片划动出屏幕了,这时不会再添加滤镜。当下一次用户划到当前行时,就不需要再下载图片了;只需要添加滤镜!这样可以提高效率。
(3)为便于观察,这里将maxConcurrentOperationCount设置为1。表示一个队列中同时只有一个线程运行。(实际应用中可根据情况多开几个线程)
(4)开始的时候,会显示默认占位图片。图片下载成功后,会替换显示真实图片。图片下载失败,则显示失败图片。滤镜处理完毕后,替换显示处理后的图片。
(5)为增强用户体验,刚开始单元格尾部附件图片是一个转圈动画。一旦图片处理完毕或下载失败,便将其去除。
(1)电影条目类和状态枚举 - MovieRecord.swift
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
(2)队列管理类 - MovieOperations.swift
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
(3)图片下载操作任务类 - ImageDownloader.swift
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 |
|
(4)滤镜处理任务类 - ImageFiltration.swift
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 |
|
(5)主页代码 - ListViewController.swift
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 |
|
源码下载:T2.zip
3,功能再次改进:拖动滚动条的时候不加载,停止后只加载当前页
当滚动表格时,比如快速的滚动到最后一条数据。虽然前面的单元格都已移出可视区域。但其实这些图片的下载和处理任务已经添加到后台队列中,并默默地在执行。
(1)解决这个问题,就要保证表格在滚动的情况下,不添加任务到队列中。而且只有当表格停止后,只把当前可见区域的图片添加到任务队列中。
(2)同时,对于那些原来在可视区域的队列任务。如果对应单元格被移出可视区域,那么其任务也要取消。
只需在主页面代码里稍作修改即可:
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 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 |
|
源码下载:T3.zip