Swift-在多个随机CGPoint之间绘制线条

Question

I am trying to create a simple line graph that should display the average monthly user score. So far I have created a collectionView with a white dot at the top of each cell, but now I would like to have a straight line between each dot. I have added a temporary array for testing purposes.

Since it will be variable server data (the last six months), the location of the dots can be different each time. What should I do to connect the first dot with the second one and the second one with the next one (until all dots are connected)?

User profile data controller

class UserProfileData: UICollectionViewController, UICollectionViewDelegateFlowLayout {

var cellId = "cellId"

let values: [CGFloat] = [4.5, 3.2, 4.8, 5.0, 2.3, 2.9]

init() {
    let layout = UICollectionViewFlowLayout()
    layout.scrollDirection = UICollectionViewScrollDirection.horizontal

    super.init(collectionViewLayout: layout)
}

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

override func viewDidLoad() {
    super.viewDidLoad()

    self.collectionView?.dataSource = self
    self.collectionView?.delegate = self

    collectionView?.backgroundColor = Constants.MAIN_THEME_COLOR
    collectionView?.isScrollEnabled = false
    collectionView?.register(BarCell.self, forCellWithReuseIdentifier: cellId)
}

// MARK: UICollectionViewDataSource
override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return values.count
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: 50, height: view.frame.height - 20)
}

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! BarCell

    if let max = values.max() {
        let value = values[indexPath.item]
        let ratio = value / max

        cell.barHeightConstraint?.constant = view.frame.height * ratio
    }

    return cell
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsets(top: 0, left: 4, bottom: 0, right: 4)
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 10
}
}

My custom cell

// Create custom cell(s)
class BarCell: UICollectionViewCell {

let barView: UIView = {
    let view = UIView()
    view.backgroundColor = .clear
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
}()

let barLabel: UILabel = {
    let label = UILabel()
    label.text = "."
    label.textColor = .white
    label.font = UIFont.systemFont(ofSize: 70)
    label.translatesAutoresizingMaskIntoConstraints = false
    return label
}()

var barHeightConstraint: NSLayoutConstraint?

override init(frame: CGRect) {
    super.init(frame: frame)

    addSubview(barView)
    barView.addSubview(barLabel)

    barHeightConstraint = barView.heightAnchor.constraint(equalToConstant: 300)
    barHeightConstraint?.isActive = true
    barHeightConstraint?.constant = 100

    barView.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
    barView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
    barView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true

    barLabel.centerXAnchor.constraint(equalTo: barView.centerXAnchor).isActive = true
    barLabel.topAnchor.constraint(equalTo: barView.topAnchor, constant: 5).isActive = true
}

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

Answer 1

A UICollectionView has a backgroundView property. You should be able to set the backgroundView of your UICollectionView to a custom UIView that draws the lines between your items.