Changing the background color of UILabel in iOS with a rounded rectangle design

I am looking to create a design similar to this concept.

https://i.sstatic.net/7ZQi3.png

One approach is to achieve this by inserting an image (for "PDF").

NSTextAttachment *attachment = [[NSTextAttachment alloc] init]; attachment.image = [UIImage imageNamed:@"MyIcon.png"];

NSAttributedString *attachmentString = [NSAttributedString attributedStringWithAttachment:attachment];

NSMutableAttributedString *myString= [[NSMutableAttributedString alloc] initWithString:@"My label text"]; [myString appendAttributedString:attachmentString];

myLabel.attributedText = myString;

However, I am uncertain about the effectiveness of this method. Is there an alternative solution available? Could I emphasize the word 'PDF' with a background that has rounded corners? While I can easily set the text background color using an attributed string, it lacks the ability to create rounded corners.

Answer №1

myLabel.style.background = "red";
myLabel.shape.radius = 5.0;
myLabel.element.clipToBounds = true;

Answer №2

To achieve a custom look for the PDF UILabel, I suggest placing it within another UIView that has the desired background color and rounding the corners using view.layer.cornerRadius. This approach allows you to customize the UILabel placement within the rounded view as needed.

By applying corner rounding directly to the UILabel, there is a possibility of text overlapping the edges of the rounded corners which may affect the overall appearance.

Answer №3

To easily convert HTML text, I recommend using the RTLabel library which has proven to be effective in several instances. You can find the link to the library and sample code here.

Afterwards, you can customize the CSS style to suit your needs.

I hope this information is helpful for you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am interested in finding a method to preview how my website will appear and function on a mobile device while using a desktop browser

Similar Question: Emulators and Simulators for Testing Mobile Browser Compatibility? I'm interested in seeing how my website appears and functions when accessed on mobile devices like an iPhone, iPad, Android, etc. The challenge is that I do not ...

Angular is responsible for generating excessive space

I have a component called members that contains individual member components. When I use the members component as static code, everything works fine: <div class="row bg-light justify-content-center py-4"> <div class="col-lg-8"> <h3 c ...

How to create a CSS animation that gradually darkens a background image during a

Currently in the process of constructing a page with an intriguing background image: body { background:url(images/bg.png) center center no-repeat fixed; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; ...

Comparing the differences in jQuery mobile events between Android and iPhone devices

As a newcomer to jQuery mobile, I am facing an issue where I need to capture the vmousemove events on a div in order to drag images within the div, similar to how SVG images are dragged on Google Maps. A demo of my project can be found at I have tested t ...

Why isn't the z-index functioning properly in Vue.js styling?

I am currently developing a simple component that displays four steps, indicating the current step and allowing users to navigate through them. I want to create a design where these numbers are enclosed within circles that are evenly distributed in a line ...

Can the default Bootstrap classes in the ExtLib application layout control be modified?

I am currently using the responsive Bootstrap theme in combination with the application layout control in extlib, but I have been unable to locate any documentation on whether it is possible to modify the predefined Bootstrap classes. In the example below ...

The issue with the class attribute being disregarded by Internet Explorer

Having trouble with a complex web page (JavaScript application) where an included style sheet has the following rule: .floatleft { float: left; margin-right: 10px; } There is a DIV element within that layout: <div class="floatleft" width="25%"> ...

Updating a webpage's background image using Jquery and PHP every 10 seconds

I am in the process of designing a webpage for my hobby radio station. Currently, I have the artist and title displayed, but I would like to take it a step further and have the background change based on the artist playing. For example, when Phil Collins i ...

PyQt TreeView scrollbar obstructing the header

I've been experimenting with the QTreeView widget (instead of QListView) in order to have a horizontal header. Additionally, I wanted to use stylesheets to customize the colors and appearance of the header and scrollbars. However, there is an issue w ...

The functionality of UILocalNotification is completely non-functional

I seem to be running into a frustrating issue with UILocalNotification. After working on an app that's nearly finished, I realized that I just couldn't get local notifications to function properly, no matter what I attempted. So instead of wast ...

Add distinctive formatting for the final element that is not the last child

Presented with a fascinating challenge, I find myself with an ever-changing number of .child.red children. I am in need of referencing the last .child.red element dynamically using styles. Although I have attempted to achieve this on my own, I am curious a ...

Is there unused space located at the bottom of the button?

Struggling to fix a coding issue related to formatting white space within a button. Sometimes the white space is at the top, other times at the bottom. Here's the CSS code that's not working #filter { position: relative; overflow: hi ...

What is the best way to add a border to the <map coordinates>?

Is there a way to add a border around the active link section of an image defined by coordinates? I have been able to show an outline when the user clicks using outline-color and href, but now I need a default border around the specified coordinates. I am ...

Discover the process of transitioning your animations from Angular to CSS

I have successfully implemented a fade-in/out animation using @angular/animation, but now I am looking to transfer this animation to CSS and eliminate the dependency on @angular/animation. Here is my current animation setup (triggering it with [@fadeInOut ...

The alignment of the elements within the jumbotron is off

Hey there! I'm currently struggling to align the jumbotron with my calendar icon. Unfortunately, the elements of the jumbotron are not lining up properly. Could someone lend a hand in guiding me through this issue? Any ideas would be greatly appreciat ...

React: Animate with CSS

How can I make sure that every time a new user is prepended, the first div has a CSS animation? Currently, my code only works for the first prepend and the animation does not trigger on subsequent ones. const [userList, setUserList] = useState<any> ...

Determining User Login Status in Laravel using jQuery

While I am familiar with the authentication verification in laravel, I am interested in learning how to verify it using jQuery. Specifically, I want to make changes to my CSS when a user is logged in. By default: body{ background: url('image.jpg ...

Button in motion akin to an assistive touch

Hey there! I'm in need of some assistance with moving a UIButton to a specific location within my app. I'm looking to create a feature similar to the Assistive Touch in iPhones where users can access a button from any screen. Is it possible to im ...

Display the delete message URL according to the user's name

I have a wall message system using PHP and jQuery where messages from all users are displayed. Now, I want to add delete functionality to each message, but the delete link should only be visible to the user who posted the message. .childs { opaci ...

What is the best way to gradually transform a continuously shifting text color into a single, consistent hue?

Hey there, wonderful people of StackOverflow! I am absolutely stumped and cannot figure out how to smoothly transition this color-changing text from its current state into a different solid color when the submit button is clicked. Is there a skilled indiv ...