Reuse poll option views when updating status cell

Fixes flicker/animation due to new option views begin added in default
state and then changed back to the state of the existing view.

Fixes #403

Tusker/Screens/Status Edit History/StatusEditPollView.swift

@@ -31,7 +31,7 @@ class StatusEditPollView: UIStackView, StatusContentPollView {
         
         for option in poll?.options ?? [] {
             // the edit poll doesn't actually include the multiple value
-            let icon = PollOptionCheckboxView(multiple: false)
+            let icon = PollOptionCheckboxView()
             icon.readOnly = false // this is a lie, but it's only used for stylistic changes
             let label = EmojiLabel()
             label.text = option.title

Tusker/Views/Poll/PollOptionCheckboxView.swift

@@ -10,6 +10,8 @@ import UIKit
 
 class PollOptionCheckboxView: UIView {
     
+    private static let size: CGFloat = 20
+
     var isChecked: Bool = false {
         didSet {
             updateStyle()
@@ -25,16 +27,19 @@ class PollOptionCheckboxView: UIView {
             updateStyle()
         }
     }
+    var multiple: Bool = false {
+        didSet {
+            updateStyle()
+        }
+    }
     
     private let imageView: UIImageView
     
-    init(multiple: Bool) {
+    init() {
         imageView = UIImageView(image: UIImage(systemName: "checkmark")!)
         
         super.init(frame: .zero)
         
-        let size: CGFloat = 20
-        layer.cornerRadius = (multiple ? 0.1 : 0.5) * size
         layer.cornerCurve = .continuous
         layer.borderWidth = 2
         
@@ -46,7 +51,7 @@ class PollOptionCheckboxView: UIView {
         
         NSLayoutConstraint.activate([
             widthAnchor.constraint(equalTo: heightAnchor),
-            widthAnchor.constraint(equalToConstant: size),
+            widthAnchor.constraint(equalToConstant: PollOptionCheckboxView.size),
             
             imageView.widthAnchor.constraint(equalTo: widthAnchor, constant: -3),
             imageView.heightAnchor.constraint(equalTo: heightAnchor, constant: -3),
@@ -64,6 +69,8 @@ class PollOptionCheckboxView: UIView {
     }
     
     private func updateStyle() {
+        layer.cornerRadius = (multiple ? 0.1 : 0.5) * PollOptionCheckboxView.size
+        
         imageView.isHidden = !isChecked
         if voted || readOnly {
             layer.borderColor = UIColor.clear.cgColor

Tusker/Views/Poll/PollOptionView.swift

@@ -11,35 +11,43 @@ import Pachyderm
 
 class PollOptionView: UIView {
     
+    private static let minHeight: CGFloat = 35
+    private static let cornerRadius = 0.1 * minHeight
     private static let unselectedBackgroundColor = UIColor(white: 0.5, alpha: 0.25)
     
     private(set) var label: EmojiLabel!
-    private(set) var checkbox: PollOptionCheckboxView?
+    @Lazy private var checkbox: PollOptionCheckboxView = PollOptionCheckboxView().configure {
+        $0.translatesAutoresizingMaskIntoConstraints = false
+    }
+    var checkboxIfInitialized: PollOptionCheckboxView? {
+        _checkbox.valueIfInitialized
+    }
+    private var percentLabel: UILabel!
+    @Lazy private var fillView: UIView = UIView().configure {
+        $0.translatesAutoresizingMaskIntoConstraints = false
+        $0.backgroundColor = .tintColor.withAlphaComponent(0.6)
+        $0.layer.zPosition = -1
+        $0.layer.cornerRadius = PollOptionView.cornerRadius
+        $0.layer.cornerCurve = .continuous
+    }
+    private var labelLeadingToSelfConstraint: NSLayoutConstraint!
+    private var fillViewWidthConstraint: NSLayoutConstraint?
     
-    init(poll: Poll, option: Poll.Option, mastodonController: MastodonController) {
+    init() {
         super.init(frame: .zero)
         
-        let minHeight: CGFloat = 35
+        layer.cornerRadius = PollOptionView.cornerRadius
-        layer.cornerRadius = 0.1 * minHeight
         layer.cornerCurve = .continuous
         backgroundColor = PollOptionView.unselectedBackgroundColor
         
-        let showCheckbox = poll.ownVotes?.isEmpty == false || !poll.effectiveExpired
-        if showCheckbox {
-            checkbox = PollOptionCheckboxView(multiple: poll.multiple)
-            checkbox!.translatesAutoresizingMaskIntoConstraints = false
-            addSubview(checkbox!)
-        }
-        
         label = EmojiLabel()
         label.translatesAutoresizingMaskIntoConstraints = false
         label.numberOfLines = 0
         label.font = .preferredFont(forTextStyle: .callout)
-        label.text = option.title
-        label.setEmojis(poll.emojis, identifier: poll.id)
         addSubview(label)
+        labelLeadingToSelfConstraint = label.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8)
         
-        let percentLabel = UILabel()
+        percentLabel = UILabel()
         percentLabel.translatesAutoresizingMaskIntoConstraints = false
         percentLabel.text = "100%"
         percentLabel.font = label.font
@@ -48,6 +56,53 @@ class PollOptionView: UIView {
         percentLabel.setContentHuggingPriority(.required, for: .horizontal)
         addSubview(percentLabel)
         
+        let minHeightConstraint = heightAnchor.constraint(greaterThanOrEqualToConstant: PollOptionView.minHeight)
+        // on the first layout, something is weird and this becomes ambiguous even though it's fine on subsequent layouts
+        // this keeps autolayout from complaining
+        minHeightConstraint.priority = .required - 1
+
+        NSLayoutConstraint.activate([
+            minHeightConstraint,
+
+            label.topAnchor.constraint(equalTo: topAnchor, constant: 4),
+            label.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -4),
+            label.trailingAnchor.constraint(equalTo: percentLabel.leadingAnchor, constant: -4),
+
+            percentLabel.topAnchor.constraint(equalTo: topAnchor),
+            percentLabel.bottomAnchor.constraint(equalTo: bottomAnchor),
+            percentLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8),
+        ])
+        
+        isAccessibilityElement = true
+    }
+    
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+    
+    func updateUI(poll: Poll, option: Poll.Option, ownVoted: Bool, mastodonController: MastodonController) {
+        let showCheckbox = poll.ownVotes?.isEmpty == false || !poll.effectiveExpired
+        if showCheckbox {
+            checkbox.isChecked = ownVoted
+            checkbox.voted = poll.voted ?? false
+            
+            labelLeadingToSelfConstraint.isActive = false
+            if checkbox.superview != self {
+                addSubview(checkbox)
+                NSLayoutConstraint.activate([
+                    checkbox.centerYAnchor.constraint(equalTo: centerYAnchor),
+                    checkbox.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8),
+                    label.leadingAnchor.constraint(equalTo: checkbox.trailingAnchor, constant: 8),
+                ])
+            }
+        } else if !showCheckbox {
+            labelLeadingToSelfConstraint.isActive = true
+            _checkbox.valueIfInitialized?.removeFromSuperview()
+        }
+        
+        label.text = option.title
+        label.setEmojis(poll.emojis, identifier: poll.id)
+        
         accessibilityLabel = option.title
         
         if (poll.voted ?? false) || poll.effectiveExpired,
@@ -65,56 +120,23 @@ class PollOptionView: UIView {
             percentLabel.isHidden = false
             percentLabel.text = percent
 
-            let fillView = UIView()
+            if fillView.superview != self {
-            fillView.translatesAutoresizingMaskIntoConstraints = false
+                addSubview(fillView)
-            fillView.backgroundColor = .tintColor.withAlphaComponent(0.6)
+                NSLayoutConstraint.activate([
-            fillView.layer.zPosition = -1
+                    fillView.leadingAnchor.constraint(equalTo: leadingAnchor),
-            fillView.layer.cornerRadius = layer.cornerRadius
+                    fillView.topAnchor.constraint(equalTo: topAnchor),
-            fillView.layer.cornerCurve = .continuous
+                    fillView.bottomAnchor.constraint(equalTo: bottomAnchor),
-            addSubview(fillView)
+                ])
-            
+            }
-            NSLayoutConstraint.activate([
+            fillViewWidthConstraint?.isActive = false
-                fillView.leadingAnchor.constraint(equalTo: leadingAnchor),
+            fillViewWidthConstraint = fillView.widthAnchor.constraint(equalTo: widthAnchor, multiplier: frac)
-                fillView.widthAnchor.constraint(equalTo: widthAnchor, multiplier: frac),
+            fillViewWidthConstraint!.isActive = true
-                fillView.topAnchor.constraint(equalTo: topAnchor),
-                fillView.bottomAnchor.constraint(equalTo: bottomAnchor),
-            ])
 
             accessibilityLabel! += ", \(percent)"
-        }
-        
-        let minHeightConstraint = heightAnchor.constraint(greaterThanOrEqualToConstant: minHeight)
-        // on the first layout, something is weird and this becomes ambiguous even though it's fine on subsequent layouts
-        // this keeps autolayout from complaining
-        minHeightConstraint.priority = .required - 1
-        
-        NSLayoutConstraint.activate([
-            minHeightConstraint,
-            
-            label.topAnchor.constraint(equalTo: topAnchor, constant: 4),
-            label.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -4),
-            label.trailingAnchor.constraint(equalTo: percentLabel.leadingAnchor, constant: -4),
-            
-            percentLabel.topAnchor.constraint(equalTo: topAnchor),
-            percentLabel.bottomAnchor.constraint(equalTo: bottomAnchor),
-            percentLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8),
-        ])
-        
-        if let checkbox {
-            NSLayoutConstraint.activate([
-                checkbox.centerYAnchor.constraint(equalTo: centerYAnchor),
-                checkbox.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8),
-                label.leadingAnchor.constraint(equalTo: checkbox.trailingAnchor, constant: 8),
-            ])
         } else {
-            label.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8).isActive = true
+            percentLabel.isHidden = true
+            _fillView.valueIfInitialized?.removeFromSuperview()
         }
-        
-        isAccessibilityElement = true
-    }
-    
-    required init?(coder: NSCoder) {
-        fatalError("init(coder:) has not been implemented")
     }
     
 }

Tusker/Views/Poll/PollOptionsView.swift

@@ -14,7 +14,7 @@ class PollOptionsView: UIControl {
     var mastodonController: MastodonController!
 
     var checkedOptionIndices: [Int] {
-        options.enumerated().filter { $0.element.checkbox?.isChecked == true }.map(\.offset)
+        options.enumerated().filter { $0.element.checkboxIfInitialized?.isChecked == true }.map(\.offset)
     }
     var checkedOptionsChanged: (() -> Void)?
     
@@ -32,10 +32,15 @@ class PollOptionsView: UIControl {
     
     override var isEnabled: Bool {
         didSet {
-            options.forEach { $0.checkbox?.readOnly = !isEnabled }
+            options.forEach { $0.checkboxIfInitialized?.readOnly = !isEnabled }
         }
     }
     
+    override var accessibilityElements: [Any]? {
+        get { options }
+        set {}
+    }
+    
     override init(frame: CGRect) {
         stack = UIStackView()
         
@@ -61,20 +66,22 @@ class PollOptionsView: UIControl {
     func updateUI(poll: Poll) {
         self.poll = poll
         
-        options.forEach { $0.removeFromSuperview() }
+        if poll.options.count > options.count {
-        
+            for _ in 0..<(poll.options.count - options.count) {
-        options = poll.options.enumerated().map { (index, opt) in
+                let optView = PollOptionView()
-            let optionView = PollOptionView(poll: poll, option: opt, mastodonController: mastodonController)
+                options.append(optView)
-            if let checkbox = optionView.checkbox {
+                stack.addArrangedSubview(optView)
-                checkbox.readOnly = !isEnabled
+            }
-                checkbox.isChecked = poll.ownVotes?.contains(index) ?? false
+        } else if poll.options.count < options.count {
-                checkbox.voted = poll.voted ?? false
+            for _ in 0..<(options.count - poll.options.count) {
+                options.removeLast().removeFromSuperview()
             }
-            stack.addArrangedSubview(optionView)
-            return optionView
         }
         
-        accessibilityElements = options
+        for (index, (view, opt)) in zip(options, poll.options).enumerated() {
+            view.updateUI(poll: poll, option: opt, ownVoted: poll.ownVotes?.contains(index) ?? false, mastodonController: mastodonController)
+            view.checkboxIfInitialized?.readOnly = !isEnabled
+        }
     }
     
     func estimateHeight(effectiveWidth: CGFloat) -> CGFloat {
@@ -89,13 +96,13 @@ class PollOptionsView: UIControl {
     
     private func selectOption(_ option: PollOptionView) {
         if poll.multiple {
-            option.checkbox?.isChecked.toggle()
+            option.checkboxIfInitialized?.isChecked.toggle()
         } else {
             for opt in options {
                 if opt === option {
-                    opt.checkbox?.isChecked = true
+                    opt.checkboxIfInitialized?.isChecked = true
                 } else {
-                    opt.checkbox?.isChecked = false
+                    opt.checkboxIfInitialized?.isChecked = false
                 }
             }
         }