目前市場上很多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];
}
