iOS开发-商城app 商品详情 商品介绍

前言

在商城电商app类似淘宝，京东等中，会有比较复杂的商品详情页面，下面有个例子可供参考。

如图

分析

• 三个导航栏，需要自定义导航栏
• 商品页面是一个scrollView，需要注意手势冲突
• 商品页面banner的滚动遮挡

关键代码

自定义导航栏

• LDSNavTitleView.m

#import <UIKit/UIKit.h>

@interface LDSNavTitleView : UIScrollView
typedef void (^btnBlock) (int index);

@property(nonatomic, strong)NSArray *titleArr;
@property(nonatomic, strong)btnBlock btnActionBlock;
@property(nonatomic, strong)UILabel *indicatorLabel;

@end

• LDSNavTitleView.m

#import "LDSNavTitleView.h"

@interface LDSNavTitleView () {
    
    CGAffineTransform originalTransform;
    
}

@end

@implementation LDSNavTitleView
static const CGFloat btnWidth = 40.f;
static const CGFloat btnSpace = 20.f;

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        
        self.backgroundColor = [UIColor clearColor];
        self.scrollEnabled = NO;
        self.contentSize = CGSizeMake(frame.size.width, 2*frame.size.height);
        
    }
    
    return self;
}

- (void)setTitleArr:(NSArray *)titleArr {
    
    _titleArr = titleArr;
    
    //创建titleView
    for (int i=0; i<3; i++) {
        
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
        btn.frame = CGRectMake(i*(btnWidth+btnSpace), 0.f, btnWidth, 44.f);
        [btn setTitle:titleArr[i] forState:UIControlStateNormal];
        [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        [btn addTarget:self action:@selector(btnAction:) forControlEvents:UIControlEventTouchUpInside];
        btn.accessibilityValue = [NSString stringWithFormat:@"%d", i];
        btn.titleLabel.font = [UIFont systemFontOfSize:17.f];
        [self addSubview:btn];
        
        //添加黑色指示label
        if (i == 0) {
            
            [self addSubview:self.indicatorLabel];
            _indicatorLabel.frame = ({
                CGRect frame = btn.frame;
                frame.origin.y = btn.frame.size.height-2;
                frame.size.height = 2.f;
                frame;
            });
            originalTransform = _indicatorLabel.transform;
            
        }
        
    }
    
    //添加图文详情nextTitleView和文字的titleLabel
    UIView *nextTitleView = [[UIView alloc] initWithFrame:CGRectMake(0.f, 44.f, btnWidth*3+2*btnSpace, 44.f)];
    UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.f, 0.f, nextTitleView.eoc_width, nextTitleView.eoc_height)];
    titleLabel.text = @"图文详情";
    titleLabel.textColor = [UIColor blackColor];
    titleLabel.textAlignment = NSTextAlignmentCenter;
    [nextTitleView addSubview:titleLabel];
    [self addSubview:nextTitleView];
    
}


#pragma mark - event response 
- (void)btnAction:(UIButton *)btn {
    
    int index = btn.accessibilityValue.intValue;
    
    if (_btnActionBlock) {
        
        _btnActionBlock(index);
    }
    
}

#pragma mark - getter method
- (UILabel *)indicatorLabel {
    
    if (!_indicatorLabel) {
        
        _indicatorLabel = [[UILabel alloc] init];
        _indicatorLabel.backgroundColor = [UIColor blackColor];
        
    }
    return _indicatorLabel;
}

@end

商品页面

• LDSProductViewController.h

#import "LDSProductViewController.h"
#import "LDSProductScrollView.h"
#import "LDSProductDetailWebView.h"
#import "LDSNavTitleView.h"

@interface LDSProductViewController ()<UIScrollViewDelegate>
{
    LDSNavTitleView *titleView;
}

@property(nonatomic, strong)UIView *contentView;
@property(nonatomic, strong)UIView *sonView;
@property(nonatomic, strong)UIScrollView *productUpDownScrollView;
@property(nonatomic, strong)LDSProductScrollView *productLeftRightScrollView;
@property(nonatomic, strong)UILabel *displayProductLabel;
@property(nonatomic, strong)LDSProductDetailWebView *productDetailWebView;

@end

@implementation LDSProductViewController
CGFloat const detailWebViewOffsetY = 70.f;

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    //添加contentView
    [self.view addSubview:self.contentView];
    
    //添加上下的scrollView
    [self.contentView addSubview:self.productUpDownScrollView];
    
    //添加商品详情webView
    [self.contentView addSubview:self.productDetailWebView];
}

- (void)viewDidAppear:(BOOL)animated {
    titleView = (LDSNavTitleView *)self.parentViewController.navigationItem.titleView;
}

#pragma mark - UIScrollView delegate method

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {//productUpDownScrollView 遮住 productLeftRightScrollView
    if (scrollView == self.productUpDownScrollView) {
        CGFloat yOffset = scrollView.contentOffset.y;//self.productUpDownScrollView 的偏移量
        self.productLeftRightScrollView.eoc_y = yOffset/3;// 3 随机
    }
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    if (decelerate) {//是松手
        if (scrollView == self.productUpDownScrollView) {  //上下的scrollView
            CGFloat yOffset = scrollView.contentOffset.y;
            if (yOffset > self.view.eoc_height + 80.f) {  //滑动到scrollView底部的时候+80的距离
                [UIView animateWithDuration:0.4f animations:^{
                    self.contentView.eoc_y = -self.view.eoc_height;
                    titleView.contentOffset = CGPointMake(0.f, 44.f);
                }];
            }
        } else {  //webView的scrollView
            CGFloat yOffset = scrollView.contentOffset.y;
            if (yOffset < detailWebViewOffsetY) {
                [UIView animateWithDuration:0.4f animations:^{
                    self.contentView.eoc_y = 0.f;
                    titleView.contentOffset = CGPointMake(0.f, 0.f);
                }];
            }
        }
    }
}

#pragma mark - getter方法
- (UIView *)contentView {
    if (!_contentView) {
        _contentView = [[UIView alloc] initWithFrame:CGRectMake(0.f, 0.f, SCREENSIZE.width, 2*self.view.eoc_height)];
        _contentView.backgroundColor = [UIColor clearColor];
    }
    return _contentView;
}

- (UIScrollView *)productUpDownScrollView {
    if (!_productUpDownScrollView) {
        _productUpDownScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0.f, 0.f, SCREENSIZE.width, self.view.eoc_height)];
        _productUpDownScrollView.showsVerticalScrollIndicator = YES;
        _productUpDownScrollView.backgroundColor = [UIColor clearColor];
        _productUpDownScrollView.delegate = self;
        _productUpDownScrollView.contentSize = CGSizeMake(SCREENSIZE.width, 2*self.view.eoc_height);
        
        //添加左右的scrollView
        [_productUpDownScrollView addSubview:self.productLeftRightScrollView];
        
        //添加子view
        CGFloat displayProductLabelHeight = 40.f;
        
        _sonView = [[UIView alloc] initWithFrame:CGRectMake(0.f, _productLeftRightScrollView.eoc_bottomY, SCREENSIZE.width, 2*self.view.eoc_height-_productLeftRightScrollView.eoc_bottomY-displayProductLabelHeight)];
        _sonView.layer.shadowOffset = CGSizeMake(0.f, -1.f);
        _sonView.layer.shadowOpacity = 0.8f;
        _sonView.layer.shadowColor = [[UIColor grayColor] CGColor];
        _sonView.backgroundColor = [UIColor lightGrayColor];
        [_productUpDownScrollView addSubview:_sonView];
        
        //添加上拉显示商品详情label
        _displayProductLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.f, _sonView.eoc_bottomY, SCREENSIZE.width, displayProductLabelHeight)];
        _displayProductLabel.textAlignment = NSTextAlignmentCenter;
        _displayProductLabel.text = @"上拉显示商品详情";
        [_productUpDownScrollView addSubview:_displayProductLabel];
        
    }
    
    return _productUpDownScrollView;
}

- (LDSProductScrollView *)productLeftRightScrollView {
    
    if (!_productLeftRightScrollView) {
    
        //添加轮播图片数组
        NSArray *imageArr = @[@"product_1", @"product_0", @"product_1", @"product_0", @"product_1", @"product_0"];
        
        _productLeftRightScrollView = [[LDSProductScrollView alloc] initWithFrame:CGRectMake(0.f, 0.f, self.view.eoc_width, self.view.eoc_width)];
        _productLeftRightScrollView.backgroundColor = [UIColor clearColor];
        _productLeftRightScrollView.imageArr = imageArr;
        
    }
    
    return _productLeftRightScrollView;
}

- (LDSProductDetailWebView *)productDetailWebView {
    if (!_productDetailWebView) {
        _productDetailWebView = [[LDSProductDetailWebView alloc] initWithFrame:CGRectMake(0.f, self.view.eoc_height, SCREENSIZE.width, self.view.eoc_height)];
        _productDetailWebView.showTextLabel = YES;
        _productDetailWebView.webView.scrollView.delegate = self;
    }
    return _productDetailWebView;
}

@end

Demo

Demo地址