如何在iOS swift中水平滚动图像

Posted 2021-04-21

我有一个名为“cardImgView”的imageview，我想通过水平滚动加载两个图像，我尝试了以下方式，在这种情况下，我只能向上和向下滚动，图像也没有变化，任何人都有想法如何正确地做到这一点。

let img: UIImage = self.dataDict.object(forKey: kCardImgFront) as! UIImage
let img2:UIImage = self.dataDict.object(forKey: kCardImgBack) as! UIImage
imgArray = [img, img2]        

for i in 0..<imgArray.count{           
    cardImgView?.image = imgArray[i]                        
    scrollView.contentSize.width = scrollView.frame.width * CGFloat(i + 1)
    scrollView.addSubview(cardImgView!)
}

提前致谢。

答案

首先，正如我评论的那样，你目前正在使用单个UIImageView ---所以每次通过你的for循环你只需要替换那个图像视图的.image。

其次，使用自动布局和约束会更好，而不是尝试显式设置框架和scrollView的contentSize。

第三，UIStackView非常适合您的用例 - 添加您想要水平滚动的多个图像。

所以，一般的想法是：

• 添加滚动视图
• 将堆栈视图添加到滚动视图
• 使用约束使堆栈视图控制滚动视图的contentSize
• 为每个图像创建一个新的UIImageView
• 将每个图像视图添加到堆栈视图

这是一个简单的示例，您可以在Playground页面中运行以查看其工作原理。如果您将自己的图像名为image1.png和image2.png添加到游乐场的资源中，它们将被使用（否则，此示例将创建纯蓝色和纯绿色图像）：

import UIKit
import PlaygroundSupport

// UIImage extension to create a new, solid-color image
public extension UIImage {
    public convenience init?(color: UIColor, size: CGSize = CGSize(width: 1, height: 1)) {
        let rect = CGRect(origin: .zero, size: size)
        UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
        color.setFill()
        UIRectFill(rect)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        guard let cgImage = image?.cgImage else { return nil }
        self.init(cgImage: cgImage)
    }
}

class TestViewController : UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // create a UIScrollView
        let scrollView = UIScrollView()

        // we will set the auto-layout constraints
        scrollView.translatesAutoresizingMaskIntoConstraints = false

        // set background color so we can see the scrollView when the images are scrolled
        scrollView.backgroundColor = .orange

        // add the scrollView to the view
        view.addSubview(scrollView)

        // pin scrollView 20-pts from top/bottom/leading/trailing
        scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20.0).isActive = true
        scrollView.topAnchor.constraint(equalTo: view.topAnchor, constant: 20.0).isActive = true
        scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20.0).isActive = true
        scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -20.0).isActive = true

        // create an array of empty images in case this is run without
        // valid images in the resources
        var imgArray = [UIImage(color: .blue), UIImage(color: .green)]

        // if these images exist, load them and replace the blank images in imgArray
        if  let img1: UIImage = UIImage(named: "image1"),
            let img2: UIImage = UIImage(named: "image2") {

            imgArray = [img1, img2]

        }

        // create a UIStackView
        let stackView = UIStackView()

        // we can use the default stackView properties
        // but can change axis, alignment, distribution, spacing, etc if desired

        // we will set the auto-layout constraints
        stackView.translatesAutoresizingMaskIntoConstraints = false

        // add the stackView to the scrollView
        scrollView.addSubview(stackView)

        // with auto-layout, scroll views use the content's constraints to
        // determine the contentSize,
        // so pin the stackView to top/bottom/leading/trailing of the scrollView
        stackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 0.0).isActive = true
        stackView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 0.0).isActive = true
        stackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 0.0).isActive = true
        stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: 0.0).isActive = true

        // loop through the images
        for img in imgArray {

            // create a new UIImageView
            let imgView = UIImageView(image: img)

            // we will set the auto-layout constraints, and allow the stackView
            // to handle the placement
            imgView.translatesAutoresizingMaskIntoConstraints = false

            // set image scaling as desired
            imgView.contentMode = .scaleToFill

            // add the image view to the stackView
            stackView.addArrangedSubview(imgView)

            // set imgView's width and height to the scrollView's width and height
            imgView.widthAnchor.constraint(equalTo: scrollView.widthAnchor, multiplier: 1.0).isActive = true
            imgView.heightAnchor.constraint(equalTo: scrollView.heightAnchor, multiplier: 1.0).isActive = true

        }

    }

}

let vc = TestViewController()
vc.view.backgroundColor = .red
PlaygroundPage.current.liveView = vc

另一答案

我修改了我的代码并尝试如下，它现在正在工作。与页面控制器

   let imgArray = [UIImage]()
   let img: UIImage = self.dataDict.object(forKey: kCardImgFront) as! UIImage
   let img2:UIImage = self.dataDict.object(forKey: kCardImgBack) as! UIImage

   imgArray = [img, img2]        
   for i in 0..<imgArray.count { 

let imageView = UIImageView()
imageView.image = imgArray[i]                        
let xPosition = self.view.frame.width * CGFloat(i)
imageView.frame = CGRect(x: xPosition, y: 0, width: 
self.scrollView.frame.width + 50, height: self.scrollView.frame.height)
scrollView.contentSize.width = scrollView.frame.width * CGFloat(i + 1)
scrollView.addSubview(imageView)

 }

self.scrollView.delegate = self

func scrollViewDidScroll(_ scrollView: UIScrollView){

pageController.currentPage = Int(self.scrollView.contentOffset.x / 
  CGFloat(4))
      }

另一答案

我认为你需要为cardImgView设置一个合适的框架。它会是这样的

cardImgView.frame = CGRect(x: scrollView.frame.width * CGFloat(i), y: 0, width: scrollView.frame.width, height: scrollView.frame.height)

最后，在for循环之后，您需要设置滚动视图的内容大小：

scrollView.contentSize.width = scrollView.frame.width * imgArray.count

希望这可以帮助。

另一答案

我在swift中水平编写了滚动图像。请检查：

import UIKit

class ViewController: UIViewController,UIScrollViewDelegate {

    @IBOutlet weak var Bannerview: UIView!
    var spinner = UIActivityIndicatorView(activityIndicatorStyle: .whiteLarge)
    var loadingView: UIView = UIView()
    var loadinglabel: UILabel = UILabel()

    var nextPage :Int!
    var titlelab :UILabel!
    var bannerimg :UIImageView!
    var scroll :UIScrollView!
    var viewPanel :UIView!
    var pgCtr:UIPageControl!
    var bannerArr:[String]!

    var imgUrlstr :NSString!

    var screenSize: CGRect!
    var screenWidth: CGFloat!
    var screenHeight: CGFloat!

    func uicolorFromHex(rgbValue:UInt32)->UIColor
    {
        let red = CGFloat((rgbValue & 0xFF0000) >> 16)/256.0
        let green = CGFloat((rgbValue & 0xFF00) >> 8)/256.0
        let blue = CGFloat(rgbValue & 0xFF)/256.0

        return UIColor(red:red, green:green, blue:blue, alpha:1.0)
    }
    override func viewWillAppear(_ animated: Bool)
    {
        screenSize = UIScreen.main.bounds
        screenWidth = screenSize.width
        screenHeight = screenSize.height

        bannerArr = ["image1.jpeg","image2.jpeg","image3.jpeg","images4.jpeg","images5.jpeg"]

        self.bannerview()

        self.navigationController?.setNavigationBarHidden(false, animated: true)
        self.navigationController?.navigationBar.isTranslucent = false

    }

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view, typically from a nib.
    }
}