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

不要被如此美妙的外表吓到,仔细分析就会发现它其实很简单,上边套用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

欢迎提意见