商品选择属性，大部分商城类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 - <UICollectionViewDelegate>
- (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上商城在线🙂上面最近会把商品属性选择功能更新上去，到时候去下载也是一样的。
网友评论