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
This commit is contained in:
Shadowfacts 2023-05-28 12:19:45 -07:00
parent 708112c486
commit 203c1852d4
4 changed files with 120 additions and 84 deletions

View File

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

View File

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

View File

@ -11,35 +11,43 @@ import Pachyderm
class PollOptionView: UIView { 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 static let unselectedBackgroundColor = UIColor(white: 0.5, alpha: 0.25)
private(set) var label: EmojiLabel! 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) super.init(frame: .zero)
let minHeight: CGFloat = 35 layer.cornerRadius = PollOptionView.cornerRadius
layer.cornerRadius = 0.1 * minHeight
layer.cornerCurve = .continuous layer.cornerCurve = .continuous
backgroundColor = PollOptionView.unselectedBackgroundColor 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 = EmojiLabel()
label.translatesAutoresizingMaskIntoConstraints = false label.translatesAutoresizingMaskIntoConstraints = false
label.numberOfLines = 0 label.numberOfLines = 0
label.font = .preferredFont(forTextStyle: .callout) label.font = .preferredFont(forTextStyle: .callout)
label.text = option.title
label.setEmojis(poll.emojis, identifier: poll.id)
addSubview(label) addSubview(label)
labelLeadingToSelfConstraint = label.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8)
let percentLabel = UILabel() percentLabel = UILabel()
percentLabel.translatesAutoresizingMaskIntoConstraints = false percentLabel.translatesAutoresizingMaskIntoConstraints = false
percentLabel.text = "100%" percentLabel.text = "100%"
percentLabel.font = label.font percentLabel.font = label.font
@ -48,6 +56,53 @@ class PollOptionView: UIView {
percentLabel.setContentHuggingPriority(.required, for: .horizontal) percentLabel.setContentHuggingPriority(.required, for: .horizontal)
addSubview(percentLabel) 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 accessibilityLabel = option.title
if (poll.voted ?? false) || poll.effectiveExpired, if (poll.voted ?? false) || poll.effectiveExpired,
@ -65,56 +120,23 @@ class PollOptionView: UIView {
percentLabel.isHidden = false percentLabel.isHidden = false
percentLabel.text = percent percentLabel.text = percent
let fillView = UIView() if fillView.superview != self {
fillView.translatesAutoresizingMaskIntoConstraints = false
fillView.backgroundColor = .tintColor.withAlphaComponent(0.6)
fillView.layer.zPosition = -1
fillView.layer.cornerRadius = layer.cornerRadius
fillView.layer.cornerCurve = .continuous
addSubview(fillView) addSubview(fillView)
NSLayoutConstraint.activate([ NSLayoutConstraint.activate([
fillView.leadingAnchor.constraint(equalTo: leadingAnchor), fillView.leadingAnchor.constraint(equalTo: leadingAnchor),
fillView.widthAnchor.constraint(equalTo: widthAnchor, multiplier: frac),
fillView.topAnchor.constraint(equalTo: topAnchor), fillView.topAnchor.constraint(equalTo: topAnchor),
fillView.bottomAnchor.constraint(equalTo: bottomAnchor), fillView.bottomAnchor.constraint(equalTo: bottomAnchor),
]) ])
}
fillViewWidthConstraint?.isActive = false
fillViewWidthConstraint = fillView.widthAnchor.constraint(equalTo: widthAnchor, multiplier: frac)
fillViewWidthConstraint!.isActive = true
accessibilityLabel! += ", \(percent)" 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 { } 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")
} }
} }

View File

@ -14,7 +14,7 @@ class PollOptionsView: UIControl {
var mastodonController: MastodonController! var mastodonController: MastodonController!
var checkedOptionIndices: [Int] { 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)? var checkedOptionsChanged: (() -> Void)?
@ -32,10 +32,15 @@ class PollOptionsView: UIControl {
override var isEnabled: Bool { override var isEnabled: Bool {
didSet { didSet {
options.forEach { $0.checkbox?.readOnly = !isEnabled } options.forEach { $0.checkboxIfInitialized?.readOnly = !isEnabled }
} }
} }
override var accessibilityElements: [Any]? {
get { options }
set {}
}
override init(frame: CGRect) { override init(frame: CGRect) {
stack = UIStackView() stack = UIStackView()
@ -61,20 +66,22 @@ class PollOptionsView: UIControl {
func updateUI(poll: Poll) { func updateUI(poll: Poll) {
self.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 { func estimateHeight(effectiveWidth: CGFloat) -> CGFloat {
@ -89,13 +96,13 @@ class PollOptionsView: UIControl {
private func selectOption(_ option: PollOptionView) { private func selectOption(_ option: PollOptionView) {
if poll.multiple { if poll.multiple {
option.checkbox?.isChecked.toggle() option.checkboxIfInitialized?.isChecked.toggle()
} else { } else {
for opt in options { for opt in options {
if opt === option { if opt === option {
opt.checkbox?.isChecked = true opt.checkboxIfInitialized?.isChecked = true
} else { } else {
opt.checkbox?.isChecked = false opt.checkboxIfInitialized?.isChecked = false
} }
} }
} }