滚动视图视差效果

时间:2018-12-13 17:32:57

标签: swift layout uiview constraints parallax

我从一个YouTube频道制作了一个程序,遇到了问题。我认为这与布局有关。在不同的设备上显示方式不同。有人可以告诉我如何确定哪些文本适合另一文本,以及如何使图像整体显示在CustomView上。

import UIKit struct scrollViewDataStruct {
let title: String?
let image: UIImage?
} class ScrollController: UIViewController, UIScrollViewDelegate{

@IBOutlet weak var scrollView: UIScrollView!

var scrollViewData = [scrollViewDataStruct]()

var viewTagValue = 10
var tagValue = 100

override func viewDidLoad() {
    super.viewDidLoad()

    scrollView.delegate = self

    scrollViewData = [scrollViewDataStruct.init(title: "There was written a very large line that climbs to another line", image: #imageLiteral(resourceName: "knowledge_graph_logo")),
                      scrollViewDataStruct.init(title: "Second", image: #imageLiteral(resourceName: "knowledge_graph_logo"))]

    scrollView.contentSize.width = self.scrollView.frame.width * CGFloat(scrollViewData.count)

    var i = 0

    for data in scrollViewData {
        let view = CustomView(frame: CGRect(x: 10 + (self.scrollView.frame.width * CGFloat(i)), y: 200, width: self.scrollView.frame.width - 75, height: self.scrollView.frame.height - 90))
        view.imageView.image = data.image
        view.tag = i + viewTagValue
        self.scrollView.addSubview(view)

        let label = UILabel(frame: CGRect.init(origin: CGPoint.init(x: 0, y: 20), size: CGSize.init(width: 0, height: 40)))
        label.text = data.title
        label.font = UIFont.boldSystemFont(ofSize: 30)
        label.textColor = UIColor.black
        label.sizeToFit()
        label.tag = i + tagValue

        if i == 0 {
            label.center.x = view.center.x
        } else {
            label.center.x = view.center.x - self.scrollView.frame.width / 2
        }
        self.scrollView.addSubview(label)

        i += 1
    }
}
func scrollViewDidScroll(_ scrollView: UIScrollView) {
    if scrollView == scrollView {
        for i in 0..<scrollViewData.count {
            let label = scrollView.viewWithTag(i + tagValue) as! UILabel
            let view = scrollView.viewWithTag(i + viewTagValue) as! CustomView

            var scrollContentOffset = scrollView.contentOffset.x + self.scrollView.frame.width
            var viewOffset = (view.center.x - scrollView.bounds.width / 4) - scrollContentOffset
            label.center.x = scrollContentOffset - ((scrollView.bounds.width / 4 - viewOffset) / 2)
        }
    }
}}class CustomView: UIView {

let imageView: UIImageView = {
    let imageView = UIImageView()
    imageView.translatesAutoresizingMaskIntoConstraints = false
    imageView.backgroundColor = UIColor.darkGray
    imageView.contentMode = .scaleAspectFit
    return imageView
}()

override init(frame: CGRect) {
    super.init(frame: frame)
    self.addSubview(imageView)
    imageView.leftAnchor.constraint(equalTo: self.leftAnchor).isActive = true
    imageView.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true
    imageView.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
    imageView.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}}

这是在iPhone 5s上发布的

This is a launch on iPhone 5s

这是iPhone 8 plus上的发布

This is a launch on iPhone 8 plus

1 个答案:

答案 0 :(得分:0)

您应该做的是将每个UILabel的宽度设置为包含图像的CustomView的大小,并将每个标签的“ numberOfLines”设置为0,并将lineBreak设置为wordWrap。从理论上讲,这应该使标签仅是图像的宽度,并使UILabels垂直而不是水平地适合文本的大小,这就是sizeToFit的作用。