iOS程序开发之使用PlaceholderImageView实现优雅的图片加载效果

说明

1. PlaceHolderImageView基于SDWebImage编写

2. 给定一个图片的urlString,以及一个placeholderImage就可以优雅的显示图片加载效果

效果

源码

PlaceholderImageView.h/.m

//
// PlaceholderImageView.h
// SDWebImageViewPlaceHorder
//
// Created by YouXianMing on 16/9/14.
// Copyright © 2016年 YouXianMing. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface PlaceholderImageView : UIView
/**
* Picture's url string.
*/
@property (nonatomic, strong) NSString *urlString;
/**
* The placeholder's image.
*/
@property (nonatomic, strong) UIImage *placeholderImage;
/**
* Default is UIViewContentModeScaleAspectFill.
*/
@property (nonatomic) UIViewContentMode placeholderImageContentMode;
/**
* Default is UIViewContentModeScaleAspectFill.
*/
@property (nonatomic) UIViewContentMode contentImageContentMode;
@end

ImageCell.h/.m

//
// ImageCell.h
// SDWebImageViewPlaceHorder
//
// Created by YouXianMing on 16/9/14.
// Copyright © 2016年 YouXianMing. All rights reserved.
//
#import <UIKit/UIKit.h>
#import "PlaceholderImageView.h"
@interface ImageCell : UITableViewCell
@property (nonatomic, strong) PlaceholderImageView *placeholderImageView;
@end
//
// ImageCell.m
// SDWebImageViewPlaceHorder
//
// Created by YouXianMing on 16/9/14.
// Copyright © 2016年 YouXianMing. All rights reserved.
//

#import "ImageCell.h"

@implementation ImageCell
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
self.selectionStyle = UITableViewCellSelectionStyleNone;
self.placeholderImageView = [[PlaceholderImageView alloc] initWithFrame:CGRectMake(0, 0, 150.f, 150.f)];
self.placeholderImageView.placeholderImage = [UIImage imageNamed:@"1"];
[self addSubview:self.placeholderImageView];
}
return self;
}
@end

ViewController.m

//
// ViewController.m
// SDWebImageViewPlaceHorder
//
// Created by YouXianMing on 16/9/14.
// Copyright © 2016年 YouXianMing. All rights reserved.
//
#import "ViewController.h"
#import "UIImageView+WebCache.h"
#import "PlaceholderImageView.h"
#import "ImageCell.h"
@interface ViewController () <UITableViewDelegate, UITableViewDataSource>
@property (nonatomic, strong) UITableView *tableView;
@property (nonatomic, strong) NSArray *pictures;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.pictures = @[@"https://pic.cnblogs.com/avatar/607542/20151017230728.png",
@"https://pic.cnblogs.com/face/607741/20140226202001.png",
@"https://pic.cnblogs.com/face/815231/20150923160245.png",
@"https://pic.cnblogs.com/face/993558/20160729092113.png",
@"https://pic.cnblogs.com/face/894202/20160217151952.png",
@"https://pic.cnblogs.com/face/968459/20160709111712.png",
@"https://pic.cnblogs.com/face/145865/20160210174306.png",
@"https://pic.cnblogs.com/face/796658/20151026090914.png",
@"https://pic.cnblogs.com/face/933887/20160629214007.png",
@"https://pic.cnblogs.com/face/125303/20130313094252.png",
@"https://pic.cnblogs.com/face/976232/20160730173456.png",
@"https://pic.cnblogs.com/face/969708/20160602120239.png",
@"https://pic.cnblogs.com/face/954541/20160705113740.png",
@"https://pic.cnblogs.com/face/799942/20150818204115.png"];
PlaceholderImageView *pImageView = [[PlaceholderImageView alloc] initWithFrame:CGRectMake(0, 0, 150.f, 150.f)];
[self.view addSubview:pImageView];
pImageView.urlString = @"https://pic.cnblogs.com/avatar/607542/20151017230728.png";
self.tableView = [[UITableView alloc] initWithFrame:self.view.bounds];
self.tableView.delegate = self;
self.tableView.dataSource = self;
self.tableView.rowHeight = 150.f;
[self.view addSubview:self.tableView];
[self.tableView registerClass:[ImageCell class] forCellReuseIdentifier:@"ImageCell"];
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return _pictures.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
ImageCell *cell = [tableView dequeueReusableCellWithIdentifier:@"ImageCell"];
cell.placeholderImageView.urlString = _pictures[indexPath.row];
return cell;
}
@end 

以上所述是小编给大家介绍的ioS程序开发之使用PlaceholderImageView实现优雅的图片加载效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • iOS开发中UIImageView控件的常用操作整理

    UIImageView,顾名思义,是用来放置图片的.使用Interface Builder设计界面时,当然可以直接将控件拖进去并设置相关属性,这就不说了,这里讲的是用代码. 1.创建一个UIImageView: 创建一个UIImageView对象有五种方法: 复制代码 代码如下: UIImageView *imageView1 = [[UIImageView alloc] init]; UIImageView *imageView2 = [[UIImageView alloc] initWith

  • IOS UI学习教程之使用UIImageView控件制作动画

    本文实例为大家分享了IOS使用UIImageView控件制作动画的方法,供大家参考,具体内容如下 先添加40张tomcat的图片到资源列表中:名称为cat_eat0000.jpg到cat_eat0039.jpg. 1.定义所需控件 // 定义按钮,图片控件.可变数组对象 UIButton *actionbuttom; UIImageView *imageMove; NSMutableArray *imgsarray; 2.初始化各控件 // image动画 // 初始化UIImageView,大

  • IOS 中UIImageView响应点击事件

    IOS 中UIImageView响应点击事件 有时候会遇到点击一张图片,然后让这张图片触发一个事件,或者是跳转视图,想到的第一个方法就是用UIButton,将Button的背景图片属性设置为该图片,效果达到了,但不是最好的方法,直接触发方法 定义Image的对象 UIImageView *imgView =[[UIImageView alloc] initWithFrame:CGRectMake(0, 0,320,100)]; imgView.backgroundColor = [UIColor

  • 改变iOS应用中UITableView的背景颜色与背景图片的方法

    改变UITableView的header.footer背景颜色 改变UITableView的header.footer背景颜色,这是个很常见的问题.之前知道的一般做法是,通过实现tableView: viewForHeaderInSection:返回一个自定义的View,里面什么都不填,只设背景颜色.但是今天发现一个更简洁的做法: 对于iOS 6及以后的系统,实现这个新的delegate函数即可: 复制代码 代码如下: - (void)tableView:(UITableView *)table

  • 详解IOS UITableViewCell 的 imageView大小更改

    详解IOS UITableViewCell 的 imageView大小更改 实例代码: - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ static NSString *CellIdentifier = @"Cell"; UITableViewCell *cell = [tableView dequeueReusableCell

  • iOS开发中使用Quartz2D绘图及自定义UIImageView控件

    绘制基本图形 一.简单说明 图形上下文(Graphics Context):是一个CGContextRef类型的数据 图形上下文的作用:保存绘图信息.绘图状态 决定绘制的输出目标(绘制到什么地方去?)(输出目标可以是PDF文件.Bitmap或者显示器的窗口上) 相同的一套绘图序列,指定不同的Graphics Context,就可将相同的图像绘制到不同的目标上. Quartz2D提供了以下几种类型的Graphics Context: Bitmap Graphics Context PDF Grap

  • iOS如何固定UITableView中cell.imageView.image的图片大小

    前言 凡是进行iOS开发的,基本上都会遇到要展示列表,或者即使不是标准列表,但由于数量不固定,也需要如同列表一样从上往下显示.加载的情况.这些,都绕不过对UITableView的使用. 在iOS开发中UITableView可以说是使用最广泛的控件,我们平时使用的软件中到处都可以看到它的影子,类似于微信.QQ.新浪微博等软件基本上随处都是UITableView.当然它的广泛使用自然离不开它强大的功能. 我们经常在开发过程中会用到默认UITableView的cell.imageView.image,

  • IOS中UIImageView方法实现简单动画

    IOS中UIImageView方法实现简单动画 查阅UIImageView文档时,发现UIImageView有一组关于动画的方法/参数,可以实现简单的动画.包括: animationImages; highlightedAnimationImages; animationDuration; animationRepeatCount; - startAnimating; - stopAnimating; - isAnimating; 上面的这组方法很简单,一目了然:设置好动画的图片.动画时间.重复

  • iOS UIImageView图片自动拉伸功能

    本文实例为大家分享了iOS图片自动拉伸的具体代码,供大家参考,具体内容如下 这个是使用一个切片,使其填充到整个NavigationBar上面. - (void)viewDidLoad { [super viewDidLoad]; UIImage *smallImage = [UIImage imageNamed:@"hc_03.png"]; UIImageView *imageView = [[UIImageView alloc] initWithImage:smallImage];

  • iOS程序开发之使用PlaceholderImageView实现优雅的图片加载效果

    说明 1. PlaceHolderImageView基于SDWebImage编写 2. 给定一个图片的urlString,以及一个placeholderImage就可以优雅的显示图片加载效果 效果 源码 PlaceholderImageView.h/.m // // PlaceholderImageView.h // SDWebImageViewPlaceHorder // // Created by YouXianMing on 16/9/14. // Copyright © 2016年 Yo

  • IOS程序开发之跳转短信发送界面实现发送短信功能

    项目需求:在程序开发中,我们需要在某个程序里面发送一些短信验证(不是接收短信验证,关于短信验证,传送门:http://www.cnblogs.com/wolfhous/p/5096774.html 项目实现: 新建demo,直接看我源码标志. 源码截图 真机截图 就是如此简单,如您有任何问题/建议或者更好的实现方法,联系本人. 可以看我折叠的源码 /** 点击发送短信按钮*/ - (IBAction)sendMessageBut:(id)sender { /** 如果可以发送文本消息(不在模拟器

  • ios开发UITableViewCell图片加载优化详解

    目录 前言 图片自适应比例 XHWebImageAutoSize 仅加载当前屏幕的内容 预加载 前言 我们平时用UITableView用的很多,所以对列表的优化也是很关注的.很多时候,我们设置UIImageView,都是比例固定好宽高的,然后通过 scaleAspectFill 和 clipsToBounds 保持图片不变形,这样子做开发的效率是很高的,毕竟图片宽高我们都是固定好的了. 那如果产品要求图片按真正的比例展示出来呢?如果服务器有返回宽和高,那就好办了,那如果没有呢,我们应该怎么去做呢

  • 微信小程序 图片加载(本地,网路)实例详解

    在微信小程序中,要显示一张图片,有两种图片加载方式: 加载本地图片 加载网络图片 加载本地图片 <image class="widget__arrow" src="/image/arrowright.png" mode="aspectFill"> </image> src="/image/arrowright.png" 这句就是加载本地图片资源的.想想iOS中的加载本地图片,imageName:,类似.

  • iOS点击文字按钮变转圈加载效果

    本文实例为大家分享了iOS点击文字按钮变转圈加载效果的相关代码,供大家参考,具体内容如下 实现效果: 实现代码: // 画弧线 - (void)drawHalfCircle { loadingLayer = [self drawCircle]; // 这个是用于指定画笔的开始与结束点 loadingLayer.strokeStart = 0.0; loadingLayer.strokeEnd = 0.75; } - (CAShapeLayer *)drawCircle { CGRect fram

  • ios基于MJRefresh实现上拉刷新和下拉加载动画效果

    本文介绍了ios基于MJRefresh实现上拉刷新和下拉加载动画效果,分享给大家,具体如下: 目录 1. 头部刷新动画 2.尾部刷新动画 头部刷新动画 #import <MJRefresh/MJRefresh.h> @interface HZNormalHeader : MJRefreshGifHeader @end #import "HZNormalHeader.h" @implementation HZNormalHeader #pragma mark - 重写父类的方

  • Android开发实现的ViewPager引导页功能(动态加载指示器)详解

    本文实例讲述了Android开发实现的ViewPager引导页功能(动态加载指示器).分享给大家供大家参考,具体如下: 先看效果图咯~ 现在几乎每个App都会有引导页,是不是感觉很炫很厉害,所以就想做出来一个学习一下~让自己的App看起来更加的美观~ 现在来分析一下: 这个引导页可以分为俩部分~ 1.小红点--来提醒这是第几页了~ 2."开始体验"这个Button--可以进入主界面,但是要控制这个Button只能在最后一页出现 布局的话使用相对布局~ 那现在来看看布局吧: activi

  • 微信小程序image图片加载完成监听

    需求 在应用中显示的图片很多情况不满足业务需求,我们需要动态根据图片的宽高进行缩放或加载中显示的缺省图片,这是我没就需要监听图片加载完成回调,来看看微信小程序怎么实现图片加载完成回调. 实现 1. 绑定回调 通过image标签的bindload属性绑定图片加载完成回调函数,src根据图片加载是否完成绑定是否显示缺省图: <image src='{{loadComplete?srcImagePath:defaultImagePath}}' bindload="imageLoad"/

  • 微信小程序图片加载失败时替换为默认图片的方法

    先看一下效果图: 1.第一种情况:单独加载一个图片 index.wxml代码: <image class="userinfo-avatar" src="{{avatar}}" binderror="errorFunction"></image> index.js代码: errorFunction: function(){ this.setData({ avatar: '/image/default.png' }) } 2.

  • 详解微信小程序开发聊天室—实时聊天,支持图片预览

    第一次写小程序,老板就让我用websoket写个聊天对话,群聊这种.第一次写聊天功能,第一次用websoket,第一次用小程序,这是在考验我吗?不过我还是研究了一下,终于实现了. 首先看一下界面,界面很简单,就是首页刚进来获取了用户信息头像,昵称等.点击进入聊天室就可以聊天了,下面我介绍的是前端代码实现,后台需要做的很简单,就是你给他发送什么数据,他就给你返回什么数据,就是在接收前台发送过来的图片的时候需要做个格式转换,因为有时候前端将接收到的json字符串转换json对象的时候,遇到有特殊的标

随机推荐