20

The problem

I'm using a UITableView to show the list of transactions of a credit card. If the transaction is a chargeback, I'm adding a strikethrough style to the label:

Example of my UITableViewCells

The problem happens when that specific cell is reused. The strikethrought decoration is still there, even after resetting the text and attributedText property of the label.

Below I've added the relevant parts of my code:

Table view

class TimelineViewController: UIViewController {

    private lazy var tableView: UITableView = {
        let tableView = UITableView.init(frame: view.frame, style: .plain)
        tableView.translatesAutoresizingMaskIntoConstraints = false
        tableView.register(TimelineTableViewCell.self, forCellReuseIdentifier: TimelineTableViewCell.reuseIdentifier)
        tableView.dataSource = self
        tableView.delegate = self
        return tableView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        addTableViewOnView()
        getTimeline()
    }

}

extension TimelineViewController: UITableViewDataSource {

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: TimelineTableViewCell.reuseIdentifier,
                                                       for: indexPath) as? TimelineTableViewCell else { fatalError() }
        cell.transactionData = viewModel.timeline[indexPath.row]
        return cell
    }

}

Table view cell

class TimelineTableViewCell: UITableViewCell {

    static let reuseIdentifier = "TimelineTableViewCell"

    var transactionData: TimelineResponseModel! {
        didSet {
            // Reset the labels
            transactionDescriptionLabel.text = nil
            transactionDescriptionLabel.attributedText = nil
            transactionValueLabel.text = nil
            transactionValueLabel.attributedText = nil

            // Fill in the values
            transactionDescriptionLabel.text = transactionData.description
            transactionValueLabel.text = Formatter.currency.string(for: transactionData.balance)

            if transactionData.isChargeback {
                let value = Formatter.currency.string(for: transactionData.balance) ?? ""
                transactionDescriptionLabel.attributedText = transactionData.description.strikedThrough()
                transactionValueLabel.attributedText = value.strikedThrough()
            }
        }
    }

    private lazy var transactionDescriptionLabel: UILabel = {
        let transactionDescriptionLabel = UILabel()
        transactionDescriptionLabel.translatesAutoresizingMaskIntoConstraints = false
        transactionDescriptionLabel.font = UIFont.preferredFont(forTextStyle: .footnote)
        transactionDescriptionLabel.adjustsFontForContentSizeCategory = true
        transactionDescriptionLabel.textColor = UIColor.activeText()
        transactionDescriptionLabel.numberOfLines = 0
        return transactionDescriptionLabel
    }()

    private lazy var transactionValueLabel: UILabel = {
        let transactionValueLabel = UILabel()
        transactionValueLabel.translatesAutoresizingMaskIntoConstraints = false
        transactionValueLabel.font = UIFont.preferredFont(forTextStyle: .caption1).bold()
        transactionValueLabel.adjustsFontForContentSizeCategory = true
        transactionValueLabel.textColor = UIColor.activeText()
        return transactionValueLabel
    }()

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        addTransactionDescriptionLabel()
        addTransactionValueLabel()
    }

}

Strikethrough style

extension String {

    func strikedThrough() -> NSAttributedString {
        let strikethroughStyle = [NSAttributedString.Key.strikethroughStyle: NSUnderlineStyle.single.rawValue]
        return NSAttributedString(string: self, attributes: strikethroughStyle)
    }

}

What I've tried

I've tried some approaches, without success:

  • Override prepareForReuse and reset the text and attributedText of the label there.
  • Create an else after the if transactionData.isChargeback to set the transactionDescriptionLabel and transactionValueLabel attributed text without the decoration

So, when the cell is reused, how can I reset it's labels to remove the strikethrough style I've added before?

5
  • Why are you setting the table cell content within TimelineTableViewCell as opposed to the delegate within TimelineViewController ?
    – ekrenzin
    Commented Oct 30, 2019 at 15:09
  • @ekrenzin To better encapsulate the UI elements inside the cell. Since I've declared them as private, the only attribute accessible from outside is the transactionData. When I set it, it updates the cell's UI elements. Commented Oct 30, 2019 at 15:13
  • I suggest trying modifying the cell UI in the delegate just to see if it makes a difference. If doesn't work then there could be something wrong with your model not accounting for a new but already laid out cell. Good question :)
    – ekrenzin
    Commented Oct 30, 2019 at 15:36
  • @ekrenzin While trying your suggestion, I've stumbled upon the solution: for some weird reason, if I reset only the attributedText, the problem doesn't happen anymore. Or, if I reset the attributedText first, and then text later, the problem doesn't happen either. According to the documentation, assigning a new value to either property replaces the value of the other, so the order should not matter... Maybe that's a UILabel bug 😅 Commented Oct 30, 2019 at 17:16
  • 1
    I'm so glad you got to the solution with Alex! :) And yeah that is weird... I have come across something similar in the past which is why I mentioned the new but already laid out, I guess a similar thing occurred here with needing to reset the attributed text? Table cells are weird sometimes haha~
    – ekrenzin
    Commented Oct 30, 2019 at 20:18

5 Answers 5

20

Alex answer did fix my problem, but I've also found out why the reset of the labels didn't work. I'll leave it here in case it's useful for someone.

For some reason, if I reset only the attributedText, it works:

transactionDescriptionLabel.attributedText = nil
transactionValueLabel.attributedText = nil

Or, if I reset the attributedText first, and then reset the text, it also works:

transactionDescriptionLabel.attributedText = nil
transactionValueLabel.attributedText = nil
transactionDescriptionLabel.text = nil
transactionValueLabel.text = nil

According to the UILabel documentation, assigning a new value to either property replaces the value of the other, so the order should not matter. But it does, apparently.

https://developer.apple.com/documentation/uikit/uilabel/1620538-text

https://developer.apple.com/documentation/uikit/uilabel/1620542-attributedtext

4
  • 1
    This is super weird, but same for me! Commented Mar 12, 2020 at 20:31
  • yes weird, happening to me still in 2020 :) only resetting attributedText before text solves the issue. Commented Jul 23, 2020 at 13:26
  • 1
    Still the case in iOS 13.5.
    – hibento
    Commented Oct 4, 2020 at 21:34
  • 1
    Thanks for this hint - you were right that you have to nil out both, but doing attributedText first actually solved the issue I was having.
    – N.W
    Commented Nov 1, 2020 at 4:23
3

Swift5 UILabel Extension

extension UILabel {
    func strikeThrough(_ isStrikeThrough: Bool = true) {
        guard let text = self.text else {
            return
        }
        
        if isStrikeThrough {
            let attributeString =  NSMutableAttributedString(string: text)
            attributeString.addAttribute(NSAttributedString.Key.strikethroughStyle, value: NSUnderlineStyle.single.rawValue, range: NSMakeRange(0,attributeString.length))
            self.attributedText = attributeString
        } else {
            let attributeString =  NSMutableAttributedString(string: text)
            attributeString.addAttribute(NSAttributedString.Key.strikethroughStyle, value: [], range: NSMakeRange(0,attributeString.length))
            self.attributedText = attributeString
        }
    }
}
0
3

I just found the same problem in our app on iOS 15.x. I have experimented with different ways to remove the attributed string before setting a new value, as the other answers advise.

Unfortunately, I haven't been able to get the reset to work. Then I realised that the problem happens only if the attribute (background color in my case) is covering the entire length of the text.

To prevent it from happening, I appended an invisible character to my attributed string and the problem got magically fixed.

let myString: NSMutableAttributedString = ...
myString.append(NSAttributedString(string: "\u{200B}")) // zero-width space

// set any attributes but do not set them on the last character
1
  • I faced the same issue. My underline attribute didn't want to disappear for some cells in the table view. It really works! You saved my day, thank you!
    – Oranutachi
    Commented Mar 2, 2022 at 7:38
2

You should try to set with .attributedText here instead of using `.text'. If it won't work I'll delete my answer.

// Fill in the values
transactionDescriptionLabel.text = transactionData.description
transactionValueLabel.text = Formatter.currency.string(for: transactionData.balance)

So, try this

transactionDescriptionLabel.attributedText = //
transactionValueLabel.attributedText = //

One more thing. Actually I don't like didSet. I suggest you to create a method to configure your cell. Here is an example of what I want to tell you.

func configure(with transactionData: TimelineResponseModel) {
   // Reset the labels
   transactionDescriptionLabel.text = nil
   transactionDescriptionLabel.attributedText = nil
   transactionValueLabel.text = nil
   transactionValueLabel.attributedText = nil

   // Fill in the values
   transactionDescriptionLabel.text = transactionData.description
   transactionValueLabel.text = Formatter.currency.string(for: transactionData.balance)

   if transactionData.isChargeback {
      let value = Formatter.currency.string(for: transactionData.balance) ?? ""
      transactionDescriptionLabel.attributedText = transactionData.description.strikedThrough()
      transactionValueLabel.attributedText = value.strikedThrough()
   }
}

Next.

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    guard let cell = tableView.dequeueReusableCell(withIdentifier: TimelineTableViewCell.reuseIdentifier,
                                                   for: indexPath) as? TimelineTableViewCell else { fatalError() }
    // Thats what I really like
    cell.configure(with: viewModel.timeline[indexPath.row])
    return cell
}
4
  • 1
    Yeah, that way it works! I haven't done this way at first because I don't need any different style if the transaction isn't a chargeback, but I guess I'll just create a NSAttributedString without any attributes for that. Commented Oct 30, 2019 at 17:31
  • Glad to help you. So I want to share with you by my thoughts of using didSet. I will edit my answer. ) Commented Oct 30, 2019 at 17:35
  • Thank you for the suggestion! Is there a particular reason why using didSet isn't ideal? I ask because I used to do exactly how you suggested, with a configure method, but decided to try the didSet property observers for this particular project. Commented Oct 30, 2019 at 17:49
  • 1
    Actually nothing special with didSet, but didSet stores the value. Instead of this - configure method doesn't store anything, it's just like a { get set }. Hope I could help you :) Commented Oct 30, 2019 at 17:52
0

Li Jin Swift's Answer above correctly resets the StrikethroughStyle bit when assigned to a Label's AttributedText field.

Xamarin.iOS (C#) Example:

// does not reset StrikethroughStyle bit
NSMutableAttributedString attrString = new NSMutableAttributedString("Text", foregroundColor: UIColor.Black, strikethroughStyle: NSUnderlineStyle.None);  
                        
// does reset bit StrikethroughStyle when assigned to a label
attrString.AddAttribute(UIStringAttributeKey.StrikethroughStyle, NSNumber.FromLong(0), new NSRange(0, attrString.Length)); 
                            
Label.AttributedText = attrString;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.