在UIScrollview中的图像更改时更改标签文本

时间:2017-10-25 10:47:47

标签: ios swift uiscrollview

我想创建一个类似于此的图库:

http://sweettutos.com/2015/04/13/how-to-make-a-horizontal-paging-uiscrollview-with-auto-layout-in-storyboards-swift/

每次用户滑动并且图像更改并且标签标题发生更改时。我已编写代码并包含if语句,但是,它无法正常工作且只会更改为一个值。< / p>

这是我的代码:

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

这是项目出错的地方:

let gokuImage = UIImage(named: "Goku")
            let borutoImage = UIImage(named: "boruto")

            if imageView.image == gokuImage{

                label.text = "Goku"
            }
            if imageView.image == borutoImage{

                label.text = "bor"
            }

我认为这是因为if语句无法直接访问UIScroll视图中显示的当前图像。

以下是我项目的链接:http://www.mediafire.com/file/adkzcpvdtodlyl5/gallery_copy.zip

3 个答案:

答案 0 :(得分:2)

要实现您想要的目标,这里有一个非常简单的选项:

  1. 您的标签位于ScrollView中,因此它将与您的第一张图片一起滚动。您需要将其移动到ScrollView上方,与ScrollView处于相同的层次结构级别。
  2. 为了在滚动时更改标签的文本,您可以检测页面何时停止减速。为此:

    (a)将UIScrollViewDelegate添加到class ViewController: UIViewController

    (b)在viewDidLoad()中,添加'mainscrollview.delegate = self',

    (c)编写'scrollViewDidEndDecelerating'方法。

  3. 最后,您的代码应如下所示:

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

答案 1 :(得分:1)

您可以使用故事板中的UILabel和代码中的UIImageView。您将所有图像添加到scrollView,以便每个人都相互跟随,但您只将标签用于第一个图像。

换句话说,您需要将UILabel添加到代码中并将其添加到每个图像。而不是很多&#34; if-cycle&#34;,我建议您使用标签数组,就像使用图像一样。

   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)

答案 2 :(得分:1)

您应该做的第一件事是从滚动视图中删除标签并将其添加到主视图中,即scrollview和标签应该具有兄弟关系而不是父子关系。

相应地修改ViewController

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

}