微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

平移 UIViewController 使固定在安全区域的东西跳转到超级视图

如何解决平移 UIViewController 使固定在安全区域的东西跳转到超级视图

我正在使用此代码使 UIViewController 可平移,因此 post

class ViewControllerPannable: UIViewController {
  var panGestureRecognizer: UIPanGestureRecognizer?
  var originalPosition: CGPoint?
  var currentPositionTouched: CGPoint?
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    panGestureRecognizer = UIPanGestureRecognizer(target: self,action: #selector(panGestureAction(_:)))
    view.addGestureRecognizer(panGestureRecognizer!)
  }
  
  func panGestureAction(_ panGesture: UIPanGestureRecognizer) {
    let translation = panGesture.translation(in: view)
    
    if panGesture.state == .began {
      originalPosition = view.center
      currentPositionTouched = panGesture.location(in: view)
    } else if panGesture.state == .changed {
        view.frame.origin = CGPoint(
          x: translation.x,y: translation.y
        )
    } else if panGesture.state == .ended {
      let veLocity = panGesture.veLocity(in: view)

      if veLocity.y >= 1500 {
        UIView.animate(withDuration: 0.2,animations: {
            self.view.frame.origin = CGPoint(
              x: self.view.frame.origin.x,y: self.view.frame.size.height
            )
          },completion: { (isCompleted) in
            if isCompleted {
              self.dismiss(animated: false,completion: nil)
            }
        })
      } else {
        UIView.animate(withDuration: 0.2,animations: {
          self.view.center = self.originalPosition!
        })
      }
    }
  }
}

这在没有缺口的旧手机上效果很好。但是如果手机有缺口,一旦你开始平移,固定在安全区域的任何视图都会跳转到超级视图。我认为问题出在

view.frame.origin = CGPoint(
              x: translation.x,y: translation.y
            )

但我不知道如何让固定在安全区域的任何东西在平移时保持这种状态。

解决方法

在将视图拖到 <div id="btncontainer"> <button class="buttonnorm tablinks active" id="defaultOpen"> <span class="chaname">usagi tsukino</span><br> <span class="chasubtitle">sailor moon</span> </button> <button class="button2 tablinks"> <span class="chaname">ami mizuno</span><br> <span class="chasubtitle">sailor moon</span> </button> <button class="button3 tablinks"> <span class="chaname">rei hino</span><br> <span class="chasubtitle">sailor moon</span> </button> <button class="button4 tablinks"> <span class="chaname">makoto kino</span><br> <span class="chasubtitle">sailor moon</span> </button> </div> <div id="Tab 1" class="tab tabcontent" style="display: block;"> <div id="leftcontent"> <h1><span class="firstword">usagi</span> tsukino</h1> <div id="linkbox"> <div id="quote"><i class="fas fa-quote-left" aria-hidden="true"></i> girls have to be strong to protect the men they love <i class="fas fa-quote-right" aria-hidden="true"></i> </div> <div id="links"><a href=""><i class="fas fa-hat-cowboy" aria-hidden="true"></i></a><a href=""><i class="fas fa-tools" aria-hidden="true"></i></a><a href=""><i class="fas fa-radiation" aria-hidden="true"></i></a><a href=""><i class="fas fa-skull-crossbones" aria-hidden="true"></i></a><a href=""><i class="fas fa-crow" aria-hidden="true"></i></a><a href=""><i class="fas fa-hammer" aria-hidden="true"></i></a></div> </div> <div id="bio"> </div> </div> <div id="rightcontent"><img src="https://64.media.tumblr.com/0ebf1e3381365b16b33d25bdecbf117b/8f55519f8fad3e4e-10/s250x400/580220f8f5fee91b0309d40472ab09c4d1891196.png"><!-- facts --> <div id="facts"><span class="prompt">senshi name</span><span class="answer">sailor moon</span><br><br><span class="prompt">age</span><span class="answer">14</span><br><br><span class="prompt">gender</span><span class="answer">female</span><br><br><span class="prompt">sexuality</span><span class="answer">bisexual</span><br><br><span class="prompt">alignment</span><span class="answer">chaotic good</span><br><br><span class="prompt">zodiac</span><span class="answer">cancer</span><br><br><span class="prompt">birthday</span><span class="answer">june 30</span><br><br><span class="prompt">height</span><span class="answer">1.5 m</span></div> </div> </div> <div id="Tab 2" class="tab tabcontent2" style="display: none;"> <div id="leftcontent"> <h1><span class="firstword">ami</span> mizuno</h1> <div id="linkbox2"> <div id="quote2"><i class="fas fa-quote-left" aria-hidden="true"></i> be pure,be honest,be beautiful <i class="fas fa-quote-right" aria-hidden="true"></i> </div> <div id="links2"><a href=""><i class="fas fa-tree" aria-hidden="true"></i></a><a href=""><i class="fas fa-water" aria-hidden="true"></i></a><a href=""><i class="fas fa-leaf" aria-hidden="true"></i></a><a href=""><i class="fas fa-cloud" aria-hidden="true"></i></a><a href=""><i class="fas fa-seedling" aria-hidden="true"></i></a><a href=""><i class="fas fa-snowflake" aria-hidden="true"></i></a></div> </div> <div id="bio"> </div> </div> <div id="rightcontent2"><img src="https://64.media.tumblr.com/50fea5f245734d1fc1f5b85a67f09894/tumblr_psusqs3NH31u4buxw_250.jpg"><!-- facts --> <div id="facts2"><span class="prompt">senshi name</span><span class="answer">sailor mercury</span><br><br><span class="prompt">age</span><span class="answer">14</span><br><br><span class="prompt">gender</span><span class="answer">female</span><br><br><span class="prompt">sexuality</span><span class="answer">asexual</span><br><br><span class="prompt">alignment</span><span class="answer">lawful neutral</span><br><br><span class="prompt">zodiac</span><span class="answer">virgo</span><br><br><span class="prompt">birthday</span><span class="answer">september 10</span><br><br><span class="prompt">height</span><span class="answer">1.57 m</span></div> </div> </div> <div id="Tab 3" class="tab tabcontent3" style="display: none;"> <div id="leftcontent"> <h1><span class="firstword">rei</span> hino</h1> <div id="linkbox"> <div id="quote"><i class="fas fa-quote-left" aria-hidden="true"></i> i shall punish those who steal pure hearts to destroy innocent lives with the fire of mars <i class="fas fa-quote-right" aria-hidden="true"></i> </div> <div id="links"><a href=""><i class="fas fa-star" aria-hidden="true"></i></a><a href=""><i class="fas fa-moon" aria-hidden="true"></i></a><a href=""><i class="fas fa-sun" aria-hidden="true"></i></a><a href=""><i class="fas fa-rocket" aria-hidden="true"></i></a><a href=""><i class="fas fa-meteor" aria-hidden="true"></i></a><a href=""><i class="fas fa-space-shuttle" aria-hidden="true"></i></a></div> </div> <div id="bio"> </div> </div> <div id="rightcontent"><img src="https://64.media.tumblr.com/ac674f03dc750c712230e83ec85ba5cf/d98316f0f765c3e8-41/s250x400/7e0c373b6010f073801ccb83b78a4e2095d11a73.png"><!-- facts --> <div id="facts"><span class="prompt">senshi name</span><span class="answer">sailor mars</span><br><br><span class="prompt">age</span><span class="answer">14</span><br><br><span class="prompt">gender</span><span class="answer">female</span><br><br><span class="prompt">sexuality</span><span class="answer">heterosexual</span><br><br><span class="prompt">alignment</span><span class="answer">true neutral</span><br><br><span class="prompt">zodiac</span><span class="answer">aries</span><br><br><span class="prompt">birthday</span><span class="answer">april 17</span><br><br><span class="prompt">height</span><span class="answer">1.6 m</span></div> </div> </div> <div id="Tab 4" class="tab tabcontent4" style="display: none;"> <div id="leftcontent"> <h1><span class="firstword">makoto</span> kino</h1> <div id="linkbox"> <div id="quote"><i class="fas fa-quote-left" aria-hidden="true"></i> how dare you destroy my precious lunch box! | I'll make you feel regret,it'll leave you numb! <i class="fas fa-quote-right" aria-hidden="true"></i> </div> <div id="links"><a href=""><i class="fas fa-tree" aria-hidden="true"></i></a><a href=""><i class="fas fa-water" aria-hidden="true"></i></a><a href=""><i class="fas fa-leaf" aria-hidden="true"></i></a><a href=""><i class="fas fa-cloud" aria-hidden="true"></i></a><a href=""><i class="fas fa-seedling" aria-hidden="true"></i></a><a href=""><i class="fas fa-snowflake" aria-hidden="true"></i></a></div> </div> <div id="bio"> </div> </div> <div id="rightcontent"><img src="https://64.media.tumblr.com/34352616dab51ba5003b7d0029dc21e8/be1a62031dc1914e-e0/s250x400/48eae314a8f879e29f6ab106c921499c045b24c6.png"><!-- facts --> <div id="facts"><span class="prompt">senshi name</span><span class="answer">sailor jupiter</span><br><br><span class="prompt">age</span><span class="answer">14</span><br><br><span class="prompt">gender</span><span class="answer">female</span><br><br><span class="prompt">sexuality</span><span class="answer">pansexual</span><br><br><span class="prompt">alignment</span><span class="answer">lawful good</span><br><br><span class="prompt">zodiac</span><span class="answer">sagittarius</span><br><br><span class="prompt">birthday</span><span class="answer">december 5</span><br><br><span class="prompt">height</span><span class="answer">1.67 m</span></div> </div> </div>layoutSubviews 之外后,您希望避免 superview。只要您不手动调用 frame,您就可以通过确保最后一次 setNeedsLayout 更改穿过室外来实现这一点。只需制作足够多的变量来精确控制这种情况。

我在自定义类似操作表的演示文稿中遇到了这个问题。当我拉下视图以关闭时,没有问题。但是当我向上拉视图以拉伸然后然后向下时,frame.size 突然从 0 跳到非零。

原因是因为我的视野向上而不是向下延伸。拉起是 safeAreaInsets 变化和 frame.origin.y 变化。向下只是一个 frame.size.height 变化。然而,frame.origin.y 没有无限粒度,因此从负到正 UIPanGestureRecognizer 的跳跃导致 translation 同时改变为 {{1} } 向下。这在视图部分位于 origin.y 之外时触发了 frame.size.height,这意味着它运行的布局代码突然确认了 layoutSubviews 更改。

我的解决方案本质上是:

superview

这会强制视图在穿过 safeAreaInsets 的边界之前为静态大小,确保使用正确的 if translation < 0 && oldTranslation > 0 || translation > 0 && oldTranslation < 0 { view.frame = originalFrame } else { view.frame = calculate(translation) } 调用 superview,但是随着位置的变化, layoutSubviews 没有。

如果您还有其他事情触发 safeAreaInsets,您的情况可能会有所不同。你可能不得不追捕它。

我注意到的另一件事是,当 safeArea 可能有 layoutSubviews 时,您正在移动 UIViewControllerview,这可能会产生其他影响或边缘情况,因为 {{1} } 继承自 parent 层次结构,而不仅仅是 safeArea

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。