如何在图像上放置标签并确保文本始终可读？

Question

我有一个 UICollectionView，其中的单元格包含 UILabel，并且有一个 backgroundView，它是一个 UIImage。标签背景清晰。我的问题是，当文本颜色与出现文本的图像区域中的颜色之间几乎没有对比度时，文本片段会变得难以阅读。我怀疑有一些技术可以用来帮助解决这个问题（也许是带有黑色边框的白色文本？可能吗？如何？）。有人可以告诉我吗？

第一次编辑：

我尝试了@EssamMohamed / @AbdelahadDarwish 的回答，但没有成功。我可能做错了什么。

我正在使用 .xib 文件和自定义 class。这是自定义 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)
        }
    }
}

Answer 1

您可以使用标签的属性文本

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
         }
         */

    }

/////////

//当使用

@IBOutlet weak var distanceLabel: StrockLabel!

distanceLabel.text = "DDDD"

Answer 2

我认为使用带有 [颜色 2] 描边的 [颜色 1] 文本是个好主意，其中颜色 1 和颜色 2 是对比色（互补色方案），您可以从色轮中选择这些颜色两种颜色相对。

如果您搜索如何画笔画，请查看此以获取帮助。

如何在图像上放置标签并确保文本始终可读？

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

ios

swift

ios10