iOS Development-Mall App Product Details Product Introduction
Preface
In mall e-commerce apps like Taobao, Jingdong, etc., there will be more complicated product detail pages. Here is an example for reference.
As shown
analysis
- Three navigation bars, need to customize the navigation bar
- The product page is a scrollView, need to pay attention to gesture conflicts
- Scroll occlusion of product page banner
Key code
Custom navigation bar
- 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
Product page
- 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