uicollectionview拖动 使用iOS控件UICollectionView生成可拖动的桌面的实例
HelloWord杰少 人气:0一个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; }
加载全部内容