duwenquan-方形LOGO.png

引述：

本系列分享是圍繞電商平臺而寫，那么我們繼續(xù)，首頁用于展示商品，當我們點擊某個我們想要購買或者想查看下該商品詳細的情況，那么我們自然而然會跳到商品詳情頁。一個商品，總會有不同的規(guī)格屬性，比如一件衣服，有紅色，黃色，綠色，尺寸有S,M,L,XL,XXL等，這樣組合起來就會有15種選擇，下圖為淘寶的規(guī)格選擇。

淘寶.PNG

?? 如果沒做過電商的開發(fā)者看到這樣的界面邏輯會不會有頭疼的感覺呢？需要考慮的問題很多，標簽的自適應，分類的自適應，動態(tài)換行，標簽的點擊事件，多組合點擊事件等等，那么今天我要分享的封裝控件就是類似淘寶的規(guī)格屬性選擇器。您只需要傳兩個數(shù)組，就可以輕松實現(xiàn)類似淘寶的規(guī)格選擇器。代碼示例如下：

    self.standardList = @[@"顏色",@"尺寸"];
    self.standardValueList = @[@[@"紫色",@"藍色",@"灰色",@"黃黃",@"紅色",@"青色",@"紫色",@"藍色",@"灰色",@"黃黃",@"紅色",@"綠色",@"白色",@"黑色"],@[@"s",@"m",@"l",@"xl",@"xxl",@"xxxl",@"xxxm",@"xxxxxxxxxxxx"]];

DWQSelectAttributesView

DWQSelectAttributesView是一款模仿淘寶規(guī)格屬性選擇頁面的UI控件，其中邏輯已經(jīng)實現(xiàn)，開發(fā)者如果需要做類似的規(guī)格選擇可直接使用，免去了復雜的UI頁面繪制和復雜的邏輯實現(xiàn)。那么，接下來就讓我告訴你們?nèi)绾问褂?DWQSelectAttributesView。

使用方法

1.將DWQSelectAttributesView和DWQExtension文件夾拖入到您的工程中，
? ? 2.在PCH文件中引入頭文件：DWQSelectAttributes.h
， DWQSelectView.h，UIView+DWQExtension.h
? ? 3.在需要使用規(guī)格屬性選擇空間的Controller中聲明三個屬性，代碼示例如下

@property(nonatomic,strong)DWQSelectView *selectView;//規(guī)格屬性選擇控件
@property(nonatomic,strong)DWQSelectAttributes *selectAttributes;

@property(nonatomic,strong)NSMutableArray *attributesArray; //屬性數(shù)組

4.在聲明兩個數(shù)組屬性，其中一個未分類，另一個為分類下的規(guī)格，和一個背景控件，然后初始化需要傳入的數(shù)組，數(shù)組格式如下：

    @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 = @"請選擇規(guī)格屬性";
    [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.然后根據(jù)自己的需要來修改代碼。一般需要重寫的也就下面這個方法，這需要根據(jù)自己Model來針對性的進行修改，具體使用方式，查看Demo即可。

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

7.效果圖如下

規(guī)格屬性選擇器.gif

Demo下載地址

GitHub
大家記得簡書點贊，GitHub上給個Star噢。。??????????????！謝謝您的支持！