UILabel with text of two different colors
Data Structures & Algorithms practice on Codemia
Step through 300+ coding interview problems with animated visualisers that show the data structure changing as the code runs. The Blind 75 are free.
Introduction
In iOS development, `UILabel` is a fundamental UI component used to display a small amount of text. A common requirement is to have different portions of the text rendered in varying styles, such as having two different colors within the same label. Achieving this effect requires a good understanding of `NSAttributedString` and the attributes that can be applied to it.
Components of UILabel
A `UILabel` is typically characterized by the following components:
- Text: The primary string or content the label displays.
- Font: Determines the font style and size.
- Text Color: Defines the color of the text.
- Text Alignment: Determines how the text is aligned within the label.
- Number of Lines: Allows multi-line support.
To display text in multiple colors within a single label, you need to use an `NSAttributedString`.
Using NSAttributedString for Multiple Colors
An `NSAttributedString` is an advanced form of a string that allows for attaching various attributes such as font, color, and paragraph style to different parts of a string.
Creating a UILabel with Multiple Colors
Here's a step-by-step example of how to create a `UILabel` where the text exhibits two different colors:
Swift Example
- `NSMutableAttributedString`: A mutable subclass of `NSAttributedString` that allows editing of text attributes.
- `NSRange`: Specifies the range of characters to which the attribute should be applied.
- `.foregroundColor`: A key to specify text color.
- Performance: `NSAttributedString` provides an efficient way of managing and rendering multiple attributes without significantly impacting performance.
- Flexibility: Supports a wide range of attributes beyond color, including fonts, kerning, strikethroughs, and more.
- Dynamic Updates: The attributes can be dynamically updated, allowing you to alter the text properties in response to user interactions or app events.
- Short Ranges: Limit the number of characters per range for performance efficiency.
- Design Consistency: Ensure that the usage of multiple colors and attributes are consistent with the overall app design for a seamless user experience.
- Accessibility: Use contrasting colors to maintain text legibility and improve accessibility.
Related reading
- UILabel with text of two different colors
- UINavigationBar - Set title programmatically?
- UINavigationBar custom back button without title
- UINavigationBar Hide back Button Text
- UINavigationController back button custom text?
- UINavigationController without navigation bar?
- UIPageViewController return the current visible view
- UIPanGestureRecognizer - Only vertical or horizontal
.png&w=3840&q=75)
Tackling System Design Interview Problems
A short course that equips you with the skills to approach system design interviews methodically.
Start the free courseNo course covers this one yet
Basis Lab writes one for you from a sentence about what you want to be able to do, then teaches it and checks you understood. Your first course is free.
Build my courseData Structures & Algorithms practice on Codemia
Step through 300+ coding interview problems with animated visualisers that show the data structure changing as the code runs. The Blind 75 are free.