如何用Objective-C实现下拉拖拽关闭模态视图（仿Twitter图片浏览）

Hey there! 我刚好做过类似的需求，把Swift版本的逻辑转成Objective-C其实思路完全一致——核心就是通过UIPanGestureRecognizer监听拖拽手势，实时更新模态视图的位置、透明度和缩放比例，当拖拽距离达到阈值时触发关闭动画。下面是完整的可落地实现方案：

1. 创建自定义模态视图控制器 #

首先我们需要一个自定义的ModalViewController来承载图片和处理拖拽逻辑：

#import <UIKit/UIKit.h>

@interface ModalViewController : UIViewController
// 传入要展示的图片
@property (nonatomic, strong) UIImage *displayImage;
@end

@implementation ModalViewController

@property (nonatomic, strong) UIImageView *imageView;
@property (nonatomic, assign) CGPoint originalViewCenter; // 记录视图初始中心位置

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 初始化背景样式
    self.view.backgroundColor = [UIColor blackColor];
    self.view.alpha = 0.9;
    
    // 创建并配置图片展示视图
    self.imageView = [[UIImageView alloc] initWithImage:self.displayImage];
    self.imageView.contentMode = UIViewContentModeScaleAspectFit;
    self.imageView.frame = CGRectInset(self.view.bounds, 20, 40);
    [self.view addSubview:self.imageView];
    
    // 添加拖拽手势识别器
    UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePanGesture:)];
    [self.view addGestureRecognizer:panGesture];
    
    // 保存视图初始位置
    self.originalViewCenter = self.view.center;
}

@end

2. 实现拖拽手势核心逻辑 #

这部分是功能的关键，我们需要根据手势的不同状态（开始、拖动中、结束/取消）来处理视图的变化：

- (void)handlePanGesture:(UIPanGestureRecognizer *)gesture {
    CGPoint translation = [gesture translationInView:self.view.superview];
    
    switch (gesture.state) {
        case UIGestureRecognizerStateBegan:
            // 开始拖拽时清除所有未完成的动画，避免冲突
            [self.view.layer removeAllAnimations];
            break;
            
        case UIGestureRecognizerStateChanged:
            // 只允许向下拖拽（符合Twitter的交互逻辑）
            if (translation.y > 0) {
                // 更新视图位置
                self.view.center = CGPointMake(self.originalViewCenter.x, self.originalViewCenter.y + translation.y);
                
                // 根据拖拽距离计算比例，同步调整透明度和图片缩放
                CGFloat dragRatio = translation.y / self.view.bounds.size.height;
                self.view.alpha = 0.9 - (dragRatio * 0.8);
                self.imageView.transform = CGAffineTransformMakeScale(1 - (dragRatio * 0.2), 1 - (dragRatio * 0.2));
            }
            break;
            
        case UIGestureRecognizerStateEnded:
        case UIGestureRecognizerStateCancelled:
            // 设置关闭阈值（这里取屏幕高度的1/4，可按需调整）
            CGFloat dismissThreshold = self.view.bounds.size.height / 4;
            if (translation.y > dismissThreshold) {
                // 拖拽距离达标，执行关闭动画
                [self dismissModalWithAnimation];
            } else {
                // 未达标，回弹到初始位置
                [self resetViewToOriginalPosition];
            }
            break;
            
        default:
            break;
    }
}

3. 添加回弹与关闭动画 #

为了让交互更流畅，我们需要实现视图回弹和关闭的动画效果：

- (void)resetViewToOriginalPosition {
    [UIView animateWithDuration:0.3 
                          delay:0 
         usingSpringWithDamping:0.8 
          initialSpringVelocity:0.5 
                        options:UIViewAnimationOptionCurveEaseInOut 
                     animations:^{
        self.view.center = self.originalViewCenter;
        self.view.alpha = 0.9;
        self.imageView.transform = CGAffineTransformIdentity;
    } completion:nil];
}

- (void)dismissModalWithAnimation {
    [UIView animateWithDuration:0.3 animations:^{
        // 让视图向下移出屏幕并完全透明
        self.view.center = CGPointMake(self.originalViewCenter.x, self.originalViewCenter.y + self.view.bounds.size.height);
        self.view.alpha = 0;
        self.imageView.transform = CGAffineTransformMakeScale(0.8, 0.8);
    } completion:^(BOOL finished) {
        // 动画完成后关闭模态视图
        [self dismissViewControllerAnimated:NO completion:nil];
    }];
}

4. 在主控制器中调用展示 #

最后，在你需要触发模态视图的地方（比如按钮点击事件），这样调用即可：

- (IBAction)showImageModal:(UIButton *)sender {
    ModalViewController *imageModalVC = [[ModalViewController alloc] init];
    imageModalVC.displayImage = [UIImage imageNamed:@"your_target_image"];
    // 设置全屏模态样式，避免系统默认卡片样式干扰交互
    imageModalVC.modalPresentationStyle = UIModalPresentationFullScreen;
    [self presentViewController:imageModalVC animated:YES completion:nil];
}

一些优化小提示 #

• 如果你需要把模态视图嵌入到UINavigationController中，记得把拖拽手势添加到导航控制器的view上，或者调整视图层级的处理逻辑。
• 可以根据需求调整阈值、动画参数（弹簧阻尼、速度），让拖拽手感更贴近Twitter的原生体验。
• 如果需要支持多方向拖拽，只需要修改translation的判断逻辑即可（比如放开对translation.y > 0的限制）。

内容的提问来源于stack exchange，提问作者dobiho