Change label text while image in UIScrollview changes - ios

Question

I want to create an image gallery similar to this:
http://sweettutos.com/2015/04/13/how-to-make-a-horizontal-paging-uiscrollview-with-auto-layout-in-storyboards-swift/
Where each time the user swipes and the image changes and the label title changes.I have written the code and included the if statement, however, it does not work properly and it only changes as one value.
Here is my code:
import UIKit
class ViewController: UIViewController {
#IBOutlet weak var mainscrollview: UIScrollView!
var imageArray = [UIImage]()
#IBOutlet var label: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
mainscrollview.frame = view.frame
imageArray = [#imageLiteral(resourceName: "goku"), #imageLiteral(resourceName: "boruto"), #imageLiteral(resourceName: "tail"), #imageLiteral(resourceName: "sage"),#imageLiteral(resourceName: "tobi")]
for i in 0..<imageArray.count{
let imageView = UIImageView()
imageView.image = imageArray[i]
imageView.contentMode = .scaleAspectFit
let xPosition = self.view.frame.width * CGFloat(i)
imageView.frame = CGRect(x: xPosition, y: 0, width: self.mainscrollview.frame.width,height: self.mainscrollview.frame.height)
mainscrollview.contentSize.width = mainscrollview.frame.width * CGFloat(i + 1)
mainscrollview.addSubview(imageView)
let gokuImage = UIImage(named: "goku")
let borutoImage = UIImage(named: "boruto")
if imageView.image == gokuImage{
label.text = "Goku"
}
if imageView.image == borutoImage{
label.text = "bor"
}
}
}
}
This is where the project is going wrong:
let gokuImage = UIImage(named: "Goku")
let borutoImage = UIImage(named: "boruto")
if imageView.image == gokuImage{
label.text = "Goku"
}
if imageView.image == borutoImage{
label.text = "bor"
}
I think this is because the if statement can not directly access the current image that is being displayed in the UIScroll view.
Here is the link to my project: http://www.mediafire.com/file/adkzcpvdtodlyl5/gallery_copy.zip

Answer 1

To achieve what you want to do, here is one of the option available which is fairly simple:
Your label is in your ScrollView, so it will scroll with your first image. You need to move it above your ScrollView, at the same hierarchy level as the ScrollView.
In order to change your label's text when you scroll, you can detect when your page has stopped decelerating. To do so:
(a) Add UIScrollViewDelegate to class ViewController: UIViewController,
(b) in viewDidLoad(), add 'mainscrollview.delegate = self',
(c) write the 'scrollViewDidEndDecelerating' method.
In the end, your code should look like this:
import UIKit
class ViewController: UIViewController, UIScrollViewDelegate {
#IBOutlet weak var mainscrollview: UIScrollView!
#IBOutlet var label: UILabel!
var imageArray = [UIImage]()
override func viewDidLoad() {
super.viewDidLoad()
imageArray = [#imageLiteral(resourceName: "goku"), #imageLiteral(resourceName: "boruto"), #imageLiteral(resourceName: "tail"), #imageLiteral(resourceName: "sage"),#imageLiteral(resourceName: "tobi")]
mainscrollview.frame = view.frame
mainscrollview.delegate = self
label.text = "Initial label value is Boruto"
for i in 0..<imageArray.count{
let imageView = UIImageView()
imageView.image = imageArray[i]
imageView.contentMode = .scaleAspectFit
let xPosition = self.view.frame.width * CGFloat(i)
imageView.frame = CGRect(x: xPosition, y: 0, width: self.mainscrollview.frame.width,height: self.mainscrollview.frame.height)
mainscrollview.contentSize.width = mainscrollview.frame.width * CGFloat(i + 1)
mainscrollview.addSubview(imageView)
}
}
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView){
// Test the offset and calculate the current page after scrolling ends
let pageWidth:CGFloat = mainscrollview.frame.width
let currentPage:CGFloat = floor((mainscrollview.contentOffset.x-pageWidth/2)/pageWidth)+1
// Change the text accordingly
if Int(currentPage) == 0{
label.text = "Boruto"
}else if Int(currentPage) == 1{
label.text = "Goku"
}else if Int(currentPage) == 2{
label.text = "Sage"
}else if Int(currentPage) == 3{
label.text = "Tail"
}else if Int(currentPage) == 4{
label.text = "Tobi"
}else{
label.text = "Other character"
}
}
}

Answer 2

The first thing you should do is remove the label from the scroll view and add it into the main view i.e the scrollview and the label should have sibling relationship rather than parent-child relationship.
Modify your ViewController accordingly
class ViewController: UIViewController, UIScrollViewDelegate {
// your other code
override func viewDidLoad() {
super.viewDidLoad()
mainscrollview.delegate = self
// your other code
}
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let imageNumber = round(scrollView.contentOffset.x / scrollView.frame.size.width)
switch imageNumber {
case 0:
label.text = "Goku"
case 1:
label.text = "Bor"
case 2:
label.text = "Tail"
case 3:
label.text = "Sage"
case 4:
label.text = "Tobi"
default:
label.text = "Unknown"
}
}
}

Answer 3

You use the UILabel from storyboards and UIImageView from the code. You add all the images to the scrollView, so that everyone follows one another, but you use your label only with the first image.
In other words, you need to add UILabel to the code and add it to each image. Instead of a lot of "if-cycle", I suggest you use an array of labels, just as you use the image.
var labelArray = [String]()
// in viewDidLoad add your label names
labelArray = ["goku", "boruto", "next word", "next word", "next word"]
// create UILabel
let yourLabel = UILabel(frame: CGRect(x: xPosition, y: self.mainscrollview.frame.height - 100, width: self.mainscrollview.frame.width, height: 40))
// add each labelName to each image
yourLabel.text = labelArray[i]
// add image and label to scrollView
mainscrollview.addSubview(imageView)
mainscrollview.addSubview(yourLabel)