iOS開發系列之常用自定義控件開發集—自動3D廣告牆圖檔控件開發

這節課我們根據上一節課的自動廣告牆圖檔控件版本進行更新改進為3D效果上一節課的代碼連結

下面是3D自動廣告牆實作代碼版本如下：

WHC_3DAdvertisingWall.h頭檔案如下：

//
//  WHC_3DAdvertisingWall.h
//  WHC_3DAdvertisingWall
//
//  Created by 吳海超 on 15/3/26.
//  Copyright (c) 2015年 吳海超. All rights reserved.
//

#import <UIKit/UIKit.h>

@class WHC_3DAdvertisingWall;
//單擊圖檔代理
@protocol WHC_3DAdvertisingWallDelegate <NSObject>
@optional
- (void)WHC_3DAdvertisingWall:(WHC_3DAdvertisingWall*)whc_AdWallView clickImage:(UIImage*)image index:(NSInteger)index;

@end

@interface WHC_3DAdvertisingWall : UIView
@property (nonatomic,assign) id<WHC_3DAdvertisingWallDelegate>delegate;
@property (nonatomic,assign) BOOL  isCanTouchScroll;
@property (nonatomic,assign) BOOL  isCanAutoScroll;

//以圖檔對象數組初始化
- (instancetype)initWithFrame:(CGRect)frame withImages:(NSArray*)imageArr;

//以圖檔名稱數組初始化
- (instancetype)initWithFrame:(CGRect)frame withImageNames:(NSArray *)imageNames;

//以圖檔對象數組重載圖檔
- (void)reloadImage:(NSArray*)images;

//以圖檔名稱數組重載圖檔
- (void)reloadImageNames:(NSArray*)imageNames;
@end
           

WHC_3DAdvertisingWall.m源檔案如下：

//
//  WHC_3DAdvertisingWall.m
//  WHC_3DAdvertisingWall
//
//  Created by 吳海超 on 15/3/26.
//  Copyright (c) 2015年 吳海超. All rights reserved.
//

#import "WHC_3DAdvertisingWall.h"
#define KWHC_MOVE_IMAGE_DURING (0.4)        //動畫切換圖檔周期
#define KWHC_LEFT_START_INDEX (1)           //向左切換時的初始imageView下标
#define KWHC_RIGHT_START_INDEX (0)          //向右切換時的初始imageView下标
#define KWHC_PAGE_CONTROL_HEIGHT (20.0)     //頁控件高度
#define KWHC_3D_WIDTH (50.0)                //3D效果UIImageView的寬度
#define KWHC_DISZ (-1.0 / 900.0)            //3D透視參數
#define KWHC_EXEC_DISTANCE (18.0)           //進行切換圖檔有效像素距離
#define KWHC_HIDE_DISTANCE (6.0)            //進行移動圖檔隐藏有效像素距離

//自定義方向枚舉
typedef enum {
    NONE,
    LEFT,
    RIGHT
}WHC_TOUCH_ORI;


@interface WHC_3DImageView : UIImageView
@property (nonatomic,assign)CGFloat hideCenterX;       //存儲隐藏時中心點x坐标
@property (nonatomic,assign)WHC_TOUCH_ORI ori;         //存儲觸摸方向
- (void)reset;                                         //恢複初始參數的狀态
@end

@implementation WHC_3DImageView
- (void)reset{
    self.hidden = NO;
    _hideCenterX = ;
    _ori = NONE;
}
@end
@interface WHC_3DAdvertisingWall (){
    NSArray                 * _imageArr;                 //圖檔數組      
    NSMutableArray          * _imageViewArr;             //圖檔控件數組
    UIPageControl           * _pageCtl;                  //頁控件
    NSTimer                 * _timer;                    //定時器
    UIPanGestureRecognizer  * _panGesture;               //觸摸手勢
    CGRect                    _frame;                    //該控件frame
    NSInteger                 _currentIndex;             //目前圖檔下标
    CGPoint                   _startPoint;               //觸摸開始點
    WHC_TOUCH_ORI             _currentMoveOri;           //目前移動方向
    BOOL                      _isStartTouch;             //是否開始觸摸了
    BOOL                      _isExecAnimation;          //是否執行切換動畫
}
@end

@implementation WHC_3DAdvertisingWall

#pragma mark - init
//以圖檔對象數組初始化
- (instancetype)initWithFrame:(CGRect)frame withImages:(NSArray*)imageArr{
    self = [super initWithFrame:frame];
    if(self != nil){
        _currentIndex = ;
        _currentMoveOri = NONE;
        _frame = frame;
        _imageArr = [NSArray arrayWithArray:imageArr];
        _imageViewArr = [NSMutableArray array];
        //注冊觸摸事件
        [self registerTouchEvent];
        //初始化UI布局
        [self initLayout];
    }
    return self;
}

//以圖檔名稱數組初始化
- (instancetype)initWithFrame:(CGRect)frame withImageNames:(NSArray *)imageNames{
    NSMutableArray  * images = [NSMutableArray array];
    for (NSString * imagePath in imageNames) {
        [images addObject:[UIImage imageNamed:imagePath]];
    }
    return [self initWithFrame:frame withImages:images];
}

#pragma mark - controlAnimation
//設定是否可以觸摸切換
- (void)setIsCanTouchScroll:(BOOL)isCanTouchScroll{
    _isCanTouchScroll = isCanTouchScroll;
    if(!isCanTouchScroll){
        [self removeGestureRecognizer:_panGesture];
    }else{
        [self addGestureRecognizer:_panGesture];
    }
}

//設定是否可以自動切換
- (void)setIsCanAutoScroll:(BOOL)isCanAutoScroll{
    _isCanAutoScroll = isCanAutoScroll;
    if(isCanAutoScroll){
        if(_timer != nil){
            [_timer invalidate];
            _timer = nil;
        }
        _timer = [NSTimer scheduledTimerWithTimeInterval: target:self selector:@selector(startAutoScrollImage) userInfo:nil repeats:YES];
    }else{
        [_timer invalidate];
        _timer = nil;
    }
}

//開始自動切換
- (void)startAutoScrollImage{
    //default to left scroll image
    WHC_3DImageView  * imageView0 = _imageViewArr[];
    [UIView animateWithDuration: animations:^{
        imageView0.center = CGPointMake(, imageView0.center.y);
        imageView0.layer.transform = [self initMakeTransform3D:M_PI / ];
    } completion:^(BOOL finished) {
        imageView0.layer.transform = [self initMakeTransform3D:-M_PI / ];
        imageView0.center = CGPointMake(CGRectGetWidth(_frame), imageView0.center.y);
        [self updateImageViewImage:LEFT];
        [self animationResetImage: withOri:LEFT];
    }];


}

#pragma mark - other
//加載錯誤提示view
- (void)loadAlertText{
    UILabel  * labText = [[UILabel alloc]initWithFrame:CGRectMake(, , CGRectGetWidth(_frame), CGRectGetHeight(_frame))];
    labText.backgroundColor = [UIColor clearColor];
    labText.textColor = [UIColor grayColor];
    labText.textAlignment = NSTextAlignmentCenter;
    labText.numberOfLines = ;
    labText.text = @"WHC_3DAdvertisingWall\nimage count = 0";
    [self addSubview:labText];
}

- (void)registerTouchEvent{
    _panGesture = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(handlePanGesture:)];
}

#pragma mark - reload
//重新加載圖檔以圖檔對象數組
- (void)reloadImage:(NSArray*)images{
    //清除舊的
    for (UIView * view in self.subviews) {
        [view removeFromSuperview];
    }

    self.isCanTouchScroll = NO;
    self.isCanAutoScroll = NO;
    _currentIndex = ;
    _currentMoveOri = NONE;
    [_imageViewArr removeAllObjects];
    _imageArr = nil;
    //加載新的
    _imageArr = [NSArray arrayWithArray:images];

    [self initLayout];
}

//重新加載圖檔以圖檔名稱數組
- (void)reloadImageNames:(NSArray*)imageNames{
    NSMutableArray  * images = [NSMutableArray array];
    for (NSString * imagePath in imageNames) {
        [images addObject:[UIImage imageNamed:imagePath]];
    }
    [self reloadImage:images];
}

#pragma mark - makeTransform3D
//3D處理
- (CATransform3D)initMakeTransform3D:(CGFloat)angle{
    CGPoint        center = CGPointZero;
    CATransform3D  rotate = CATransform3DMakeRotation(angle, , , );
    CATransform3D  transform3DToCenter = CATransform3DMakeTranslation(-center.x, -center.y, );
    CATransform3D  transform3DToBack = CATransform3DMakeTranslation(center.x, center.y, );
    CATransform3D  scale = CATransform3DIdentity;
    scale.m34 = KWHC_DISZ;
    return CATransform3DConcat(rotate , CATransform3DConcat(CATransform3DConcat(transform3DToCenter, scale), transform3DToBack));
}

//設定圖檔控件3d效果
- (void)setImageViewTransform3D:(WHC_3DImageView*)imageView angle:(CGFloat)angle distance:(CGFloat)distance ori:(WHC_TOUCH_ORI)ori{
    CATransform3D  rotate = CATransform3DRotate(imageView.layer.transform, angle, , , );
    imageView.center = CGPointMake(imageView.center.x + distance, imageView.center.y);
    imageView.layer.transform = rotate;

    if((imageView.center.x <= KWHC_HIDE_DISTANCE && ori == LEFT) ||
       (imageView.center.x >= (CGRectGetWidth(_frame) - KWHC_HIDE_DISTANCE) && ori == RIGHT)){
        if(!imageView.hidden){

            imageView.hidden = YES;
            imageView.ori = ori;
            imageView.hideCenterX = imageView.center.x;
        }
    }else{
        if(ori == LEFT && imageView.tag == ){
            CGFloat  centerX = imageView.center.x;
            if(CGRectGetWidth(_frame) - centerX - cosf(rotate.m13) * (CGRectGetWidth(imageView.frame) / ) >= KWHC_EXEC_DISTANCE){
                if(_isExecAnimation)return;
                [self animationMoveImage: withOri:ori];
            }
        }else if(ori == RIGHT && imageView.tag == ){
            CGFloat  centerX = imageView.center.x;
            if(centerX - cosf(rotate.m31) * (CGRectGetWidth(imageView.frame) / ) >= KWHC_EXEC_DISTANCE){
                if(_isExecAnimation)return;
                [self animationMoveImage: withOri:ori];
            }
        }
        if(imageView.hidden && imageView.ori != ori){
            if((ori == LEFT && imageView.center.x < imageView.hideCenterX) ||
               (ori == RIGHT && imageView.center.x > imageView.hideCenterX)){
                [imageView reset];
            }
        }
    }
}
#pragma mark - initUI
//初始化ui布局
- (void)initLayout{
    NSInteger  imageCount = _imageArr.count;
    if(imageCount < ){
        [self loadAlertText];
        return;
    }
    CGFloat  imageWidth = CGRectGetWidth(_frame) - KWHC_3D_WIDTH * ;
    for (int i = ; i < ; i++) {
        WHC_3DImageView  * imageView = [[WHC_3DImageView alloc]initWithFrame:CGRectMake((i - ) * imageWidth + KWHC_3D_WIDTH, , imageWidth, CGRectGetHeight(_frame))];
        imageView.tag = i;
        if(i == ){
            imageView.image = _imageArr[];
            imageView.layer.transform = [self initMakeTransform3D:];
        }else if(i == ){
            imageView.center = CGPointMake(KWHC_3D_WIDTH / , imageView.center.y);
            imageView.image = _imageArr[imageCount - ];
            imageView.layer.transform = [self initMakeTransform3D:acosf(KWHC_3D_WIDTH / imageWidth)];
        }else{
            imageView.center = CGPointMake(imageWidth + KWHC_3D_WIDTH + KWHC_3D_WIDTH / , imageView.center.y);
            NSInteger  index = i >= imageCount ? imageCount -  : i - ;
            imageView.image = _imageArr[index];
            imageView.layer.transform = [self initMakeTransform3D:-acosf(KWHC_3D_WIDTH / imageWidth)];
        }
        [self addSubview:imageView];
        [_imageViewArr addObject:imageView];
    }

    _pageCtl = [[UIPageControl alloc]initWithFrame:CGRectMake(, CGRectGetHeight(_frame) - KWHC_PAGE_CONTROL_HEIGHT, CGRectGetWidth(_frame), KWHC_PAGE_CONTROL_HEIGHT)];
    _pageCtl.backgroundColor = [UIColor clearColor];
    _pageCtl.numberOfPages = imageCount;
    [self addSubview:_pageCtl];

    UIButton * clearBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    clearBtn.frame = CGRectMake(, , CGRectGetWidth(_frame), CGRectGetHeight(_frame));
    clearBtn.backgroundColor = [UIColor clearColor];
    [clearBtn addTarget:self action:@selector(clickClearBtn:) forControlEvents:UIControlEventTouchUpInside];
    [self addSubview:clearBtn];

    if(imageCount > ){
        self.isCanTouchScroll = YES;
        self.isCanAutoScroll = YES;
    }
}

#pragma mark - handleAnimation
//切換時更新圖檔
- (void)updateImageViewImage:(WHC_TOUCH_ORI)touchOri{
    if(touchOri == LEFT){
        _currentIndex++;
        if(_currentIndex >= _imageArr.count){
            _currentIndex = ;
        }
        [_imageViewArr exchangeObjectAtIndex: withObjectAtIndex:];
        [_imageViewArr exchangeObjectAtIndex: withObjectAtIndex:];
    }else{
        _currentIndex--;
        if(_currentIndex < ){
            _currentIndex = _imageArr.count - ;
        }
        [_imageViewArr exchangeObjectAtIndex: withObjectAtIndex:];
        [_imageViewArr exchangeObjectAtIndex: withObjectAtIndex:];
    }
    _pageCtl.currentPage = _currentIndex;

    for(int i = ; i < _imageViewArr.count; i++){
        WHC_3DImageView * imageView  = _imageViewArr[i];
        imageView.tag = i;
        if(i == ){
            NSInteger index = _currentIndex - ;
            if(index < ){
                index = _imageArr.count - ;
            }
            imageView.image = _imageArr[index];
        }else if(i == ){
            imageView.image = _imageArr[_currentIndex];
        }else{
            NSInteger index = _currentIndex + ;
            if(index >= _imageArr.count){
                index = ;
            }
            imageView.image = _imageArr[index];
        }
    }
}

//觸摸移動圖檔
- (void)touchMoveImage:(WHC_TOUCH_ORI)ori withDistance:(CGFloat)moveXDistace{
    CGFloat        imageWidth = CGRectGetWidth([UIScreen mainScreen].bounds) - KWHC_3D_WIDTH * ;
    CGFloat        angle = (moveXDistace / ((KWHC_3D_WIDTH / ) + imageWidth)) *  * acosf((KWHC_3D_WIDTH / imageWidth));
    for (int i = ; i < ; i++) {
        WHC_3DImageView * imageView = _imageViewArr[i];
        [self setImageViewTransform3D:imageView angle:-angle distance:moveXDistace ori:ori];
    }
}

//動畫移動圖檔
- (void)animationMoveImage:(NSInteger)index withOri:(WHC_TOUCH_ORI)touchOri{
    WHC_3DImageView  * imageView0 = _imageViewArr[];
    WHC_3DImageView  * imageView2 = _imageViewArr[];

    if(touchOri == LEFT){
        [imageView0 reset];
        imageView0.layer.transform = [self initMakeTransform3D:-M_PI / ];
        imageView0.center = CGPointMake(CGRectGetWidth(_frame), imageView0.center.y);
    }else if(touchOri == RIGHT){
        [imageView2 reset];
        imageView2.layer.transform = [self initMakeTransform3D:M_PI / ];
        imageView2.center = CGPointMake(, imageView2.center.y);
    }
    [self updateImageViewImage:touchOri];
    [self updateImageViewPosition];
}

//更新圖檔空間位子
- (void)updateImageViewPosition{
    CGFloat  imageWidth = CGRectGetWidth(_frame) - KWHC_3D_WIDTH * ;
    WHC_3DImageView  * imageView0 = _imageViewArr[];
    WHC_3DImageView  * imageView1 = _imageViewArr[];
    WHC_3DImageView  * imageView2 = _imageViewArr[];
    [imageView0 reset];
    [imageView1 reset];
    [imageView2 reset];

    imageView0.center = CGPointMake(KWHC_3D_WIDTH / , imageView0.center.y);
    imageView0.layer.transform = [self initMakeTransform3D:acosf(KWHC_3D_WIDTH / imageWidth)];

    imageView1.center = CGPointMake(CGRectGetWidth(_frame) / ,imageView1.center.y);
    imageView1.layer.transform = [self initMakeTransform3D:];

    imageView2.center = CGPointMake(CGRectGetWidth(_frame) - KWHC_3D_WIDTH / , imageView2.center.y);
    imageView2.layer.transform = [self initMakeTransform3D:-acosf(KWHC_3D_WIDTH / imageWidth)];
#if 0
    [UIView animateWithDuration:KWHC_MOVE_IMAGE_DURING animations:^{
        imageView0.center = CGPointMake(KWHC_3D_WIDTH / , imageView0.center.y);
        imageView0.layer.transform = [self initMakeTransform3D:acosf(KWHC_3D_WIDTH / imageWidth)];

        imageView1.center = CGPointMake(CGRectGetWidth(_frame) / ,imageView1.center.y);
        imageView1.layer.transform = [self initMakeTransform3D:];

        imageView2.center = CGPointMake(CGRectGetWidth(_frame) - KWHC_3D_WIDTH / , imageView2.center.y);
        imageView2.layer.transform = [self initMakeTransform3D:-acosf(KWHC_3D_WIDTH / imageWidth)];
    }completion:^(BOOL finished) {
        _isExecAnimation = NO;
        self.isCanTouchScroll = YES;
    }];
#endif

}

//動畫調整圖檔位子
- (void)animationResetImage:(NSInteger)index  withOri:(WHC_TOUCH_ORI)touchOri{
    CGFloat  imageWidth = CGRectGetWidth(_frame) - KWHC_3D_WIDTH * ;
    WHC_3DImageView  * imageView0 = _imageViewArr[];
    WHC_3DImageView  * imageView1 = _imageViewArr[];
    WHC_3DImageView  * imageView2 = _imageViewArr[];

    if(imageView0.hidden){
        imageView0.center = CGPointMake(, imageView0.center.y);
        imageView0.layer.transform = [self initMakeTransform3D:M_PI / ];
    }

    if(imageView2.hidden){
        imageView2.center = CGPointMake(CGRectGetWidth(_frame), imageView2.center.y);
        imageView2.layer.transform = [self initMakeTransform3D:-M_PI / ];
    }

    [imageView0 reset];
    [imageView1 reset];
    [imageView2 reset];
    _isExecAnimation = YES;
    self.isCanTouchScroll = NO;
    [UIView animateWithDuration:KWHC_MOVE_IMAGE_DURING animations:^{
        imageView0.center = CGPointMake(KWHC_3D_WIDTH / , imageView0.center.y);
        imageView0.layer.transform = [self initMakeTransform3D:acosf(KWHC_3D_WIDTH / imageWidth)];

        imageView1.center = CGPointMake(CGRectGetWidth(_frame) / ,imageView1.center.y);
        imageView1.layer.transform = [self initMakeTransform3D:];

        imageView2.center = CGPointMake(CGRectGetWidth(_frame) - KWHC_3D_WIDTH / , imageView2.center.y);
        imageView2.layer.transform = [self initMakeTransform3D:-acosf(KWHC_3D_WIDTH / imageWidth)];
    }completion:^(BOOL finished) {
        _isExecAnimation = NO;
        self.isCanTouchScroll = YES;
    }];
}

#pragma mark - handleGesture
//手勢觸摸處理
- (void)handlePanGesture:(UIPanGestureRecognizer *)panGesture{
    switch (panGesture.state) {
        case UIGestureRecognizerStateBegan:
            if(self.isCanAutoScroll){
                _isStartTouch = YES;
                self.isCanAutoScroll = NO;
            }
            _startPoint = [panGesture locationInView:self];
            break;
        case UIGestureRecognizerStateChanged:{
            if(_isExecAnimation) return;
            CGPoint  currentPoint = [panGesture locationInView:self];
            CGFloat  moveXInstance = currentPoint.x - _startPoint.x;
            if([panGesture velocityInView:self].x < ){
                //left
                if (_currentMoveOri == RIGHT) {
                    [self touchMoveImage:LEFT withDistance:-fabsf(moveXInstance)];
                }else{
                    _currentMoveOri = LEFT;
                    [self touchMoveImage:LEFT withDistance:-fabsf(moveXInstance)];
                }
            }else{
                //right
                if(_currentMoveOri == LEFT){
                    [self touchMoveImage:RIGHT withDistance:fabsf(moveXInstance)];
                }else{
                    _currentMoveOri = RIGHT;
                    [self touchMoveImage:RIGHT withDistance:fabsf(moveXInstance)];
                }
            }
            _startPoint = currentPoint;
        }
            break;
        case UIGestureRecognizerStateEnded:
        case UIGestureRecognizerStateCancelled:{
            _currentMoveOri = NONE;
            if(_isStartTouch){
                self.isCanAutoScroll = YES;
            }
            _isStartTouch = NO;
            [self animationResetImage:KWHC_RIGHT_START_INDEX withOri:_currentMoveOri];
        }
            break;
        default:
            break;
    }
}

#pragma mark - clickAction

//單擊圖檔處理
- (void)clickClearBtn:(UIButton*)sender{
    if(_currentIndex <= _imageArr.count - ){
        if(_delegate && [_delegate respondsToSelector:@selector(WHC_3DAdvertisingWall:clickImage:index:)]){
            [_delegate WHC_3DAdvertisingWall:self clickImage:_imageArr[_currentIndex] index:_currentIndex];
        }
    }
}

@end
           

WHC_3DAdvertisingWallDemo下載下傳