Swift - 在旋转时将UIImageView保持在相同位置

时间:2016-07-21 18:14:31

标签: ios swift

我有UIWebView,在其scrollView中,我添加了一个像这样的UIImageView:

self.webview.scrollView.addSubview(image)

我的问题是当我将设备从纵向旋转到横向时,UIImageView没有停留在我最初在scrollView上设置的位置,我理解屏幕的宽度和高度变化,我猜我想要的是什么它会改变我的UIImageView上的位置,所以看起来它没有改变。

我有这个方法:

 override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) {

        var newScrollViewFrame = webview.scrollView.frame
        var newFrame = webview.frame

        newFrame.size.width = size.width
        newFrame.size.height = size.height

        newScrollViewFrame.size.width = size.width
        newScrollViewFrame.size.height = size.height

        webview.frame = newFrame
        webview.scrollView.frame = newScrollViewFrame

    }

此方法中的当前代码只调整UIWebView及其滚动视图的大小,但不调整scrollView中的UIImageViews

任何帮助都将不胜感激。

谢谢,

我尝试了以下内容:

for views in webview.scrollView.subviews
        {
            if(views.isKindOfClass(UIImageView))
            {
                views.transform = CGAffineTransformMakeRotation(CGFloat(M_PI)/2);

            }
        }

但这会在旋转时侧向放置UIImageView

以下是我如何将webview添加到视图中:

webview = UIWebView()

        webview.frame = self.view.bounds
        webview.scrollView.frame = webview.frame

        webview.userInteractionEnabled = true
        webview.scalesPageToFit = true
        webview.becomeFirstResponder()
        webview.delegate = self
        webview.scrollView.delegate = self
        self.view.addSubview(webview)

我有一半解决了我的问题,但做了以下事情:

webview.translatesAutoresizingMaskIntoConstraints = false

let horizontalConstraint = NSLayoutConstraint(item: webview, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0)
        view.addConstraint(horizontalConstraint)

        let verticalConstraint = NSLayoutConstraint(item: webview, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.CenterY, multiplier: 1, constant: 0)
        view.addConstraint(verticalConstraint)

        let widthConstraint = NSLayoutConstraint(item: webview, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 0.1, constant: 500)
        view.addConstraint(widthConstraint)

        let heightConstraint = NSLayoutConstraint(item: webview, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 500)
        view.addConstraint(heightConstraint)

但是现在,UIWebView不是全宽或高度:( Sooooo close。

我也试过这个,但是UIImageView不会保留在同一个地方。

let left = NSLayoutConstraint(item: self.webView, attribute: .Left, relatedBy: .Equal, toItem: self.view, attribute: .Left, multiplier: 1, constant: 0) 

let right = NSLayoutConstraint(item: self.webView, attribute: .Right, relatedBy: .Equal, toItem: self.view, attribute: .Right, multiplier: 1, constant: 0) 

let top = NSLayoutConstraint(item: self.webView, attribute: .Top, relatedBy: .Equal, toItem: self.view, attribute: .Top, multiplier: 1, constant: 0) 

let bottom = NSLayoutConstraint(item: self.webView, attribute: .Bottom, relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 1, constant: 0) 

NSLayoutConstraint.activateConstraints([top, bottom, left, right])

我也尝试过向UIImageView添加约束

let stampView:StampAnnotation = StampAnnotation(imageIcon: UIImage(named: "approved.png"), location: CGPointMake(currentPoint.x, currentPoint.y))
            self.webview.scrollView.addSubview(stampView)

            let left = NSLayoutConstraint(item: stampView, attribute: .Left, relatedBy: .Equal, toItem: self.webview.scrollView, attribute: .Left, multiplier: 1, constant: 0)

            let right = NSLayoutConstraint(item: stampView, attribute: .Right, relatedBy: .Equal, toItem: self.webview.scrollView, attribute: .Right, multiplier: 1, constant: 0)

            let top = NSLayoutConstraint(item: stampView, attribute: .Top, relatedBy: .Equal, toItem: self.webview.scrollView, attribute: .Top, multiplier: 1, constant: 0)

            let bottom = NSLayoutConstraint(item: stampView, attribute: .Bottom, relatedBy: .Equal, toItem: self.webview.scrollView, attribute: .Bottom, multiplier: 1, constant: 0)

            NSLayoutConstraint.activateConstraints([top, bottom, left, right])

同样的结果,UIImageView不会停留在同一个地方。

更新

我的网页浏览:

webview = UIWebView()
        webview.userInteractionEnabled = true
        webview.scalesPageToFit = true
        webview.becomeFirstResponder()
        webview.delegate = self
        webview.scrollView.delegate = self
        self.view.addSubview(webview)

        webview.loadRequest(NSURLRequest(URL:url))
        webview.gestureRecognizers = [pinchRecognizer, panRecognizer]
        webview.translatesAutoresizingMaskIntoConstraints = false

        let left = NSLayoutConstraint(item: webview, attribute: .Left, relatedBy: .Equal, toItem: self.view, attribute: .Left, multiplier: 1, constant: 0)

        let right = NSLayoutConstraint(item: webview, attribute: .Right, relatedBy: .Equal, toItem: self.view, attribute: .Right, multiplier: 1, constant: 0)

        let top = NSLayoutConstraint(item: webview, attribute: .Top, relatedBy: .Equal, toItem: self.view, attribute: .Top, multiplier: 1, constant: 0)

        let bottom = NSLayoutConstraint(item: webview, attribute: .Bottom, relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 1, constant: 0)

        NSLayoutConstraint.activateConstraints([top, bottom, left, right])

的UIImageView

stampView.translatesAutoresizingMaskIntoConstraints = false

            let left = NSLayoutConstraint(item: stampView, attribute: .Left, relatedBy: .Equal, toItem: self.webview.scrollView, attribute: .Left, multiplier: 1, constant: 100)

            let right = NSLayoutConstraint(item: stampView, attribute: .Right, relatedBy: .Equal, toItem: self.webview.scrollView, attribute: .Right, multiplier: 1, constant: 0)

            let top = NSLayoutConstraint(item: stampView, attribute: .Top, relatedBy: .Equal, toItem: self.webview.scrollView, attribute: .Top, multiplier: 1, constant: 100)

            let bottom = NSLayoutConstraint(item: stampView, attribute: .Bottom, relatedBy: .Equal, toItem: self.webview.scrollView, attribute: .Bottom, multiplier: 1, constant: 0)

            let width = NSLayoutConstraint(item: stampView, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 0.1, constant: 150)

            let height = NSLayoutConstraint(item: stampView, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 73)

            NSLayoutConstraint.activateConstraints([left, right, top, bottom, width, height])

我只需要弄清楚数学让这个设备处于触摸位置。 (百分比?)

2 个答案:

答案 0 :(得分:2)

我认为如果不使用自动布局,这些事情总是更容易做到。为此,我建议使用viewDidLayoutSubviews()。这是我的代码:

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    webView.frame = view.bounds

    let screen = UIScreen.mainScreen().fixedCoordinateSpace

    //These values will give a rect half the size of the screen and centered.
    let width = screen.bounds.width / 2
    let height = screen.bounds.height / 2
    let x = (screen.bounds.width - width) / 2
    let y = (screen.bounds.height - height) / 2
    let absoluteRect = CGRect(x: x, y: y, width: width, height: height)

    let stampRect = screen.convertRect(absoluteRect, toCoordinateSpace: webView)
    stampView.frame = stampRect

    //Change the orientation of the image
    switch UIDevice.currentDevice().orientation {
    case .LandscapeLeft:
        stampView.image = UIImage(CGImage:originalImage.CGImage!, scale:originalImage.scale, orientation: UIImageOrientation.Left)
        break
    case .LandscapeRight:
        stampView.image = UIImage(CGImage:originalImage.CGImage!, scale:originalImage.scale, orientation: UIImageOrientation.Right)
        break
    default:
        stampView.image = UIImage(CGImage:originalImage.CGImage!, scale:originalImage.scale, orientation: UIImageOrientation.Up)
        break
    }
}

我在这里做了几件事......首先我设置了webViewFrame。接下来,在此处定义相对于屏幕的绝对坐标系统很有帮助。当手机方向改变时,屏幕的值不会改变(允许你将imageView保持在同一个地方。)接下来我为stampView定义了所需的帧,然后将绝对帧转换为其在scrollView中的等效帧(它&# 39; s superView)并将其分配给stampView。最后,如果您希望StampView中的图像始终正确定向,则需要更改图像方向。 CGAffineTransformMakeRotation仅在视图为方形时才有效,但我们可以通过实际更改stampView中的imageOrientation来使其更加通用。这需要原始图片的属性

let originalImage = UIImage(named: "image_name")!

最后,因为viewWillLayoutSubViews()没有为横向过渡调用,请执行以下操作:

override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) {
    view.setNeedsLayout()
}

此代码不适用于最漂亮的过渡,它应该有助于解决您的布局问题。

答案 1 :(得分:1)

要使UIImageView保持相同的尺寸并保持与UIWebView相同的位置,您可以将观看次数设置为各自的{ {1}}。在这里,我创建了一些模拟视图来说明基本思想:

superView

然后在旋转时更改框架(注意import UIKit class ViewController: UIViewController { //we create some views for testing and create references to the size and points we need for positioning let webView = UIWebView() let image = UIImageView() let image2 = UIImageView() var imageViewSize = CGSize() var imageViewCenter = CGPoint() override func viewDidLoad() { super.viewDidLoad() //set webView frame webView.frame = self.view.bounds webView.backgroundColor = UIColor.clearColor() webView.userInteractionEnabled = true webView.scalesPageToFit = true webView.opaque = false self.view.addSubview(webView) //we will hold onto the original size of the UIImageView for later imageViewSize = CGSizeMake(webView.bounds.size.width * 0.2, webView.bounds.size.height * 0.1) //mock UIImageView image.backgroundColor = UIColor.orangeColor() image.frame.size = CGSizeMake(imageViewSize.width, imageViewSize.height) image.center = CGPointMake(webView.bounds.size.width / 2, webView.bounds.size.height / 2) webView.scrollView.addSubview(image) //I've created a subset image to illustrate the orientation image2.backgroundColor = UIColor.whiteColor() image2.frame = CGRectMake(10, 10, 10, 10) image.addSubview(image2) } 上的位置和UIImageView的宽度是相对于{{1}的高度设置的s,反之亦然,因为设备已旋转):

UIWebView

由于您要将视图的位置和大小创建为superView的百分比,因此代码将使用不同的设备大小(即iPhone / iPad)播放更好