Question

我正在尝试创建一个简单的折线图，该图表应显示每月平均用户分数。到目前为止，我已经在每个单元格的顶部创建了一个带有白点的collectionView，但现在我想在每个点之间有一条直线。我添加了一个临时数组用于测试目的。

由于它是可变服务器数据（过去六个月），每次点的位置可能不同。如何将第一个点与第二个点连接，第二个点与下一个点连接（直到所有点连接）？

用户个人资料数据控制器

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

UICollectionView具有backgroundView属性。您应该能够将backgroundView的{{1}}设置为自定义UIView，以便在您的项目之间绘制线条。

Swift - 在几个随机CGPoints之间绘制线条

1 个答案: