Swift - 임의의 CGPoint 사이에 선 그리기

Question

평균 월별 사용자 점수를 표시하는 간단한 선 그래프를 만들려고합니다. 지금까지 각 셀의 맨 위에 흰색 점이있는 collectionView를 만들었지 만 이제는 각 점 사이에 직선을 갖고 싶습니다. 테스트 목적으로 임시 배열을 추가했습니다.

가변 서버 데이터 (지난 6 개월)이므로 점의 위치는 매번 다를 수 있습니다. 첫 번째 점과 두 번째 점을 연결하고 두 번째 점과 다음 점을 연결하려면 어떻게해야합니까?

사용자 프로필 데이터 컨트롤러

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로 설정할 수 있어야합니다.