I am trying to create a UILabel with customized text that shows the current score of a game. The customer has given me screen shots where they would like the color/pattern of the text to be like that of a wooden panel, so it looks to be brownish with darker swirls within it.
Is this even possible? I have spent an enormous amount of time scouring the web for something related to this and have found nothing concrete. One lead I followed that didn't pan out was using:
[UILabel setTextColor:[UIColor colorWithPatternImage:[UIImage imageNamed: #"WoodenPanel.png"]]];
It seems like there's a way to use an image and set it as the color for the text. But what results when I use this is a completely black UILabel. Is this on the right track? Or is this simply not possible?
You have to do it like this:
[labelName setTextColor:[UIColor colorWithPatternImage:[UIImage imageNamed:#"IMAGENAME.PNG"]]];
NOT like you did:
[UILabel setTextColor:[UIColor colorWithPatternImage:[UIImage imageNamed:#"IMAGENAME.PNG"]]];
You have to put the name of the declared label instead of UILabel
Can text in UILabel have a colorWithPatternImage: assigned to it?
It does use the colorWithPatternImage though
What do you mean by it didn't pan out.
Also this is a possible duplicate of the link I just gave you.
It turns out I had actually implemented it correctly. The line of code I provided above was not an exact line out of my program, but more of a generality.
The reason I was getting a completely black font was that part of the particular image I was using was entirely black. It seems that the image isn't scaled down to fit the text and UILabel so what was being revealed was the bottom 1/5 of the image. I did not have to solve this problem as the image provided for me to implement this was a repetitive pattern throughout the image so that any part of the image would produce the desired effect of a wooden panel type color font.
Related
I would like to make a generic class that when tapped, makes the element grayish.
Facebook's app is the perfect example of what I want to achieve. All their links and images become gray when tapped.
I can only guess that they are subclassing UIButton.
I have made my button's style UIButtonTypeCustom to get rid of the rounded border. Beyond this, I don't know how to have the gray overlay because I see no such property in the documentation.
Its simple:
#define TAG_GRAYVIEW 5671263 // some random number
// add the gray overlay
UIView *grayView = [[UIView alloc] initWithFrame:button.bounds];
grayView.backgroundColor = [UIColor grayColor];
grayView.tag = TAG_GRAYVIEW;
[button addSubview:grayView];
// remove the gray overlay
UIView *grayView = [button viewWithTag:TAG_GRAYVIEW];
[grayView removeFromSuperview];
I think you need to use a semi transperant grey image PNG file. You need to then set Image of button in Highlighted state.
Also note that both the images for Normal State and Highlighted State need to have the images with titles on them.
As once we set the image to button, btn.titleLabel.text won't be displayed.
So you can have a image with transperant background and title on it for Normal state. And an grey image with title on it for Highlighted State.
Code for doing it programmatically is
[btn setImage:#"Transperant.png" forState:UIControlStateNormal];
[btn setImage:#"Grey.png" forState:UIControlStateHighlighted];
Hope this helps you.
The default UIButton masks the opaque content using a gray highlight. For example when using a transparent png, only the parts that contain non-transparent pixels will be grayed out on touch. The default UIButton highlight has no effect on subviews/sublayers, and will only work on provided images. What you see in the Facebook app is probably just a UIWebView highlight, possibly customized using css.
To create something similar using your own control (to prevent the overhead of a UIWebView) you should probably create your own UIControl subclass and highlight the content on touch using a transparent CALayer. You can even mask the CALayer to only highlight the actual contents, instead of a rectangular shape.
Also see my stackoverflow post on creating custom controls for iOS by subclassing UIControl.
Try setting the button up something like this.
*mind you I didn't create the image for this example.
Set your button type to custom, and in "State Config" select "Highlighted" from there you will want to set the image of the button to be a semi-transparent grey image. There are probably several other ways to achieve this same effect but this one should be nice and simple.
How do I add a black outline to my white UILabel text?
One option is to set the shadow, which might not be exactly what you want, but achieves a similar effect. You can manually adjust the offset:
UILabel *myLabel = ...;
lbl.shadowColor = [UIColor whiteColor];
lbl.shadowOffset = CGSizeMake(0, -1.0);
Please note that you can also define this in Interface Builder for your UILabel.
shadow http://i.minus.com/jbiG0jVdOxJbgh.png
If this is not enough for you check out this blog post which deals with subclassing UILabel to get a glow effect:
(source: redrobotstudios.com)
Disclosure: I'm the developer of THLabel.
I've released a UILabel subclass a while ago, which allows an outline in text and other effects. You can find it here: https://github.com/tobihagemann/THLabel
I'm using Core Text and Core Graphics to achieve the effect.
For iOS5, the usual way is to use CoreGraphics to set fill/stroke and then render the graphics. It can be pretty tricky to get the alignment correct for all font sizes though.
I recommend looking at my solution here. You can either use it straight (it has diffuse shadows as well), or simply pick out the code that does the outline. For iOS6 there is a neater (smaller) solution which works even better. Look here.
I am sure this code will solve your problem.
In KSLabel.m class see this line of code
// Outline color
self.textColor = [UIColor whiteColor];
change it to
self.textColor = [UIColor blackColor];
and you will see the black border of the text.
I'm using a custom font on an iPhone app. This font is used on UIButtons and is displaying well.
In IB, I'm setting up horizontal alignement to center and changing the font programaticly with :
[self.playButton.titleLabel setFont:[UIFont fontWithName:#"myfont" size:30]];
when the viewDidLoad is reached.
On the screen, when the view appear, the button's label is first left-aligned in my button and then, 1/2 sec later, it switch to center like I want.
It looks really strange ... if anyone have a clue about this, thanks a lot !
EDIT:
When using
[self.playButton.titleLabel setTextAlignment:UITextAlignmentCenter];
It's nearly the same, the text is cut and then appears totaly.
I am having EXACTLY the same problem. It appears using (sorry for the code, is Xamarin.iOS's C#, not obj-c) UILabel.Appearance.Font = UIFont.FromFile... Removing that let me set font even in the ViewDidLoad!
How to type a text in imgeview... right now successfully drawing using mouse. I need to type text in same image view using keyboard...
Try superimposing a UITextView on top of your UIImageView and set appropriate frames for both so that the text appears until where you want it to appear.
Set this property for your UITextView
myTextView.backgroundColor = [UIColor clearColor];
myTextView.textColor = [UIColor redColor]; //or whatever color you like based on the background image in your UIImageView.
Of course you will have to take care of the scrolling when the keyboard comes up after the UITextView becomes active.
If you want more assistance, please elaborate upon your question and your need.
I wonder what is the way to gray out portion of a view similar to the way UIAlertView grays out everything except the message box? Right now i use another custom view on top of the target area, but it doesnt look as nice.
Any ideas?
I get good results using the method you have already tried. perhaps fiddling around with the alpha is a good idea?
mask = [[UIView alloc] initWithFrame:window.frame];
[mask setBackgroundColor:[UIColor colorWithWhite:0.0 alpha:0.78]];
[self.view addSubview:mask];
Then later in your code you can remove it:
[mask removeFromSuperview];
or
[mask setHidden:YES];
If you want to make it even better, I suppose you could try using a gradient, either programmatically, or as an image, and using this to darken the edges of the screen such that the content you are displaying forefront appears to be the light source.