使用 UISheetPresentationController 实现现代化的底部弹窗iOS 16 中，Apple 引入

使用 UISheetPresentationController 实现现代化的底部弹窗

在 iOS 16 中，Apple 引入了 UISheetPresentationController，这是一个功能强大的新特性，它允许开发者以更灵活的方式呈现底部弹窗（Sheet）。通过 UISheetPresentationController，你可以轻松创建可交互的 bottom sheet，支持多种样式和自定义行为。本文将详细介绍如何在 iOS 应用中使用 UISheetPresentationController。

什么是 UISheetPresentationController？

UISheetPresentationController 提供了一种新的方式来呈现模态视图，允许开发者指定弹窗的高度和样式。与传统的视图控制器呈现方式相比，它提供了更加丰富的用户体验，包括交互式半屏和自定义高度的支持。

主要特性

支持多种 detent（高度选项），可以非常灵活地配置视图控制器的呈现。
可以自定义是否显示抓取器（grabber），以提高用户交互体验。
支持 swipe-to-dismiss 交互，带给用户更自然的使用感受。

使用 UISheetPresentationController 的步骤

下面是使用 UISheetPresentationController 的详细步骤。

1. 创建底部弹窗视图控制器

首先，我们需要创建一个视图控制器，这个视图控制器将呈现在底部。

// MySheetViewController.h
#import <UIKit/UIKit.h>

@interface MySheetViewController : UIViewController

@end

// MySheetViewController.m
#import "MySheetViewController.h"

@implementation MySheetViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 设置背景颜色
    self.view.backgroundColor = [UIColor whiteColor];
    
    // 创建标签
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(20, 100, 280, 50)];
    label.text = @"Welcome to the Sheet!";
    label.textAlignment = NSTextAlignmentCenter;
    [self.view addSubview:label];
    
    // 创建关闭按钮
    UIButton *closeButton = [UIButton buttonWithType:UIButtonTypeSystem];
    [closeButton setTitle:@"Close" forState:UIControlStateNormal];
    closeButton.frame = CGRectMake(100, 200, 100, 50);
    [closeButton addTarget:self action:@selector(closeButtonTapped:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:closeButton];
}

- (void)closeButtonTapped:(UIButton *)sender {
    [self dismissViewControllerAnimated:YES completion:nil];
}

@end

2. 在主视图控制器中实现弹窗的呈现

接下来，我们将在主视图控制器中展示刚刚创建的 MySheetViewController。

// MainViewController.m
#import "MainViewController.h"
#import "MySheetViewController.h"

@implementation MainViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor whiteColor];
    
    // 创建按钮以展示 Sheet
    UIButton *showSheetButton = [UIButton buttonWithType:UIButtonTypeSystem];
    [showSheetButton setTitle:@"Show Sheet" forState:UIControlStateNormal];
    showSheetButton.frame = CGRectMake(100, 200, 200, 50);
    [showSheetButton addTarget:self action:@selector(showSheet) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:showSheetButton];
}

- (void)showSheet {
    MySheetViewController *sheetVC = [[MySheetViewController alloc] init];
    
    // 创建 UISheetPresentationController
    if (@available(iOS 15.0, *)) {
        UISheetPresentationController *sheetPresentationController = sheetVC.sheetPresentationController;
        // 配置 detent，可以设置为中等和大高度
        sheetPresentationController.detents = @[[UISheetPresentationControllerDetent mediumDetent], [UISheetPresentationControllerDetent largeDetent]];
        
        sheetPresentationController.prefersGrabberVisible = YES; // 显示抓手
        sheetPresentationController.largestUncollapsedDetent = UISheetPresentationDetentMedium; // 最大可展开的 detent
        
        // 设置成本控制器的样式
        sheetPresentationController.preferredIndicatorTintColor = [UIColor systemBlueColor]; // 抓手颜色
    }
    
    // 呈现 Sheet
    [self presentViewController:sheetVC animated:YES completion:nil];
}

@end

3. 配置 UISheetPresentationController 属性

在上面的代码中，我们特别配置了以下几个属性：

detents: 指定我们希望支持的 detent（高度选项）。这里我们设置了中等和大高度。
prefersGrabberVisible: 决定是否显示抓取指示器，该控件在用户交互时提供视觉反馈。
largestUncollapsedDetent: 指定最大展开的 detent，确保用户在展开时能够达到的最大高度。

实际效果

通过以上代码，我们创建了一个简单的应用，当用户点击 "Show Sheet" 按钮时，会弹出一个底部 sheet。这个 sheet 拥有一个标签和一个关闭按钮，当用户点击关闭按钮时，将会关闭 sheet。

总结

UISheetPresentationController 为开发者提供了灵活且用户友好的方式来实现底部弹窗。这不仅使得界面更现代化，还优化了用户交互体验。你可以根据具体需求自定义弹出视图的样式和行为，使应用更加符合用户习惯。