九宫格排列与浏览的简单功能

一、九宫格布局

　　在浏览各种微博、QQ空间、在网购等时候都可以注意到显示的图片是由九宫格来布局完成的。开发者为其限定了最大个数--9。当然，有一张就添加一张，最多不过九张。那就拿微博为例来实现其功能。以下是其初始的图。

二、代码及实现效果

（1）步骤：

1. 新建一个工程，并创建一个WBImageView的类，使其继承于UIView。
2. 创建一个WBImageItem类，继承于UIImageIView。
3. 根据设置的背景图片循环创建九个imageView的位置。计算每个iamgeView的位置和大小（包括高度的计算）。
4. 而后，给ImageItem添加手势，可以放大浏览，放大的时候需要记录原始的frame，方便恢复原样。还可以缩小回原图原位置，方法的要获取新的坐标系统的frame。这一些代码可以写在item里面。
5. 关于图片滑动，就是将图片加载到scrollView上，滑动之后获取对应的index，在缩小（返回原始）的时候恢复在对应的位置。如图

　　在做的过程中需要注意的地方就是：1.数据的传值问题（_imageList数组）；2.在放大之后又要返回，则需要记住其原始的位置和大小；3.在变换的时候需要用到转换坐标系方法--- (CGPoint)convertPoint:(CGPoint)point toView:(UIView *)view;）；4.图片都是放在scrollView上的，可以进行放大缩小滑动；5.在放大之后，注意一些细节问题--隐藏的要显示，而后将其放回原父视图上；6.缩小的道理只是将放大过程逆向返回。

　　读者看到的放大过程，就是图片放大了，达到一定的大小之后就隐藏了（右侧图），而已经添加到scrollView上的就会显示出来（左侧图），这就是错觉，以为是一张图，其实是两张。所以要隐藏，完成放大之后要显示。同样 缩小的也是这个原理。

    

 （2）导入的头文件：

//WBImageView.h 中
#import "WBImageView.h"
#import "WBImageItem.h"
#import "UIImageView+WebCache.h"//针对于ImageView的第三方

//WBImageViewController中
#import "WBImageViewController.h"
#import "WBImageView.h"
#import "UIImageView+WebCache.h"

（3）主要代码

viewController.m 

//在viewDidLoad中
WBImageView *wbImageView = [[WBImageView alloc] initWithFrame:CGRectMake(0, 100, [UIScreen mainScreen].bounds.size.width, 300)];
    
    wbImageView.backgroundColor = [UIColor orangeColor];
    //图片的链接
    wbImageView.imageList = @[
                              @"http://a.vpimg2.com/upload/merchandise/20348/W-TU-3122934087-33-1.jpg",
                              @"http://img.kumi.cn/photo/5a/15/b7/5a15b7cb955fb13e.jpg",
                              @"http://pic.nipic.com/2007-11-09/2007119122519868_2.jpg",
                              @"http://pic.nipic.com/2007-11-09/200711912230489_2.jpg",
                              @"http://www.xxjxsj.cn/article/UploadPic/2009-10/2009101018545196251.jpg",
                              @"http://pica.nipic.com/2008-03-19/2008319183523380_2.jpg",
                              @"http://pic14.nipic.com/20110522/7411759_164157418126_2.jpg",
                              @"http://h.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c812f9fe0e1be3eb13533fa400b.jpg",
                              @"http://pic27.nipic.com/20130201/3789536_092151001379_2.jpg"                              
                              ];
    
    [self.view addSubview:wbImageView];

 WBImageIvew.m 

#warning 用class 声明一下  否则会循环引用
@class WBImageItem;
@interface WBImageView : UIView
@property (nonatomic, copy) NSArray *imageList;//存放图片的数组
/**
 *  方法说明：返回做缩小动画时  获取做动画的item
 *
 *  @param  currentIndex：大图浏览时浏览到的图片的位置
 *
 *  @return
 */
- (WBImageItem *)getItemForIndex:(int)currentIndex;

 WBImageIvew.h中要设置一个NSArray属性，来保存外部传入的URL。

#define kItemWH (self.frame.size.width -20)/3
#define kItemSpace 10

@implementation WBImageView
{    
    WBImageItem *_item;
}
- (id)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
    }
    return self;
}

- (void)setImageList:(NSArray *)imageList {
    _imageList = imageList;
    [self creatSubviews];
}

//创建图片
- (void)creatSubviews {
    int  index = 0;
    for (NSString *url in _imageList) {
        _item = [[WBImageItem alloc] initWithFrame:[self getItemFrameAtIndex:index]];
//        [_item setImageWithURL:[NSURL URLWithString:url]];        
        _item.backgroundColor = [UIColor greenColor];        
        _item.tag = 1000 + index;
        
        //传值给item的imageList属性
        _item.imageList = _imageList;
        
        //需要给 原始的赋值才可以显示在controller中
        _item.originFrame = _item.frame;
        _item.originSupview = self;
        _item.index = index;
        
        [self addSubview:_item];        
        index ++;
    }    
    CGFloat height = [self getWBImageViewHeight:(int)_imageList.count];    
    CGRect frame = self.frame;
    frame.size.height = height;    
    self.frame = frame;
    
}

- (CGRect)getItemFrameAtIndex:(int)index {
    /*
     0-2  x: index*(宽+间距)
          y: 0     
     3-5  x: （index%3）*(宽+间距)
          y： (高+间距)     
     6-8  x: （index%3）*(宽+间距)
          y：（index/3）(高+间距)
     */      
    CGFloat x = index % 3 * (kItemWH + kItemSpace);
    CGFloat y = index / 3 * (kItemWH + kItemSpace);
    
    return CGRectMake(x, y, kItemWH, kItemWH);
}
+ (CGFloat)getWBImageViewHeight:(int)count {
        /*
     1-3 1*kItemWH
     4-6 2*kItemWH + 1*kItemSpace
     7-9 3*kItemWH + 2*kItemSpace     
     */    
    CGFloat height = ((count - 1) / 3 +1 ) * kItemWH + (count - 1) / 3 * kItemSpace;    
    return height;
}

 WBImageItem.h设置一些属性用于存储接收等。

//避免循环引用
@class WBImageView;
@interface WBImageItem : UIImageView
@property (nonatomic, copy)NSArray *imageList;//存放图片的数组
@property (nonatomic, assign) int index;// item在父视图上的位置
@property (nonatomic, assign) CGRect originFrame;//在原始父视图上的原始坐标
@property (nonatomic, strong) WBImageView *originSupview;//item原始的父视图
/**
 *  方法说明： 获取item 在新的坐标系统 （新的界面）上的frame
 *
 *  @param  originFrame：item原始的frame
 *
 *  @return
 */
- (CGRect)getItemFrameAtWindow:(CGRect)originFrame;

WBImageItem.m的代码如下。

#import "WBImageItem.h"
#import "WBImageViewController.h"
#import "UIView+UIViewController.h"

@implementation WBImageItem
- (id)initWithFrame:(CGRect)frame {    
    if (self = [super initWithFrame:frame]) {
        //开启触摸
        self.userInteractionEnabled = YES;
        //禁止拉伸
        self.contentMode = UIViewContentModeScaleAspectFit;        
        [self addGesture];        
    }
    return self;    
}

//点击手势
- (void)addGesture {    
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapAction)];    
    //添加点击手势
    [self addGestureRecognizer:tap];    
}

- (void)tapAction {    
    WBImageViewController *controler = [[WBImageViewController alloc] init];    
    controler.imageList = _imageList;    
    //将点击的图片设置为大图，浏览当前图片，用来做动画
    controler.currentItem = self;
    controler.currentIndex = self.index;    
    [self.viewController presentViewController:controler animated:NO completion:nil];
}
- (void)setImageList:(NSArray *)imageList {    
    _imageList = imageList;
}
/**
 *  方法说明： 获取item 在新的坐标系统 （新的界面）上的frame
 *
 *  @param  originFrame：item原始的frame
 *
 *  @return
 */
- (CGRect)getItemFrameAtWindow:(CGRect)originFrame {
    
    CGRect newFrame = [self.superview convertRect:originFrame toView:self.window];
    
    return newFrame;
}
@end

WBImageViewController.h设置属性

@property (nonatomic, copy) NSArray *imageList;
@property (nonatomic, strong) WBImageItem *currentItem;//点击的图片显示在当前页面
@property (nonatomic, assign) int currentIndex;//当前在浏览界面看到的图片位置属性
// 1. 刚刚进入时 currentItem.index
// 2. 根据scrollView  的滚动的偏移量计算

WBImageViewController.m双击放大（缩小）要返回图片，利用图片的tag值（- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView）来获取。

#define kSelfViewWidth self.view.frame.size.width
#define kSelfViewHeight self.view.frame.size.height
@interface WBImageViewController ()
{
    UIScrollView *_supScrollView;//图片的滚动浏览视图    
    NSMutableArray *_subScroollViews; 
}
@end

@implementation WBImageViewController
- (void)viewDidLoad {
    [super viewDidLoad];    
    //把当前页面的item 放到当前的页面
    self.currentItem.frame = [self.currentItem getItemFrameAtWindow:self.currentItem.originFrame];    
    [self.view.window addSubview:self.currentItem];
#warning 需要在 item中给原始的originFrame赋值    
    [self.view addSubview:self.currentItem];    
    [self createSubviews];   
}

- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];
    //放大动画
    [UIView animateWithDuration:.35 animations:^{        
        self.currentItem.frame = self.view.bounds;
    }  completion:^(BOOL finished) {        
        //动画结束之后，显示
        _supScrollView.hidden = NO;        
        //放回原父视图上
        self.currentItem.frame = self.currentItem.originFrame;
#warning 虽然在.h中已经导入，但是还需导入
        WBImageView *wbImageView = self.currentItem.originSupview;        
        [wbImageView addSubview:self.currentItem];
    }];    
}

//获取imageList的传值 不调用set的话 ，可以直接使用 _imageList = self.imageList;
- (void)setImageList:(NSArray *)imageList {    
    _imageList = imageList;
}

- (void)createSubviews {    
//   1. 初始化图片浏览的scrollView
    _supScrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];    
    _supScrollView.delegate = self;    
    _supScrollView.pagingEnabled = YES;//翻页    
    //默认隐藏，否则会出现两张图片
    _supScrollView.hidden = YES;    
    _supScrollView.contentSize = CGSizeMake(kSelfViewWidth * _imageList.count, kSelfViewHeight);    
    _supScrollView.contentOffset = CGPointMake(kSelfViewWidth * self.currentIndex, 0);    
    [self.view addSubview:_supScrollView];    
//   2.创建图片的显示控件    
    _subScroollViews = [[NSMutableArray alloc] init];    
    int index = 0;
    for (NSString *url in _imageList) {        
        //第一层scrollView
        UIScrollView *subScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(kSelfViewWidth * index, 0, kSelfViewWidth, kSelfViewHeight)];
        subScrollView.contentSize = CGSizeMake(kSelfViewWidth, kSelfViewHeight);        
        subScrollView.delegate = self;        
        //设置放大缩小倍数
        subScrollView.maximumZoomScale = 2.f;
        subScrollView.minimumZoomScale = .5f;        
        [_supScrollView addSubview:subScrollView];
        [_subScroollViews addObject:subScrollView];       
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:subScrollView.bounds];
        //禁止图片拉伸
        imageView.contentMode = UIViewContentModeScaleAspectFit;
        //默认是关闭的
        imageView.userInteractionEnabled = YES;        
        imageView.tag = 20001;        
        UIImageView *smallImageView = [[UIImageView alloc] initWithFrame:imageView.bounds];
        [smallImageView setImageWithURL:[NSURL URLWithString:url]];        
        NSString *largeImageUrl = [url stringByReplacingOccurrencesOfString:@"thumbnail" withString:@"large"];        
        [imageView setImageWithURL:[NSURL URLWithString:largeImageUrl] placeholderImage:smallImageView.image];        
        [smallImageView removeFromSuperview];
        smallImageView = nil;        
        [subScrollView addSubview:imageView];        
        //添加点击手势
        UITapGestureRecognizer *tap1 = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(dismiss)];
        [imageView addGestureRecognizer:tap1];
        //双击手势
        UITapGestureRecognizer *tap2 = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapActionTwo)];        
        //numberOfTapsRequired 点击的次数
        tap2.numberOfTapsRequired = 2;
        //numberOfTouchesRequired 触摸点的个数
        tap2.numberOfTouchesRequired = 1;
        [imageView addGestureRecognizer:tap2];
        //双击优先
        [tap1 requireGestureRecognizerToFail:tap2];
        index ++;
    }
}

//双击放大
- (void)tapActionTwo {    
    UIScrollView *scrollView = [_subScroollViews objectAtIndex:self.currentIndex];    
    [UIView animateWithDuration:.35 animations:^{        
        scrollView.zoomScale = scrollView.zoomScale == 1.0f ? 2.0f : 1.0f;        
    }];   
}

//给图片一个点击手势，使其返回
- (void)dismiss {    
    [self dismissViewControllerAnimated:NO completion:nil];    
    //缩小动画实现
    WBImageView *wbImageView = self.currentItem.originSupview;    
    WBImageItem *item = [wbImageView getItemForIndex:self.currentIndex];    
    //再次将图片放回到原来View上
    CGPoint newPoint = [self.view convertPoint:CGPointZero toView:wbImageView];
    //大小
    CGRect frame = item.frame;
    //位置=新的位置
    frame.origin = newPoint;
    //大小=屏幕大小
    frame.size = self.view.frame.size;
    //重新复制给item
    item.frame = frame;    
//    动画实现
    [wbImageView bringSubviewToFront:item];    
    [UIView animateWithDuration:.35 animations:^{        
        item.frame = item.originFrame;
    }];
}

#pragma mark- UIScrollViewDelegate
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
        if (scrollView != _supScrollView) {        
        return [scrollView viewWithTag:20001];
    }
    return nil;
}
//此方法实现的是点击缩小之后，恢复到对应的原位置
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    //要分清楚
    if (scrollView == _supScrollView) {
        //获得最新滚动的界面的index属性
        int newIndex = (int)scrollView.contentOffset.x/kSelfViewWidth;        
        if (self.currentIndex == newIndex) {            
            return;
        }else {            
            self.currentIndex = newIndex;
        }
    }    
}

@end

另外，在WBImageView.m中写一个方法，并开放出来，在WBImageViewController中缩小的时候使用。

/**
 *  方法说明：返回做缩小动画时  获取做动画的item
 *
 *  @param  currentIndex：大图浏览时浏览到的图片的位置
 *
 *  @return
 */
- (WBImageItem *)getItemForIndex:(int)currentIndex {    
    WBImageItem *item = (WBImageItem *)[self viewWithTag:1000 + currentIndex];    
    return item;    
}

以上需要第三方的文档。代码下载路径http://pan.baidu.com/s/1o6KQYAQ

实现效果如下图 

可以看到，图片大小不一样，这是设置了图片禁止拉伸的原因（self.contentMode = UIViewContentModeScaleAspectFit；

    UIViewContentModeScaleToFill,//以宽为基准，对高度进行对应比例拉伸或压缩

    UIViewContentModeScaleAspectFit,//不改变原来大小 

    UIViewContentModeScaleAspectFill,//以高为基准，对宽度进行对应比例拉伸或压缩

）

以上文章是博主原创文章，转载请标明出处。