美文网首页
iOS页面抽屉效果的构思和实现

iOS页面抽屉效果的构思和实现

作者: coderwx | 来源:发表于2016-10-31 02:34 被阅读0次

目前市场上很多APP都有抽屉效果的界面,界面大同小异,一下是我个人分析和实现的抽屉效果,我是以代码加注释的方式分析抽屉效果界面的搭建和效果的实现的.

实现效果图:


第一步:搭建界面

- (void)viewDidLoad {

[superviewDidLoad];

//搭建界面

[selfsetUpView];

}

- (void)setUpView{

//添加左边的View

UIView*leftV = [[UIViewalloc]initWithFrame:self.view.bounds];

//左边蓝色

leftV.backgroundColor= [UIColorblueColor];

[self.viewaddSubview:leftV];

添加右边的View

UIView*rightV = [[UIViewalloc]initWithFrame:self.view.bounds];

//右边縁色

rightV.backgroundColor= [UIColorgreenColor];

self.rightV= rightV;

[self.viewaddSubview:rightV];

//添加中间的View(中间一个最后添加,显示到最外面.)

UIView*mainV = [[UIViewalloc]initWithFrame:self.view.bounds];

//中间红色

mainV.backgroundColor= [UIColorredColor];

self.mainV= mainV;

[self.viewaddSubview:mainV];

}

//第二步.添加手势.能够让中间的红色View左右移动,要在控制器View加载完成时就要添加View

- (void)viewDidLoad {

[superviewDidLoad];

//搭建界面

[selfsetUpView];

//拖动手势

UIPanGestureRecognizer*pan = [[UIPanGestureRecognizeralloc]initWithTarget:selfaction:@selector(pan:)];

//添加手势

[self.mainVaddGestureRecognizer:pan];

}

//实现手势方法:

//当手指拖动时调用.

-(void)pan:(UIPanGestureRecognizer*)pan{

//获取手指在屏幕上面的偏移量

CGPointtransP = [pantranslationInView:self.mainV];

//在这里为什么不用Transform,是因为我们移动时,要改变的尺寸大小.用Transform只能改变它的位置.

self.mainV.transform  = CGAffineTransformTranslate(self.mainV.transform, transP.x, 0);

//计算mainV的Frame

//单独抽出一个方法来计算mainV的frame.因为要计算它的Y值和高度.代码会很多.所以单独抽出一个方法

self.mainV.frame= [selfframeWithOffsetX:transP.x];

//每次移动时判断当前MainV的x值是大于0还是小于0.如果是大于0 ,显示左边,小于0显示右边

if(self.mainV.frame.origin.x>0) {

self.rightV.hidden=YES;

}elseif(self.mainV.frame.origin.x<0){

self.rightV.hidden=NO;

}

//注意要做复位

[pansetTranslation:CGPointZeroinView:self.mainV];

}

//最大Y值为100

#define maxY100

//根据偏移量计算mainV的frame.

- (CGRect)frameWithOffsetX:(CGFloat)offsetX{

//取出最原始的Frame

CGRectframe =self.mainV.frame;

frame.origin.x+= offsetX;

//获取屏幕的宽度

//(计算Y值如果下图:找最大值.当Main.x拖动最大的时候,Main.y值也最大.main.x最大为屏幕的宽度)

//设定一个最大Y值MaxY为100,正好.当max.x为屏幕的宽度时,最大Y等于100

//所以Y值等于 main.y = main.x * maxY / ScreenW;

100 = 375 * 100 / 375;)

//有可能frame.origin.x有可能是小于0,小于0的话,得出的Y值就会小于0,小于0就会出现,红色的View向上走.

//对结果取绝对值.

frame.origin.y=fabs(frame.origin.x*maxY/screenW);

//计算frame的高度

//(当前Main的高度等于屏幕的高度减去两倍的Y值.)

frame.size.height=screenH-2* frame.origin.y;

//返回计算好的frame.

returnframe;

}

//第三步:当手指松开时做到自动定位.

MainV定位到右侧的X值

#define targetR275

MainV定位到右侧的X值

#define targetL -275

//当手指拖动时调用.

-(void)pan:(UIPanGestureRecognizer*)pan{

//获取手指在屏幕上面的偏移量

CGPointtransP = [pantranslationInView:self.mainV];

//在这里为什么不用Transform,是因为我们移动时,要改变的尺寸大小.用Transform只能改变它的位置.

self.mainV.transform  = CGAffineTransformTranslate(self.mainV.transform, transP.x, 0);

//计算mainV的Frame

//单独抽出一个方法来计算mainV的frame.因为要计算它的Y值和高度.代码会很多.所以单独抽出一个方法

self.mainV.frame= [selfframeWithOffsetX:transP.x];

//每次移动时判断当前MainV的x值是大于0还是小于0.如果是大于0 ,显示左边,小于0显示右边

if(self.mainV.frame.origin.x>0) {

self.rightV.hidden=YES;

}elseif(self.mainV.frame.origin.x<0){

self.rightV.hidden=NO;

}

//判断手指的状态

if(pan.state==UIGestureRecognizerStateEnded){

//当手指松开时进入执行

//记录最终判断结果后.定位的值.

CGFloattarget =0;

//当手指松开,要判断MainV的x值是否大于屏幕的一半.如果大于屏幕一半时,自动定位到右边一个位置.

if(self.mainV.frame.origin.x>screenW*0.5) {

target =targetR;

}elseif(CGRectGetMaxX(self.mainV.frame)

//当手指松开,要判断MainV的最大的X值是否小于屏幕的一半.如果小于屏幕的一半时,自动定位到左边的位置.

target =targetL;

}

最终定位的x值 - 当前的main.x的值. 求出便宜量.使其定位

CGFloatoffsetX = target -self.mainV.frame.origin.x;


//根据便宜量设置mainV的frame值

CGRectframe = [selfframeWithOffsetX:offsetX];

[UIViewanimateWithDuration:0.25animations:^{

//伴随动画设置frame

self.mainV.frame= frame;

}];

}

//注意要做复位

[pansetTranslation:CGPointZeroinView:self.mainV];

}

相关文章

  • iOS页面抽屉效果的构思和实现

    目前市场上很多APP都有抽屉效果的界面,界面大同小异,一下是我个人分析和实现的抽屉效果,我是以代码加注释的方式分析...

  • ios 电商demo(实现各种常见动画效果和页面布局)

    ios 电商demo(实现各种常见动画效果和页面布局) ios 电商demo(实现各种常见动画效果和页面布局)

  • IOS抽屉效果的实现

    抽屉视图实现的思路 UIViewController 控制着一个 左边的抽屉视图(LeftViewControl...

  • iOS 抽屉效果的实现

    整个效果有两个视图:蓝色View和红色View,可以把红色View的效果拆分为水平方向的平移和整个的缩放,这样水平...

  • iOS 抽屉效果实现

    1.添加需要实现抽屉效果的三个视图,这里需要注意主视图需要放在最后添加 2.实现左滑显示左边视图,右滑出现右边视图...

  • iOS UIGesutreRecognizer&实现抽屉效果

    抽屉效果 实现: 1.界面切换2.界面复位3.界面自动转换 效果图

  • 【axure】axure实现web页面抽屉式菜单

    我们经常在各种Web后台页面中看到抽屉式菜单,本文将介绍如何使用axure实现抽屉式菜单效果~~如果你看完学会了,...

  • iOS中抽屉效果的简单实现

    现在很多应用中都使用到了抽屉效果,在这里我简单的实现了下 在这里我做的是三个界面的切换实现思路:1.通过在一个控制...

  • iOS左滑抽屉效果的实现

    前言 在最近的项目需求中需要实现左滑抽屉的效果,经过调研,使用一个经典的第三方库来实现,MMDrawerContr...

  • iOS 抽屉效果

    效果图 平时开发中经常会用到抽屉效果,关于抽屉的实现有许多三方库,读者可以根据需要选用,本节内容主要简单的实现一个...

网友评论

      本文标题:iOS页面抽屉效果的构思和实现

      本文链接:https://www.haomeiwen.com/subject/axosyttx.html