1、容器视图实现的侧滑示例图效果如下所示:
2、代码部分如下所示:
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic,weak) IBOutlet UIView *containerView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self setUpUI];
}
// 当用户触摸屏幕的时候开始给容器视图添加手势
-(void)setUpUI{
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
[_containerView addGestureRecognizer:pan];
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tap:)];
[_containerView addGestureRecognizer:tap];
}
// 添加点按手势
-(void)tap:(UITapGestureRecognizer *)sender{
[UIView animateWithDuration:0.25 animations:^{
_containerView.transform = CGAffineTransformIdentity;
}];
}
// 添加的拖拽手势
-(void)pan:(UIPanGestureRecognizer *)sender{
//1、获取拖拽手势获取偏移量
CGPoint translate = [sender translationInView:_containerView];
// 2、重置 为什么要重置 因为每一次的偏移都是从屏幕最左边为起始位置
[sender setTranslation:CGPointZero inView:_containerView];
switch (sender.state) {
case UIGestureRecognizerStateBegan:
case UIGestureRecognizerStateChanged:
{
// 这样做的好处就是 translate.x 和 _containerView.frame.origin.x
CGFloat destX = translate.x + _containerView.frame.origin.x;
// 限制容器视图向左移动
if (destX < 0) {
return;
}
// 设置容器视图的水平偏移量 每一次的偏移量都是基于上一次的偏移
_containerView.transform = CGAffineTransformTranslate(_containerView.transform,translate.x, 0);
}
break;
case UIGestureRecognizerStateEnded:
{
// 手势结束 判断偏移量距离屏幕中心的位置
CGFloat centerX = [UIScreen mainScreen].bounds.size.width * 0.5;
CGFloat containerX = _containerView.frame.origin.x;
CGFloat destination = centerX + 40;
if (centerX < containerX ) {
[UIView animateWithDuration:0.25 animations:^{
_containerView.transform = CGAffineTransformMakeTranslation(destination, 0);
}];
break;
}
#warning - 这里用到的是switch的穿透效果
}
case UIGestureRecognizerStateFailed:
case UIGestureRecognizerStateCancelled:
{
[UIView animateWithDuration:0.25 animations:^{
// 回到原始位置
_containerView.transform = CGAffineTransformIdentity;
}];
}
break;
default:
break;
}
}
@end
3、说一下实现的思路
3.1、使用侧滑手势来拿到容器视图的偏移,然后实现容器视图的偏移。
根据侧滑手势的状态分别对容器视图的侧滑情况进行设置。侧滑效果把屏幕宽度的1/2的位置作为分界线。侧滑超过屏幕1/2的位置时候,那么就保持这种抽屉的打开效果,如果没有超过屏幕跨度1/2的时候,就以动画的效果关闭抽屉的效果。同时,不允许容器视图向左侧滑动。接下来就判断侧滑手势的状态,让容器视图到达指定的位置。
3.2、在点击容器视图的时候,容器视图回到原始位置,铺满整个屏幕。使用的是点击手势(UITApGestureRecognizer手势)。创建手势对象,添加到要作用的容器视图上。在点击手势的方法选择器中,执行容器视图的transform方法,来实现容器视图的平移效果。同时为了保证平移时不显得那么生硬,就把平移放在UIView动画中来执行。