IOS 使用SDWebImage实现仿新浪微博照片浏览器

  使用第三方库SDWebImage实现仿新浪微博照片浏览器,可以下载图片缓存,点击之后滚动查看相片,具体效果如下:    

代码如下:

WeiboImageView.h:

#import <UIKit/UIKit.h>

@interface WeiboImageView : UIImageView

@property (nonatomic, assign) CGRect originRect;

- (instancetype)initWithFrame:(CGRect)frame;

@end

WeiboImageView.m

#import "WeiboImageView.h"

@implementation WeiboImageView

@synthesize originRect;

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        originRect = frame;
        self.clipsToBounds = YES;
        self.userInteractionEnabled  = YES;
        self.contentMode = UIViewContentModeScaleAspectFill;

    }
    return self;
}

- (void)dealloc
{

}

@end

WeiboImageBrowser.h

#import <UIKit/UIKit.h>

@interface WeiboImageBrowser : UIView<UIScrollViewDelegate>

//@property (nonatomic, copy) NSArray *imageViewArray;

@property (nonatomic, assign) int currentSelectedIamge;

@property (nonatomic, strong) UIScrollView *backgroundScrollView;

@property (nonatomic, strong) UILabel *pageIndexLabel;

@property (nonatomic,strong) NSMutableArray *originRects;

@property (nonatomic, copy) NSArray *bigImageArray;

- (instancetype)initWithFrame : (CGRect)rect;

- (void)showWeiboImages;

@end

WeiboImageBrowser.m

#import "WeiboImageBrowser.h"
#import "WeiboDefine.h"
#import "WeiboImageView.h"
#import "SDImageCache.h"      //缓存相关
#import "SDWebImageCompat.h"  //组件相关
#import "SDWebImageDecoder.h" //解码相关

//图片下载以及下载管理器
#import "SDWebImageDownloader.h"
#import "SDWebImageManager.h"
#import "SDWebImageDownloaderOperation.h"

@implementation WeiboImageBrowser

//@synthesize imageViewArray;

@synthesize currentSelectedIamge;

@synthesize bigImageArray;

- (instancetype)initWithFrame : (CGRect)rect
{
    self = [super initWithFrame:rect];
    if (self) {
        [self addSubview:self.pageIndexLabel];
        self.backgroundColor = [UIColor blackColor];
        [self initBackgroundScrollView];
    }
    return self;
}

- (UIScrollView *)backgroundScrollView
{
    if (!_backgroundScrollView) {
        _backgroundScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, UISCREEN_WIDTH, UISCREEN_HEIGHT)];
        _backgroundScrollView.pagingEnabled = YES;
    }
    return _backgroundScrollView;
}

- (NSMutableArray *)originRects
{
    if (!_originRects) {
        _originRects = [NSMutableArray array];
    }
    return _originRects;
}

- (UILabel *)pageIndexLabel
{
    if (!_pageIndexLabel) {
        _pageIndexLabel = [[UILabel alloc]initWithFrame:CGRectMake((UISCREEN_WIDTH - 100) / 2, UISCREEN_HEIGHT - 50, 100, 25)];
        _pageIndexLabel.textAlignment = NSTextAlignmentCenter;
        _pageIndexLabel.textColor = [UIColor whiteColor];
        _pageIndexLabel.font = [UIFont fontWithName:@"Arial" size:20];
    }
    return _pageIndexLabel;
}

- (void)initBackgroundScrollView
{
    self.backgroundScrollView.contentSize = CGSizeMake([self.bigImageArray count] * UISCREEN_WIDTH, UISCREEN_HEIGHT);
    self.backgroundScrollView.delegate = self;
    self.backgroundScrollView.showsHorizontalScrollIndicator = NO;
    [self addSubview:self.backgroundScrollView];
}

- (void)initImageScrollViews
{
    self.backgroundScrollView.contentSize = CGSizeMake([self.bigImageArray count] * UISCREEN_WIDTH, 0);
    self.backgroundScrollView.contentOffset = CGPointMake(currentSelectedIamge * UISCREEN_WIDTH, 0);
    for (int i = 0; i < [self.bigImageArray count]; i++) {
        [[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:[self.bigImageArray objectAtIndex:i] ] options:0
                                                       progress:^(NSInteger receivedSize, NSInteger expectedSize)
         {
             NSLog(@"progress!!!");
         }

                                                      completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL)
         {
             UIScrollView *iamgeScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(UISCREEN_WIDTH * i, 0, UISCREEN_WIDTH, UISCREEN_HEIGHT)];
             WeiboImageView *weibImageView = [[WeiboImageView alloc]init];
             weibImageView.image = image;
             CGFloat ratio = (double)weibImageView.image.size.height / (double)weibImageView.image.size.width;
             weibImageView.bounds = CGRectMake(0, 0, UISCREEN_WIDTH, UISCREEN_WIDTH * ratio);
             weibImageView.center = CGPointMake(UISCREEN_WIDTH / 2, UISCREEN_HEIGHT / 2);
             UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(imageTap:)];
             [weibImageView addGestureRecognizer:tap];
             [iamgeScrollView addSubview:weibImageView];
             [self.backgroundScrollView addSubview:iamgeScrollView];
         }];
    }
}

- (void)showWeiboImages
{
    [self initImageScrollViews];
    [[UIApplication sharedApplication].keyWindow addSubview:self];
}

-(void)imageTap:(UITapGestureRecognizer *)tap
{
    [self removeFromSuperview];
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    int nCurrentPage = scrollView.contentOffset.x / UISCREEN_WIDTH;
    currentSelectedIamge = nCurrentPage;
    NSString *stringPage = [NSString stringWithFormat:@"%d/%d",nCurrentPage + 1, [self.bigImageArray count]];
    self.pageIndexLabel.text = stringPage;
    [self bringSubviewToFront:self.pageIndexLabel];
}

@end

使用方法:

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (nonatomic, strong)NSArray *imageArray;

@end

ViewController.m

#import "ViewController.h"
#import "SDImageCache.h"      //缓存相关
#import "SDWebImageCompat.h"  //组件相关
#import "SDWebImageDecoder.h" //解码相关

//图片下载以及下载管理器
#import "SDWebImageDownloader.h"
#import "SDWebImageManager.h"
#import "SDWebImageDownloaderOperation.h"
#import "WeiboDefine.h"
#import "WeiboImageView.h"
#import "WeiboImageBrowser.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    float imageWidth = (UISCREEN_WIDTH - 50) / 3.0;
    _imageArray = [NSArray arrayWithObjects:
                           @"http://g.hiphotos.baidu.com/image/pic/item/c2cec3fdfc03924578c6cfe18394a4c27c1e25e8.jpg",
                           @"http://image.tianjimedia.com/uploadImages/2015/072/23/4X4L0E9BNEZ6.jpg",
                           @"http://img15.3lian.com/2015/c1/83/d/31.jpg",
                           @"http://img15.3lian.com/2015/c1/83/d/31.jpg",
                           @"http://img15.3lian.com/2015/c1/83/d/31.jpg",
                           @"http://img15.3lian.com/2015/c1/83/d/31.jpg",
                           @"http://img15.3lian.com/2015/c1/83/d/31.jpg",
                           @"http://img15.3lian.com/2015/c1/83/d/31.jpg",
                           @"http://img15.3lian.com/2015/c1/83/d/31.jpg",nil  ] ;
    int n = _imageArray.count;

    for (int i = 0; i < n; i++) {
        [[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:[_imageArray objectAtIndex:i]
                                                                                      ] options:0
                                                       progress:^(NSInteger receivedSize, NSInteger expectedSize)
         {
             NSLog(@"progress!!!");
         }

                                                      completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL)
         {
             CGRect rect = CGRectMake(15 + (i % 3) * (imageWidth + 10) , 20 + 90 + (i / 3) * (imageWidth + 10), imageWidth, imageWidth);
             UIImageView *imageView = [[UIImageView alloc]initWithFrame:rect];
             imageView.image = image;
             imageView.frame = rect;
             imageView.clipsToBounds = YES;
             imageView.contentMode = UIViewContentModeScaleAspectFill;
             imageView.tag = i;
             imageView.userInteractionEnabled = YES;
             UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(imageTap:)];
             [imageView addGestureRecognizer:tap];
             [self.view addSubview:imageView];

         }];
    }

    // Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.
}

-(void)imageTap:(UITapGestureRecognizer *)tap
{
    WeiboImageBrowser *imageBrowser = [[WeiboImageBrowser alloc] initWithFrame:CGRectMake(0, 0, UISCREEN_WIDTH, UISCREEN_HEIGHT)];
    imageBrowser.currentSelectedIamge = tap.view.tag;
    imageBrowser.bigImageArray = /*weiboInformation.pic_urls*/_imageArray;
    [imageBrowser showWeiboImages];
}

@end

源代码下载链接:http://download.csdn.net/detail/lzm2625347497/9615067

时间: 2024-10-25 21:09:19

IOS 使用SDWebImage实现仿新浪微博照片浏览器的相关文章

终结照片浏览器应用ios源码

开发环境:Swift 1.2  .Xcode 6.3 (一)总体说明1.本框架有OC版本,本次主要是汲取了OC版本所有bug与不足,同时听取在大量使用者的反馈与心声.修复与极大的改善了之前的OC版本并在此基础之上精心推出的Swift完美版,https://github.com/nsdictionary/CorePhotoBrowserVC.2.纯swift支持,本地与网络支持,横竖屏支持,iPhone所有屏幕支持,iPad平板也支持并力求零Bug.3.依赖框架说明:CFSnapKit(布局库).

iOS开源照片浏览器框架SGPhotoBrowser的设计与实现

简介 近日在制作一个开源加密相册时附带着设计了一个照片浏览器,在进一步优化后发布到了GitHub供大家使用,该框架虽然没有MWPhotoBrowser那么强大,但是使用起来更为方便,操作更符合常规相册习惯,自定义和修改源码也十分简单. 本文主要介绍这个照片浏览器框架的技术要点,如果要深入研究和使用,可以在下面的链接中下载源码. 如果你对这个框架有兴趣,可以点击这里前去GitHub下载源码,欢迎Star与指出不足. 效果图 缩略图预览,点击缩略图进入原图浏览,点击底部工具栏可以进入编辑模式. 批量

仿新浪微博IOS客户端(v5.2.8)——自定义UITabBar替换系统默认的(添加“+”号按钮)

转载请标明出处:http://blog.csdn.net/android_ls/article/details/45896395 声明:仿新浪微博项目,所用所有图片资源都来源于官方新浪微博IOS客户端,编写本应用的目的在于学习交流,如涉及侵权请告知,我会及时换掉用到的相关图片. 自定义UITabBar替换系统默认的,目的是为了在UITabBar中间位置添加一个"+号按钮",下面我们来聊聊具体的实现. 1.自定义WBTabBar,让其继承自UITabBar,代码如下: // // WBT

仿新浪微博IOS客户端(v5.2.8)——下拉菜单栏的实现

转载请标明出处:http://blog.csdn.net/android_ls/article/details/45877983 声明:仿新浪微博项目,所用所有图片资源都来源于官方新浪微博IOS客户端,编写本应用的目的在于学习交流,如涉及侵权请告知,我会及时换掉用到的相关图片. 接着上一篇博文,这篇我们来聊聊新浪微博导航栏上,点击中间部分的标题(titleView)弹出的下拉菜单是如何实现. 1.自定义导航栏中间的titleView,代码如下: // 设置导航栏中间的titleView _tit

仿新浪微博IOS客户端(v5.2.8)——设置导航栏外观

转载请标明出处:http://blog.csdn.net/android_ls/article/details/45849447 声明:仿新浪微博项目,所用所有图片资源都来源于官方新浪微博IOS客户端,编写本应用的目的在于学习交流,如涉及侵权请告知,我会及时换掉用到的相关图片. 一. 在Xcode6下添加.pch文件 对于使用惯了之前版本Xcode的朋友来说,在系统提醒之下升级到Xcode 6之后,发现新建项目后Xcode不再帮我们创建.pch文件了.可是我们已经习惯了,把一些在很多地方都用的宏

仿新浪微博IOS客户端(v5.2.8)——搭建项目基本框架

转载请标明出处:http://blog.csdn.net/android_ls/article/details/45827719 声明:仿新浪微博项目,所用所有图片资源都来源于官方新浪微博IOS客户端,编写本应用的目的在于学习交流,如涉及侵权请告知,我会及时换掉用到的相关图片. 最近我打算利用业余时间,仿下新浪微博IOS客户端,至于能写到哪里我也不确定,能写多少就写多少吧,下面我们开始项目的基本搭建: 1.打开Xcode选择创建新项目,并创建各个模块的目录结构,完成后项目的目录结构如下图: 2.

ios 仿新浪微博 UINavigationController 向左滑动时显示上一个控制器的View.

仿新浪微博 UINavigationController 向左滑动时显示上一个控制器的View. 实现原理,UINavigationController 的 self.view显示时把当前显示的view截图下来,保存到一个数组中.当push一个view时把上一个view的截图放到self.view后面,当self.view向右拖动时显示上一个view. NavigationController.m #import "NavigationController.h" @interface

ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前,先把实现的基本原理说一下.当夜幕下拉到底部的时候,js可以判断滚动条的位置,到达底部触发js方法,执行jquery的ajax方法,向后台一般处理程序夜幕ashx文件请求数据源,得到json格式的数据源.然后,遍历json数据源,拼接一个li标签,再填充到页面上去. 首先,我们来做个简单的html页面

javascript仿新浪微博图片放大缩小及旋转效果

经常看到新浪微博里有图片放大缩小旋转效果,感觉效果还不错,所以就想试着做一个类似的demo出来,至于旋转对于IE可以用滤镜来解决,标准的浏览器可以用html5中的canvas画布来解决. 思路:1.点击小图后,小图隐藏掉,在小图父级元素后增加一张大图且显示出来. 2.点击往左转,往右转触发旋转方法. 3. 点击收起按钮,把1的步骤反过来 隐藏大图 显示小图. 4. 点击查看原图功能 目前没有做成js灯箱效果,直接打开一个新连接.但是如果想做成灯箱效果的话,可以看我这篇博客,灯箱效果演示 我们可以