使用iOS 控件 UICollectionView 生成可拖动的桌面

一个App受欢迎的程度，一方面来源于它本身为用户提供便捷的功能，另一方面则来源于它的UI。UI是用户体验重要的组成部分，构成UI的的元素恰恰离不开那些看似独立的控件。在开发的过程中，大家对UITableView应该很熟悉吧！确实UITableView在处理数据显示方面有着很强大的功能，例如网红们使用的微博，微信社交软件的聊天界面等等，这种流式布局使用UITableView简直最合适不过了；但毕竟UITableView不是万能的，当需要显示横纵向的数据时它就显得捉襟见肘了，虽然这也难不倒我们程序猿但是何必要大费周章的去定义复杂的cell呢！UICollectionView就是专门用来应付这种布局的,使用UICollectionView可以给我们带来以下几点优势：1.可以高度的定制内容展示的样式 2.高效的管理大量的数据。如果大家想加深层次去了解UICollectionView，可以看下这篇文章。

首先给大家看一下这个Demo的效果图：

iOS设备不知道现在有没有可以屏幕录制的app,这样我就可以把操作的动作用gif图片po上来了，大家如果有推荐可以告诉我哈！关于拖动，长按图片后就可以将图片拖到你想要的位置上，另外的图片则会依次排序，很顺畅的体验。

在使用UICollectionView的时后，我们的类需要实现这些协议:UICollectionViewDataSource,UICollectionViewDelegateFlowLayout,

UICollectionViewDelegate,UIGestureRecognizerDelegate。

UICollectionViewDataSource：和我们在UITableView中所需要实现的UITableViewDataSource是一个道理，它里面包括以下这些API：

@protocol UICollectionViewDataSource <NSObject>
@required

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section;

// The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;

@optional

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView;

// The view that is returned must be retrieved from a call to -dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath;

- (BOOL)collectionView:(UICollectionView *)collectionView canMoveItemAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(9_0);
- (void)collectionView:(UICollectionView *)collectionView moveItemAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath*)destinationIndexPath NS_AVAILABLE_IOS(9_0);

@end

UICollectionViewDelegateFlowLayout：UICollectionViewFlowLayout是一个专门用来管理collectionView布局的类,可以通过实现以下函数来调

整我们界面的样式：

@protocol UICollectionViewDelegateFlowLayout <UICollectionViewDelegate>
@optional

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section;
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;

@end

UICollectionViewDelegate：和UITableViewDelegate一样，这里就把它协议里面的的函数po出来了,通过重写里面的函数，我们可以实现cell的点

击与拖动。

UIGestureRecognizerDelegate：由于我们还有一个拖动的功能，所以需要实现用户手势的协议。

好了，基础的概念讲了，现在我们就开始动手实现他吧！老样子直接看源码：

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    //设置背景色
    [self.view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"back.jpg"]]];
    //设置数据源
    self.dataSource = [[NSMutableArray alloc] initWithObjects:
                       @"1.png",@"2.png",@"3.png", @"4.png", @"5.png", @"6.png", @"7.png", @"8.png", @"9.png", @"10.png", @"11.jpg", @"12.JPG",
                       @"13.JPG", @"14.jpg", @"15.JPG", @"16.png", @"17.png", @"18.png", @"19.png", @"20.png", nil];
    //初始化布局
    self.flow = [[UICollectionViewFlowLayout alloc] init];
    self.collect = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:self.flow];
    [self.collect setBackgroundColor:[UIColor clearColor]];
    
    //注册cell 这一步必须要实现
    [self.collect registerClass:[CustomCollectionCell class] forCellWithReuseIdentifier:@"CustomCell"];
    
    self.collect.delegate = self;
    self.collect.dataSource = self;
    
    [self.collect setFrame:self.view.bounds];
    
    //添加长按手势
    self.longPressGestureRecognizer = [[UILongPressGestureRecognizer alloc] init];
    [self.longPressGestureRecognizer addTarget:self action:@selector(handleLongPressRecognizer:)];
    [self.collect addGestureRecognizer:self.longPressGestureRecognizer];
    
    [self.view addSubview:self.collect];
}

在viewDidLoad函数中，初始化了一个UICollectionViewFlowLayout布局，并且需要配合UICollectionView来使用，两者加一起来使用才能“完美”，

想比UITableView 中Cell使用的不同，在UICollectionView中必须先对Cell进行注册(RegisterClass)，不然会在运行过程中报错。如何使排列的图片可以拖动呢，在这里我为UICollectionView添加了一个长按手势UILongPressGestureRecognizer。当我们长按时会触发handleLongPressRecognizer，代码如下：

- (void)handleLongPressRecognizer:(UILongPressGestureRecognizer *)gesture{
    switch (gesture.state) {
        case UIGestureRecognizerStateBegan:{
            NSIndexPath *path = [self.collect indexPathForItemAtPoint:[gesture locationInView:gesture.view]];
            if(path == nil){
                break;
            }
            
            [self.collect beginInteractiveMovementForItemAtIndexPath:path];
        }
            break;
        case UIGestureRecognizerStateChanged:
            [self.collect updateInteractiveMovementTargetPosition:[gesture locationInView:gesture.view]];
            break;
        case UIGestureRecognizerStateEnded:
            [self.collect endInteractiveMovement];
            break;
        default:
            [self.collect cancelInteractiveMovement];
            break;
    }
}

好看的界面才能抓住用户的心，这里我自定义了Cell继承自UICollectionViewCell，cell中展示的图片会根据自身图片的大小进行按比例缩放，这样

我们的桌面看上去就会有横版图片与竖版图片，如果不自定义的话就都是方方正正的九宫格，还是花点心思自定义一下显示效果吧！CustomCollectionCell的的代码如下：

#import "CustomCollectionCell.h"

@implementation CustomCollectionCell
@synthesize imageV = _imageV;
@synthesize labelV = _labelV;
@synthesize boundView = _boundView;

- (id)initWithFrame:(CGRect) frame{
    self = [super initWithFrame:frame];
    //init attributes
    if(self){
        [self setBackgroundColor:[UIColor clearColor]];
        self.imageV = [[UIImageView alloc] initWithFrame:CGRectZero];
        self.labelV = [[UILabel alloc] initWithFrame:CGRectZero];
        self.boundView = [[UIView alloc] initWithFrame:CGRectZero];
        [self.boundView setBackgroundColor:[UIColor whiteColor]];
        [self.boundView addSubview:self.imageV];
        [self addSubview:self.boundView];
        [self addSubview:self.labelV];
    }
    
    return self;
}

- (void)setImageWithText:(UIImage *)image text:(NSString *)text{
    if(!image){
        return;
    }
    
    CGFloat imgWidth = image.size.width;
    CGFloat imgHeight = image.size.height;
    CGFloat iconWidth = 0.0;
    CGFloat iconHeight = 0.0;
    
    if(imgWidth > imgHeight){
        iconHeight = roundf(((self.frame.size.width - 16)*imgHeight)/imgWidth);
        iconWidth = self.frame.size.width - 16;
        [self.boundView setFrame:CGRectMake(0, self.frame.size.height - iconHeight - 16, iconWidth + 16, iconHeight + 16)];
        [self.imageV setFrame:CGRectMake(8, 8, iconWidth, iconHeight)];
    }else{
        iconWidth = roundf(((self.frame.size.width - 16) *imgWidth)/imgHeight);
        iconHeight = self.frame.size.height - 16;
        [self.boundView setFrame:CGRectMake(roundf((self.frame.size.width - iconWidth)/2), 0, iconWidth + 16, iconHeight + 16)];
        [self.imageV setFrame:CGRectMake(8, 8, iconWidth, iconHeight)];
    }
    
    [self.imageV setImage:image];
}



@end

以上这些就是构成该Demo的重要组成部分了，UICollectionView还有很多的要素在这里面没有讲到，往后我还会再研究这个控件更加高级的

的使用，本篇就好比是餐前的开胃小菜吧，希望大家喜欢。附上这个例子的源码：

@implementation ViewController
@synthesize dataSource = _dataSource;
@synthesize longPressGestureRecognizer = _longPressGestureRecognizer;
@synthesize flow = _flow;
@synthesize collect = _collect;

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    //设置背景色
    [self.view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"back.jpg"]]];
    //设置数据源
    self.dataSource = [[NSMutableArray alloc] initWithObjects:
                       @"1.png",@"2.png",@"3.png", @"4.png", @"5.png", @"6.png", @"7.png", @"8.png", @"9.png", @"10.png", @"11.jpg", @"12.JPG",
                       @"13.JPG", @"14.jpg", @"15.JPG", @"16.png", @"17.png", @"18.png", @"19.png", @"20.png", nil];
    //初始化布局
    self.flow = [[UICollectionViewFlowLayout alloc] init];
    self.collect = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:self.flow];
    [self.collect setBackgroundColor:[UIColor clearColor]];
    
    //注册cell 这一步必须要实现
    [self.collect registerClass:[CustomCollectionCell class] forCellWithReuseIdentifier:@"CustomCell"];
    
    self.collect.delegate = self;
    self.collect.dataSource = self;
    
    [self.collect setFrame:self.view.bounds];
    
    //添加长按手势
    self.longPressGestureRecognizer = [[UILongPressGestureRecognizer alloc] init];
    [self.longPressGestureRecognizer addTarget:self action:@selector(handleLongPressRecognizer:)];
    [self.collect addGestureRecognizer:self.longPressGestureRecognizer];
    
    [self.view addSubview:self.collect];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)handleLongPressRecognizer:(UILongPressGestureRecognizer *)gesture{
    switch (gesture.state) {
        case UIGestureRecognizerStateBegan:{
            NSIndexPath *path = [self.collect indexPathForItemAtPoint:[gesture locationInView:gesture.view]];
            if(path == nil){
                break;
            }
            
            [self.collect beginInteractiveMovementForItemAtIndexPath:path];
        }
            break;
        case UIGestureRecognizerStateChanged:
            [self.collect updateInteractiveMovementTargetPosition:[gesture locationInView:gesture.view]];
            break;
        case UIGestureRecognizerStateEnded:
            [self.collect endInteractiveMovement];
            break;
        default:
            [self.collect cancelInteractiveMovement];
            break;
    }
}

#pragma mark UICollectionViewDataSource
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return self.dataSource.count;
}

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 1;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    CustomCollectionCell * cell = (CustomCollectionCell *)[collectionView dequeueReusableCellWithReuseIdentifier:@"CustomCell" forIndexPath:indexPath];
    UIImage *image = [UIImage imageNamed:[self.dataSource objectAtIndex:indexPath.row]];
    [cell setImageWithText:image text:@""];
    
    return cell;
}

- (BOOL)collectionView:(UICollectionView *)collectionView canMoveItemAtIndexPath:(NSIndexPath *)indexPath{
    return YES;
}

- (void)collectionView:(UICollectionView *)collectionView moveItemAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath*)destinationIndexPath{
    
    id item = [self.dataSource objectAtIndex:sourceIndexPath.item];
    [self.dataSource removeObject:item];
    
    [self.dataSource insertObject:item atIndex:destinationIndexPath.item];
}

#pragma mark UICollectionViewDelegate
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    TestViewController *test = [[TestViewController alloc] initWithNibName:@"TestViewController" bundle:nil];
    NSString *imageName = [self.dataSource objectAtIndex:indexPath.row];
    test.imageName = imageName;
    
    [self.navigationController pushViewController:test animated:YES];
}

- (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath{
    return YES;
}

//选中放大效果
- (void)collectionView:(UICollectionView *)collectionView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath{
//    CustomCollectionCell * cell = (CustomCollectionCell *)[collectionView cellForItemAtIndexPath:indexPath];
//    
//    [UIView animateWithDuration:1 animations:^{
//        cell.transform = CGAffineTransformMakeScale(2.0f, 2.0f);
//    }];
}

//缩小效果
- (void)collectionView:(UICollectionView *)collectionView didUnhighlightItemAtIndexPath:(NSIndexPath *)indexPath{
//    CustomCollectionCell * cell = (CustomCollectionCell *)[collectionView cellForItemAtIndexPath:indexPath];
//    
//    [UIView animateWithDuration:1 animations:^{
//        cell.transform = CGAffineTransformMakeScale(1.0f, 1.0f);
//    }];
}


#pragma mark UICollectionViewDelegateFlowLayout
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    
    return CGSizeMake(100, 100);
}

/*
 * 上左下右间距
 */
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    
    return UIEdgeInsetsMake(15, 15, 15, 15);
}

/*
 *  item space
 */
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
    
    return 8;
}

/*
 * 行距 20
 */
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
    
    return 10;
}

使用iOS 控件 UICollectionView 生成可拖动的桌面

大家可以关注我的微信公众号与我互动，相关问题也可以直接用公众号联系我：

使用iOS 控件 UICollectionView 生成可拖动的桌面

使用iOS 控件 UICollectionView 生成可拖动的桌面

继续阅读

iWatch 开发 1: 你想知道的 iWatch App 开发

UILongpressGestureRecognizer，长按之后可以随意在当前view和其父View上移动的问题

UICollectionView & UITableView 重用问题

UICollectionView解决item之间的间隙问题UICollectionView解决item之间的间隙问题

iOS_Swift之UICollectionView详解

UICollectionView 图片显示空白的原因

iOS开发之文件操作（一个简单的文件操作类）

iOS 开发之 UI 结构解析，让开发更简单

iOS 开发之实现一个APP界面框架

【iOS】The behavior of the UICollectionViewFlowLayout is not defined because:

UICollectionView 为每个section 添加headerview

UICollectionView 横向滑动停止的两种效果。

UICollectionView的item长按移动编辑

iOS音视频AVPlayer视频播放

iOS 关于UICollectionView的cell重用问题