How to remove and addArrangedSubvew without view blinking? - ios

Question

I have some view that consists from one stackview. Every n second I should update this view with data from server. When the new data come, I clean stackView (with method removeFromSuperView of its children) and add arrangedSubviews again to update UI. Sometimes, server sends the same data as old data. But doing this update operation, my view is kinda shuddering. Its kinda dragging and shuddering every time I clean and add views to my stackview. Of course, I can only update my UI if oldData != newData. But this competition is difficult and hard to find correctly. So, how to update stackview with new data without shuddering and blinking?
Here is my code:
func configure(_ items: [Item]) {
stackView.arrangedSubviews.forEach { $0.removeFromSuperview() }
items.forEach {
let someView = SomeView()
someView.configure($0)
stackView.addArrangedSubview(someView)
}
}

Answer 1

Instead of removing / re-adding views to the stack view...
only add new views if there are more Items than current arranged subviews
set the data - configure() - each arranged subview
hide existing arranged subviews if there are more than needed
For example:
func configure(_ items: [Item]) {
// if we have fewer arranged subviews than items
// add new ones
while stackView.arrangedSubviews.count < items.count {
stackView.addArrangedSubview(SomeView())
}
// hide any existing arranged subviews if we have too many
for i in 0..<stackView.arrangedSubviews.count {
stackView.arrangedSubviews[i].isHidden = i >= items.count
}
// update the existing arranged subviews with the new data
for (thisItem, thisView) in zip(items, stackView.arrangedSubviews) {
// unwrap the arranged subview
guard let v = thisView as? SomeView else {
continue
}
v.configure(thisItem)
}
}
Here's a complete example - the number of "items" and their data will change every 1.5 seconds:
Sample struct Item with two strings:
struct Item {
var title: String = ""
var desc: String = ""
}
Sample "SomeView" class with two labels:
class SomeView: UIView {
let titleLabel = UILabel()
let descLabel = UILabel()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() -> Void {
backgroundColor = .systemYellow
titleLabel.font = .boldSystemFont(ofSize: 18.0)
descLabel.font = .italicSystemFont(ofSize: 15.0)
[titleLabel, descLabel].forEach { v in
v.translatesAutoresizingMaskIntoConstraints = false
v.backgroundColor = .white // so we can see the label frames at run-time
addSubview(v)
}
NSLayoutConstraint.activate([
titleLabel.topAnchor.constraint(equalTo: topAnchor, constant: 8.0),
titleLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8.0),
titleLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8.0),
descLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 4.0),
descLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8.0),
descLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8.0),
descLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -8.0),
])
}
func configure(_ item: Item) -> Void {
titleLabel.text = item.title
descLabel.text = item.desc
}
}
Sample "NeoView" class with the stack view:
class NeoView: UIView {
let stackView: UIStackView = {
let v = UIStackView()
v.axis = .vertical
v.spacing = 8
return v
}()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() -> Void {
stackView.translatesAutoresizingMaskIntoConstraints = false
addSubview(stackView)
NSLayoutConstraint.activate([
stackView.topAnchor.constraint(equalTo: topAnchor, constant: 0.0),
stackView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 0.0),
stackView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: 0.0),
stackView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: 0.0),
])
}
func configure(_ items: [Item]) {
// if we have fewer arranged subviews than items
// add new ones
while stackView.arrangedSubviews.count < items.count {
stackView.addArrangedSubview(SomeView())
}
// hide any existing arranged subviews if we have too many
for i in 0..<stackView.arrangedSubviews.count {
stackView.arrangedSubviews[i].isHidden = i >= items.count
}
// update the existing arranged subviews with the new data
for (thisItem, thisView) in zip(items, stackView.arrangedSubviews) {
// unwrap the arranged subview
guard let v = thisView as? SomeView else {
continue
}
v.configure(thisItem)
}
}
}
Example controller class:
class NeoTestViewController: UIViewController {
let neoView: NeoView = {
let v = NeoView()
v.backgroundColor = .systemTeal
return v
}()
var items: [[Item]] = []
var idx: Int = 0
override func viewDidLoad() {
super.viewDidLoad()
neoView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(neoView)
// respect safe area
let g = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
neoView.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
neoView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
neoView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
// no bottom constraint
])
items = sampleData()
var idx: Int = 0
self.neoView.configure(self.items[idx % self.items.count])
// update neoView with a new set of items every 1.5 seconds
Timer.scheduledTimer(withTimeInterval: 1.5, repeats: true) { timer in
idx += 1
self.neoView.configure(self.items[idx % self.items.count])
}
}
func sampleData() -> [[Item]] {
// we'll create 8 sets of [Item] arrays
// each with a different number of Items
let numItems: [Int] = [
4, 2, 6, 3, 7, 8, 3, 5,
]
var items: [[Item]] = []
var i: Int = 1
numItems.forEach { n in
var theseItems: [Item] = []
for j in 1...n {
let thisItem = Item(title: "Set \(i) item \(j) title.", desc: "Set \(i) item \(j) description.")
theseItems.append(thisItem)
}
theseItems[0].title = "Set \(i) has \(n) items."
items.append(theseItems)
i += 1
}
return items
}
}