纵向和横向模式下的可缩放全屏图像
Zoomable fullscreen image in portrait and landscape mode
我是编程初学者。我有一个应用程序,您可以在其中点击显示的任何图像,以全屏模式显示该图像,并且可以捏合缩放。我遇到的问题是,如果您旋转 phone,则图像只有一半可见。
我正在使用滚动视图来实现缩放功能,因为这似乎是最佳实现方式的共识。
它在纵向模式下完美运行,或者如果我在应用程序已经处于横向模式时进入全屏图像,但如果我在全屏图像模式下进入横向模式,那就是出错的地方。这是代码:
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
}
抱歉发布了这么多代码,但它几乎都是相关的(我认为)。
问题截图如下:
好的,我已经成功修复了!高兴得蹦蹦跳跳。
我设置了一个名为 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 的横向和纵向结果看起来很完美。
我是编程初学者。我有一个应用程序,您可以在其中点击显示的任何图像,以全屏模式显示该图像,并且可以捏合缩放。我遇到的问题是,如果您旋转 phone,则图像只有一半可见。
我正在使用滚动视图来实现缩放功能,因为这似乎是最佳实现方式的共识。
它在纵向模式下完美运行,或者如果我在应用程序已经处于横向模式时进入全屏图像,但如果我在全屏图像模式下进入横向模式,那就是出错的地方。这是代码:
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
}
抱歉发布了这么多代码,但它几乎都是相关的(我认为)。
问题截图如下:
好的,我已经成功修复了!高兴得蹦蹦跳跳。
我设置了一个名为 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 的横向和纵向结果看起来很完美。