mac、iOS端支持自定义布局的collection控件的实现与设计
2017-12-07 14:29
453 查看
介绍
collection控件用来实现界面的各种自定义布局,最常用其作为横向、竖向的布局控件。很早之前,系统对于collection的支持并不是很好。所以自己实现了支持自定义布局、自定义cell的collection控件。自定义的collection可以满足所有的产品特殊需求及动态效果,例如在某些特殊情况下可能需要除选中cell之外的其它cell执行布局动画等。在collection的基础之上,我又实现了支持cell拖动、拖离窗体的tabview控件。本文主要介绍自定义collection的设计与实现,后续持续更新多tab的tabview控件。我有几张阿里云幸运券分享给你,用券购买或者升级阿里云相应产品会有特惠惊喜哦!把想要买的产品的幸运券都领走吧!快下手,马上就要抢光了。
产品中的一些实现效果
![](http://ata2-img.cn-hangzhou.img-pub.aliyun-inc.com/8e10cfb039b894c9d4b8b2e7f0921a2d.png)
mac旺旺表情面板,实现grid与横向布局
![](http://ata2-img.cn-hangzhou.img-pub.aliyun-inc.com/d4af338b6438da160c7d8fb6555c5ff9.png)
mac千牛工作台用作横向布局
![](http://ata2-img.cn-hangzhou.img-pub.aliyun-inc.com/39e70d0a53d8e25b511a94daca7aa2ea.png)
iOS千牛历史登录页面实现当前选中cell变大并且选中cell总中最中位置校准动效的效果
collection
collection主要包括:继承scrollview的collectionView,数据源协议collectionViewDataSource,事件响应协议collectoinViewDelegate,布局基类collectoinLayout以及展示单元collectionCellView。模块图如下:
![](http://ata2-img.cn-hangzhou.img-pub.aliyun-inc.com/c35e08cb7d460773d512bd651172bd53.png)
collectionView
collection容器包含指实现collectionViewDataSource、collectoinViewDelegate协议的指针以及collectoinLayout成员,同时维护collectoinCellView的控件重用。@interface WWCollectionView : NSScrollView // 布局对象 @property (retain) WWCollectionViewLayout *layout; // 数据源 @property (weak) id dataSource; // 事件响应 @property (weak) id delegate; // 重加载数据 (void)reloadData; // 重排布 (void)invalidateLayout; // 取消返回选中 (void)unSelectedAll; // 注册重用对象 (void)registerClass:(Class)cellClass forCellWithReuseIdentifier:(NSString *)identifier; // 对象重用 (id)dequeueReusableCellWithReuseIdentifier:(NSString )identifier forIndexPath:(NSIndexPath )indexPath; // 设置选中对象 (void)selectItemAtIndexPath:(NSIndexPath *)indexPath animated:(BOOL)animated; // 当前选中对象 (NSIndexPath *)selectedItem; // 重加载indexPath item (void)reloadItemsAtIndexPath:(NSIndexPath *)indexPath; // 插入 (void)insertItemsAtIndexPath:(NSIndexPath *)indexPath withAnimate:(BOOL)animate; // 删除 (void)deleteItemsAtIndexPath:(NSIndexPath *)indexPath withAnimate:(BOOL)animate; // 重新排列 (void)relayoutWithAnimation:(BOOL)animated completion:(void (^)(BOOL finished))completion; // 滚动到aPoint (void)scrollToPoint:(NSPoint)aPoint withAnimate:(BOOL)animate; @end
collectionViewDataSource
collection展示的数据源,由宿主实现。@protocol WWCollectionViewDataSource // 返回indexPath下标的cell (WWCollectionCellView )collectView:(WWCollectionView )collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath; // 总cell个数 (NSInteger)numberOfItemInCollectionView:(WWCollectionView *)collectionView; // cell的数据 (id)collectionView:(WWCollectionView )colletionView objectValueAtIndexPath:(NSIndexPath )indexPath; @end
collectoinViewDelegate
collection事件的回调响应,由宿主实现。@protocol WWCollectionViewDelegate // indexPath元素被选中 (void)collectionView:(WWCollectionView )collectionView didSelectItemAtIndexPath:(NSIndexPath )indexPath; // 是否支持选中 (BOOL)collectionView:(WWCollectionView )collectionView shouldSelectItemsAtIndexPaths:(NSIndexPath )indexPath; @end
collectoinLayout
collectionCellView的布局方案。@interface WWCollectionViewLayout : NSObject // 布局基类 @property (weak) WWCollectionView *collectionView; // 每个cell元素大小 @property (assign) NSSize itemSize; // edgeInsets @property (assign) NSEdgeInsets edgeInsets; // scrollview使用,表示整个画布大小 @property (assign) NSSize viewContentSize; (instancetype)initWithCollectionView:(WWCollectionView *)collectionView; (void)invalidateLayout; // 返回index的cell大小 (NSRect)frameForIndexPath:(NSIndexPath *)index total:(NSInteger)total; (NSSize)collectionViewContentSize; @end // 横向布局控件 @interface WWFlowCollectionViewLayout : WWCollectionViewLayout @property (assign) CGFloat headMargin; @property (assign) CGFloat tailMargin; @end // grid布局控件 @interface WWGridCollectionViewLayout : WWCollectionViewLayout // 每行多少个 @property (assign) NSInteger numberPerRow; @property (assign) CGFloat headMargin; @property (assign) CGFloat tailMargin; @end
@implementation WWFlowCollectionViewLayout // 横向布局的实现
(void)invalidateLayout { NSInteger cellCount = [self.collectionView.dataSource numberOfItemInCollectionView:self.collectionView]; CGRect bounds = self.collectionView.bounds; // 画布宽度 CGFloat width = _headMargin + _tailMargin + (cellCount - 1) (self.edgeInsets.left + self.edgeInsets.right) + self.itemSize.width cellCount; if (width < bounds.size.width) {
width = bounds.size.width;
[/code]} self.viewContentSize = NSMakeSize(width, bounds.size.height); [super invalidateLayout]; }
(NSRect)frameForIndexPath:(NSIndexPath *)index total:(NSInteger)total { CGFloat leftPos = self.headMargin + [index indexAtPosition:0] * (self.itemSize.width + self.edgeInsets.left + self.edgeInsets.right); // 返回cell的rect return NSMakeRect(leftPos, self.edgeInsets.top, self.itemSize.width, self.itemSize.height); }
@end
collectoinCellView
collection展示的cell控件。@interface WWCollectionCellView : NSView // 当前cell被选中 @property (nonatomic, assign) BOOL selected; // 数据 @property (nonatomic, retain) id dataValue; // 使用前重置展示效果 (void)reset; @end
阅读原文http://click.aliyun.com/m/36406/
相关文章推荐
- mac、iOS端支持自定义布局的collection控件的实现与设计
- ios的collection控件的自定义布局实现与设计
- IOS控件系列----使用UITableView实现网格布局,自定义显示列数
- 扩展GridView实现的一个自定义无刷新分页,排序,支持多种数据源的控件TwfGridView
- IOS 实现自定义的导航栏背景以及自定义颜色的状态栏(支持7.0以及低版本)
- ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局
- iOS开发之UI控件——UIPickerView实现点菜系统界面布局
- Java实现的自定义可编辑表格控件(支持汇总、滚动、增行、删行、小数、日期、下拉列表、参照等)
- iOS开发UI篇—自定义瀑布流控件(接口设计)
- iOS开发UI篇—自定义瀑布流控件(接口设计)
- 24_C# 实现VMS客户端——控件_布局设计
- ios开发UI基础—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局
- iOS开发UI基础—24使用纯代码自定义UItableviewcell实现一个简单的微博界面布局
- 自定义分页控件(四)完善设计时支持和增加分页模式
- iOS开发UI篇—自定义瀑布流控件(基本实现)
- iOS开发UI篇—自定义瀑布流控件(基本实现)
- iOS cocos2d实现自定义button(按钮特效)控件效果源码
- Android布局设计之ExpandableList绑定XML数据构成级联、item布局页面的控件查找及配置child事件,自定义适配显示内容
- Android UI设计之<二>自定义SwitchButton开关,实现类似IOS中UISwitch的动画效果
- IOS 实现自定义的导航栏背景以及自定义颜色的状态栏(支持7.0以及低版本)