直播商城源码开发分析，实现商城滑动分类功能

直播商城源码是一个具有电商功能的直播平台，实现了直播带货、在线商城等电商功能。在直播商城源码的商城界面，会进行商品分类，因为商品分类比较多，系统实现了分页展示，当用户滑动商品分类的页面时，分类下面有跟随左右滑动的滚动条。今天我们就来分析一下，商品分类和滚动条是如何实现的。

一、实现思路和代码示例

1. 滚动条实现的主要思路，是用scrollview的滚动加view的移动坐标来实现。

2. 分类界面用scrollview实现，示例如下：

        self.backgroundColor = RGB_COLOR(@"#f5f5f5", 1);
        backScroll = [[UIScrollView alloc]initWithFrame:CGRectMake(10, 0, self.width-20, self.height)];
        backScroll.showsHorizontalScrollIndicator = NO;
        backScroll.backgroundColor = [UIColor whiteColor];
        backScroll.delegate = self;
        backScroll.layer.cornerRadius = 5;
        backScroll.layer.masksToBounds = YES;
        [self addSubview:backScroll];

（1）直播商城源码根据接口返回的数据，添加分类button和分类的标题显示：

        if (dataArr.count > 12) {
            backScroll.contentSize = CGSizeMake(((_window_width-20)/5.5)*(dataArr.count)/2+20, self.height);
        }else{
            backScroll.contentSize = CGSizeMake(((_window_width-20)/5.5)*(dataArr.count)+20, self.height);
        }
        if (dataArr.count > 12) {
            for (int i = 0 ; i <dataArr.count; i ++) {
                NSString *gc_iconStr =[dataArr[i]valueForKey:@"gc_icon"];
 
                UIButton *btn = [UIButton buttonWithType:0];
                btn.frame = CGRectMake(i/2*((_window_width-20)/5.5), i%2*55 +i%2*10, (_window_width-20)/5.5, 55);
                [btn addTarget:self action:@selector(classBtnClick:) forControlEvents:UIControlEventTouchUpInside];
                btn.tag = 10000+i;
                [backScroll addSubview:btn];
                UIImageView *img = [[UIImageView alloc]init];
                [img sd_setImageWithURL:[NSURL URLWithString:gc_iconStr]];
                [btn addSubview:img];
                [img mas_makeConstraints:^(MASConstraintMaker *make) {
                    make.center.equalTo(btn);
                    make.height.width.mas_equalTo(35);
                    
                }];
                [btn addSubview:img];
 
                UILabel *titleLb = [[UILabel alloc]init];
                titleLb.font = [UIFont systemFontOfSize:11];
                titleLb.textColor = RGB_COLOR(@"#6B6A6A", 1);
                titleLb.textAlignment = NSTextAlignmentCenter;
                titleLb.text = minstr([dataArr[i]valueForKey:@"gc_name"]);
                [btn addSubview:titleLb];
                [titleLb mas_makeConstraints:^(MASConstraintMaker *make) {
                    make.centerX.equalTo(img);
                    make.top.equalTo(img.mas_bottom).offset(2);
                }];
            }
        }else{
            for (int i = 0; i < dataArr.count; i ++) {
                NSString *gc_iconStr =[dataArr[i]valueForKey:@"gc_icon"];
 
                UIButton *btn = [UIButton buttonWithType:0];
                btn.frame = CGRectMake(i * ((_window_width-20)/5.5), 0, ((_window_width-20)/5.5), 55);
                [btn addTarget:self action:@selector(classBtnClick:) forControlEvents:UIControlEventTouchUpInside];
                btn.tag = 10000+i;
 
                [backScroll addSubview:btn];
                UIImageView *img = [[UIImageView alloc]init];
                [img sd_setImageWithURL:[NSURL URLWithString:gc_iconStr]];
                [btn addSubview:img];
                [img mas_makeConstraints:^(MASConstraintMaker *make) {
                    make.center.equalTo(btn);
                    make.height.width.mas_equalTo(35);
                    
                }];
                [btn addSubview:img];
 
                UILabel *titleLb = [[UILabel alloc]init];
                titleLb.font = [UIFont systemFontOfSize:11];
                titleLb.textColor = [UIColor blackColor];
                titleLb.textAlignment = NSTextAlignmentCenter;
                titleLb.text = minstr([dataArr[i]valueForKey:@"gc_name"]);
                [btn addSubview:titleLb];
                [titleLb mas_makeConstraints:^(MASConstraintMaker *make) {
                    make.centerX.equalTo(img);
                    make.top.equalTo(img.mas_bottom).offset(2);
                }];
 
            }
        }

3、添加底部滑动view，实现原理就是一个大的view套小的view，通过scrollview的滚动坐标来控制小view的frame，实现滚动效果。

（1） 添加滚动view

-(void)addBottomSlider{
    slideBackView=[[UIView alloc] initWithFrame:CGRectMake(_window_width/2-20, backScroll.bottom-6, 40, 4)];
    [self addSubview:slideBackView];
     slideBackView.backgroundColor = [UIColor colorWithRed:0.91 green:0.91 blue:0.91 alpha:1.00];
     slideBackView.layer.cornerRadius = 2;
    
    sliderView = [[UIView alloc] init];
    [slideBackView addSubview:sliderView];
    sliderView.frame=CGRectMake(0, 0, 15 ,4);
    sliderView.backgroundColor =normalColors;
    sliderView.layer.cornerRadius = 2;
}

（2） 滑动改变指示器的坐标

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    [UIView animateWithDuration:0.2 animations:^{
        
        CGPoint offset =  scrollView.contentOffset;
        // scrollView的当前位移/scrollView的总位移=滑块的当前位移/滑块的总位移
        //offset/(scrollView.contentSize.width-scrollView.frame.size.width)=滑块的位移/(slideBackView.frame.size.width-sliderView.frame.size.width)
        //        滑块距离屏幕左边的距离加上滑块的当前位移，即为滑块当前的x
        CGRect frame=sliderView.frame;
        frame.origin.x=1 +offset.x*(slideBackView.frame.size.width-sliderView.frame.size.width)/(scrollView.contentSize.width-scrollView.frame.size.width);
        
        sliderView.frame = frame;
    }];
}

4、最后，当用户点击分类时，实现按钮的点击事件，进入相应的商品分类页面。

-(void)classBtnClick:(UIButton *)sender{
    NSInteger index = sender.tag -10000;
    NSDictionary *dataDic = listArr[index];
    if ([self.delegate respondsToSelector:@selector(selectClassData:)]) {
        [self.delegate selectClassData:dataDic];
    }
}

以上，就是直播商城源码实现商品分类和滚动条的实现方式，如果小伙伴们对直播商城源码搭建有兴趣的话，可以持续关注我们，了解更多音视频开发知识。

声明：以上内容为云豹科技原创，未经作者本人同意，禁止转载，否则将追究相关法律责任www.yunbaokj.com