貓貓學IOS（二十六）UI之iOS抽屜效果小Demo，iosui

貓貓學IOS（二十六）UI之iOS抽屜效果小Demo，iosui

貓貓分享，必須精品

素材代碼地址：http://blog.csdn.net/u013357243/article/details/45305785
原創文章，歡迎轉載。轉載請註明：翟乃玉的部落格
地址：http://blog.csdn.net/u013357243?viewmode=contents

先看效果

實現過程第一步，把三個view設定好，還有顏色

#warning 第一步- (void)addChildView{    // left    UIView *leftView = [[UIView alloc] initWithFrame:self.view.bounds];    leftView.backgroundColor = [UIColor greenColor];    [self.view addSubview:leftView];    _leftView = leftView;    // right    UIView *rightView = [[UIView alloc] initWithFrame:self.view.bounds];    rightView.backgroundColor = [UIColor blueColor];    [self.view addSubview:rightView];    _rightView = rightView;    // mainView    UIView *mainView = [[UIView alloc] initWithFrame:self.view.bounds];    mainView.backgroundColor = [UIColor redColor];    [self.view addSubview:mainView];    _mainView = mainView;}

第二步，擷取點，然後得到手指滑動位移量的x值，然後根據演算法算出需要做出的位移。

#warning 第二步- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{    // 擷取UITouch對象    UITouch *touch = [touches anyObject];    // 擷取當前點    CGPoint currentPoint = [touch locationInView:self.view];    // 擷取上一個點    CGPoint prePoint = [touch previousLocationInView:self.view];    // x軸位移量：當手指移動一點的時候，x位移多少    CGFloat offsetX = currentPoint.x - prePoint.x;    // 設定當前主視圖的frame    _mainView.frame = [self getCurrentFrameWithOffsetX:offsetX];    _isDraging = YES;}

第三步：觀察_mainView的frame改變

#warning 第三步 觀察_mainView的frame改變    // 2.監聽    /**     *  給_mainView添加一個觀察者     *     *  KeyPath：監聽frame這個屬性     *     *  options：監聽新值的改變     */    [_mainView addObserver:self forKeyPath:@"frame" options:NSKeyValueObservingOptionNew context:nil];}// 當_mainView的frame屬性改變的時候就會調用- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{    NSLog(@"%@", NSStringFromCGRect(_mainView.frame));    if (_mainView.frame.origin.x < 0) { // 往左移動        // 顯示右邊        _rightView.hidden = NO;        // 隱藏左邊        _leftView.hidden = YES;    }else if (_mainView.frame.origin.x > 0){ // 往右移動        // 顯示左邊        _rightView.hidden = YES;        // 隱藏右邊        _leftView.hidden = NO;    }}

第四步

#warning 第四步：根據X軸的位移量算出當前主視圖的frame與定位複位。#define HMMaxY 60// 當手指位移一點，根據X軸的位移量算出當前主視圖的frame- (CGRect)getCurrentFrameWithOffsetX:(CGFloat)offsetX{    CGFloat screenW = [UIScreen mainScreen].bounds.size.width;    CGFloat screenH = [UIScreen mainScreen].bounds.size.height;    // 擷取y軸位移量，手指每移動一點，y軸位移多少    CGFloat offsetY = offsetX * HMMaxY / screenW;    CGFloat scale = (screenH - 2 * offsetY) / screenH;    if (_mainView.frame.origin.x < 0) { // 往左邊滑動        scale = (screenH + 2 * offsetY) / screenH;    }    // 擷取之前的frame    CGRect frame = _mainView.frame;    frame.origin.x += offsetX;    frame.size.height = frame.size.height *scale;    frame.size.width = frame.size.width *scale;    frame.origin.y = (screenH - frame.size.height) * 0.5;    return frame;}#define HMRTarget 250#define HMLTarget -220/* _mainView.frame.origin.x > screenW * 0.5 定位到右邊  CGRectGetMaxX(_mainView.frame) < screenW * 0.5 定位到左邊 -220 */// 定位- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{    // 複位    if (_isDraging == NO && _mainView.frame.origin.x != 0) {        [UIView animateWithDuration:0.25 animations:^{            _mainView.frame = self.view.bounds;        }];    }    CGFloat screenW = [UIScreen mainScreen].bounds.size.width;    CGFloat target = 0;    if (_mainView.frame.origin.x > screenW * 0.5) { // 定位到右邊        target = HMRTarget;    }else if (CGRectGetMaxX(_mainView.frame) < screenW * 0.5) { // 定位到左邊        target = HMLTarget;    }    [UIView animateWithDuration:0.25 animations:^{        if (target) { // 在需要定位左邊或者右邊            // 擷取x軸位移量            CGFloat offsetX = target - _mainView.frame.origin.x;            // 設定當前主視圖的frame            _mainView.frame = [self getCurrentFrameWithOffsetX:offsetX];        }else{ // 還原            _mainView.frame = self.view.bounds;        }    }];    _isDraging = NO;}

ps：建立iOS交流學習群：304570962 可以加貓貓QQ：1764541256 或則znycat 讓我們一起努力學習吧。
翟乃玉的部落格
地址：http://blog.csdn.net/u013357243?viewmode=contents