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

Question

I have an imageview called "cardImgView" in that I want to load two images by scrolling horizontally, I have tried the following way, in this case I can able to scroll only to up and down and the images also not changing, anyone have idea how to do this correctly.

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!)
}

thanks in advance.

Answer 1

I modified my code and tried as follows and its working now. with page contrlller

   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))
      }

Answer 2

First, as I commented, you are currently using a single UIImageView --- so each time through your for-loop you are just replacing the .image of that one image view.

Second, you will be much better off using auto-layout and constraints, instead of trying to explicitly set frames and the scrollView's contentSize.

Third, UIStackView is ideal for your use case - adding multiple images that you want to horizontally scroll.

So, the general idea is:

• add a scroll view
• add a stack view to the scroll view
• use constraints to make the stack view control the scroll view's contentSize
• create a new UIImageView for each image
• add each image view to the stack view

Here is a simple example that you can run in a Playground page to see how it works. If you add your own images named image1.png and image2.png to the playground's resources, they will be used (otherwise, this example creates solid blue and solid green images):

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

Answer 3

I think you need to set a proper frame for the cardImgView. It would be something like

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

Finally, after the for loop, you need to set scroll view's content size:

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

Hope this helps.

Answer 4

I have written scrolling images horizontally in swift. Please check with this:

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.
    }
}