更好的抽屉效果(ios)

时间:2022-03-11 16:21:01

昨天项目基本没啥事了,晚上早早的就回家了,躺在床上无聊地玩着手机(Android的),在清理系统垃圾时被一个“360手机助手”给吸引了,

其实我是被它的那个抽屉效果给吸引了,此时你也许会觉得我out了 ,一个抽屉效果有啥好吸引人的。

以前在项目中我也用到过抽屉,也看过大量的抽屉效果,大部分时间时只有一个view可以滑动的,下面那个view是不动的,就像是拉出或推出一个view的效果差不多,

但看到这个 360手机助手的抽屉效果时,我觉得原来的那些真没这个好看。在这个程序中,当你左右拖动那个view A时,另外一个view B也会相应的滑动,但滑动的幅度没有你拖动的那个view A大,不知道我表达清楚没有,你可以下载个360手机助手看看。

于是今天就模仿了一下,拖动view A时 两个view都可以滑动,则说明动画时作用两个view的。

下面直接上代码吧,代码很简单,也没具体完善逻辑,只是个简单的效果实现 ,了解抽屉效果的很容易就看懂的

1.工程结构图

更好的抽屉效果(ios)

2.主要的代码

//
// Drawer.h
// SlideDrawer
//
// Created by PSH_Chen_Tao on 10/12/13.
// Copyright (c) 2013 wolfman. All rights reserved.
// #import <UIKit/UIKit.h> //表明当前状态的枚举常量
typedef enum{
DrawerStatusLeft,
DrawerStatusRight
}DrawerStatus; @interface Drawer : UIView //初始化方法
-(id)initWithParent:(UIViewController *)parentViewController firstContent:(UIViewController *)firstContentViewController secondContent:(UIViewController *)secondContentViewController; @end
 //
// Drawer.m
// SlideDrawer
//
// Created by PSH_Chen_Tao on 10/12/13.
// Copyright (c) 2013 wolfman. All rights reserved.
// #import "Drawer.h"
#define kDistance 50
//#define firstContentMoveDistance 100
@implementation Drawer{
UIViewController *parent; //控制第一个内容view的controller
UIViewController *firstContent;
//控制第二个内容view的controller
UIViewController *secondContent; // 左滑时 firstContent的 view的center
CGPoint firstLeft;
// 右滑时 firstContent的 view的center
CGPoint firstRight; // 左滑时 secondContent的 view的center
CGPoint secondLeft;
// 右滑时 secondContent的 view的center
CGPoint secondRight; // 目前的状态
DrawerStatus status; // firstContent 的 center
CGPoint firstContentCenter; //移动比列,这个是关键,本程序是类似360手机助手一样的效果,两边的view都是
//可同时移动的,在此就需要一个很好的匹配,移动时两个view的间距不能增大或减小
float moveScale;
} -(id)initWithParent:(UIViewController *)parentViewController firstContent:(UIViewController *)firstContentViewController secondContent:(UIViewController *)secondContentViewController{
parent = parentViewController;
firstContent = firstContentViewController;
secondContent = secondContentViewController;
// 为了便于效果查看
firstContent.view.backgroundColor = [UIColor redColor];
secondContent.view.backgroundColor = [UIColor greenColor]; //设置frame
self = [super initWithFrame:CGRectMake(, , parent.view.frame.size.width, parent.view.frame.size.height)];
if (self) {
firstContent.view.frame = CGRectMake(, , self.frame.size.width, parent.view.frame.size.height);
[self addSubview:firstContent.view];
secondContent.view.frame = CGRectMake(, , parent.view.frame.size.width, parent.view.frame.size.height);
[self addSubview:secondContent.view]; // 下面算firstContent 和 secondContent的左右中心点时是要遵循一定关系的,
//firstContent 和 secondContent 的可移动距离之和必须等于 parent的宽度
firstLeft = CGPointMake(self.frame.size.width/ - kDistance, self.frame.size.height/);
firstRight = self.center; secondLeft = self.center;
secondRight = CGPointMake(self.frame.size.width+secondContent.view.frame.size.width/-kDistance, self.frame.size.height/); firstContent.view.center = firstRight;
secondContent.view.center = secondRight;
status = DrawerStatusRight; // 加入手势
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(handleTap:)];
tap.numberOfTapsRequired = ;
tap.enabled = YES;
[secondContent.view addGestureRecognizer:tap]; UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(handlePan:)];
pan.enabled = YES;
[secondContent.view addGestureRecognizer:pan]; //设置第一个view 的起始center
firstContentCenter = firstContent.view.center; //这个是关键,为什么要这样算,为了防止两个content view之间的间距发生改变,
//所以firstContent 和 secondContent 的可移动距离之和必须等于 parent的宽度
moveScale = (float)kDistance/(float)(self.frame.size.width - kDistance);
} return self;
} -(void)handleTap:(UITapGestureRecognizer *)tap{
// 当secondController完全出现在屏幕中时,则只有点击左上角时才有用
// 呵呵,没啥好写的,就是简单地控制下点击范围
if (status == DrawerStatusLeft) { CGPoint p = [tap locationInView:secondContent.view];
if (p.x > kDistance || p.y > ) {
return;
}
} [UIView animateWithDuration:0.3 delay:0.01 options:UIViewAnimationOptionCurveLinear animations:^{
if (status == DrawerStatusRight) {
secondContent.view.center = secondLeft; firstContent.view.center = firstLeft;
status = DrawerStatusLeft;
}else{
secondContent.view.center = secondRight;
firstContent.view.center = firstRight;
status = DrawerStatusRight;
}
} completion:nil]; } -(void)handlePan:(UIPanGestureRecognizer *)pan{ CGPoint point = [pan translationInView:self]; if (secondContent.view.center.x + point.x < secondLeft.x) { secondContent.view.center = secondLeft;
firstContent.view.center = firstLeft; }else if (secondContent.view.center.x + point.x > secondRight.x){ secondContent.view.center = secondRight; firstContent.view.center = firstRight; }else{
secondContent.view.center = CGPointMake(secondContent.view.center.x + point.x, secondContent.view.center.y);
//firstContent的移动距离必须按照比例计算
firstContent.view.center = CGPointMake(firstContent.view.center.x + point.x*moveScale, firstContent.view.center.y);
} [pan setTranslation:CGPointMake(, ) inView:self];
if (pan.state == UIGestureRecognizerStateEnded) {
[UIView animateWithDuration:0.3 delay:0.01 options:UIViewAnimationOptionCurveLinear animations:^{
if (secondContent.view.center.x < secondRight.x*/) { secondContent.view.center = secondLeft; firstContent.view.center = firstLeft;
status = DrawerStatusLeft;
}else{ secondContent.view.center = secondRight;
firstContent.view.center = firstRight; status = DrawerStatusRight;
}
} completion:nil];
}
} @end

上面两段是主要的代码了,下面是使用的地方

 //
// ViewController.m
// SlideDrawer
//
// Created by PSH_Chen_Tao on 10/12/13.
// Copyright (c) 2013 wolfman. All rights reserved.
// #import "ViewController.h" #import "FirstViewController.h"
#import "SecondViewController.h"
#import "Drawer.h"
@interface ViewController () @end @implementation ViewController - (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib. FirstViewController *fisrt = [[FirstViewController alloc]initWithNibName:@"FirstViewController" bundle:nil]; SecondViewController *second = [[SecondViewController alloc]initWithNibName:@"SecondViewController" bundle:nil]; Drawer *drawer = [[Drawer alloc]initWithParent:self firstContent:fisrt secondContent:second];
[self.view addSubview:drawer];
} - (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
} @end

呵呵,可以看看效果,是不是感觉好点。。