iOS (collectionView与tableView并用)添加与删除,如何让人觉得很好玩

摘要: 如下图,iOS项目随后附加上
使用collectionView和tableView形成了一个动画流畅,界面简洁的页面
适合iOS初学者阅读.

另外推荐iOSer一个轮播图,具有一定启发意义



这个例子写了如上这样一个页面,有待优化,但是已经非常出色

不要被如此美妙的外表吓到,仔细分析就会发现它其实很简单,上边套用collectionView,下边则是一个选择菜单

之所以不自己for循环,效率太低,代码太复杂,用collectionView就很简单,删除添加全搞定,还不用担心布局

UICollectionView * _collectionView;

我在api里面找了半天没有发现类似TableView自带的edit状态,那就自己实现一个好了

BOOL _edit;

设置collectionView

- (void)createCollectionView {
UICollectionViewFlowLayout * layout = [[UICollectionViewFlowLayout alloc] init];
layout.minimumLineSpacing = 15.f;
layout.minimumInteritemSpacing = (ScreenWidth - 40 - 4 * 50) / 3;
layout.itemSize = CGSizeMake(48, 60);
layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
_collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(10, 64, ScreenWidth - 20, ScreenHeight - 64) collectionViewLayout:layout];
_collectionView.delegate = self;
_collectionView.dataSource = self;
_collectionView.backgroundColor = [UIColor clearColor];
[self.view addSubview:_collectionView];
[_collectionView registerClass:[PlantCollectionCell class] forCellWithReuseIdentifier:@"collectionCell"];
}

设置代理

因为最后一个相当于是编辑按钮,所以单独处理

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return _dataSource.count + 1;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
PlantCollectionCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"collectionCell" forIndexPath:indexPath];
if (indexPath.item != _dataSource.count) {
[cell setImage:@"PlantIcon" andText:@"作物名称"];
cell.deleteImage.alpha = _edit?1:0;
} else {
[cell setImage:@"AddGreenIcon" andText:@"添加作物"];
cell.deleteImage.alpha = 0;//最后一个按钮不会有右上角的x
}
return cell;
}

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
NSLog(@"%2ld,___%2ld",indexPath.item,indexPath.section);
if (!_edit) {
if (indexPath.item == _dataSource.count) {
_edit = 1;
[self ToAction];//展示tableView
[_collectionView reloadData];
} else { //----------------------------------------跳转
}
} else {
if (indexPath.item == _dataSource.count) {
_edit = 0;
[self FromAction];//收起tableView
[_collectionView reloadData];
} else {
//----------------------------------------需要移除数据源
[_dataSource removeObjectAtIndex:indexPath.item];
[_collectionView reloadData];
}
}
}

cell里面专门有一个x的image

if (!self.deleteImage) {
self.deleteImage = [[UIImageView alloc] initWithFrame:CGRectMake(38, 0, 10, 10)];
// image.backgroundColor = [UIImage imageNamed:@""];
self.deleteImage.backgroundColor = [UIColor lightGrayColor];
self.deleteImage.alpha = 0;
[self.contentView addSubview:self.deleteImage];
}

ToAction

- (void)ToAction {
_collectionView.frame = CGRectMake(10, 64, ScreenWidth - 20, 160);
[_collectionView setContentOffset:CGPointMake(0, ((_dataSource.count) / 4 - 1) * 80) animated:YES];
// [UIView animateWithDuration:0.3 animations:^{
// _leftTableView.frame = CGRectToLeft;
// _rightTableView.frame = CGRectToRight;
// _text.alpha = 1;
// }];
}

FromAction

- (void)FromAction {
_collectionView.frame = CGRectMake(10, 64, ScreenWidth - 20, ScreenHeight - 64);
// [UIView animateWithDuration:0.3 animations:^{
// _leftTableView.frame = CGRectFromLeft;
// _rightTableView.frame = CGRectFromRight;
// _text.alpha = 0;
// }];
}

至此就吧上边的collectionView设置好了

剩下的就是下边的列表了,很简单的

设置双列的列表:

分级列表

注意添加的时候需要改变contentofSet

[_dataSource addObject:@""];
[_collectionView reloadData];
if ((_dataSource.count ) % 4 == 0) {
[_collectionView setContentOffset:CGPointMake(0, ((_dataSource.count +1) / 4 - 1) * 80) animated:YES];
}

iOS换一种思路写一个无限轮播的滚动视图 :
https://my.oschina.net/bieshixuan/blog/789622
欢迎提意见