I have two UILabels. that I want to overlap one atop the other. Call the labels "under" and "over".
over: A C E G
under: B D F
UILabel "over" will have its text drawn in red. "under" will be in blue. The visual effect will be alternating colors between successive letters.
What are the controls available to me to exactly align the text in each label to pull this off?
Cheers,
Doug
I agree with fbrereton. This seems a very hard way to achieve the goal. Check out the NSString UIKit Additions to learn how to draw your own strings and lay the characters out yourself in your own custom -drawRect:. You'll have far greater control, and the code should not be that complex. iPhone doesn't have very good layout support (nothing like Mac offers), but for something this simple, it shouldn't be too bad.
You have to make sure the font you are using is a monospace font, otherwise the characters will not line up exactly as you would hope with just a space between them. (I believe there is a typewrite font available in the iPhone OS that is monospace; YMMV.) Also you will have to prefix underLabel with a space for the code below to work.
To map one UILabel on top of another, try:
overLabel.opaque = NO; // so you can see what is under overLabel
overLabel.textColor = [UIColor redColor];
overLabel.backgroundColor = [UIColor clearColor];
underLabel.frame = overLabel.frame;
underLabel.textColor = [UIColor blueColor];
Note in the above code underLabel takes on overLabel's frame because the latter's frame is wider; if it were the other way around overLabel would get clipped.
All that being said I'd wager there is a better way to skin this particular cat. This solution feels very "round peg, square hole" to me.
Related
I'm not sure if "fade out" is the correct term to use, as it seems to refer to the animation effect a lot, but what I'd like to achieve can be seen in the address bar of the iPhone Safari app. When a URL is too long to display, the end of the string "faded out" rather than truncated with "...".
I thought this could be easily done by changing the Line Breaks setting from "Truncate Tail" to "Clip" in the XIB file and then using an image with transparency to create the effect. But setting to "Clip" seems to clip at the end of a word, rather than the middle of a word, or the middle of a letter even, as seen in Safari or Chrome for iPhone. This doesn't quite work for me, and it actually gives the impression that the text is complete, when upon closer inspection, the user will notice that the text doesn't make sense.
What's the best way to "fade out" strings that don't fit in text labels? Thanks in advance.
Take a look at the Google Toolbox for Mac GTMFadeTruncatingLabel, which is a reusable component that does exactly this.
You could also use a combination of the category found here : (https://stackoverflow.com/a/24508153/2654425) and a gradient.
And do:
if([myLabel isTruncated]){
CAGradientLayer *l = [CAGradientLayer layer];
l.frame = myLabel.bounds;
l.colors = #[(id)[UIColor whiteColor].CGColor, (id)[UIColor clearColor].CGColor];
l.startPoint = CGPointMake(1.f, .1f);
l.endPoint = CGPointMake(0.95f, 1.0f);
myLabel.layer.mask = l;
}
This works in iOS 7 & iOS8.
I wanted to make a UITableView with text that is both right-aligned and indented as depicted in the image below:
Unfortunately, I can not do this by writing :-
cell.textLabel.textAlignment = UITextAlignmentRight;
cell.indentationLevel = 10; // or even -10
Can this be done using UITableView's properties? If not, the only way I could think of is using [myString drawInRect:withFont:]; but I would like to go through methods based on alignment and indentation before getting into that [I have already written code for that :-) ], so other work-arounds are welcome!
Additional info: The indentation varies with accelerometer values so I can not have hard-coded Label frame positions. I've uploaded sample code at github in which I've used only the alignment and indentation info so far, so continuing to use that would make this easier.
Subclass UITableViewCell and you can position the frame of the text label however you like. In the if statement where you dequeueReusableCellWithIdentifier: where a reusable cell doesn't exist, just modify the frame and then set the label to use the adjusted frame with setFrame. The autoresizing mask should remain the same.
You could always create your own custom cells and place a UITextLabel in the cell, and make the UITextLabel's alignment right aligned.
Also set the autoresizing mask of the UITextLabel to the right so the indentation distance stays the same no matter the orientation.
I want to implement below chart like structure.
Explanation:
1. Each block should be clickable.
2. If the block is selected, it will be highlighted(i.e. Red block in figure).
I initially google for this but was unable to find. What should be "Drawing logic" corresponding to this with animation?Thanx in advance.
I think you need to use MCSegmentedControl.
You can get it from here.
Generally speaking, I'd have an image for the outline with a transparent middle, then dynamically create colored blocks behind it of the appropriate colors, with dynamic labels. The highlighting is a little tricky, but could be done with a set of image overlays. One could also try to shrink and expand fixed images for the bars/highlighting, but iPhone scales images poorly.
(Will it always be 4 blocks? There are a couple of other ways to manage it using fixed-size images overlaying each other.)
Maybe you should look into using CALayer for this?
U need to implement this type of logic using button. Just scale button width according to percentage.
And to make round rect button like appearance use the code below and don't forget to import quartz-core framework in class file.
And to scale first and last button as you need some overlap from nearby button.
btn.layer.cornerRadius = 8.0;
btn.layer.borderWidth = 0.5;
btn.layer.borderColor = [[UIColor blackColor] CGColor];
I was wondering if anyone knew if there was an easy way to invert the colors of a UIWebView or UITextView. I know it is possible to invert all on your iPhone, but I do not want the user to have to do that, they should be able to with one click in app, invert the colors so that if it is a low light situation, reading something will be easier and less intrusive to people around the user.
Thanks for any help!
Here is one way I've inverted colors in a UIWebView (in the past) by injecting javascript.
First...
#define invertJS #"function load_script(src,callback){var s=document.createElement('script');s.src=src;s.onload=callback;document.getElementsByTagName('head')[0].appendChild(s);}function invertColors(){var colorProperties=['color','background-color'];$('*').each(function(){var color=null;for(var prop in colorProperties){prop=colorProperties[prop];if(!$(this).css(prop))continue;color=new RGBColor($(this).css(prop));if(color.ok){$(this).css(prop,'rgb('+(255-color.r)+','+(255-color.g)+','+(255-color.b)+')');}color=null;}});}load_script('http://www.phpied.com/files/rgbcolor/rgbcolor.js',function(){if(!window.jQuery)load_script('https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js',invertColors);else invertColors();})"
And then when your webview finishes loading
- (void)webViewDidFinishLoad:(UIWebView *)webview{
[webview stringByEvaluatingJavaScriptFromString:invertJS];}
For a UITextView you can set the text color and background color attributes, I know from there you could set up a button to switch between white back/black text and black back/white text. Unfortunately, I do not see any similar attributes for UIWebView.
See iOS Documentation for UITextViews and UIWebViews.
Also when passing colors to these attributes, you can use Hex values instead of Apple's preset colors. In this way you could call the hex value of the attribute, invert it with any number of formulas, and pass the new hex value back to the attribute.
Inverting a Hex color, put simply:
// maximum hex value is FFFFFF, so
newHex = FFFFFF - oldHex;
To get the ARGB components of any UIColor, you can use the code provided in this answer:
Extracting rgb from UIColor
You can then "invert" the colors (sort of) by subtracting the r, g and b components (but not the a) from 1.0, and then using these modified components to produce a new color, like so:
r = 1.0 - r;
g = 1.0 - g;
b = 1.0 - b;
UIColor newColor = [UIColor colorWithRed:r green:g blue:b alpha:1.0];
I ended up just making two separate files on my server. One that is inverted and one that is regular. There does not seem to be anything in core graphics at least that I could find that would easily do this and to be honest HTML or CSS are definitely not my strong points. Still if anyone has a simpler solution for this I am more than interested in a good idea.
When drawing strings using drawAtPoint:, drawInRect: and even setting the text property of UILabels - the text can sometimes appear slightly blurry.
I tend to use Helvetica in most places, and I notice that specific font sizes cause some level of blurriness to occur, both in the simulator and on the device.
For example:
UIFont *labelFont = [UIFont fontWithName:#"Helvetica-Bold" size:12];
Will cause the resulting label to have slightly blurry text.
UIFont *labelFont = [UIFont fontWithName:#"Helvetica-Bold" size:13];
Results in crisp text.
My question is why does this occur? And is it just a matter of selecting an optimal font size for a typeface? If so, what are the optimal font sizes?
UPDATE: It seems that perhaps it is not the font size that is causing the blurriness. It may be that the center of the rect is a fractional point. Here is a comment I found on the Apple dev forums:
Check the position. It's likely on a
fractional pixel. Change center to be
integer value.
I rounded off the values of all my points, but there are still places where text remains blurry. Has anyone come across this issue before?
I have resolved this.
Just make sure that the point or rect in which you are drawing does not occur on a fractional pixel.
I.e. NSLog(#"%#", NSStringFromCGRect(theRect)) to determine which point is being drawn on a fractional pixel. Then call round() on that point.
You might want to look at NSIntegralRect(), it does what you want.
Pardon my ignorance if this is incorrect, I know nothing about iPhone or Cocoa.
If you're asking for the text to be centered in the rect, you might also need to make sure the width and/or height of the rect is an even number.
I have had this problem too, but my solution is different and may help someone.
My problem was text blur after changing the size of a UIView object thru TouchesBegan
and CGAffineTransformMakeScale, then back to CGAffineTransformIdentity in TouchesEnded.
I tried both the varying text size and rounding of x and y center points but neither worked.
The solution for my problem was to use even sizes for the width and height of my UIView !!
Hope this helps ....
From my experiments, some fonts don't render clearly at certain sizes. e.g. Helvetica-Bold doesn't render "." well at 16.0f, but they're clear at 18.0f. (If you look closely, the top pixel of the "." is blurry.)
After I noticed that, I've been irked every time I see that UIView, since it's rendered dynamically.
In my case, I drew text on a custom CALayer and turned out to be pretty blurry. I solved it by setting contentScale with appropriate value:
Objective-C:
layer.contentsScale = [UIScreen mainScreen].scale;
Swift:
layer.contentsScale = UIScreen.main.scale