iOS UIPanGestureRecognizer(拖动手势) 和点击按钮实现类似左抽屉的效果

最新推荐文章于 2025-06-07 13:00:00 发布

原创最新推荐文章于 2025-06-07 13:00:00 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

iOS 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何在iOS应用中通过UIPanGestureRecognizer手势和点击按钮，实现类似左抽屉的交互效果。通过创建和配置手势识别器以及响应方法，实现在屏幕上的滑动视图左右移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<pre name="code" class="objc">//
//  PublicViewController.m
//  slidingTest
//
//  Created by rimi on 15/12/3.
//  Copyright © 2015年 hxm. All rights reserved.
//

#import "PublicViewController.h"
#import "SldingViewController.h"
#define SCREEN_W [UIScreen mainScreen].bounds.size.width
#define SCREEN_H [UIScreen mainScreen].bounds.size.height
#define MIN_CENTER_X SCREEN_W/6
#define MAX_CENTER_X SCREEN_W/6*4
@interface PublicViewController ()
{
    UIButton *okBtn;
    SldingViewController *sldingView;
}
@end

@implementation PublicViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor cyanColor];
    
    /**< 初始化按钮  */
    okBtn = [UIButton buttonWithType:UIButtonTypeSystem];
    okBtn.frame = CGRectMake(SCREEN_W/30, SCREEN_H/1.2, SCREEN_W/10, SCREEN_W/10);
    okBtn.backgroundColor = [UIColor whiteColor];
    [okBtn setTitle:@"点击" forState:UIControlStateNormal];
    [okBtn addTarget:self action:@selector(respondToOkBtn) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:okBtn];
    
    /**< 添加滑动视图  */
    sldingView = [[SldingViewController alloc]init];
    sldingView.view.backgroundColor = [UIColor orangeColor];
    sldingView.view.frame = CGRectMake(SCREEN_W/6, 0, SCREEN_W, SCREEN_H);
    [self.view addSubview:sldingView.view];
    
    
    /**
     *  拖动手势方法
     */
    [self initializeGestureRecognizer];
    
}

#pragma mark - respondToOkBtn
- (void)respondToOkBtn
{
    //判断，如果滑动视图的中心点 > 最小距离的中心点
    if (sldingView.view.center.x > MIN_CENTER_X + CGRectGetWidth(self.view.bounds)/2) {
        [UIView animateWithDuration:0.4 animations:^{
           /**< 滑动视图的中心点 = 最小距离的中心点 */
        sldingView.view.center = CGPointMake(MIN_CENTER_X+CGRectGetWidth(self.view.bounds)/2,sldingView.view.center.y);
        }];
    }
    else
    {
        /**< 反之则执行 滑动视图的中心点 = 最大距离的中心点  */
        [UIView animateWithDuration:0.4 animations:^{
            sldingView.view.center = CGPointMake(MAX_CENTER_X+CGRectGetWidth(self.view.bounds)/2, sldingView.view.center.y);
        }];
    }
}

#pragma mark -添加拖动手势
- (void)initializeGestureRecognizer
{
    //创建拖动手势
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self
                                                                         action:@selector(respondsToGestureRecognizer:)];
    //将手势添加到滑动视图上
    [sldingView.view addGestureRecognizer:pan];
}
/**< 响应拖动手势  */
- (void)respondsToGestureRecognizer:(UIPanGestureRecognizer*)getsure
{
    //设置移动距离
    CGPoint translation = [getsure translationInView:sldingView.view];
    //设置拖动中心
    CGPoint desCenter;
    desCenter.y = sldingView.view.center.y;

    //设置x轴的变化位置
    CGFloat source_x = sldingView.view.center.x;
    
    //如果移动距离的值 <= 0 时，则向左滑
    if (translation.x <= 0) {
        //MAX 两者之中取最大值
        desCenter.x = MAX(desCenter.x = source_x + translation.x,MIN_CENTER_X + CGRectGetWidth(self.view.bounds)/2);
    }
    else//向右滑
    {
        desCenter.x = MIN(desCenter.x = source_x + translation.x, MAX_CENTER_X + CGRectGetWidth(self.view.bounds)/2);
    }
    //移动的中心点 赋值给 拖动视图的中心点
    sldingView.view.center = desCenter;
    //拖动视图上的拖动手势设置移动的起始坐标为(0,0)
    [getsure setTranslation:CGPointMake(0, 0) inView:sldingView.view];

}
@end

效果如下:

<img src="https://img-blog.youkuaiyun.com/20151203130503982?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />