首页 » 博文 » 类别 » IOS » 正文
网站地图

仿一号店APP商品分类效果开发IOS版本

jerry IOS 2015年11月27日 收藏

       好久没写博客了，一方面这段时间公司的事情项目比较多，另一方面自己也有准备成立自己的个人工作室，所以一直没顾得上去总结写一下技术博客，今天正好有点时间就来一篇吧。

       这段时间一直在进行开发商城的APP(Android和IOS)，也研究一下国内绝大多数的电商APP(例如:淘宝,京东,天猫,苏宁易购,顺丰优选等等)，他们的商品分类其实大多数属于常见格调:列表-点击二级列表-具体三级分类列表。唯有看了一号店IOS端的APP，感觉还不错。一级格子分布，点击item，中间显示二级分类。然后我们团队决定仿照该效果实现我们的APP。今天的文章打算分为两部分来写1.IOS端效果模拟。2.Android端效果模拟。

        首先我们看一下一号店IOS APP以及初步模拟的界面效果(当然现在是属于初版，很多细节问题还有待需改)

       

       下面来稍微讲解一下模拟实现这样效果的具体思路：

        ①:首先一级商品目录，我这边使用计算画出每一个View,可以说是九宫格,其实这边我们有12主商品分类，可以算是12宫格吧。

        ②:然后在点击每一个一级商品分类的时候，动态去判断添加已经删除二级分类view。

        ③:二级分类view，动态的放入了相应的商品分类button。

        ④:然后在进行切换显示二级分类View的时候，加入显示动画以及隐藏的view。

        好了基本的方法思路就是这么多功能啦。好了接下来是具体实现的主要代码，因为代码中还有很多冗余的地方，里面还有很多的问题，还没有具体的进行整理。希望大家不要喷我哦~后面会进一部优化的，然后会给出相对完善的代码。

        

       具体功能代码如下:

       (一):一级分类以及点击显示二级分类效果主要功能代码 ContentScrollView.h

  1. <span style="font-family:SimSun;font-size:18px;">//
  2. //  ContentScrollView.h
  3. //  zttmall
  4. //
  5. //  Created by hmjiangqq on 15/1/7.
  6. //  Copyright (c) 2015年 江清清<<a>http://www.chinaztt.com/</a>中天科技软件技术有限公司>. All rights reserved.
  7. //
  8.  
  9. #import <UIKit/UIKit.h>
  10. #import "SubCategoryView.h"
  11. #define COLUMN_SIZE 4   //这边暂定为4行view
  12.  
  13. @interface ContentScrollView : UIScrollView
  14. {
  15.     UIScrollView *_classifyScrollView;
  16.     NSMutableArray *_lineViewArray;  //每行view数组
  17.     UITapGestureRecognizer *_tap;
  18.     
  19.     BOOL _toggle; //二级商品分类 页面打开以及关闭开关
  20.     NSUInteger _transHeight; //平移的距离
  21.     NSUInteger _preIndex;  //前一次点击的item 索引
  22.     NSUInteger _preColumn;  //前一次点击的行号
  23.     
  24.     float mTopMark[COLUMN_SIZE];  //定义每一行的view的高度
  25.     
  26.     //二级商品分类view
  27.     SubCategoryView *_subCategoryView;
  28.     NSArray *_categoryData;
  29.     
  30. }
  31. @property(nonatomic,retain)NSArray *data;
  32.  
  33. - (id)initWithFrame:(CGRect)frame;
  34.  
  35. @end
  36. </span>
        ContentScrollView.m 

  1. <span style="font-family:SimSun;font-size:18px;">//
  2. //  ContentScrollView.m
  3. //  zttmall
  4. //
  5. //  Created by hmjiangqq on 15/1/7.
  6. //  Copyright (c) 2015年 江清清<<a>http://www.chinaztt.com/</a>中天科技软件技术有限公司>. All rights reserved.
  7. //
  8.  
  9. #import "ContentScrollView.h"
  10. #import "FirstCategoryItemModel.h"
  11. #import "UIImageView+WebCache.h"
  12. #import "RTLabel.h"
  13.  
  14. #define COLUMN_NUMBER 3
  15. #define TRANS_SPEED 0.4
  16.  
  17. //定义标志当前item是点在第一行，还是最后一行，以及中间位置，三种情况的界面的处理效果不一样
  18. //点击位置枚举
  19. enum{
  20.     ClassifyClickLocationBegin,
  21.     ClassifyClickLocationCenter,
  22.     ClassifyClickLocationEnd
  23. } ENUM_LineClickOnLocation;
  24.  
  25. //定义标志前后两次点击的是否为同一个  old:表示前后两次点击item一样，new:表示前后两次点击item不一样,还有就是不同行
  26. enum{
  27.     CLassifyItemClickOld,
  28.     CLassifyItemClickNew,
  29.     ClassifyItemClickNoSameColumn
  30. } ENUM_LineItemClickMark;
  31.  
  32. @implementation ContentScrollView
  33.  
  34. -(id)initWithFrame:(CGRect)frame{
  35.     self=[super initWithFrame:frame];
  36.     if(self){
  37.         //初始化scrollView
  38.         _classifyScrollView = [[UIScrollView alloc]initWithFrame:frame];
  39.         _classifyScrollView.directionalLockEnabled = YES;//锁定滑动的方向
  40.         _classifyScrollView.pagingEnabled = YES;//滑到subview的边界
  41.         _classifyScrollView.bounces=NO;
  42.         _classifyScrollView.bouncesZoom=NO;
  43.         _classifyScrollView.alwaysBounceVertical=NO;
  44.         _classifyScrollView.alwaysBounceHorizontal=NO;
  45.         _classifyScrollView.showsVerticalScrollIndicator = NO; //不显示垂直滚动条
  46.         _classifyScrollView.showsHorizontalScrollIndicator = NO;//不显示水平滚动条
  47.         [self addSubview:_classifyScrollView];
  48.         
  49.         //设置默认的item点击平台开关以及平移的距离
  50.         _toggle=NO;
  51.         
  52.         //设置默认的item前后两次点击效果不一样的为new
  53.         ENUM_LineItemClickMark=CLassifyItemClickNew;
  54.         
  55.         //设置默认的前一次点击的索引为-1
  56.         _preIndex=-1;
  57.         
  58.         //设置默认的前一次点击的行号索引为-1
  59.         _preColumn=-1;
  60.     }
  61.     return self;
  62. }
  63.  
  64. /**
  65.  *  进行一级分类数据设置
  66.  *  1.以及分类中 每一个小方块为106x106  还要加上右边以及下边的1px细线  那就为107x107
  67.  *
  68.  *  @param data
  69.  */
  70. -(void)setData:(NSArray *)data{
  71.     if(_data!=data){
  72.         [_data release];
  73.         _data=[data retain];
  74.     }
  75.     NSUInteger count=data.count/COLUMN_NUMBER;
  76.     _lineViewArray=[[NSMutableArray arrayWithCapacity:count]retain];
  77.     CGSize newSize = CGSizeMake(ScreenWidth,  107*count); //设置scrollview的大小
  78.     [self setContentSize:newSize];
  79.     for(int i=0;i<count;i++){
  80.         UIView *_lineView=[[UIView alloc]initWithFrame:CGRectMake(0, i*107, ScreenWidth, 107)];
  81.         //每行中的每列分类(每行有三列以及两条垂直细线)
  82.         for(int j=0;j<5;j++){
  83.             if(j==0){
  84.                 int index=3*i+j;
  85.                 FirstCategoryItemModel *firstItemModel=[data objectAtIndex:index];
  86.                 //第一个方格
  87.                 UIImageView *_oneItem=[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 106, 106)];
  88.                 _oneItem.userInteractionEnabled=YES;
  89.                 _oneItem.tag=index;
  90.                 
  91.                 _tap=[[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(_classifyItemClick:)];
  92.                 [_oneItem addGestureRecognizer:_tap];
  93.                 [_tap release];
  94.                 
  95.                 [self _addClassifyIcon:firstItemModel.icon withInView:_oneItem];
  96.                 [self _addClassifyTitle:firstItemModel.title withInView:_oneItem];
  97.                 [_lineView addSubview:_oneItem];
  98.                 [_oneItem release];
  99.             }else if (j==1){
  100.                 //第一条细线
  101.                 UIImageView *_oneLine=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"line_shu.png"]];
  102.                 _oneLine.frame=CGRectMake(106, 0, 1, 107);
  103.                 [_lineView addSubview:_oneLine];
  104.                 [_oneLine release];
  105.             }else if (j==2){
  106.                 //第二个方格
  107.                 int index=3*i+j-1;
  108.                 FirstCategoryItemModel *firstItemModel=[data objectAtIndex:index];
  109.                 UIImageView *_towItem=[[UIImageView alloc]initWithFrame:CGRectMake(107, 0, 106, 106)];
  110.                 _towItem.userInteractionEnabled=YES;
  111.                 _towItem.tag=index;
  112.                 
  113.                 _tap=[[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(_classifyItemClick:)];
  114.                 [_towItem addGestureRecognizer:_tap];
  115.                 [_tap release];
  116.                 
  117.                 [self _addClassifyIcon:firstItemModel.icon withInView:_towItem];
  118.                 [self _addClassifyTitle:firstItemModel.title withInView:_towItem];
  119.                 [_lineView addSubview:_towItem];
  120.                 [_towItem release];
  121.             }else if (j==3){
  122.                 //第二条细线
  123.                 UIImageView *_twoLine=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"line_shu.png"]];
  124.                 _twoLine.frame=CGRectMake(106+107, 0, 1, 107);
  125.                 [_lineView addSubview:_twoLine];
  126.                 [_twoLine release];
  127.                 
  128.             }else if (j==4){
  129.                 //第三个方格
  130.                 int index=3*i+j-2;
  131.                 FirstCategoryItemModel *firstItemModel=[data objectAtIndex:index];
  132.                 UIImageView *_threeItem=[[UIImageView alloc]initWithFrame:CGRectMake(214, 0, 106, 106)];
  133.                 _threeItem.userInteractionEnabled=YES;
  134.                 _threeItem.tag=index;
  135.                 
  136.                 _tap=[[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(_classifyItemClick:)];
  137.                 [_threeItem addGestureRecognizer:_tap];
  138.                 [_tap release];
  139.                 
  140.                 [self _addClassifyIcon:firstItemModel.icon withInView:_threeItem];
  141.                 [self _addClassifyTitle:firstItemModel.title withInView:_threeItem];
  142.                 [_lineView addSubview:_threeItem];
  143.                 [_threeItem release];
  144.             }
  145.         }
  146.         //每行底部的细线
  147.         UIImageView *_bottomImage=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"line_read_option.png"]];
  148.         _bottomImage.frame=CGRectMake(0, 106, ScreenWidth, 1);
  149.         [_lineView addSubview:_bottomImage];
  150.         [_bottomImage release];
  151.         [self addSubview:_lineView];
  152.         
  153.         //没一行分类view加入到数组进行保存起来，以便接下来点击切换View
  154.         [_lineViewArray addObject:_lineView];
  155.         //记录每一行的位置
  156.         mTopMark[i]=_lineView.top;
  157.         [_lineView release];
  158.     }
  159.  
  160. }
  161. /**
  162.  *  使用商品一级分类的图标以及要添加上上的view 构造UIImageView
  163.  *
  164.  *  @param icon   以及分类的图标地址
  165.  *  @param inView
  166.  */
  167. -(void)_addClassifyIcon:(NSString *)icon withInView:(UIImageView *)inView{
  168.     UIImageView *_item=[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 70, 70)];
  169.     [_item setImageWithURL:[NSURL URLWithString:icon] placeholderImage:[UIImage imageNamed:@"ic_classify_default.png"]];
  170.     _item.top=8;
  171.     _item.left=(106-70)/2;
  172.     [inView addSubview:_item];
  173.     [_item release];
  174. }
  175. /**
  176.  *  使用商品分类名称以及要添加在上面的view 构造UILable
  177.  *
  178.  *  @param title  商品分类名称
  179.  *  @param inView 被添加在上面的view
  180.  */
  181. -(void)_addClassifyTitle:(NSString *)title withInView:(UIImageView *)inView{
  182.     RTLabel *_itemLable=[[RTLabel alloc]initWithFrame:CGRectMake(0, 88, 100, 15)];
  183.     [_itemLable setText:title];
  184.     [_itemLable setTextColor:[UIColor blackColor]];
  185.     _itemLable.font=[UIFont systemFontOfSize:12.0f];
  186.     [_itemLable sizeToFit];
  187.     _itemLable.top=85;
  188.     _itemLable.left=(106-_itemLable.optimumSize.width)/2;
  189.     [inView addSubview:_itemLable];
  190.     [_itemLable release];
  191. }
  192.  
  193.  
  194. /**
  195.  *  一级分类 item点击效果
  196.  *
  197.  *  @param tap 传入的手势
  198.  */
  199. -(void)_classifyItemClick:(UITapGestureRecognizer *)pTap{
  200.     
  201.     UIImageView *_itemView=(UIImageView *)pTap.view;
  202.     //根据点击的item的索引来判断是第几行view,然后进行移动其他的行view
  203.     NSUInteger index=_itemView.tag;
  204.     NSUInteger column=index/3;
  205.     NSUInteger count= [_lineViewArray count];
  206.     [self _JudgeMark:index];
  207.     //进行设置二级分类数据界面效果以及相对应的数据传入
  208.     FirstCategoryItemModel *_firstModel=[self.data objectAtIndex:index];
  209.     _transHeight =[self _getSubViewHeigth:_firstModel.sub_category];
  210.     
  211.     [self _addSubContentView:index withFirstData:_firstModel withHeigth:_transHeight];
  212.     
  213.     if(ENUM_LineClickOnLocation==ClassifyClickLocationBegin){
  214.         if(ENUM_LineItemClickMark==CLassifyItemClickOld){
  215.             [self _animationTransBegin:_transHeight withColumn:column withCount:count withLineViews:_lineViewArray];
  216.         }else if (ENUM_LineItemClickMark==CLassifyItemClickNew){
  217.             
  218.             [self _animationTransBackSuit:_lineViewArray];
  219.             [self _animationTransBegin:_transHeight withColumn:column withCount:count withLineViews:_lineViewArray];
  220.             [self _addSubContentView:index withFirstData:_firstModel withHeigth:_transHeight];
  221.  
  222.         }else if (ENUM_LineItemClickMark==ClassifyItemClickNoSameColumn){
  223.              //点击不同行
  224.              //1.首先把原来的行view全部回归原位
  225.              //2.然后进行平移相关的行view
  226.              [self _animationTransBackSuit:_lineViewArray];
  227.              [self _animationTransBegin:_transHeight withColumn:column withCount:count withLineViews:_lineViewArray];
  228.              [self _addSubContentView:index withFirstData:_firstModel withHeigth:_transHeight];
  229.  
  230.         }
  231.     }else if (ENUM_LineClickOnLocation==ClassifyClickLocationCenter){
  232.         if(ENUM_LineItemClickMark==CLassifyItemClickOld){
  233.             
  234.              [self _animationTransCenter:_transHeight withColumn:column withCount:count withLineViews:_lineViewArray];
  235.         }else if (ENUM_LineItemClickMark==CLassifyItemClickNew){
  236.             
  237.              [self _animationTransBackSuit:_lineViewArray];
  238.              [self _animationTransCenter:_transHeight withColumn:column withCount:count withLineViews:_lineViewArray];
  239.              [self _addSubContentView:index withFirstData:_firstModel withHeigth:_transHeight];
  240.  
  241.         }else if (ENUM_LineItemClickMark==ClassifyItemClickNoSameColumn){
  242.              //点击不同行
  243.             
  244.              [self _animationTransBackSuit:_lineViewArray];
  245.              [self _animationTransCenter:_transHeight withColumn:column withCount:count withLineViews:_lineViewArray];
  246.              [self _addSubContentView:index withFirstData:_firstModel withHeigth:_transHeight];
  247.  
  248.         }
  249.     }else if (ENUM_LineClickOnLocation==ClassifyClickLocationEnd){
  250.         if(ENUM_LineItemClickMark==CLassifyItemClickOld){
  251.             
  252.              [self _animationTransEnd:_transHeight withColumn:column withLineViews:_lineViewArray];
  253.         }else if (ENUM_LineItemClickMark==CLassifyItemClickNew){
  254.             
  255.              [self _animationTransBackSuit:_lineViewArray];
  256.              [self _animationTransEnd:_transHeight withColumn:column withLineViews:_lineViewArray];
  257.              [self _addSubContentView:index withFirstData:_firstModel withHeigth:_transHeight];
  258.  
  259.         }else if (ENUM_LineItemClickMark==ClassifyItemClickNoSameColumn){
  260.              //点击不同行
  261.              [self _animationTransBackSuit:_lineViewArray];
  262.              [self _animationTransEnd:_transHeight withColumn:column withLineViews:_lineViewArray];
  263.             [self _addSubContentView:index withFirstData:_firstModel withHeigth:_transHeight];
  264.  
  265.         }
  266.     }
  267. }
  268.  
  269. /**
  270.  *  根据点击的索引 来进行计算一些枚举值效果
  271.  *
  272.  *  @param index  点击item的效果
  273.  */
  274. -(void)_JudgeMark:(NSUInteger)index {
  275.     //设置当前的点击的行号
  276.     NSUInteger mTemp=index/3;
  277.     if(_preColumn!=mTemp){
  278.          ENUM_LineItemClickMark=ClassifyItemClickNoSameColumn; //点击不同行
  279.     }else{
  280.      if(_preIndex==index){
  281.         //表示两次点击同一个item
  282.         ENUM_LineItemClickMark=CLassifyItemClickOld;
  283.       }else{
  284.         //表示两次不同一个item
  285.         ENUM_LineItemClickMark=CLassifyItemClickNew;
  286.       }
  287.     }
  288.     //记录下当前点击的item索引以及点击行的行号
  289.     _preIndex=index;
  290.     _preColumn=mTemp;
  291.     
  292.     //判断点击的位置    第一行，最后一行，中间行
  293.     if(index<3){
  294.         ENUM_LineClickOnLocation=ClassifyClickLocationBegin;
  295.     }else if (index<9){
  296.         ENUM_LineClickOnLocation=ClassifyClickLocationCenter;
  297.     }else{
  298.         ENUM_LineClickOnLocation=ClassifyClickLocationEnd;
  299.     }
  300.     
  301. }
  302.  
  303. /**
  304.  *  点击第一行 view平移的动画效果
  305.  *
  306.  *  @param pTransHeight 平移的距离
  307.  *  @param pColumn  当前点击的item 在行的索引
  308.  *  @param pCount  所有行数
  309.  */
  310. -(void)_animationTransBegin:(NSInteger) pTransHeight withColumn:(NSInteger) pColumn withCount:(NSUInteger)pCount withLineViews:(NSArray *)pLineViews{
  311.     if(_toggle){
  312. //        //进行关闭
  313. //        for(int i=pColumn+1;i<pCount;i++){
  314. //            UIView *_lineItemView=[_lineViewArray objectAtIndex:i];
  315. //            [UIView animateWithDuration:TRANS_SPEED animations:^{
  316. //                _lineItemView.top=_lineItemView.top-pTransHeight;
  317. //            } completion:^(BOOL finished) {
  318. //                
  319. //            }];
  320. //        }
  321.         [self _animationTransBackSuit:pLineViews];
  322.         _toggle=false;
  323.     }else{
  324.         //进行打开
  325.         for(NSUInteger i=pColumn+1;i<pCount;i++){
  326.             UIView *_lineItemView=[_lineViewArray objectAtIndex:i];
  327.             [UIView animateWithDuration:TRANS_SPEED animations:^{
  328.                 _lineItemView.bottom=_lineItemView.bottom+pTransHeight;
  329.             } completion:^(BOOL finished) {
  330.                 
  331.             }];
  332.         }
  333.         _toggle=true;
  334.     }
  335. }
  336. /**
  337.  *  点击中间 view平移的动画效果
  338.  *
  339.  *  @param pTransHeight 平移的距离
  340.  *  @param pColumn  当前点击的item 在行的索引
  341.  *  @param pCount  所有行数
  342.  */
  343. -(void)_animationTransCenter:(NSInteger) pTransHeight withColumn:(NSInteger) pColumn withCount:(NSUInteger)pCount withLineViews:(NSArray *)pLineViews{
  344.     if(_toggle){
  345.         //进行关闭
  346. //        for(int i=pColumn+1;i<pCount;i++){
  347. //            UIView *_lineItemView=[_lineViewArray objectAtIndex:i];
  348. //            [UIView animateWithDuration:TRANS_SPEED animations:^{
  349. //                _lineItemView.top=_lineItemView.top-pTransHeight;
  350. //            } completion:^(BOOL finished) {
  351. //                
  352. //            }];
  353. //        }
  354.          [self _animationTransBackSuit:pLineViews];
  355.         _toggle=false;
  356.     }else{
  357.         //进行打开
  358.         for(int i=pColumn+1;i<pCount;i++){
  359.             UIView *_lineItemView=[_lineViewArray objectAtIndex:i];
  360.             [UIView animateWithDuration:TRANS_SPEED animations:^{
  361.                 _lineItemView.bottom=_lineItemView.bottom+pTransHeight;
  362.             } completion:^(BOOL finished) {
  363.                 
  364.             }];
  365.         }
  366.         _toggle=true;
  367.     }
  368. }
  369. /**
  370.  *  点击最后一行 view平移的动画效果
  371.  *
  372.  *  @param pTransHeight 平移的距离
  373.  *  @param pColumn  当前点击的item 在行的索引
  374.  *  @param pCount  所有行数
  375.  */
  376. -(void)_animationTransEnd:(NSInteger) pTransHeight withColumn:(NSInteger) pColumn withLineViews:(NSArray *)pLineViews{
  377.     if(_toggle){
  378.         //进行关闭
  379. //        for(int i=0;i<pColumn+1;i++){
  380. //            UIView *_lineItemView=[_lineViewArray objectAtIndex:i];
  381. //            [UIView animateWithDuration:TRANS_SPEED animations:^{
  382. //                _lineItemView.top=_lineItemView.top+pTransHeight;
  383. //            } completion:^(BOOL finished) {
  384. //                
  385. //            }];
  386. //        }
  387.          [self _animationTransBackSuit:pLineViews];
  388.         _toggle=false;
  389.     }else{
  390.         //进行打开
  391.         for(int i=0;i<pColumn+1;i++){
  392.             UIView *_lineItemView=[_lineViewArray objectAtIndex:i];
  393.             [UIView animateWithDuration:TRANS_SPEED animations:^{
  394.                 _lineItemView.top=_lineItemView.top-pTransHeight;
  395.             } completion:^(BOOL finished) {
  396.                 
  397.             }];
  398.         }
  399.         _toggle=true;
  400.     }
  401. }
  402.  
  403. /**
  404.  *  进行所有行回归原位
  405.  *
  406.  *  @param _pLineViews 所有行view的数组
  407.  */
  408. -(void)_animationTransBackSuit:(NSArray *)_pLineViews{
  409.     if(_toggle){
  410.     int count=_pLineViews.count;
  411.     for(int i=0;i<count;i++){
  412.         UIView *_lineItemView=[_pLineViews objectAtIndex:i];
  413.         [UIView animateWithDuration:TRANS_SPEED animations:^{
  414.             _lineItemView.top=mTopMark[i];
  415.         } completion:^(BOOL finished) {
  416.             
  417.         }];
  418.       }
  419.     [self _removeSubCategoryView];
  420.         _toggle=false;
  421.     }
  422.     
  423. }
  424.  
  425. /**
  426.  *   清除二级目录视图
  427.  */
  428. -(void)_removeSubCategoryView{
  429.     
  430.     if([_subCategoryView superview]!=nil){
  431.         [_subCategoryView removeFromSuperview];
  432.     }
  433. }
  434. /**
  435.  *  进行添加二级分类数据view
  436.  *
  437.  *  @param pClickItem 点击一级分类的item索引
  438.  */
  439. -(void)_addSubContentView:(NSUInteger)pClickItem  withFirstData:(FirstCategoryItemModel *)pFirstModel withHeigth:(NSUInteger) height{
  440.           if([_subCategoryView superview]!=nil){
  441.               [_subCategoryView removeFromSuperview];
  442.             }
  443.            _subCategoryView=[[SubCategoryView alloc]initWithFrame:CGRectMake(0, (pClickItem/3+1)*106+5, ScreenWidth, height)];
  444.            [_subCategoryView setSub_category:pFirstModel.sub_category];
  445.            [self addSubview:_subCategoryView];
  446.            //[_subCategoryView release];
  447.     
  448. }
  449.  
  450. /**
  451.  *  计算二级分类商品view的高度
  452.  *
  453.  *  @param pSubCategory 二级商品
  454.  *
  455.  *  @return
  456.  */
  457. -(int)_getSubViewHeigth:(NSArray *)pSubCategory{
  458.     if(pSubCategory!=nil&&pSubCategory.count>0){
  459.         int count=pSubCategory.count/3;
  460.         return 20+count*10+(count+1)*30;
  461.     }else{
  462.         return 0;
  463.     }
  464. }
  465.  
  466. -(void)dealloc{
  467.     [_tap release];
  468.     [_lineViewArray release];
  469.     [super dealloc];
  470. }
  471. @end
  472. </span>
      (二):二级分类效果view  SubCategoryView.h 

  1. <span style="font-family:SimSun;font-size:18px;">//
  2. //  SubCategoryView.h
  3. //  zttmall
  4. //  二级分类数据显示view
  5. //  Created by hmjiangqq on 15/1/8.
  6. //  Copyright (c) 2015年 江清清<<a>http://www.chinaztt.com/</a>中天科技软件技术有限公司>. All rights reserved.
  7. //
  8.  
  9. #import <UIKit/UIKit.h>
  10.  
  11. @interface SubCategoryView : UIView
  12. - (id)initWithFrame:(CGRect)frame;
  13.  
  14. @property(nonatomic,retain)NSArray *sub_category; //二级分类数据
  15.  
  16. @end
  17. </span>
        SubCategoryView.m 

  1. <span style="font-family:SimSun;font-size:18px;">//
  2. //  SubCategoryView.m
  3. //  zttmall
  4. //
  5. //  Created by hmjiangqq on 15/1/8.
  6. //  Copyright (c) 2015年 江清清<<a>http://www.chinaztt.com/</a>中天科技软件技术有限公司>. All rights reserved.
  7. //
  8.  
  9. #import "SubCategoryView.h"
  10. #import "SubCategoryItemModel.h"
  11. @implementation SubCategoryView
  12.  
  13. -(id)initWithFrame:(CGRect)frame{
  14.     self=[super initWithFrame:frame];
  15.     if(self){
  16.         [self _initView];
  17.     }
  18.     return self;
  19. }
  20. /**
  21.  *  进行显示二级商品分类view
  22.  */
  23. -(void)_initView{
  24.     [self setBackgroundColor:Color(240, 240, 240, 1)];
  25. }
  26. /**
  27.  *  进行把二级商品分类数据 添加在view中
  28.  *
  29.  *  @param sub_category 二级商品分类的数据集合
  30.  */
  31. -(void)setSub_category:(NSArray *)sub_category{
  32.     if(_sub_category!=sub_category){
  33.         [_sub_category release];
  34.         _sub_category=[sub_category retain];
  35.     }
  36.     NSUInteger count=sub_category.count;
  37.     for(NSUInteger i=0;i<count;i++){
  38.         SubCategoryItemModel *subModel=[sub_category objectAtIndex:i];
  39.         UIButton *_itemButton=[UIButton buttonWithType:UIButtonTypeCustom];
  40.         _itemButton.frame=CGRectMake(107*(i%3)+10, 40*(i/3)+10, 87, 30);
  41.         [_itemButton setBackgroundColor:[UIColor redColor]];
  42.         [_itemButton setTitle:subModel.title forState:UIControlStateNormal];
  43.         _itemButton.font=[UIFont systemFontOfSize:12.0f];
  44.         [_itemButton addTarget:self action:@selector(_itemClick:) forControlEvents:UIControlEventTouchUpInside];
  45.         [self addSubview:_itemButton];
  46.     }
  47. }
  48. /**
  49.  *  二级分类item 点击处理事件
  50.  *
  51.  *  @param button
  52.  */
  53. -(void)_itemClick:(UIButton *)button{
  54.     NSLog(@"_itemClick...");
  55. }
  56. @end
  57. </span>
     (三):使用方法:只要在外部需要使用该控件地方声明，初始化，传入分类数据就可以了。 

  1. <span style="font-family:SimSun;font-size:18px;">ContentScrollView *_contentScrollView=[[ContentScrollView alloc]initWithFrame:CGRectMake(0, 44, ScreenWidth, ScreenHeight-44)];
  2.     [self.view addSubview:_contentScrollView];
  3.  ShowCategoryModel *showModel=[CategoryDataParse parseCategoryData:dic];
  4.         [_contentScrollView setData:showModel.data];
  5. </span>
    (四):我这边使用是我自己模拟的数据，所以下面是解析的工具类方法(JSON)    

  1. <span style="font-family:SimSun;font-size:18px;">//
  2. //  CategoryDataParse.m
  3. //  zttmall
  4. //
  5. //  Created by hmjiangqq on 15/1/6.
  6. //  Copyright (c) 2015年 江清清<<a>http://www.chinaztt.com/</a>中天科技软件技术有限公司>. All rights reserved.
  7. //
  8.  
  9. #import "CategoryDataParse.h"
  10. #import "FirstCategoryItemModel.h"
  11. #import "SubCategoryItemModel.h"
  12. #import "CategoryItemModel.h"
  13. #import "BrandItemModel.h"
  14. @implementation CategoryDataParse
  15.  
  16. +(ShowCategoryModel *)parseCategoryData:(NSDictionary *)dic{
  17.     //分类商品总数据
  18.     ShowCategoryModel *mShowCategoryModel=[[ShowCategoryModel alloc]init];
  19.     mShowCategoryModel.api=[dic objectForKey:@"api"];
  20.     mShowCategoryModel.v=[dic objectForKey:@"v"];
  21.     mShowCategoryModel.code=[dic objectForKey:@"code"];
  22.     mShowCategoryModel.msg=[dic objectForKey:@"msg"];
  23.     
  24.     //一级分类数据
  25.     NSDictionary *datalist=[dic objectForKey:@"data"];
  26.     NSMutableArray *data=[NSMutableArray array];
  27.     id value;
  28.     NSEnumerator *enumerator= [datalist objectEnumerator];
  29.     while((value =[enumerator nextObject])!=nil){
  30.         FirstCategoryItemModel *firstModel=[[FirstCategoryItemModel alloc]init];
  31.         firstModel.cid=[value objectForKey:@"cid"];
  32.         firstModel.title=[value objectForKey:@"title"];
  33.         firstModel.desc=[value objectForKey:@"desc"];
  34.         firstModel.icon=[value objectForKey:@"icon"];
  35.         firstModel.linker=[value objectForKey:@"linker"];
  36.         firstModel.category=[value objectForKey:@"category"];
  37.         
  38.         //二级分类数据
  39.         NSDictionary *subCategoryList=[value objectForKey:@"sub_category"];
  40.         NSMutableArray *subCategoryData=[NSMutableArray array];
  41.         id pValue;
  42.         NSEnumerator *pEnumerator= [subCategoryList objectEnumerator];
  43.         while((pValue =[pEnumerator nextObject])!=nil){
  44.             SubCategoryItemModel *mSubCategoryModel=[[SubCategoryItemModel alloc]init];
  45.             mSubCategoryModel.cid=[pValue objectForKey:@"cid"];
  46.             mSubCategoryModel.title=[pValue objectForKey:@"title"];
  47.             mSubCategoryModel.desc=[pValue objectForKey:@"desc"];
  48.             mSubCategoryModel.icon=[pValue objectForKey:@"icon"];
  49.             mSubCategoryModel.linker=[pValue objectForKey:@"linker"];
  50.             mSubCategoryModel.category=[pValue objectForKey:@"category"];
  51.             
  52.             //三级分类数据
  53.             NSDictionary *threeCategoryList=[pValue objectForKey:@"three_category"];
  54.             NSMutableArray *threeCategoryData=[NSMutableArray array];
  55.             id tValue;
  56.             NSEnumerator *tEnumerator= [threeCategoryList objectEnumerator];
  57.             while((tValue =[tEnumerator nextObject])!=nil){
  58.                 CategoryItemModel *threeCategoryItemModel=[[CategoryItemModel alloc]init];
  59.                 threeCategoryItemModel.cid=[tValue objectForKey:@"cid"];
  60.                 threeCategoryItemModel.title=[tValue objectForKey:@"title"];
  61.                 threeCategoryItemModel.desc=[tValue objectForKey:@"desc"];
  62.                 threeCategoryItemModel.icon=[tValue objectForKey:@"icon"];
  63.                 threeCategoryItemModel.linker=[tValue objectForKey:@"linker"];
  64.                 threeCategoryItemModel.category=[tValue objectForKey:@"category"];
  65.                 [threeCategoryData addObject:threeCategoryItemModel];
  66.                 [threeCategoryItemModel release];
  67.             }
  68.             
  69.             mSubCategoryModel.three_category=threeCategoryData;
  70.             [subCategoryData addObject:mSubCategoryModel];
  71.             [mSubCategoryModel release];
  72.         }
  73.         firstModel.sub_category=subCategoryData;
  74.         
  75.         //品牌数据
  76.         NSDictionary *brandDic=[value objectForKey:@"brand"];
  77.         NSMutableArray *brandData=[NSMutableArray array];
  78.         id bdValue;
  79.         NSEnumerator *bdEnumerator= [brandDic objectEnumerator];
  80.         while((bdValue =[bdEnumerator nextObject])!=nil){
  81.             BrandItemModel *brand=[[BrandItemModel alloc]init];
  82.             brand.brandId=[bdValue objectForKey:@"brandId"];
  83.             brand.brandTitle=[bdValue objectForKey:@"brandTitle"];
  84.             brand.brandDesc=[bdValue objectForKey:@"brandDesc"];
  85.             brand.brandIcon=[bdValue objectForKey:@"brandIcon"];
  86.             brand.brandType=[bdValue objectForKey:@"brandType"];
  87.             brand.brandLinker=[bdValue objectForKey:@"brandLinker"];
  88.             [brandData addObject:brand];
  89.             [brand release];
  90.         }
  91.         firstModel.brand=brandData;
  92.         [data addObject:firstModel];
  93.         [firstModel release];
  94.         
  95.     }
  96.     mShowCategoryModel.data=data;
  97.     return [mShowCategoryModel autorelease];
  98. }
  99. @end
  100. </span>
 相应的信息实体类(Model)就不贴了，直接看数据解析工具类，相信大家就能猜出来了。

下面给一下测试的地址:http://img2.xxh.cc:8080/SalesWebTest/CategoryList

好了IOS版本的基本模拟的讲解就到此，下一篇我会进行讲解Android版本的。

最后再说一下最近我自己在搞工作室,希望小编(如果小编看到这段觉得不妥，请帮我删掉这段，非常感谢！)以及路过的朋友们不要介意哦。优清科技工作室团队,主要承接Android/IOS,J2EE,.Net,PHP,移动建站,网站建设,微信系统项目开发。


一号店商品分类ios
推荐文章
最新文章
基于ThinkPHP5开发的后台整合系统

基于ThinkPHP5开发的后台整合系统

ThinkPHP5开发的电脑端和手机端商城购物系统（含支付）

ThinkPHP5开发的电脑端和手机端商城购物系统（含支付）

Yii2和aceAdmin 开发的后台管理系统

Yii2和aceAdmin 开发的后台管理系统

Yii2打造RBAC后台通用权限的管理系统

Yii2打造RBAC后台通用权限的管理系统

最新Yii2+AdminLTE开发经典内容管理系统

最新Yii2+AdminLTE开发经典内容管理系统

Yii2 开发的经典博客系统

Yii2 开发的经典博客系统

Yii2 打造经典CMS管理系统

Yii2 打造经典CMS管理系统

Yii1 打造网上商城购物系统

Yii1 打造网上商城购物系统