iOS 选择商品规格

选择商品规格.gif

由实现选规格的效果来记录下所用到的基础控件和知识点

控件： UIcollectionview

1. 初始化

//初始化布局
UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc] init];
 layout.scrollDirection=UICollectionViewScrollDirectionVertical;//竖直滚动
    layout.minimumInteritemSpacing=0;//itme左右间距
    layout.minimumLineSpacing=10;//itme 上下间距
//section 距上下左右的距离
    layout.sectionInset=UIEdgeInsetsMake(0, 10, 0, 10);
//头部的size
    layout.headerReferenceSize = CGSizeMake(kScreenWidth, 20);
    _collectionview.collectionViewLayout = layout;
    _collectionview.dataSource=self;
    _collectionview.delegate=self;
    _collectionview.backgroundColor=[UIColor whiteColor];
    //支持分页
    _collectionview.pagingEnabled=NO;
    _collectionview.scrollEnabled=NO;
    //注册cell
    [_collectionview registerNib:[UINib nibWithNibName:@"TSChooseSpeciColleCell" bundle:nil] forCellWithReuseIdentifier:@"TSChooseSpeciColleCell"];
    //注册组头
    UINib *headerNib = [UINib nibWithNibName:@"TSSpeciColleHead" bundle:nil];
    [_collectionview registerNib:headerNib forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"TSSpeciColleHead"];

2. collectionView的代理和数据源方法

• 有几组

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return self.contentarry.count;
}

• 每组有几个cell

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    self.parammodel=self.contentarry[section];
    return self.parammodel.attr_values.count;
}

• 加载自定义cell

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
   TSChooseSpeciColleCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"TSChooseSpeciColleCell" forIndexPath:indexPath];

   return cell;
}

• 点击cell响应

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{

}

• 动态设置每个itme大小，根据文字字号大小自适应宽度。

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    self.parammodel=self.contentarry[indexPath.section];
    self.valuemodel = [TSvaluesmodel mj_objectWithKeyValues: self.parammodel.attr_values[indexPath.row]];
    CGSize size = [NSString sizeWithText:self.valuemodel.attr_value font:[UIFont systemFontOfSize:20] maxW:kScreenWidth - 30];
            return size;
}

• 计算文字返回size的方法

//根据文字和字体的大小计算文字的容器的大小
+ (CGSize)sizeWithText:(NSString *)text font:(UIFont *)font maxW:(CGFloat)maxW
{
    NSMutableDictionary *attrs = [NSMutableDictionary dictionary];
    attrs[NSFontAttributeName] = font;
    CGSize maxSize = CGSizeMake(maxW, MAXFLOAT);
    //约束宽度
    return [text boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil].size;
}

• 加载自定义的collectview的Footer或者Header

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
//继承自UICollectionReusableView ，返回的要是这个类型才可以，和cell一样有重用机制

TSSpeciColleHead *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"TSSpeciColleHead" forIndexPath:indexPath];
    self.parammodel=self.contentarry [indexPath.section];
    headerView.titleLab.text = self.parammodel.attr_name;
    return headerView;
}

实现多行单选效果

实现思路

• 每一组只能选中一个，选择同行的会恢复上一次选中的状态，显示最新选中的cell的选中状态，每组不影响单独控制每一组，所以有几组就存几个状态值，要想要每每准确对应改变之前所选的值，那么就用字典的特性，用key找到它改掉它，成为最新的状态。

• 实现: 用section当key 用row当value,存一个字典，改变选中的状态自动覆盖前一个值

NSString *rowstr =[NSString stringWithFormat:@"%ld",indexPath.row];
    NSString *sectstr =[NSString stringWithFormat:@"section%ld",indexPath.section];
    [self.Mudic setValue:rowstr forKey:sectstr];