How Can I Place A Label Onto An Image And Ensure That The Text Is Always Readable?

Question

I have a UICollectionView wherein the cells contain UILabels and have a backgroundView that is a UIImage. The label backgrounds are clear. My problem is that segments of the text can become difficult to read when there is little contrast between the text color and the colors in the area of the image over which the text appears. I suspect that there are techniques which can be used to help with this (White text with a black border perhaps? Possible? How?). Would someone please advise me?

First Edit:

I tried @EssamMohamed / @AbdelahadDarwish answer but it didn't work. I might be doing something wrong.

I am using a .xib file and a custom class. Here is the custom class:

class PointOfInterestCell: UICollectionViewCell {

    @IBOutlet weak var nameLabel: UILabel! {
        didSet {
            //nameLabel.textColor = UIColor.tohTerracotaColor()
        }
    }

    @IBOutlet weak var distanceLabel: UILabel! {
        didSet {
            let strokeTextAttributes = [
                NSStrokeColorAttributeName : UIColor.black,
                NSForegroundColorAttributeName : UIColor.white,
                NSStrokeWidthAttributeName : -1.0,
            ] as [String : Any]

            let text = distanceLabel.text ?? "????"

            distanceLabel.attributedText = NSAttributedString(string: text, attributes: strokeTextAttributes)
        }
    }
}

check this answer to get color https://stackoverflow.com/a/29266983 and then find inverse color of it. — adev, Aug 23 '17 at 20:35
or this answer which gives average color https://stackoverflow.com/a/13695592 and then find inverse color of it for label text. — adev, Aug 23 '17 at 20:36
hello, i think to use [color 1] text with a [color 2] border where color 1 and color 2 are contrasting colors will be good idea, you can choice these colors from color wheel. — Essam Fahmi, Aug 23 '17 at 20:36
I agree with Essam's idea too. Having a contrasting border color will make sure it is always readable. I think you should add that as answer — adev, Aug 23 '17 at 20:37
@Essam Sounds great. White text with black border. How do I do that? — Verticon, Aug 23 '17 at 20:39
@Verticon, try this answer: https://stackoverflow.com/a/4748311 — adev, Aug 23 '17 at 20:41
@adev I should have said that I want a technique that allows me to not have the text be a different color on each image - or worse, across the width of any given image. Hmmm ... unless you could suggest a way to make that look good? — Verticon, Aug 23 '17 at 20:41
Makes sense. Then you can go with the answer I pointed right above. Add a shadow as black color and see how it looks. — adev, Aug 23 '17 at 20:42
check [this](https://stackoverflow.com/questions/40575408/outline-uilabel-text-in-uilabel-subclass) to create text with border. — Essam Fahmi, Aug 23 '17 at 20:45
Credit to @EssamMohamed, I think he should put that as an answer though(contrasting border color bit). That is what helped you. — adev, Aug 23 '17 at 20:49

Essam Fahmi · Answer 1 · 2017-11-09T22:23:39.433

2

I think to use [color 1] text with a [color 2] stroke where color 1 and color 2 are contrasting colors will be good idea (complementary color scheme) and you can choose these colors from color wheel where the two colors are faced each other.

If you search about how to make the stroke, check this link for help.

edited Nov 09 '17 at 22:23

answered Aug 23 '17 at 22:14

Essam Fahmi

1,920
24
31

Abdelahad Darwish · Accepted Answer · 2017-08-23T21:36:28.853

you can use attributedText of label

import UIKit

 @IBDesignable
    class StrockLabel: UILabel {


        override init(frame: CGRect) {
            super.init(frame: CGRect.zero)
        }

        required init?(coder aDecoder: NSCoder) {
            super.init(coder: aDecoder)
        }

        override var text: String?{

            didSet{

                let strokeTextAttributes = [
                    NSStrokeColorAttributeName : UIColor.black,
                    NSForegroundColorAttributeName : UIColor.white,
                    NSStrokeWidthAttributeName : -1.0,
                    ] as [String : Any]

                let textStr = text ?? "????"
                self.attributedText = NSAttributedString(string: textStr, attributes: strokeTextAttributes)
            }


        }
        /*
         // Only override draw() if you perform custom drawing.
         // An empty implementation adversely affects performance during animation.
         override func draw(_ rect: CGRect) {
         // Drawing code
         }
         */

    }

/////////

//and when use

@IBOutlet weak var distanceLabel: StrockLabel!

distanceLabel.text = "DDDD"

Thank you. I must be doing something wrong. Would you please have a look at the edit that I added to my question? — Verticon, Aug 23 '17 at 21:17

How Can I Place A Label Onto An Image And Ensure That The Text Is Always Readable?

2 Answers2