美文网首页
BottomSheet 半模态视图

BottomSheet 半模态视图

作者: biyuhuaping | 来源:发表于2024-06-18 11:26 被阅读0次

    先看效果图:


    效果预览.gif



    越来越多的app,使用半模态视图,弹窗从底部弹窗,手动滑动收起。交互流程丝滑,体验流畅。我这一研究才发现,官方出了一个控件叫 UISheetPresentationController,使用起来及其方便,只需要关注业务逻辑就可以,着急的朋友可以直接把demo拿去。BottomSheetDemo

    系统提供的 UISheetPresentationController,但只在iOS16+才支持自定义高度

    // 支持的自定义显示大小
        if (@available(iOS 16.0, *)) {
            if (vc.sheetPresentationController) {
                UISheetPresentationController *sheet = vc.sheetPresentationController;
                UISheetPresentationControllerDetent *smallDetent = [UISheetPresentationControllerDetent customDetentWithIdentifier:@"small" resolver:^CGFloat(id<UISheetPresentationControllerDetentResolutionContext> context) {
                    return 0.2 * context.maximumDetentValue;
                }];
                
                sheet.detents = @[
                    [UISheetPresentationControllerDetent customDetentWithIdentifier:nil resolver:^CGFloat(id<UISheetPresentationControllerDetentResolutionContext> context) {
                        return 200.0; // 固定大小
                    }],
                    smallDetent,
                    [UISheetPresentationControllerDetent customDetentWithIdentifier:nil resolver:^CGFloat(id<UISheetPresentationControllerDetentResolutionContext> context) {
                        return 0.5 * context.maximumDetentValue; // 占上下文最大尺寸的0.5
                    }],
                    UISheetPresentationControllerDetent.largeDetent
                ];
                sheet.prefersGrabberVisible = YES;//是否在表单顶部显示一个抓手。默认值为 NO
                sheet.preferredCornerRadius = 10;//表单展示时的首选圆角半径
            }
            [self presentViewController:vc animated:YES completion:nil];
        } else {
            // Fallback on earlier versions
        }
    

    我们的app,还要适配iOS9.0 ,所以只能另求他法,此处推荐一个第三方库 HWPanModal Star1.1k,可以比较完美的适配低版本,感谢作者。

    相关文章

      网友评论

          本文标题:BottomSheet 半模态视图

          本文链接:https://www.haomeiwen.com/subject/ozefcjtx.html