スウィフト - いくつかのランダムなCGポイントの間に線を描く

Question

平均月間ユーザースコアを表示する単純な折れ線グラフを作成しようとしています。これまでは、各セルの上部に白い点を持つcollectionViewを作成しましたが、今は各点の間に直線を描きたいと思います。テスト用に一時的な配列を追加しました。

可変サーバーデータ（過去6か月間）であるため、ドットの位置は毎回異なる場合があります。最初のドットを2番目のドットに接続し、2番目のドットを次のドットに接続するにはどうすればよいですか？

ユーザープロファイルデータコントローラ

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

マイカスタムセルは

// 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

UICollectionViewbackgroundView性質を有しています。 UICollectionViewのbackgroundViewを、アイテム間に線を引くカスタムUIViewに設定することができます。