Adding text overlay to image.

[scheibyem]

Hi,

I'm not sure if this is the right place to ask. I am developing an APP and I am using your wonderful Auk slideshow. Is it possible to add a text or label that is overlaying on top of the image and that changes when the slider changes. The reason to add a label/text is that it could include email addresses or other types of interactive text that is pulled from other sources such as an sql database.

Thank you very much!

[evgenyneu]

Hi,

Yes it is possible if you want the label to stay at the same position, meaning the text is not scrolled with the images.

Here is how to do it:

1. First, add a label and position it above the scroll view with auto layout constrains.
2. Next, in the scroll view delegate's method scrollViewDidScroll get the index of the current page from scrollView.auk.currentPageIndex property.
3. Finally, update your label with the relevant text for the current image.

You can see how it is done in the demo app. As one scrolls through the drawings it updates the label with the name of the author.

Good luck.

[scheibyem]

Awesome. Got it to work!

I imagine it might be computationally more difficult but is there any way to adjust text formats based on their scrollView.auk.currentPageIndex value? Perhaps that would require a second function that reads the index and updates the format of the uilabel?

As you can guess I am a complete rookie when it comes to swift/ios development.

[evgenyneu]

I am glad it worked for you. Sorry, what do you mean by "adjust text formats"? Can you give an example?

[scheibyem]

I think I figured out a way to do this. I am updating some properties of the UIlabel which I call sliderLabel in the updateCurrentImageDescription. Further, I have created an IBOutlet for the width constraint so I can adjust the width of the label dynamically. This seems to work well but I am not sure if it is a "hackish" solution or if there are any issues with this method? Would be great to get your feedback.

This is the new updateCurrentImageDescription function:

private func updateCurrentImageDescription() {
    if let description = currentImageDescription {

        sliderLabel.text = description

        if slider.auk.currentPageIndex == 0 {
            sliderLabel.textColor = UIColor(red: 0.1, green: 0.1, blue: 0.1, alpha: 1.0)
            sliderLabel.font = sliderLabel.font.fontWithSize(24)
            labelWidth.constant = 320
        }
        else if slider.auk.currentPageIndex == 1 {
            sliderLabel.textColor = UIColor(red: 0.1, green: 0.1, blue: 0.1, alpha: 1.0)
            sliderLabel.font = sliderLabel.font.fontWithSize(24)
            labelWidth.constant = 320
        }
        else if slider.auk.currentPageIndex == 2 {
            sliderLabel.textColor = UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
            sliderLabel.font = sliderLabel.font.fontWithSize(24)
            labelWidth.constant = 200
        }
        else if slider.auk.currentPageIndex == 3 {
            sliderLabel.textColor = UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
            sliderLabel.font = sliderLabel.font.fontWithSize(20)
            labelWidth.constant = 200
        }

    } else {
        sliderLabel.text = nil
    }
}

[evgenyneu]

Great, if it works well for you than it is fine. Another way of doing this would be to create a trailing and leading constraints for the label instead of width. In addition one could set the "Lines" property of the label to zero to make it expand vertically if the text does not fit one line. This way the text in the label will always be visible to the user without a need to set its width.

Another thing to consider is that scrollViewDidScroll is called vey frequently, so if you are running a lot of code there, you may want only to run it if the current label text changes.

[evgenyneu]

Closing this, feel free to reopen if necessary.