I want to make a UILabel or UITextView with some text with 2 clickable links in it. Not links to webpages but I want to link those 2 links with actions like i would do with an UIButton. All the examples i've seen are links to webviews but I dont want that. As well, the text will be translated in other languages so the positions have to be dynamic.
Want to make this:
I needed to solve this exact same problem: very similar text with those two links in it, over multiple lines, and needing it to be able to be translated in any language (including different word orders, etc). I just solved it, so let me share how I did it.
Initially I was thinking that I should create attributed text and then map the tap's touch location to the regions within that text. While I think that is doable, I also think it's a much too complicated approach.
This is what I ended up doing instead:
SUMMARY:
DETAIL:
In the view controller's viewDidLoad I placed this:
[self buildAgreeTextViewFromString:NSLocalizedString(@"I agree to the #<ts>terms of service# and #<pp>privacy policy#",
@"PLEASE NOTE: please translate \"terms of service\" and \"privacy policy\" as well, and leave the #<ts># and #<pp># around your translations just as in the English version of this message.")];
I'm calling a method that will build the message. Note the markup I came up with. You can of course invent your own, but key is that I also mark the ends of each clickable region because they span over multiple words.
Here's the method that puts the message together -- see below. First I break up the English message over the # character (or rather @"#" string). That way I get each piece for which I need to create a label separately. I loop over them and look for my basic markup of <ts> and <pp> to detect which pieces are links to what. If the chunk of text I'm working with is a link, then I style a bit and set up a tap gesture recogniser for it. I also strip out the markup characters of course. I think this is a really easy way to do it.
Note some subtleties like how I handle spaces: I simply take the spaces from the (localised) string. If there are no spaces (Chinese, Japanese), then there won't be spaces between the chunks either. If there are spaces, then those automatically space out the chunks as needed (e.g. for English). When I have to place a word at the start of a next line though, then I do need to make sure that I strip of any white space prefix from that text, because otherwise it doesn't align properly.
- (void)buildAgreeTextViewFromString:(NSString *)localizedString
{
// 1. Split the localized string on the # sign:
NSArray *localizedStringPieces = [localizedString componentsSeparatedByString:@"#"];
// 2. Loop through all the pieces:
NSUInteger msgChunkCount = localizedStringPieces ? localizedStringPieces.count : 0;
CGPoint wordLocation = CGPointMake(0.0, 0.0);
for (NSUInteger i = 0; i < msgChunkCount; i++)
{
NSString *chunk = [localizedStringPieces objectAtIndex:i];
if ([chunk isEqualToString:@""])
{
continue; // skip this loop if the chunk is empty
}
// 3. Determine what type of word this is:
BOOL isTermsOfServiceLink = [chunk hasPrefix:@"<ts>"];
BOOL isPrivacyPolicyLink = [chunk hasPrefix:@"<pp>"];
BOOL isLink = (BOOL)(isTermsOfServiceLink || isPrivacyPolicyLink);
// 4. Create label, styling dependent on whether it's a link:
UILabel *label = [[UILabel alloc] init];
label.font = [UIFont systemFontOfSize:15.0f];
label.text = chunk;
label.userInteractionEnabled = isLink;
if (isLink)
{
label.textColor = [UIColor colorWithRed:110/255.0f green:181/255.0f blue:229/255.0f alpha:1.0];
label.highlightedTextColor = [UIColor yellowColor];
// 5. Set tap gesture for this clickable text:
SEL selectorAction = isTermsOfServiceLink ? @selector(tapOnTermsOfServiceLink:) : @selector(tapOnPrivacyPolicyLink:);
UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self
action:selectorAction];
[label addGestureRecognizer:tapGesture];
// Trim the markup characters from the label:
if (isTermsOfServiceLink)
label.text = [label.text stringByReplacingOccurrencesOfString:@"<ts>" withString:@""];
if (isPrivacyPolicyLink)
label.text = [label.text stringByReplacingOccurrencesOfString:@"<pp>" withString:@""];
}
else
{
label.textColor = [UIColor whiteColor];
}
// 6. Lay out the labels so it forms a complete sentence again:
// If this word doesn't fit at end of this line, then move it to the next
// line and make sure any leading spaces are stripped off so it aligns nicely:
[label sizeToFit];
if (self.agreeTextContainerView.frame.size.width < wordLocation.x + label.bounds.size.width)
{
wordLocation.x = 0.0; // move this word all the way to the left...
wordLocation.y += label.frame.size.height; // ...on the next line
// And trim of any leading white space:
NSRange startingWhiteSpaceRange = [label.text rangeOfString:@"^\\s*"
options:NSRegularExpressionSearch];
if (startingWhiteSpaceRange.location == 0)
{
label.text = [label.text stringByReplacingCharactersInRange:startingWhiteSpaceRange
withString:@""];
[label sizeToFit];
}
}
// Set the location for this label:
label.frame = CGRectMake(wordLocation.x,
wordLocation.y,
label.frame.size.width,
label.frame.size.height);
// Show this label:
[self.agreeTextContainerView addSubview:label];
// Update the horizontal position for the next word:
wordLocation.x += label.frame.size.width;
}
}
And here are my methods that handle the detected taps on those links.
- (void)tapOnTermsOfServiceLink:(UITapGestureRecognizer *)tapGesture
{
if (tapGesture.state == UIGestureRecognizerStateEnded)
{
NSLog(@"User tapped on the Terms of Service link");
}
}
- (void)tapOnPrivacyPolicyLink:(UITapGestureRecognizer *)tapGesture
{
if (tapGesture.state == UIGestureRecognizerStateEnded)
{
NSLog(@"User tapped on the Privacy Policy link");
}
}
I'm sure there are much smarter and more elegant ways to do this, but this is what I was able to come up with and it works nicely.
Here's how it looks in the app:
userInteractionEnabled = YES on parent label too –
Taxiway UITextView:The key principles:
NSAttributedString as a way of defining a link to tap.UITextViewDelegate to catch the press of the link.Define a URL string:
private let kURLString = "https://www.mywebsite.com"
Add a link to your attributed string:
let originalText = "Please visit the website for more information."
let attributedOriginalText = NSMutableAttributedString(string: originalText)
let linkRange = attributedOriginalText.mutableString.range(of: "website")
attributedOriginalText.addAttribute(.link, value: kURLString, range: linkRange)
Assign attributed string to a text view:
textView.attributedText = attributedOriginalText
Implement UITextViewDelegate (this is really the key piece a prevents the URL from opening some website and where you can define your custom action instead):
func textView(_ textView: UITextView, shouldInteractWith URL: URL, in characterRange: NSRange) -> Bool {
if (URL.absoluteString == kURLString) {
// Do whatever you want here as the action to the user pressing your 'actionString'
}
return false
}
You can also customize how your link looks:
textView.linkTextAttributes = [
NSAttributedStringKey.foregroundColor.rawValue : UIColor.red,
NSAttributedStringKey.underlineStyle.rawValue : NSUnderlineStyle.styleSingle]
UILabel:I usually end up using TTTAttributedLabel.
UITextView selectable property is YES and the isEditable property is NO. –
Heavensent Here is a complete example made in Swift 2 without pods.
import UIKit
class SomeViewController: UIViewController, UITextViewDelegate {
@IBOutlet weak var terms: UITextView!
let termsAndConditionsURL = "http://www.example.com/terms";
let privacyURL = "http://www.example.com/privacy";
override func viewDidLoad() {
super.viewDidLoad()
self.terms.delegate = self
let str = "By using this app you agree to our Terms and Conditions and Privacy Policy"
let attributedString = NSMutableAttributedString(string: str)
var foundRange = attributedString.mutableString.rangeOfString("Terms and Conditions")
attributedString.addAttribute(NSLinkAttributeName, value: termsAndConditionsURL, range: foundRange)
foundRange = attributedString.mutableString.rangeOfString("Privacy Policy")
attributedString.addAttribute(NSLinkAttributeName, value: privacyURL, range: foundRange)
terms.attributedText = attributedString
}
func textView(textView: UITextView, shouldInteractWithURL URL: NSURL, inRange characterRange: NSRange) -> Bool {
if (URL.absoluteString == termsAndConditionsURL) {
let myAlert = UIAlertController(title: "Terms", message: nil, preferredStyle: UIAlertControllerStyle.Alert)
myAlert.addAction(UIAlertAction(title: "OK", style: UIAlertActionStyle.Default, handler: nil))
self.presentViewController(myAlert, animated: true, completion: nil)
} else if (URL.absoluteString == privacyURL) {
let myAlert = UIAlertController(title: "Conditions", message: nil, preferredStyle: UIAlertControllerStyle.Alert)
myAlert.addAction(UIAlertAction(title: "OK", style: UIAlertActionStyle.Default, handler: nil))
self.presentViewController(myAlert, animated: true, completion: nil)
}
return false
}
}
Check this UILabel class ,this will surely help you . I did this same thing by using this .
Here is a translated version of the accepted answer to C# for Xamarin for anyone who will find it useful:
var str = "Or, #<li>log in# to see your orders.";
var strParts = str.Split('#');
var ptWordLocation = new PointF (0, 0);
if (strParts.Length > 1) {
//Loop the parts of the string
foreach (var s in strParts) {
//Check for empty string
if (!String.IsNullOrEmpty (s)) {
var lbl = new UILabel ();
lbl.Font = lbl.Font.WithSize (15);
lbl.TextColor = cpAppConstants.TextColorMessage;
lbl.UserInteractionEnabled = s.Contains ("<li>");
lbl.Text = s.Replace ("<li>", "");
if (s.Contains ("<li>")) {
lbl.TextColor = UIColor.FromRGB (200, 95, 40);
//Set tap gesture for this clickable text:
var gesture = new UITapGestureRecognizer ();
gesture.AddTarget(() => buildLoginLabel_onTap(gesture));
lbl.AddGestureRecognizer (gesture);
}
lbl.SizeToFit ();
//Lay out the labels so it forms a complete sentence again
if (vw.Frame.Width < ptWordLocation.X + lbl.Bounds.Size.Width) {
ptWordLocation.X = 0f;
ptWordLocation.Y += lbl.Frame.Size.Height;
lbl.Text.Trim ();
}
lbl.Frame = new RectangleF (ptWordLocation.X, ptWordLocation.Y, lbl.Frame.Size.Width, lbl.Frame.Size.Height);
vw.AddSubview (lbl);
//Update the horizontal width
ptWordLocation.X += lbl.Frame.Size.Width;
}
}
}
My solution for clickable links to action is this,
myLabel.automaticLinkDetectionEnabled = YES;
myLabel.urlLinkTapHandler = ^(KILabel *myLabel, NSString *string, NSRange range) {
[self attemptOpenURL:[NSURL URLWithString:string]];
NSLog(@"URL tapped %@", string);
};
Check this UILabel class too, this will help you.
Click Here to know how to set Listener for textView
and Add
UITapGestureRecognizer *listener = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapAction:)];
Write the action you want to do within the
- (void)tapAction:(UITapGestureRecognizer *)sender
{
}
Add the listener to the view by
[self.view addGestureRecognizer:listener];
userInteractionEnabled to YES –
Multiplicity I used Erik's solution but needed to do it with Swift. After converting I found a small problem where if you have a lot of text (more than a single line) before you got to a link then it wasn't getting wrapped properly so I added a function to fit the text.
func setText(newText:String){
// 1. Split the localized string on the # sign:
let localizedStringPieces:NSArray = newText.componentsSeparatedByString("#")
// 2. Loop through all the pieces:
var msgChunkCount:Int = localizedStringPieces.count
var wordLocation:CGPoint = CGPointMake(0.0, 0.0)
for (var i:Int = 0; i < msgChunkCount; i++){
let chunk:String = localizedStringPieces[i] as! String
if chunk == ""{
continue; // skip this loop if the chunk is empty
}
// 3. Determine what type of word this is:
let isTermsOfServiceLink:Bool = chunk.hasPrefix("<ts>")
let isPrivacyPolicyLink:Bool = chunk.hasPrefix("<pp>")
let isLink:Bool = (Bool)(isTermsOfServiceLink || isPrivacyPolicyLink)
var remainingText:String = chunk
while count(remainingText)>0{
// 4. Create label, styling dependent on whether it's a link:
let label:UILabel = UILabel()
label.font = UIFont.systemFontOfSize(methodFontSize)
label.text = remainingText
label.userInteractionEnabled = isLink
if (isLink){
label.textColor = UIColor(red: 110/255, green: 181/255, blue: 229/255, alpha: 1.0)
label.highlightedTextColor = UIColor.yellowColor()
// 5. Set tap gesture for this clickable text:
var selectorAction:Selector = isTermsOfServiceLink ? "tapOnTermsOfServiceLink" : "tapOnPrivacyPolicyLink"
let tapGesture:UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: selectorAction)
label.addGestureRecognizer(tapGesture)
// Trim the markup characters from the label:
if (isTermsOfServiceLink){
label.text = label.text?.stringByReplacingOccurrencesOfString("<ts>", withString: "", options: nil, range: nil)
}
if (isPrivacyPolicyLink){
label.text = label.text?.stringByReplacingOccurrencesOfString("<pp>", withString: "", options: nil, range: nil)
}
}else{
label.textColor = UIColor.whiteColor()
}
// If this chunk of text doesn't fit at end of this line, then move it to the next
// line and make sure any leading spaces are stripped off so it aligns nicely:
label.sizeToFit()
let labelHeight = label.frame.size.height
var leftOverText:String = fitLabelToWidth(label, width: self.textContainer.frame.size.width - wordLocation.x)
// if we can't fit anything onto this line then drop down
if label.text == "" {
//drop to a new line
wordLocation.x = 0.0 // move this word all the way to the left...
wordLocation.y += labelHeight; // ...on the next line. (Have to use a constant here because if label has no text it also has no height)
// refit the text
label.text = remainingText
leftOverText = fitLabelToWidth(label, width: self.textContainer.frame.size.width - wordLocation.x)
//NB WE ARE ASSUMING HERE THAT AFTER DROPPING DOWN AT LEAST SOME OF THIS TEXT WILL FIT
// IF THIS ISN'T THE CASE THEN THE LINE WOULD ALWAYS BE TOO BIG AND WE WOULD NEVER BE ABLE TO FIT IT ON ANYWAY!
}
// Set the location for this label:
label.frame = CGRectMake(wordLocation.x, wordLocation.y, label.frame.size.width, label.frame.size.height)
// Show this label:
self.textContainer.addSubview(label)
// Update the horizontal position for the next word:
wordLocation.x += label.frame.size.width;
// update our remaining text and get ready to go again
remainingText = leftOverText
}
}
}
// fit the text label (formatted externally) to the desired with, chopping off text to make it so
// return the remaining text that didn't make the cut as a string
func fitLabelToWidth(label:UILabel, width:CGFloat)->String{
let startingText:String = label.text!
println("Trying to fit ::\(startingText)::")
// if the string is null then we are done
if startingText == ""{
return ""
}
// if this fits already then we are done
label.sizeToFit()
if label.frame.size.width <= width{
return ""
}
// so now we have to loop round trying to get this to fit
var cutRange:Range<String.Index> = Range<String.Index>(start: startingText.startIndex, end: startingText.startIndex)
var searchRange:Range<String.Index>
var startSearchIndex:String.Index = startingText.startIndex
var lastSearchIndex:String.Index = startSearchIndex
var testText:String = ""
var lastText:String = ""
label.text = testText
label.sizeToFit()
while label.frame.size.width <= width{
// store off the last used text as this might be as far as we go
lastText = testText
lastSearchIndex = startSearchIndex
// set up the search range so we look for spaces missing out any previous ones
searchRange = Range<String.Index>(start: startSearchIndex, end: startingText.endIndex)
// cut out a range with the next occurrence of spaces
cutRange = startingText.rangeOfString(" ", options: NSStringCompareOptions.CaseInsensitiveSearch, range: searchRange, locale: nil)!
// get some text from the start of the string to our cut point (start)
testText = startingText.substringToIndex(cutRange.startIndex)
// move the search start to the point after the end of the spaces we just found
startSearchIndex = cutRange.endIndex
// try this in our label to see if it sizes ok
label.text = testText
label.sizeToFit()
}
// we leave the while when the string gets too big
label.text = lastText
label.sizeToFit()
return startingText.substringFromIndex(lastSearchIndex)
}
You can use below code to add tap gesture on UILable :-
Step 1:
Delegate "UIGestureRecognizerDelegate" to your viewcontroller.h
for example:
@interface User_mail_List : UIViewController<UIGestureRecognizerDelegate>
Step 2:
//create you UILable
UILabel *title_lbl= [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
[title_lbl setText:@"u&me"];
[title_lbl setUserInteractionEnabled:YES];
[yourView addSubview:title_lbl];
Step 3:
UITapGestureRecognizer *tap= [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(Prof_lbl_Pressed:)];//your action selector
[tap setNumberOfTapsRequired:1];
title_lbl.userInteractionEnabled= YES;
[title_lbl addGestureRecognizer:tap];
Step 4:
-(void)Prof_lbl_Pressed:(id)sender{
//write your code action
}
thanks,
You can Use multiple overlapping UILabel with userInteractionEnabled = YES on it & add a UITapGestureRecognizer on that label with different bold fonts.
Here is one such example of doing it.
Something like this can also be tried.
If you want a working solution of this then you can try "Fancy-Label". Search in that link for text "Here’s my implementation" & Click it. You will get ready to use product. Don't forget to click the "Switch" button on the app that you run using the above sample.
I hope that help you a lot.
© 2022 - 2024 — McMap. All rights reserved.
UIWebViewthat presents a small HTML string such as the one shown in your question not be 'snappy'? – Mar