UITableViewCell 中 iOS 中的动态视图

Question

我正在创建以下视图（显示在 In Transit 下）用于维护我的产品状态。见下图。

我想在 UITableViewCell 中创建这个视图，我已经尝试放置固定的 height/width 视图（不同颜色的圆形视图）和水平灰线视图，它的工作适合固定点。我可以使用故事板为固定视图创建它。

My Problem is, these are dynamic spot point view. Currently it's 4, but it can be vary based on status available in API response.

有人知道吗？如何实现这个状态点动态查看？

Answer 1

我建议您在 table 单元格内使用集合视图，这样您就可以通过简单的验证来定义位置

Answer 2

您可以使用 UIStackView 使用 "spacer" 视图来做到这一点。

在每个"dot"视图之间添加一个清晰的UIView，并限制每个"spacer"视图的宽度等于第一个 "spacer" 查看。

添加一个UIStackView，将其width和centerY约束到跟踪线，设置属性为：

Axis: Horizontal
Alignment: Fill
Distribution: Fill
Spacing: 0

您添加 "dots" 的代码如下所示：

for i in 0..<numberOfDots {

    create a dot view

    add it to the stackView using .addArrangedSubview()

    one fewer spacers than dots (e.g. 4 dots have a spacer between each = 3 spacers), so,

    if this is NOT the last dot,

        create a spacer view

        add it to the stackView

}

跟踪间隔视图，并将它们的宽度约束设置为每个等于第一个间隔视图。

这是一些入门代码，可以帮助您开始。评论应该清楚说明正在做什么。一切都在代码中完成（没有 @IBOutlets）所以你应该能够运行它通过在情节提要中添加一个视图控制器并将其自定义 class 分配给 DotsViewController。它将视图添加为 "normal" 子视图...但当然也可以添加为单元格的子视图。

class DotView: UIView {

    override func layoutSubviews() {
        super.layoutSubviews()
        layer.cornerRadius = bounds.size.height * 0.5
    }

}

class TrackingLineView: UIView {

    var theTrackingLine: UIView = {
        let v = UIView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = UIColor(white: 0.9, alpha: 1.0)
        return v
    }()

    var theStack: UIStackView = {
        let v = UIStackView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.axis = .horizontal
        v.alignment = .fill
        v.distribution = .fill
        v.spacing = 0
        return v
    }()

    var trackingDot: DotView = {
        let v = DotView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = UIColor(red: 0.0, green: 0.5, blue: 1.0, alpha: 1.0)
        return v
    }()

    let dotWidth = CGFloat(6)

    let trackingDotWidth = CGFloat(20)

    var trackingDotCenterX = NSLayoutConstraint()

    var dotViews = [DotView]()

    var trackingPosition: Int = 0 {
        didSet {
            let theDot = dotViews[trackingPosition]
            trackingDotCenterX.isActive = false
            trackingDotCenterX = trackingDot.centerXAnchor.constraint(equalTo: theDot.centerXAnchor, constant: 0.0)
            trackingDotCenterX.isActive = true
        }
    }

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

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }

    func commonInit() -> Void {

        // add the tracking line
        addSubview(theTrackingLine)

        // add the "big" tracking dot
        addSubview(trackingDot)

        // add the stack view that will hold the small dots (and spacers)
        addSubview(theStack)

        // the "big" tracking dot will be positioned behind a small dot, so we need to
        //  keep a reference to its centerXAnchor constraint
        trackingDotCenterX = trackingDot.centerXAnchor.constraint(equalTo: theTrackingLine.centerXAnchor, constant: 0.0)

        NSLayoutConstraint.activate([

            theTrackingLine.centerXAnchor.constraint(equalTo: centerXAnchor, constant: 0.0),
            theTrackingLine.centerYAnchor.constraint(equalTo: centerYAnchor, constant: 0.0),
            theTrackingLine.widthAnchor.constraint(equalTo: widthAnchor, multiplier: 1.0, constant: -20.0),
            theTrackingLine.heightAnchor.constraint(equalToConstant: 2.0),

            theStack.centerXAnchor.constraint(equalTo: theTrackingLine.centerXAnchor, constant: 0.0),
            theStack.centerYAnchor.constraint(equalTo: theTrackingLine.centerYAnchor, constant: 0.0),
            theStack.widthAnchor.constraint(equalTo: theTrackingLine.widthAnchor, multiplier: 1.0, constant: 0.0),

            trackingDotCenterX,

            trackingDot.widthAnchor.constraint(equalToConstant: trackingDotWidth),
            trackingDot.heightAnchor.constraint(equalTo: trackingDot.widthAnchor, multiplier: 1.0),
            trackingDot.centerYAnchor.constraint(equalTo: theTrackingLine.centerYAnchor, constant: 0.0),

            ])

    }

    func setDots(with colors: [UIColor]) -> Void {

        // remove any previous dots and spacers
        //      (in case we're changing the number of dots after creating the view)
        theStack.arrangedSubviews.forEach {
            [=12=].removeFromSuperview()
        }

        // reset the array of dot views
        //      (in case we're changing the number of dots after creating the view)
        dotViews = [DotView]()

        // we're going to set all spacer views to equal widths, so use
        //  this var to hold a reference to the first one we create
        var firstSpacer: UIView?

        colors.forEach {
            c in

            // create a DotView
            let v = DotView()
            v.translatesAutoresizingMaskIntoConstraints = false
            v.backgroundColor = c

            // add to array so we can reference it later
            dotViews.append(v)

            // add it to the stack view
            theStack.addArrangedSubview(v)

            // dots are round (equal width to height)
            NSLayoutConstraint.activate([
                v.widthAnchor.constraint(equalToConstant: dotWidth),
                v.heightAnchor.constraint(equalTo: v.widthAnchor, multiplier: 1.0),
                ])

            // we use 1 fewer spacers than dots, so if this is not the last dot
            if c != colors.last {

                // create a spacer (clear view)
                let s = UIView()
                s.translatesAutoresizingMaskIntoConstraints = false
                s.backgroundColor = .clear

                // add it to the stack view
                theStack.addArrangedSubview(s)

                if firstSpacer == nil {
                    firstSpacer = s
                } else {
                    // we know it's not nil, but we have to unwrap it anyway
                    if let fs = firstSpacer {
                        NSLayoutConstraint.activate([
                            s.widthAnchor.constraint(equalTo: fs.widthAnchor, multiplier: 1.0),
                            ])
                    }
                }

            }

        }

    }

}

class DotsViewController: UIViewController {

    var theButton: UIButton = {
        let v = UIButton()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .red
        v.setTitle("Move Tracking Dot", for: .normal)
        v.setTitleColor(.white, for: .normal)
        return v
    }()

    var theTrackingLineView: TrackingLineView = {
        let v = TrackingLineView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .white
        return v
    }()

    var trackingDots: [UIColor] = [
        .yellow,
        .red,
        .orange,
        .green,
        .purple,
        ]

    var currentTrackingPosition = 0

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = UIColor(red: 1.0, green: 0.8, blue: 0.5, alpha: 1.0)

        view.addSubview(theTrackingLineView)

        NSLayoutConstraint.activate([
            theTrackingLineView.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 0.0),
            theTrackingLineView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 0.0),
            theTrackingLineView.heightAnchor.constraint(equalToConstant: 100.0),
            theTrackingLineView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.9),
            ])

        theTrackingLineView.setDots(with: trackingDots)
        theTrackingLineView.trackingPosition = currentTrackingPosition

        // add a button so we can move the tracking dot
        view.addSubview(theButton)

        NSLayoutConstraint.activate([
            theButton.topAnchor.constraint(equalTo: view.topAnchor, constant: 40.0),
            theButton.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 0.0),
            ])

        theButton.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)

    }

    @objc func buttonTapped(_ sender: Any) -> Void {

        // if we're at the last dot, reset to 0
        if currentTrackingPosition < trackingDots.count - 1 {
            currentTrackingPosition += 1
        } else {
            currentTrackingPosition = 0
        }

        theTrackingLineView.trackingPosition = currentTrackingPosition
        UIView.animate(withDuration: 0.25, animations: {
            self.view.layoutIfNeeded()
        })

    }

}

结果：

Answer 3

您可以在 UITableViewCell 中使用 UICollectionView 来实现您的目标。

首先为集合视图单元格创建以下设计。此集合视图已添加到 table 视图单元格中。

CollectionViewCell:

查看约束：

spotview和circleview可以通过constraints和view来识别。所以不要混淆它们，否则所有命名约定都基于视图的优先级可用。

现在你需要在 UITableViewCell 的子类中取出集合视图的出口，无论你做了什么，集合视图单元格的子视图到 UICollectionViewCell 的子类。

UITableViewCell:

class CTrackOrderInTransitTVC: UITableViewCell {

    @IBOutlet weak var transitView : UIView!
    @IBOutlet weak var cvTransit : UICollectionView!

    var arrColors: [UIColor] = [.blue, .yellow, .green, .green]

    override func awakeFromNib() {
        super.awakeFromNib()
    }
}

现在在您的集合视图单元格子类中添加以下代码，它包含您的集合视图单元格子视图的出口：

class CTrackOrderInTransitCVC: UICollectionViewCell {

    @IBOutlet weak var leftView                     : UIView!
    @IBOutlet weak var rightView                    : UIView!

    @IBOutlet weak var spotView                     : UIView!
    @IBOutlet weak var circleView                   : UIView!
}

此后，您必须实施 table 查看数据源方法，将您的集合视图单元格加载到 table。

见以下代码：

extension YourViewController: UITableViewDataSource {

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }

    //------------------------------------------------------------------------------

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cell = tableView.dequeueReusableCell(withIdentifier: "CTrackOrderInTransitTVC", for: indexPath) as! CTrackOrderInTransitTVC

        // Reload collection view to update sub views
        cell.cvTransit.reloadData()

        return cell
    }
}

希望对您有所帮助。

UITableViewCell 中 iOS 中的动态视图

Dynamic View in iOS inside UITableViewCell

uitableview

uiview

ios

autolayout