商品选择属性,大部分商城类APP应该都有涉及,今天在这里主要给大家介绍两种实现思路,推荐使用第二种
-
第一种是用自定义View
-
第二种是用UICollectionView
先来个GIF再听我慢慢分析两种方式的实现思路,注意看打印
-
自定义View
第一步我自定义了一个 #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上商城在线🙂上面最近会把商品属性选择功能更新上去,到时候去下载也是一样的。