当前位置: 首页 > 面试题库 >

如何实现导航堆栈中的View Controller的“拖动权以关闭”?

冯流觞
2023-03-14
问题内容

默认情况下,如果从屏幕的左边缘向右拖动,它将拖动ViewController并将其移出堆栈。

我想将此功能扩展到整个屏幕。当用户向右拖动时,我希望发生同样的事情。

我知道我可以执行向右滑动手势,只需调用
self.navigationController?.popViewControllerAnimated(true)

但是,没有“拖动”动作。我希望用户能够像拖动鼠标一样右键拖动视图控制器,以显示其下方。并且,如果将其拖到50%以上,请将其关闭。(查看instagram了解我的意思。)


问题答案:

在此处输入图片说明

在Github中制作了一个演示项目
https://github.com/rishi420/SwipeRightToPopController

我用过UIViewControllerAnimatedTransitioning协议

从文档中:

//这用于百分比驱动的交互式过渡以及容器控制器…

UIPanGestureRecognizer在控制器的视图中添加了一个。这是手势的动作:

func handlePanGesture(panGesture: UIPanGestureRecognizer) {

    let percent = max(panGesture.translationInView(view).x, 0) / view.frame.width

    switch panGesture.state {

    case .Began:
        navigationController?.delegate = self
        navigationController?.popViewControllerAnimated(true)

    case .Changed:
        percentDrivenInteractiveTransition.updateInteractiveTransition(percent)

    case .Ended:
        let velocity = panGesture.velocityInView(view).x

        // Continue if drag more than 50% of screen width or velocity is higher than 1000
        if percent > 0.5 || velocity > 1000 {
            percentDrivenInteractiveTransition.finishInteractiveTransition()
        } else {
            percentDrivenInteractiveTransition.cancelInteractiveTransition()
        }

    case .Cancelled, .Failed:
        percentDrivenInteractiveTransition.cancelInteractiveTransition()

    default:
        break
    }
}

脚步:

  1. 计算视图上的拖动百分比
  2. .Begin:指定要执行的序列并分配UINavigationController委托。需要代表InteractiveTransitioning
  3. .Changed: 带百分比的UpdateInteractiveTransition
  4. .Ended: 如果拖动50%或更高或更高的速度,则继续保持过渡状态,否则取消
  5. .Cancelled, .Failed: 取消过渡

参考文献:

  1. UIPercentDrivenInteractiveTransition
  2. https://github.com/visnup/swipe-left
  3. https://github.com/robertmryan/ScreenEdgeGestureNavigationController
  4. https://github.com/groomsy/custom-navigation-animation-transition-demo


 类似资料:
  • 我需要一些关于react原生应用程序的社区建议。我是一个全新的人,不理解其中的一些基本区别。 关于反应本地文档创建StackNavigator的示例建议如下:从“反应导航堆栈”导入{createStackNav导航仪}; 我发现很多人使用下面的样式导入{堆栈导航器,Tab导航器}从“反应导航”; 为什么人们使用以上两种不同的风格?哪一个更合适,为什么? react-navigation-stack

  • 我想为我基于Web的系统开发一个自定义应用程序,以与Android和IOS一起运行。我对在我的项目中使用反应原生/expo非常初学者。我想创建一个登录页面和仪表板,以便在登录后重定向。现在我在实现堆栈导航器时遇到问题,因为我只遵循了一个youtube教程。 这是我的App.js 现在,我想首先在这里导航我的登录名。js,它位于modules/login.js 如果我尝试运行我的代码,我在cmd中遇

  • 下面是我MERN项目的文件结构。 客户端文件夹包含反应服务器。客户端在<code>localhost.Client上运行。comServer文件夹包含节点的代码。js服务器。服务器运行于 每当我从客户端向服务器发出请求时。如何缓解 csrf 攻击?确保向服务器发出的请求来自客户端,而不是来自任何其他源。

  • 我正在使用android中的新导航架构组件,在移动到一个新的片段后,我被困在清除导航堆栈中。 示例:我在loginFragment中,当我导航到home片段时,我希望该片段从堆栈中清除,这样当用户按下back按钮时,他就不会返回到loginFragment。 我正在使用一个简单的navhostfragment.findnavcontroller(Fragment).navigate(r.id.ho

  • 当显示主片段时,我试图清除后堆栈中的所有片段。在导航图中,我添加了这个动作 在登录片段中。我尝试了findNavController()。导航(LoginFragmentDirections.actionLoginFragmentToHomeFragment()) 和 我从这里的文件中了解到https://developer.android.com/guide/navigation/navigat

  • 本文向大家介绍安卓(Android)中如何实现滑动导航,包括了安卓(Android)中如何实现滑动导航的使用技巧和注意事项,需要的朋友参考一下 为了打造流畅的用户导航体验,我们不得不依赖智能手机最常见的一个功能:触摸。 触摸改变应用程序的视图是现在最流行一种导航设计。在本文中,我们将经过必要的几步来实现应用内的横向滑动导航。 本文毫无迟疑地使用了代码优先的方法 。让我们看一下滑动导航需要完成的主要