【iOS分享之路-快速开发电商平台】六、详情页规格属性选择

DWQ-LOGO.jpeg

引述：

本系列分享是围绕电商平台而写，那么我们继续，首页用于展示商品，当我们点击某个我们想要购买或者想查看下该商品详细的情况，那么我们自然而然会跳到商品详情页。一个商品，总会有不同的规格属性，比如一件衣服，有红色，黄色，绿色，尺寸有S,M,L,XL,XXL等，这样组合起来就会有15种选择，下图为淘宝的规格选择。

淘宝.PNG

   如果没做过电商的开发者看到这样的界面逻辑会不会有头疼的感觉呢？需要考虑的问题很多，标签的自适应，分类的自适应，动态换行，标签的点击事件，多组合点击事件等等，那么今天我要分享的封装控件就是类似淘宝的规格属性选择器。您只需要传两个数组，就可以轻松实现类似淘宝的规格选择器。代码示例如下：

    self.standardList = @[@"颜色",@"尺寸"];
    self.standardValueList = @[@[@"紫色",@"蓝色",@"灰色",@"黄黄",@"红色",@"青色",@"紫色",@"蓝色",@"灰色",@"黄黄",@"红色",@"绿色",@"白色",@"黑色"],@[@"s",@"m",@"l",@"xl",@"xxl",@"xxxl",@"xxxm",@"xxxxxxxxxxxx"]];

DWQSelectAttributesView

DWQSelectAttributesView是一款模仿淘宝规格属性选择页面的UI控件，其中逻辑已经实现，开发者如果需要做类似的规格选择可直接使用，免去了复杂的UI页面绘制和复杂的逻辑实现。那么，接下来就让我告诉你们如何使用 DWQSelectAttributesView。

使用方法

1.将DWQSelectAttributesView和DWQExtension文件夹拖入到您的工程中，
    2.在PCH文件中引入头文件：DWQSelectAttributes.h
， DWQSelectView.h，UIView+DWQExtension.h
    3.在需要使用规格属性选择空间的Controller中声明三个属性，代码示例如下

@property(nonatomic,strong)DWQSelectView *selectView;//规格属性选择控件
@property(nonatomic,strong)DWQSelectAttributes *selectAttributes;

@property(nonatomic,strong)NSMutableArray *attributesArray; //属性数组

4.在声明两个数组属性，其中一个未分类，另一个为分类下的规格，和一个背景控件，然后初始化需要传入的数组，数组格式如下：

    @property(nonatomic,strong)UIView *backgroundView;
    @property(nonatomic,strong)NSArray *standardList;
    @property(nonatomic,strong)NSArray *standardValueList;


    self.standardList = @[@"颜色",@"尺寸"];
    self.standardValueList = @[@[@"紫色",@"蓝色",@"灰色",@"黄黄",@"红色",@"青色",@"紫色",@"蓝色",@"灰色",@"黄黄",@"红色",@"绿色",@"白色",@"黑色"],@[@"s",@"m",@"l",@"xl",@"xxl",@"xxxl",@"xxxm",@"xxxxxxxxxxxx"]];

5.然后在initSelectView，对其中的控件进行赋值。部分代码示例如下：

self.selectView = [[DWQSelectView alloc] initWithFrame:CGRectMake(0, screen_Height, screen_Width, screen_Height)];
    self.selectView.headImage.image = [UIImage imageNamed:@"duwenquan"];
    self.selectView.LB_price.text = @"￥121.00";
    self.selectView.LB_stock.text = [NSString stringWithFormat:@"库存%@件",@999];
    self.selectView.LB_showSales.text=@"已销售40件";
    self.selectView.LB_detail.text = @"请选择规格属性";
    [self.view addSubview:self.selectView];
    
    
    CGFloat maxY = 0;
    CGFloat height = 0;
    for (int i = 0; i < self.standardList.count; i ++)
    {
        
        self.selectAttributes = [[DWQSelectAttributes alloc] initWithTitle:self.standardList[i] titleArr:self.standardValueList[i] andFrame:CGRectMake(0, maxY, screen_Width, 40)];
        maxY = CGRectGetMaxY(self.selectAttributes.frame);
        height += self.selectAttributes.dwq_height;
        self.selectAttributes.tag = 8000+i;
        self.selectAttributes.delegate = self;
        
        [self.selectView.mainscrollview addSubview:self.selectAttributes];
    }
    self.selectView.mainscrollview.contentSize = CGSizeMake(0, height);
    
    //加入购物车按钮
    [self.selectView.addBtn addTarget:self action:@selector(addGoodsCartBtnClick) forControlEvents:UIControlEventTouchUpInside];
    //立即购买
    [self.selectView.buyBtn addTarget:self action:@selector(addGoodsCartBtnClick) forControlEvents:UIControlEventTouchUpInside];
    //取消按钮
    [self.selectView.cancelBtn addTarget:self action:@selector(dismiss) forControlEvents:UIControlEventTouchUpInside];
    //点击黑色透明视图choseView会消失
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(dismiss)];
    [self.selectView.alphaView addGestureRecognizer:tap];

6.然后根据自己的需要来修改代码。一般需要重写的也就下面这个方法，这需要根据自己Model来针对性的进行修改，具体使用方式，查看Demo即可。

-(void)selectBtnTitle:(NSString *)title andBtn:(UIButton *)btn

7.效果图如下

规格属性选择器.gif

Demo下载地址

GitHub
大家记得简书点赞，GitHub上给个Star噢。。😯😯😯😯😯😯😯！谢谢您的支持！