如何使用滚动视图和pageController显示图像和信息

时间:2017-09-26 22:51:33

标签: ios swift uiscrollview uipagecontrol

我想在UIScrollView和pageViewController中显示一些图像,因为每个图像都有不同的信息,所以现在我能够做到这一点,但我想在我更改时同时显示信息图片,我的意思是当我将照片更改为另一张照片时我想要显示另一张照片和有关该照片的信息,我想在代码中显示的信息是一个名为" labelList"我显示的图像命名为imageList。

class PremiosViewController: UIViewController, UIScrollViewDelegate {

    @IBOutlet var myImageView: UIImageView!
    let imagelist = ["img_1", "img_2", "img_3"]
    let labelList = ["label_1", "label_2", "label_3"]

    var scrollView = UIScrollView()

    var pageControl : UIPageControl = UIPageControl(frame:CGRect(x: 50, y: 250, width: 200, height: 50))

    var yPosition:CGFloat = 0
    var scrollViewContentSize:CGFloat=0;

    override func viewDidLoad() {
        super.viewDidLoad()

        scrollView = UIScrollView(frame: CGRect(x: 0, y: 270, width: self.view.frame.width, height: 300))
        configurePageControl()

        scrollView.delegate = self
        self.view.addSubview(scrollView)
        for  i in stride(from: 0, to: imagelist.count, by: 1) {
            var frame = CGRect.zero
            frame.origin.x = self.scrollView.frame.size.width * CGFloat(i)
            frame.origin.y = -100
            frame.size = self.scrollView.frame.size
            self.scrollView.isPagingEnabled = true

            let myImage:UIImage = UIImage(named: imagelist[i])!
            let myImageView:UIImageView = UIImageView()
            myImageView.image = myImage
            myImageView.contentMode = UIViewContentMode.scaleAspectFit
            myImageView.frame = frame

            scrollView.addSubview(myImageView)
        }

        self.scrollView.contentSize = CGSize(width: self.scrollView.frame.size.width * CGFloat(imagelist.count), height: self.scrollView.frame.size.height)
        pageControl.addTarget(self, action: Selector(("changePage:")), for: UIControlEvents.valueChanged)
        pageControl.addTarget(self, action: Selector(("changePage:")), for: UIControlEvents.valueChanged)
        // Do any additional setup after loading the view.
    }
    func configurePageControl() {
        // The total number of pages that are available is based on how many available colors we have.
        self.pageControl.numberOfPages = imagelist.count
        self.pageControl.currentPage = 0
        self.pageControl.tintColor = UIColor.clear
        self.pageControl.pageIndicatorTintColor = UIColor.clear
        self.pageControl.currentPageIndicatorTintColor = UIColor.clear
        self.view.addSubview(pageControl)

    }

    // MARK : TO CHANGE WHILE CLICKING ON PAGE CONTROL
    func changePage(sender: AnyObject) -> () {
        let x = CGFloat(pageControl.currentPage) * scrollView.frame.size.width
        scrollView.setContentOffset(CGPoint(x: x,y :0), animated: true)
    }

    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {

        let pageNumber = round(scrollView.contentOffset.x / scrollView.frame.size.width)
        pageControl.currentPage = Int(pageNumber)
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    @IBAction func clickBackButton(_ sender: Any) {

        self.dismiss(animated: true, completion: nil)
    }
}

2 个答案:

答案 0 :(得分:2)

如果只想在UILabel中显示信息,那么您可以采用与添加多个UIImageView的方式类似的方式来执行此操作,您可以添加UILabel以及

例如,在您编写的代码中:

let myImage:UIImage = UIImage(named: imagelist[i])!
let myImageView:UIImageView = UIImageView()
myImageView.image = myImage
myImageView.contentMode = UIViewContentMode.scaleAspectFit
myImageView.frame = frame

// TODO: I added this here

scrollView.addSubview(myImageView)

我在这里添加了TODO评论,只是为了向您展示您可以添加UILabel的位置:

let myLabel = UILabel();
myLabel.text = labelList[i]
myLabel.textAlignment = .center
var labelFrame = CGRect(x: self.scrollView.frame.size.width * CGFloat(i), y: frame.size.height - 100, width: frame.size.width, height: 100)
myLabel.frame = labelFrame

在您的代码行scrollView.addSubview(myImageView)下方,您也可以添加UILabel

scrollView.addSubview(myLabel)

答案 1 :(得分:0)

您可以使用UICollectionView在水平滚动的情况下在UICllectionViewCell中显示图像和信息。