抽屉效果
添加子视图
* 简单的滑动效果
* 监听控制器处理事件方法
* 获取x轴偏移量
* 改变主视图的frame
* 利用KVO做视图切换
往左移动,显示右边,隐藏左边
往右移动,显示左边,隐藏右边
* 复杂的滑动效果,PPT讲解(根据手指每移动一点,x轴的偏移量算出当前视图的frame)
假设x移到320时,y移动到60,算出没移动一点x,移动多少y
offsetY = offsetX * 60 / 320 手指每移动一点,x轴偏移量多少,y偏移多少
为了好看,x移动到320,距离上下的高度需要保持一致,而且有一定的比例去缩放他的尺寸。
怎么根据之前的frame,算出当前的frame,touchMove只能拿到之前的frame.
当前的高度 = 之前的高度 * 这个比例
缩放比例:当前的高度/之前的高度 (screenH - 2 * offsetY) / screenH
当前的宽度也一样求。
y值,计算比较特殊,不能直接用之前的y,加上offsetY,往左滑动,主视图应该往下走,但是offsetX是负数,导致主视图会往上走。
y = (screenH - 当前的高度)* 0.5
getCurrentFrameWithOffsetX
* 定位(滑动松开手指的时候,移动到目标点)
移动到左右目标点,根据偏移量 = 当前目标点的x - 之前视图的x,计算移动到目标点的frame
还原:当没有移动到目标点,就把主视图还原。
* 复位(当主视图不在原始的位置,点击屏幕,恢复原来位置)
判断手指是否移动,移动的时候就自动定位,不需要手动复位。
代码实现:
//
// ViewController.m
// 抽屉效果
//
// Created by wtw on 15/7/20.
// Copyright (c) 2015年 wtw. All rights reserved.
//
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic,weak) UIView *leftView;
@property (nonatomic,weak) UIView *rightView;
@property (nonatomic,weak) UIView *mainView;
//复位,定位后点击后会复位
@property (nonatomic,assign) BOOL isDraging;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//添加子控件
[self addchildview];
//时刻监听主视图frame的改变
/**
* 以后如果需要时刻监听对象的某个属性的改变,就用KVO
* 给mainView添加一个观察者
* addObserver:观察者
* forKeyPath:需要监听的属性
* options:监听新值的改变
*/
[self.mainView addObserver:self forKeyPath:@"frame" options:NSKeyValueObservingOptionNew context:nil];
}
//只要监听的属性以改变就会调用
-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
//NSLog(@"%@",NSStringFromCGRect(self.mainView.frame));
if (self.mainView.frame.origin.x < 0) {
//显示右边,隐藏左边
self.rightView.hidden = NO;
self.leftView.hidden = YES;
}else if (self.mainView.frame.origin.x >0) {
//显示左边,隐藏右边
self.leftView.hidden = NO;
self.rightView.hidden = YES;
}
}
- (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 yellowColor];
[self.view addSubview:rightView];
self.rightView = rightView;
//main
UIView *mainView = [[UIView alloc]initWithFrame:self.view.bounds];
mainView.backgroundColor = [UIColor redColor];
[self.view addSubview:mainView];
self.mainView = mainView;
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
//获取手指
UITouch *touch = [touches anyObject];
//当前点
CGPoint curP = [touch locationInView:self.view];
//上一个点
CGPoint preP = [touch previousLocationInView:self.view];
//获取手指每移动一下,x轴的偏移量
CGFloat offsetX = curP.x - preP.x;
//设置当前视图的frame
self.mainView.frame = [self frameWithOffsetX:offsetX];
//记录下当前正在拖拽
self.isDraging = YES;
}
# pragma mark - y反向最大的偏移量
#define MaxY 60
- (CGRect)frameWithOffsetX:(CGFloat)offsetX {
CGFloat screenW = [UIScreen mainScreen].bounds.size.width;
CGFloat screenH = [UIScreen mainScreen].bounds.size.height;
CGFloat offsetY = offsetX * MaxY / screenW;
//获取缩放比例
CGFloat scale = (screenH - 2 * offsetY) / screenH;
//右边移动的时候的缩放比例
if (self.mainView.frame.origin.x < 0) {
scale = (screenH + 2 * offsetY) / screenH;
}
CGRect frame = self.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;
}
#pragma mark - 定位功能
#define targetRX 300
#define TargetLx -250
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
if (_isDraging == NO && _mainView.frame.origin.x != 0) {
//复位
[UIView animateWithDuration:0.25 animations:^{
self.mainView.frame = self.view.bounds;
}];
//下面不需要定位
return;
}
//定位功能
CGFloat screenW = [UIScreen mainScreen].bounds.size.width;
//获取当前主视图的frame
CGRect frame = self.mainView.frame;
CGFloat target = 0;
if (frame.origin.x > screenW * 0.5) {
//当主视图的x大于屏幕一半,定位到右边
target = targetRX;
}else if (CGRectGetMaxX(self.mainView.frame) < screenW * 0.5) {
//定位左边
target = TargetLx;
}
if(target == 0) {
//还原
[UIView animateWithDuration:0.25 animations:^{
self.mainView.frame = self.view.bounds;
}];
}else {
[UIView animateWithDuration:0.25 animations:^{
//获取x轴偏移量
CGFloat offsetX = target - frame.origin.x;
self.mainView.frame = [self frameWithOffsetX:offsetX];
}];
}
//记录下当前正在拖拽
self.isDraging = NO;
}
@end