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:
parent
708112c486
commit
203c1852d4
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 = 0.1 * minHeight
|
||||
layer.cornerRadius = PollOptionView.cornerRadius
|
||||
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()
|
||||
fillView.translatesAutoresizingMaskIntoConstraints = false
|
||||
fillView.backgroundColor = .tintColor.withAlphaComponent(0.6)
|
||||
fillView.layer.zPosition = -1
|
||||
fillView.layer.cornerRadius = layer.cornerRadius
|
||||
fillView.layer.cornerCurve = .continuous
|
||||
addSubview(fillView)
|
||||
|
||||
NSLayoutConstraint.activate([
|
||||
fillView.leadingAnchor.constraint(equalTo: leadingAnchor),
|
||||
fillView.widthAnchor.constraint(equalTo: widthAnchor, multiplier: frac),
|
||||
fillView.topAnchor.constraint(equalTo: topAnchor),
|
||||
fillView.bottomAnchor.constraint(equalTo: bottomAnchor),
|
||||
])
|
||||
if fillView.superview != self {
|
||||
addSubview(fillView)
|
||||
NSLayoutConstraint.activate([
|
||||
fillView.leadingAnchor.constraint(equalTo: leadingAnchor),
|
||||
fillView.topAnchor.constraint(equalTo: topAnchor),
|
||||
fillView.bottomAnchor.constraint(equalTo: bottomAnchor),
|
||||
])
|
||||
}
|
||||
fillViewWidthConstraint?.isActive = false
|
||||
fillViewWidthConstraint = fillView.widthAnchor.constraint(equalTo: widthAnchor, multiplier: frac)
|
||||
fillViewWidthConstraint!.isActive = true
|
||||
|
||||
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")
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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() }
|
||||
|
||||
options = poll.options.enumerated().map { (index, opt) in
|
||||
let optionView = PollOptionView(poll: poll, option: opt, mastodonController: mastodonController)
|
||||
if let checkbox = optionView.checkbox {
|
||||
checkbox.readOnly = !isEnabled
|
||||
checkbox.isChecked = poll.ownVotes?.contains(index) ?? false
|
||||
checkbox.voted = poll.voted ?? false
|
||||
if poll.options.count > options.count {
|
||||
for _ in 0..<(poll.options.count - options.count) {
|
||||
let optView = PollOptionView()
|
||||
options.append(optView)
|
||||
stack.addArrangedSubview(optView)
|
||||
}
|
||||
} else if poll.options.count < options.count {
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue