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

2019-10-21 18:49:50

字体：大中小

来源：转载

供稿：网友

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

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

uicollectionview拖动,ios,uicollectionview,uicollectionview详解

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; }

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

注：相关教程知识阅读请移步到IOS开发频道。

上一篇：详解IOS开发之实现App消息推送（最新）

下一篇：iOS学习笔记（十六）——详解数据库操作(使用FMDB)