ios显示图片到UI



重点内容


1.掌握如何将获取的图片显示到UI上面;


2.注意实现代码的细节问题,例如需要通知页面(collectionView)刷新才能显示图片等等。


参考代码:


image1.png


image2.png


image3.png



内容介绍


由标题就可以知道,接下来我们这节课讲的是如何将获取到的图片在UI(collectionView)上显示出来。


我们在集合中取单个元素用的方法是ObjectAtIndex,然后呢,我们将这个图片对象的网址取到,将其使用Alamofire框架执行请求获取响应,把图片的数据取回来。


下面我们来用代码实现一下:


1.首先上节课我们已经把默认20张图片photos取出来添加到对象数组中了。如图:


image4.png


那我们怎么样组装cell(类似于列表)。把一张张的图片以列表的形式显示在APP主界面上呢?


2.接着我们有以下四个步骤:


image5.png


第一步:在模板程序中找到collectionView函数,在里面使用ObjectAtIndex函数先将单个的photo取出来,强制转换为photoInfo的对象。


第二步:通过一个常量把我们在网页获取到的照片的地址取出来。


第三步:有了地址,我们就可以使用Alamofire执行一个请求了,如上图。因为我们的地址是通过授权之后获取到的,地址已经包含了我们所需要的所有信息,事实上我们就不再需要Request()方法的parameter参数以及编码参数了,只需要一个地址就可以了。


第四步:因为我们的返回数据是图片,而不是JSON类型数据。于是我们不再需要使用ResponseJSON()方法来返回了,只需要利用最简单的Response()方法就可以了。然后在它返回的闭包中使用判断语句if语句表示的是把返回的数据强制转换为NSData类型,如果成功后则利用UIimage来和返回数据data来初始化对象。


到这里呢其实我们已经将图片 放到collectionView上了,但是到了这里,我们运行之后发现仍然没有显示图片,这是为什么呢?这是因为当我们启动程序取到照片之后,没有刷新页面,此时照片还是不会显示的。那我们该怎么做呢?其实很简单,只需要通知页面(collectionVIew)更新一下就可以了:


image6.png


这样呢,我们再次运行程序,结果就出来了。如下图:


image7.png


到这里我们本节就结束了。但是还有一个问题就是,我们都知道使用手机相册的时候,如果页面有足够的图片。我们往上面拉动的时候会出现更多图片显示的。这涉及到什么原理呢?没错,就是我们前面几节提到过的批量处理了。具体如何操作,我们在下一节将会详细讲述。



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 www.maiziedu.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部