纵向和横向模式下的可缩放全屏图像

保罗_f

我是编程的初学者。我有一个应用程序,您可以在其中点击显示的任何图像以全屏模式显示该图像,并且可以捏合缩放。我遇到的问题是,如果您旋转手机,则图像只有一半可见。

我正在使用滚动视图来实现缩放功能,因为这似乎是实现它的最佳方式的共识。

它在纵向模式下完美运行,或者如果我在应用程序已经处于横向模式时进入全屏图像,但是如果我在全屏图像中进入横向模式,那就是出错的地方。这是代码:

class PictureDetailViewController: UIViewController, UIScrollViewDelegate {

@IBOutlet weak var scrollView: UIScrollView!
var routeData = IndividualRoute(numberOfRoute: UserDefaults.standard.integer(forKey: "currentRoute"))

var detailPicture = UserDefaults.standard.bool(forKey: "segueFromDetailvc")

var detailImage = UIImageView()

override func viewDidLoad() {
    super.viewDidLoad()

    routeData.routesValues()
    scrollView.delegate = self
    selectImage()
    scrollView.frame = UIScreen.main.bounds
    scrollView.addSubview(detailImage)
    scrollViewContents()
    setupConstraints()
    let scrollViewFrame = scrollView.frame
    let scaleWidth = scrollViewFrame.size.width / scrollView.contentSize.width
    let scaleHieght = scrollViewFrame.size.height / scrollView.contentSize.height
    let minScale = min(scaleHieght, scaleWidth)
    scrollView.minimumZoomScale = minScale
    scrollView.maximumZoomScale = 1
    scrollView.zoomScale = minScale
    let tap = UITapGestureRecognizer(target: self, action: #selector(dismissFullscreen))
    tap.numberOfTapsRequired = 2
    view.addGestureRecognizer(tap)

}

//****************************************

//Image Setup

func setupConstraints() {

    scrollView.translatesAutoresizingMaskIntoConstraints = false

    NSLayoutConstraint.activate([
        scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        scrollView.topAnchor.constraint(equalTo: view.topAnchor),
        scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
        scrollView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        scrollView.centerYAnchor.constraint(equalTo: view.centerYAnchor)])

    scrollView.contentSize = (detailImage.image?.size)!


}

func selectImage() {
    if !detailPicture {
        let foo = "\(routeData.achievements[UserDefaults.standard.integer(forKey: "currentAchievement")])"
        detailImage.image = UIImage(named: "\(foo.folding(options: .diacriticInsensitive, locale: nil)) 0")
    } else {
        let foo = "\(routeData.achievements[0])"
        detailImage.image = UIImage(named: "\(foo.folding(options: .diacriticInsensitive, locale: nil)) 0")
        print("\(foo.folding(options: .diacriticInsensitive, locale: nil)) 0")
    }

    guard let width = detailImage.image?.size.width else {
        return
    }
    guard let height = detailImage.image?.size.height else {
        return
    }

    let frame: CGRect = CGRect(x: 0, y: 0, width: width, height: height)
    detailImage.frame = frame
    detailImage.isUserInteractionEnabled = true

}

//**************************************

//Scrollview setup


@objc func dismissFullscreen(){
    scrollView.setZoomScale(1, animated: true)
}

func scrollViewContents() {

    let boundSize = UIScreen.main.bounds.size
    var contentFrame = detailImage.frame

    if contentFrame.size.width < boundSize.width {
        contentFrame.origin.x = (boundSize.width - contentFrame.size.width) / 2
    } else {
        contentFrame.origin.x = 0
    }
    if contentFrame.size.height < boundSize.height {
        contentFrame.origin.y = (boundSize.height - contentFrame.size.height) / 2
    } else {
        contentFrame.origin.y = 0
    }

    detailImage.frame = contentFrame

}

func scrollViewDidZoom(_ scrollView: UIScrollView) {
    scrollViewContents()
}

func viewForZooming(in scrollView: UIScrollView) -> UIView? {

    return detailImage
}

很抱歉发布了这么多代码,但它几乎都是相关的(我认为)。

以下是问题截图:

图像偏离中心和一半可见

完美居中,看起来不错!

保罗_f

好的,我已经设法修复它!高兴地跳了一下。

我设置了一个名为 setupScale() 的新函数,当视图出现时,它会在 viewdidload 中调用。我还添加了 viewwillLayoutSubview() 覆盖并在其中调用了 setupScale() 函数。

如果看起来像这样:

private func setupScale() {

    scrollView.frame = UIScreen.main.bounds
    scrollView.contentSize = (detailImage.image?.size)!
    scrollViewContents()
    let scrollViewFrame = scrollView.frame
    let scaleWidth = scrollViewFrame.size.width / scrollView.contentSize.width
    let scaleHieght = scrollViewFrame.size.height / scrollView.contentSize.height
    let minScale = min(scaleHieght, scaleWidth)
    scrollView.minimumZoomScale = minScale
    scrollView.maximumZoomScale = 1
    scrollView.zoomScale = minScale
}
override func viewWillLayoutSubviews() {
    setupScale()
}

结果在我的 iPad 和 iPhone 7 上横向和纵向看起来都很完美。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Windows Phone 8.1上更改媒体元素以在纵向和横向模式下以纵向和全屏缩放?

缩放后,图像处于横向模式而不是纵向模式

纵向和横向模式下的不同布局

在横向和纵向模式下向 UIView 添加投影

iOS纵向和横向模式

Android 平板电脑横向和纵向模式

每次单击按钮可将图像旋转90,180,270和360度,并在纵向和横向模式下保持旋转度?

在纵向和横向模式下获得相同的屏幕宽度和高度

使wordpress滑块显示纵向和横向图像

AngularJS Bootstrap Gallery横向和纵向图像

格式化横向部分的 Word 页眉和页脚,以便它们在纵向模式下可读

Android LinearLayout在横向和纵向模式下将元素放置在中间

ConstraintLayout 应该支持纵向和横向模式 - 带有一个按钮来切换全屏

处于横向模式的iPad和处于纵向模式的iPhone

当我的整个应用程序处于纵向模式时,以横向模式全屏播放视频

iPhone金属在纵向和横向模式之间的奇异之处

自动布局横向和纵向模式的不同约束

平板电脑Android中的横向和纵向模式

Flutter-空白显示纵向和横向图像

ImageMagick调整大小-设置横向和纵向图像的宽度

放置具有相同高度的横向和纵向图像

仅将设备从纵向旋转为横向时,网页上的全屏图像会被压缩

在全屏横向模式下反应 Native TextInput 颜色问题

使用 configChanges 同时在横向模式下进行全屏活动

在MotionLayout中使用时如何使PlayerView在横向模式下全屏

横向模式下的TabBar图像大小

如何在全屏模式下显示图像

Bootstrap 折叠导航栏按钮在横向模式下有效,但在纵向模式下无效

iOS 14中的UISplitViewController在横向模式下正常工作,但在纵向模式下不工作