宝塔做两个网站6,西安的网站设计与制作首页,扁平风格 网站模板,推广赚钱平台前言 这几天有时间看了下UICollectionView的东西#xff0c;才发觉它真的非常强大#xff0c;很有必要好好学习学习。以前虽然用过几次#xff0c;但没有系统的整理总结过。这两天我为UICollectionView做一个比较全面的整理。包括基本使用#xff0c;自定义布局#xff0c… 前言 这几天有时间看了下UICollectionView的东西才发觉它真的非常强大很有必要好好学习学习。以前虽然用过几次但没有系统的整理总结过。这两天我为UICollectionView做一个比较全面的整理。包括基本使用自定义布局自定义插入删除动画自定义转场动画等几部分。好了开始。 UICollectionView相对于UITableView可以说是青出于蓝而胜于蓝它和UITableView很相似但它要更加强大。UITableView的布局形式比较单一局限于行列表而UICollectionView的强大之处在于把视图布局分离出来成为一个独立的类你想实现怎样的视图布局就子类化这个类并在其中实现。 UICollectionView基础 UICollectionViewFlowLayout视图布局对象流视图一行排满自动排到下行继承自UICollectionViewLayout。UICollectionViewLayout有个collectionView属性所有的视图布局对象都继承自UICollectionViewLayout。若我们要自定义布局对象我们一般继承UICollectionViewFlowLayout就可以了。需要实现三个协议UICollectionViewDataSource数据源、UICollectionViewDelegateFlowLayout视图布局、UICollectionViewDelegate。可以看得出除了视图布局UICollectionView几乎和UITableView一样但这也正是它的强大之处。1.创建UICollectionView视图 - (void)loadCollectionView
{_customLayout [[CustomCollectionViewLayout alloc] init]; // 自定义的布局对象_collectionView [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:_customLayout];_collectionView.backgroundColor [UIColor whiteColor]; _collectionView.dataSource self; _collectionView.delegate self; [self.view addSubview:_collectionView]; // 注册cell、sectionHeader、sectionFooter [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:cellId]; [_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerId]; [_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:footerId]; } 需要注意的是这几行代码的位置及const的位置。我经常搞乱 implementation YWViewController// 注意const的位置
static NSString *const cellId cellId; static NSString *const headerId headerId; static NSString *const footerId footerId; - (void)viewDidLoad { 2.实现UICollectionViewDataSource的几个代理方法 #pragma mark ---- UICollectionViewDataSource- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{return 1; } - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { return _section0Array.count; } - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { UICollectionViewCell *cell [_collectionView dequeueReusableCellWithReuseIdentifier:cellId forIndexPath:indexPath]; cell.backgroundColor [UIColor purpleColor]; return cell; } // 和UITableView类似UICollectionView也可设置段头段尾 - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath { if([kind isEqualToString:UICollectionElementKindSectionHeader]) { UICollectionReusableView *headerView [_collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:headerId forIndexPath:indexPath]; if(headerView nil) { headerView [[UICollectionReusableView alloc] init]; } headerView.backgroundColor [UIColor grayColor]; return headerView; } else if([kind isEqualToString:UICollectionElementKindSectionFooter]) { UICollectionReusableView *footerView [_collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:footerId forIndexPath:indexPath]; if(footerView nil) { footerView [[UICollectionReusableView alloc] init]; } footerView.backgroundColor [UIColor lightGrayColor]; return footerView; } return nil; } - (BOOL)collectionView:(UICollectionView *)collectionView canMoveItemAtIndexPath:(NSIndexPath *)indexPath { return YES; } - (void)collectionView:(UICollectionView *)collectionView moveItemAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath*)destinationIndexPath { } #pragma mark ---- UICollectionViewDelegateFlowLayout - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { return (CGSize){cellWidth,cellWidth}; } - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section { return UIEdgeInsetsMake(5, 5, 5, 5); } - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section { return 5.f; } - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section { return 5.f; } - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section { return (CGSize){ScreenWidth,44}; } - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section { return (CGSize){ScreenWidth,22}; } #pragma mark ---- UICollectionViewDelegate - (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath { return YES; } // 点击高亮 - (void)collectionView:(UICollectionView *)collectionView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath { UICollectionViewCell *cell [collectionView cellForItemAtIndexPath:indexPath]; cell.backgroundColor [UIColor greenColor]; } // 选中某item - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath { } // 长按某item弹出copy和paste的菜单 - (BOOL)collectionView:(UICollectionView *)collectionView shouldShowMenuForItemAtIndexPath:(NSIndexPath *)indexPath { return YES; } // 使copy和paste有效 - (BOOL)collectionView:(UICollectionView *)collectionView canPerformAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(nullable id)sender { if ([NSStringFromSelector(action) isEqualToString:copy:] || [NSStringFromSelector(action) isEqualToString:paste:]) { return YES; } return NO; } // - (void)collectionView:(UICollectionView *)collectionView performAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(nullable id)sender { if([NSStringFromSelector(action) isEqualToString:copy:]) { // NSLog(-------------执行拷贝-------------); [_collectionView performBatchUpdates:^{ [_section0Array removeObjectAtIndex:indexPath.row]; [_collectionView deleteItemsAtIndexPaths:[indexPath]]; } completion:nil]; } else if([NSStringFromSelector(action) isEqualToString:paste:]) { NSLog(-------------执行粘贴-------------); } } UICollectionView自定义布局 要自定义UICollectionView布局就要子类化UICollectionViewLayout然后重写它的一些方法以达到我们自定义布局的需求。下来我们来看看UICollectionViewLayout类里一些比较重要的方法 - (void)prepareLayout;为layout显示做准备工作你可以在该方法里设置一些属性。- (CGSize)collectionViewContentSize;返回layout的size。- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect;返回在collectionView的可见范围内(bounds)所有item对应的layoutAttrure对象装成的数组。collectionView的每个item都对应一个专门的UICollectionViewLayoutAttributes类型的对象来表示该item的一些属性比如bounds,size,transform,alpha等。- (UICollectionViewLayoutAttributes )layoutAttributesForItemAtIndexPath:(NSIndexPath )indexPath;传入indexPath返回该indexPath对应的layoutAtture对象。- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds; 当当前layout的布局发生变动时是否重写加载该layout。默认返回NO若返回YES则重新执行这俩方法 - (void)prepareLayout;- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect;- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity;返回layout“最终”的偏移量何谓“最终”手指离开屏幕时layout的偏移量不是最终的因为它有惯性当它停止时才是“最终”偏移量。下面这两个方法一般用于自定义插入删除时的动画后面再说。 - (UICollectionViewLayoutAttributes )initialLayoutAttributesForAppearingItemAtIndexPath:(NSIndexPath )itemIndexPath; - (nullable UICollectionViewLayoutAttributes )finalLayoutAttributesForDisappearingItemAtIndexPath:(NSIndexPath )itemIndexPath; 本Demo的代码虽然子类化了UICollectionViewLayout但是主要是用于自定义插入删除动画所以本段没什么代码展示。 UICollectionView插入删除的操作及动画 插入删除的操作 添加在哪触发 UIBarButtonItem *btnItem [[UIBarButtonItem alloc] initWithTitle:添加style:UIBarButtonItemStylePlaintarget:self action:selector(addItemBtnClick:)]; self.navigationItem.rightBarButtonItem btnItem; 添加的实现 // 添加插入item
- (void)addItemBtnClick:(UIBarButtonItem *)btnItem
{[_collectionView performBatchUpdates:^{// 构造一个indexPath NSIndexPath *indePath [NSIndexPath indexPathForItem:_section0Array.count inSection:0]; [_collectionView insertItemsAtIndexPaths:[indePath]]; // 然后在此indexPath处插入给collectionView插入一个item [_section0Array addObject:x]; // 保持collectionView的item和数据源一致 } completion:nil]; } 因为是练习Demo所以暂时把删除的触发源写在了长按某Item弹出菜单的copy按钮里。实际中你可以自定义UICollectionViewCell添加长按手势长按抖动出现叉号然后删除等随你怎么做。 // copy and paste 的实现
- (void)collectionView:(UICollectionView *)collectionView performAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(nullable id)sender { if([NSStringFromSelector(action) isEqualToString:copy:]) { // NSLog(-------------执行拷贝-------------); [_collectionView performBatchUpdates:^{ [_section0Array removeObjectAtIndex:indexPath.row]; [_collectionView deleteItemsAtIndexPaths:[indexPath]]; } completion:nil]; } else if([NSStringFromSelector(action) isEqualToString:paste:]) { NSLog(-------------执行粘贴-------------); } } 插入删除的动画 上面已经提到了在UICollectionViewLayout类中有两个用于自定义动画的方法两个方法分别表示动画的起始状态和终止状态我们可以分别在方法里设置layoutAttrure来实现某种动画效果。 苹果选择了一种安全的途径去实现一个简单的淡入淡出动画作为所有布局的默认动画。如果你想实现自定义动画最好的办法是子类化 UICollectionViewFlowLayout 并且在适当的地方实现你的动画。 一般来说我们对布局属性从初始状态到结束状态进行线性插值来计算 collection view 的动画参数。然而新插入或者删除的元素并没有最初或最终状态来进行插值。要计算这样的 cells 的动画collection view 将通过 initialLayoutAttributesForAppearingItemAtIndexPath: 以及 finalLayoutAttributesForDisappearingItemAtIndexPath: 方法来询问其布局对象以获取最初的和最后的属性。苹果默认的实现中对于特定的某个 indexPath返回的是它的通常的位置但 alpha 值为 0.0这就产生了一个淡入或淡出动画。 简而言之就是苹果自带了插入删除时Item的淡入淡出的动画若你想自定义更炫的动画就子类化UICollectionViewFlowLayout类并重写以下两个方法 // 初始状态
- (nullable UICollectionViewLayoutAttributes *)initialLayoutAttributesForAppearingItemAtIndexPath:(NSIndexPath *)itemIndexPath
{UICollectionViewLayoutAttributes *attr [self layoutAttributesForItemAtIndexPath:itemIndexPath]; attr.center CGPointMake(CGRectGetMidX(self.collectionView.bounds), CGRectGetMaxY(self.collectionView.bounds)); attr.transform CGAffineTransformRotate(CGAffineTransformMakeScale(0.2, 0.2), M_PI); return attr; } // 终结状态 - (nullable UICollectionViewLayoutAttributes *)finalLayoutAttributesForDisappearingItemAtIndexPath:(NSIndexPath *)itemIndexPath { UICollectionViewLayoutAttributes *attr [self layoutAttributesForItemAtIndexPath:itemIndexPath]; attr.alpha 0.0f; return attr; } insertdelete.gif UICollectionView的转场动画 http://objccn.io/issue-12-5/ 转载于:https://www.cnblogs.com/Free-Thinker/p/6737701.html
