(iOS)商城商品属性选择-两种实现思路

商品选择属性，大部分商城类APP应该都有涉及，今天在这里主要给大家介绍两种实现思路，推荐使用第二种

• 第一种是用自定义View

• 第二种是用UICollectionView

先来个GIF再听我慢慢分析两种方式的实现思路，注意看打印

属性选择点击打印

• 自定义View

没记错第一次开始做企业级项目负责的就是商城模块，当时这个属性选择着实让我很头疼，想着实在不行那就自定义吧，毕竟需求开发先弄出个东西再说！

6666

第一步我自定义了一个 #import "DCShopItemView.h" 并创建其代理方法 ShopItemViewDelegate 自定义初始化alloc的同时传入数组，文字，标题，颜色，字体大小等等一系列属性，并在自定义View里面根据传进来的数组for混循环按钮，代理点击事件。。。。一系列的初始化结束后，在主界面for循环创建DCShopItemView是的没错，后来我发现整个自定义下来，就是for循环，for循环。。。。
毕竟有更好的实现思路，在这里就简单介绍下，并附上部分代

NSArray *array = @[_array01,_array02,_array03,_array04,_array05];
for (NSInteger j = 0; j < _shopAttr.count; j++) {//两层循环
    for (NSInteger i = 0; i < _shopAttr[j].list.count; i++) {
        NSString *tagName = _shopAttr[j].list[i].infoname;
        [array[j] addObject:tagName];
    }
 }

这段代码贴出了，眼尖的人就会发现，数组是我事先声明好的，而不是根据服务器返回数据决定的。是的没错，这也是我不太建议使用自定义View去实现的其中一个原因。

#pragma mark - AttributeViewDelegate
-(void)ShopItem_View:(DCShopItemView *)view didClickBtn:(UIButton *)btn{
    NSString *title = btn.titleLabel.text;
    if ([view isEqual:self.attributeViewAtt01]) {
        str01_ = title;
    }else if ([view isEqual:self.attributeViewAtt02]){
        str02_ = title;
    }else if ([view isEqual:self.attributeViewAtt03]){
        str03_ = title;
    }else if ([view isEqual:self.attributeViewAtt04]){
        str04_ = title;
    }else if ([view isEqual:self.attributeViewAtt05]){
        str05_ = title;
    }
}
for (NSString *str in array) {
    [seleArray addObject:str];
}
NSLog(@"自定义View选择的属性:%@",seleArray);

毕竟不是最优解，那就一笔带过吧

重点来了

• UICollectionView

1.这里我们先从模型着手去分析：我认为先对模型进行处理，二维数组，模型外加一个属性，是否选择（isSelect），点击item处理每组的模型是否选择，最后取每组模型被选中模型的加入到另一个数组中，而不是操作点击一下加入数组，那样逻辑太乱不易处理

/** 是否点击选中 */
@property (nonatomic,assign)BOOL isSelect;

我们自定义一个UICollectionViewLayout，因为设计到一个Item的排布问题，这里我就不详细讲解，之前逛Git看见一个整理的方法比较详细的Layout，简单的改动后就拿过来用了非常感谢，言归正传对UICollectionViewLayout初始化完成之后，接下来就是监听处理商品每组，每个Item的点击
2.在UICollectionViewDelegate代理方法didSelectItemAtIndexPath，我对数据进行了两次for循环，是的又来了for循环！
第一次：两层for循环，目的是对每组中每个选中的Item进行数据存储
第二次：为了限制每组内的Item只能选中一个
代码如下

#pragma mark - 
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    _shopAttr[indexPath.section].list[indexPath.row].isSelect = !_shopAttr[indexPath.section].list[indexPath.row].isSelect;
    
    //section，item 循环讲选中的所有Item加入数组中 ，数组mutableCopy初始化
    _seleArray = [@[] mutableCopy];
    for (NSInteger i = 0; i < _shopAttr.count; i++) {
        for (NSInteger j = 0; j < _shopAttr[i].list.count; j++) {
            if (_shopAttr[i].list[j].isSelect == YES) {
                [_seleArray addObject:_shopAttr[i].list[j].infoname];
            }
        }
    }
    
    //限制每组内的Item只能选中一个
    for (NSInteger j = 0; j < _shopAttr[indexPath.section].list.count; j++) {
        _shopAttr[indexPath.section].list[j].isSelect = NO;
    }
    _shopAttr[indexPath.section].list[indexPath.row].isSelect = YES;
    [collectionView reloadData];
}

#pragma mark - 确定点击事件
- (void)sureClick
{
    NSLog(@"CollectionView选择的属性:%@",_seleArray);
}

这样用UICollectionView就实现了商品的属性选择，简单而又粗暴！

总结一下

• 让我选肯定诗选第二种实现思路，第一种就当是当做了解吧。

• Demo代码我就不上传了，如需源码，请留言或私聊我看见都会发的。

• 我的git上商城在线上面最近会把商品属性选择功能更新上去，到时候去下载也是一样的。