iOS走近商城APP(二 购物车常用控件)

开篇

上篇文章中简单了说了下APP的基本框架和布局，今天我们就来说一下在软件中常用到的控件以及实现他们的方法。上篇文章:iOS走近商城APP(一)(今天值班整座大楼静悄悄，好恐怖-_-、)。

购物车相关

控件一

• 商品加入购物车前的规格选择界面
  控件1
  如上图中红色框内的内容，是可以显示商品的规格内容，进行单选，要设置他的默认颜色，选中字体颜色和选中边框颜色，整个模块是根据商品的实际内容来决定的布局，底部是一个可以滚动的tableview。那么我们怎么实现它呢，方法1.自己封装一个控件，不过在处理数据和自适应布局上对经验有一定要求。方法2.使用第三方控件。这里推荐一个DKFilterView

git上示例图

上图是git上的示例图，我们按照框架的方法把条件约束后的方法做网络请求就可以得到库存和我们想要的数据了，下面我们来好好看一下这个框架。
对比最上面的一张图，我们在用到框架的时候改变最多的无非以下两个地方，颜色和标题

选中效果和颜色 标题和虚线的设置

先说颜色，我们根据自己的需求自定义颜色然后在对应的逻辑里进行颜色替换。

   //颜色的设置
        self.buttonNormalColor = DK_NORMALTITLE_COLOR;   //未选中标题颜色
        self.buttonHighlightColor = DK_SELECTTITLE_COLOR; //选中标题颜色
        self.buttonNormalBorderColor =DK_NORMALBORDER_COLOR; //未选中边框颜色
        self.buttonSelectBorderColor = DK_SELECTBORDER_COLOR; //选中边框颜色

然后在这个方法的选中逻辑里进行颜色的变换(注意逻辑)

- (void)buttonSelected:(UIButton *)button;

然后关于标题和划线，因为试图是一个tableview ，我们处理的地方就在他的组头试图和组尾试图的协议方法里。

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section;

-(UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section;

在尾试图的那条虚线，处理两种方法，1：找UI要一张虚线的图，创建试图放上去，简单粗暴，缺点是以后如果需要改变颜色样式需要重新要图。 2：自己绘制虚线。

  UIView *foot = [[UIView alloc] initWithFrame:CGRectMake(0, 0, width, 20)];
    foot.backgroundColor = [UIColor whiteColor];
    //layer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    
    [shapeLayer setFillColor:[[UIColor lightGrayColor] CGColor]];

    //设置虚线的颜色 - 颜色请必须设置
    [shapeLayer setStrokeColor:[UIColor lightGrayColor].CGColor];
    
    //设置虚线的高度
    [shapeLayer setLineWidth:1.0f];
    
    //设置类型
    [shapeLayer setLineJoin:kCALineJoinRound];
    
    /*
     2.f=每条虚线的长度
     2.f=每两条线的之间的间距
     */
    [shapeLayer setLineDashPattern:
     [NSArray arrayWithObjects:[NSNumber numberWithInt:2.f],
      [NSNumber numberWithInt:2.f],nil]];
    
    // Setup the path
    CGMutablePathRef path1 = CGPathCreateMutable();
    
    /*
     代表初始坐标的x，y
     y:要和下面的y一样。
     */
    CGPathMoveToPoint(path1, NULL,10, 10);
    
    /*
     代表坐标的x，y
     要与上面的y大小一样，才能使平行的线，不然会画出斜线
     */
    CGPathAddLineToPoint(path1, NULL, width-20,10);
    
    //赋值给shapeLayer
    [shapeLayer setPath:path1];
    
    //清除
    CGPathRelease(path1);
    
    //可以把self改成任何你想要的UIView.
    [[foot layer] addSublayer:shapeLayer];

注释已经加的很清楚了，但是如果觉得仍然复杂呢，这里放上一个封装好的方法，一句话实现页面切换加载的动画效果和线的绘制,一句话实现了虚线的绘制(关于各种线的绘制会继续封装加入新的东西，欢迎star)。

       //调用绘制虚线
        [[GS_DrawLineManager manager]GS_DrawImaginaryLineWithStartPoint:CGPointMake(20, 100) EndPoint:CGPointMake(300, 100) LineColor:[UIColor blackColor] LineHeight:1.0f InView:view];

• 商品数量增加控件

商品计数控件
这个控件在购物车界面还是不可缺少的吧，实现方法一样我们可以自己封装，自己去设置他的控件的安排和逻辑的处理，如下图
计数控件封装
但是如果要是不想封装的话这里就放一个网上看到的例子吧，传送门

页面缓冲动画效果封装

• 页面缓冲加载动画
  比如美团和饿了么，在切换页面数据加载出现之前会有缓冲动画出现，那么我们怎么在我们的软件中实现呢，根据网上资料和图片以及自己的整理封装，实现一句话调用加载，一句话消失，类似于SVProgressHUD的用法。

缓冲动画

调用方法代码如下：

   view = [[UIView alloc]initWithFrame:[UIScreen mainScreen].bounds];

    [self.view addSubview:view];
    
    //加载转场动画
    [[GS_SVPmanager manager]GS_SVPshowGif:self];
    
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(4 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        
        //调用绘制虚线
        [[GS_DrawLineManager manager]GS_DrawImaginaryLineWithStartPoint:CGPointMake(20, 100) EndPoint:CGPointMake(300, 100) LineColor:[UIColor blackColor] LineHeight:1.0f InView:view];
        
    //动画加载结束
    [[GS_SVPmanager manager]GS_SVPhidGif:self];
        
        NSLog(@"结束了");
    });

如下图所示，我们创建一个单利用来控制GIF显示和消失，单例文件的位置如下图：

单例所在文件
这里放上git地址：一句话实现缓冲动画

后记

每一个成熟的软件都不是简简单单的几篇文章能够说明的，上一篇介绍了框架和代码风格，今天介绍了几种常用的控件，但是其中为说到的地方还有很多，有时间会继续补充更新。希望对用到这一块的有所帮助。