user190494 user190494 - 4 months ago 81
Swift Question

How to create a side swiping photo gallery in Swift/iOS?

I am looking to create a side swiping photo gallery. There are many tutorials that show how to make one with a tableview, but I'd like to make a gallery that starts off with an image and allows you to swipe left or right to browse. Does anyone know of a github extension or tutorial, or have any knowledge to help point me in the right direction? Thanks.

Something like this:
Some

Answer

You could do this on a regular viewController... You could probably find some animations for this, but I guess this is a step in the right direction:

First, define an imageView and the images to go inside:

// Connect a UIImageView to the outlet below
@IBOutlet weak var swipeImageView: UIImageView!
// Type in the names of your images below
let imageNames = ["","","","",""]

Then, in the viewDidLoad, set up gestureRecognizers for the directions:

    var swipeRight = UISwipeGestureRecognizer(target: self, action: "respondToSwipeGesture:")
    swipeRight.direction = UISwipeGestureRecognizerDirection.Right
    self.view.addGestureRecognizer(swipeRight)

    var swipeLeft = UISwipeGestureRecognizer(target: self, action: "respondToSwipeGesture:")
    swipeLeft.direction = UISwipeGestureRecognizerDirection.Left
    self.view.addGestureRecognizer(swipeLeft)

After that, you can set up the function that was called to manage the image switches.

 var currentImage = 0
 func respondToSwipeGesture(gesture: UIGestureRecognizer) {

    if let swipeGesture = gesture as? UISwipeGestureRecognizer {


        switch swipeGesture.direction {
        case UISwipeGestureRecognizerDirection.Left:
            if currentImage == imageNames.count - 1 {
                currentImage = 0

            }else{
                currentImage += 1
            }
            swipeImageView.image = UIImage(named: imageNames[currentImage])

        case UISwipeGestureRecognizerDirection.Right:
            if currentImage == 0 {
                currentImage = imageNames.count - 1
            }else{
                currentImage -= 1
            }
            swipeImageView.image = UIImage(named: imageNames[currentImage])
        default:
            break
        }
    }
}

Full viewController code:

import UIKit

class ViewController: UIViewController {



    // Connect a UIImageView to the outlet below
    @IBOutlet weak var swipeImageView: UIImageView!
    // Type in the names of your images below
    let imageNames = ["","","","",""]



    var currentImage = 0

    override func viewDidLoad() {
        super.viewDidLoad()
        var swipeRight = UISwipeGestureRecognizer(target: self, action: "respondToSwipeGesture:")
        swipeRight.direction = UISwipeGestureRecognizerDirection.Right
        self.view.addGestureRecognizer(swipeRight)

        var swipeLeft = UISwipeGestureRecognizer(target: self, action: "respondToSwipeGesture:")
        swipeLeft.direction = UISwipeGestureRecognizerDirection.Left
        self.view.addGestureRecognizer(swipeLeft)
        // Do any additional setup after loading the view, typically from a nib.
    }
    func respondToSwipeGesture(gesture: UIGestureRecognizer) {

        if let swipeGesture = gesture as? UISwipeGestureRecognizer {


            switch swipeGesture.direction {
            case UISwipeGestureRecognizerDirection.Left:
                if currentImage == imageNames.count - 1 {
                    currentImage = 0

                }else{
                    currentImage += 1
                }
                swipeImageView.image = UIImage(named: imageNames[currentImage])

            case UISwipeGestureRecognizerDirection.Right:
                if currentImage == 0 {
                    currentImage = imageNames.count - 1
                }else{
                    currentImage -= 1
                }
                swipeImageView.image = UIImage(named: imageNames[currentImage])
            default:
                break
            }
        }
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}
Comments