CollectionView實現(xiàn)頻道編輯
UICollectionView布局
分為上下兩個section
為cell添加長按和拖拽手勢
根據(jù)位置重疊來判斷拖拽位置
分為不同的情況來處理數(shù)據(jù)源
目標效果圖
實現(xiàn)步驟
UICollectionView 布局
UICollectionView 初始化
- (instancetype)initWithFrame:(CGRect)frame collectionViewLayout:(UICollectionViewLayout *)layout
UICollectionViewFlowLayout
使用默認的流式布局
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
//設(shè)置行距
layout.minimumLineSpacing = 10;
//設(shè)置列距
layout.minimumInteritemSpacing = 10;
//設(shè)置每個 item 的大小
layout.itemSize = CGSizeMake((ScreenWidth / 4) - 20 , 30);
//設(shè)置 item 的上左下右的邊距大小
layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
ColletionView屬性
| BOOL showsHorizontalScrollIndicator | 控制是否顯示水平方向的滾動條 |
| ----------------------------------- | -------------------------------- |
| BOOL directionalLockEnabled | 指定控件是否只能在一個方向上滾動 |
| BOOL alwaysBounceVertical | 控制垂直方向遇到邊框是否反彈 |
| BOOL alwaysBounceHorizontal | 控制水平方向遇到邊框是否反彈 |
注冊
[_collectionView registerClass:[ChannelCollectionViewCell class] forCellWithReuseIdentifier:NSStringFromClass([ChannelCollectionViewCell class])];
[_collectionView registerClass:[HeaderReusableView class]forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:NSStringFromClass([HeaderReusableView class])];
注意 為cell 和section頭 注冊要與代理方法中保持一致
CollectionView代理方法
//返回 section的個數(shù)
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
//返回每個section中cell的個數(shù)
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
//返回 具體的cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
//返回 section的 headerView
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
//返回每個section 的headerView大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
//點擊cell觸發(fā)的方法
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
自定義cell
為cell添加 長按 和 拖拽 手勢
- (void)addGestureRecognizer {
//長按手勢
UILongPressGestureRecognizer * longPress =[[UILongPressGestureRecognizer alloc]initWithTarget:self action:@selector(gestureAction:)];
longPress.delegate = self;
[self addGestureRecognizer:longPress];
//拖拽手勢
UIPanGestureRecognizer * pan =[[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(gestureAction:)];
pan.delegate = self;
[self addGestureRecognizer:pan];
}
定義協(xié)議 讓代理為cell實現(xiàn) 手勢事件
@protocol ChannelCollectionViewCellDelegate <NSObject>
- (void)CellGestureAction:(UIGestureRecognizer *) gestureRecognizer;
- (void)CellCancel:(ChannelCollectionViewCell *) Cell;
@end
在VC里面實現(xiàn)代理方法
- (void)CellGestureAction:(UIGestureRecognizer *)gestureRecognizer {
//偽代碼
記錄當前cell的位置 和cell;
if (識別手勢開始) {
if (是長按手勢){
進入編輯狀態(tài)叮趴；
}
if (是編輯狀態(tài)) {
return;
}
} else if (手勢改變) {
使用截圖View 替代當前的cell的View
不同section之間cell的拖動分不同的情況處理數(shù)據(jù)源
} else if (手勢停止) {
移除截圖View;
顯示原來的cell;
}
}
難點
拖拽的實現(xiàn)
數(shù)據(jù)源的處理
解決方案 ： 拖拽計算截圖cell 和拖拽位置cell 的中心點 ，只要截圖cell的中心點進入了其他cell范圍中廉沮，就實現(xiàn)位置移動 泳炉，改變數(shù)據(jù)源
上下section數(shù)據(jù)聯(lián)動需要根據(jù)情況 采取不同的方法處理數(shù)據(jù)源
遺留問題
拖拽到邊緣時抚笔，collectionView不會自動滾動
預想解決方案： 當拖拽到邊緣時 ， 添加定時器， 改變CollectionView的contentoffset
