【UI基础】抽屉效果简单实现

本文记录了作者重新实现抽屉效果的过程,虽然存在一些小bug,但基本功能已经完成,适合初学者参考和进一步优化。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前几天学的抽屉效果,然后没有搞懂,今天又实现了一遍。估计还在在一些小小bug,有待进一步完善

//
//  ViewController.m
//  08-抽屉效果
//
//  Created by styshy on 15/11/2.
//  Copyright (c) 2015年 sz. All rights reserved.
//

#import "ViewController.h"
#define maxY 60

@interface ViewController () <UIGestureRecognizerDelegate>

@property (nonatomic,weak) UIView *blueV;
@property (nonatomic,weak) UIView *greenV;
@property (nonatomic,weak) UIView *mainV;
@property (nonatomic,assign) BOOL isDraging;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    // 添加所有子控件
    [self addAllChildren];
    
    // kvo观察者模式
    [self.mainV addObserver:self forKeyPath:@"frame" options:NSKeyValueObservingOptionNew context:nil];
}

- (void)addAllChildren{
    // 蓝色
    UIView *blueV = [[UIView alloc] init];
    blueV.backgroundColor = [UIColor blueColor];
    blueV.frame = self.view.bounds;
    [self.view addSubview:blueV];
    self.blueV = blueV;
    
    // 绿色
    UIView *greenV = [[UIView alloc] init];
    greenV.backgroundColor = [UIColor greenColor];
    greenV.frame = self.view.bounds;
    [self.view addSubview:greenV];
    self.greenV = greenV;
    
    // 红色
    UIView *mainV = [[UIView alloc] init];
    mainV.backgroundColor = [UIColor redColor];
    mainV.frame = self.view.bounds;
    [self.view addSubview:mainV];
    self.mainV = mainV;
}

// 只要监听的属性一旦改变就会调用
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{
    
    if (self.mainV.frame.origin.x > 0) {
        self.blueV.hidden= YES;
        self.greenV.hidden = NO;
    }else if(self.mainV.frame.origin.x < 0){
        self.blueV.hidden = NO;
        self.greenV.hidden = YES;
    }
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [touches anyObject];
    
    CGPoint curP = [touch locationInView:self.view];
    CGPoint preP = [touch previousLocationInView:self.view];
    
    CGFloat offsetX =curP.x - preP.x;
    
    // 设置frame
    self.mainV.frame = [self frameWithOffset:offsetX];;
}

// 根据偏移量计算frame的值
- (CGRect)frameWithOffset:(CGFloat) offsetX{
    CGFloat screenW = [UIScreen mainScreen].bounds.size.width;
    CGFloat screenH = [UIScreen mainScreen].bounds.size.height;
    
    // 设置手指每移动一点,y的偏移量
    // 此处设置的是self.mainV.frame.orgin.x>0的情况,当x>0是左右滑动的情况
    CGFloat offsetY = offsetX * maxY /screenW;
 
    if (self.mainV.frame.origin.x < 0) {
        offsetY = - offsetX * maxY /screenW;
    }
    
    CGFloat scale= (screenH - 2*offsetY)/screenH;
    

    
    CGRect frame = self.mainV.frame;
    
    frame.size.width *= scale;
    frame.size.height *= scale;
    
    frame.origin.x += offsetX;
    frame.origin.y += offsetY;
    
    return frame;
}
#define targetR 300
#define targetL 60
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
    // 获取屏幕的宽度
    CGFloat screenW = [UIScreen mainScreen].bounds.size.width;

    CGRect frame = self.mainV.frame;
    
    // 当主屏幕右移的时候
    if(frame.origin.x>0){
        if (frame.origin.x < screenW * 0.5) {
            [UIView animateWithDuration:0.25 animations:^{
                self.mainV.frame = [UIScreen mainScreen].bounds;
            }];
        }else{
            CGFloat offsetX = targetR - self.mainV.frame.origin.x;
            self.mainV.frame = [self frameWithOffset:(offsetX)];
        }
    }else{// 当主屏幕左移的时候
        CGFloat mainMaxX = CGRectGetMaxX(self.mainV.frame);
        if (mainMaxX >screenW * 0.5) {
            [UIView animateWithDuration:0.25 animations:^{
                self.mainV.frame = [UIScreen mainScreen].bounds;
            }];
        }else{
            CGFloat offsetX =targetL - mainMaxX;
            self.mainV.frame = [self frameWithOffset:offsetX];
            
        }
    }

}


@end

实现的效果展示:


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值