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

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

首先给大家看一下这个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 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 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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。