I'm creating UIButtons (type = UIButtonTypeCustom) with a custom background drawn by an artist; unfortunately UIButton is adding an unwanted 'well' effect around the backgroundImage (as specified via setBackgroundImage). Is there a way to disable the well? It's not a simple drop shadow, so messing with the CALayer properties doesn't seem to help. I realise I could use UIControl, but that's considerably more work, since I need to handle the label subview myself, and get the artist to produce highlighted versions of the artwork - UIButton is doing all that nicely, if I could only disable the well effect.
Put your image inside a UIImageView, and then position your UIButton on top of it. Use the "custom" style, which has no UI to it at all and is totally invisible.
If you want to change ("highlight") your button image when the button is hit, just change the image contained in the UIImageView in whatever method your UIButton targets.
Related
I created a UIStackView with a UIImageView and a UIButton. The text inside of the UIButton won't show. I can tell that autolayout works because the background and the selection of my UIButton both work properly.
The title always disappears when I have the constraints on. I set the image to 0/0/0/0 without margins and aligned the button to the image's edges.
Has anyone run into this or knows how to fix it?
At the end I simply used a UIView. I don't know what made me use the UIStackView but I guess it's not made for overlaying objects.
This tutorial shows how to draw on a graphics context for the view using Quartz 2D:
http://www.techotopia.com/index.php/An_iPhone_Graphics_Drawing_Tutorial_using_Quartz_2D
But I want to draw on a UIButton, not on a view. How can I do that?
Thanks
Draw on UIView . Add the view as subview to your UIButton.
A button IS a UIView. It inherits from UIControl, which inherits from UIView.
So buttons have a drawRect method.
So you can do everything described in the article you linked on a button.
However, buttons are set up to do a lot of things for you, and overriding the drawRect method could make those things not work correctly.
Buttons normally draw a title and a rounded rectangle frame. You can turn that off by setting the button's type to custom.
Custom buttons will draw an image if you install one.
Buttons normally also either draw a highlight over their image, or have a second image to use for the highlighted state. If you want to implement drawRect, you'll need to handle drawing the highlighted state yourself.
In general, you want to avoid using drawRect and use some other technique to get the content you want into your views.
What, exactly, are you trying to do?
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.
I'm attempting to add a UIImageView to the subview of a UILabel, but for some reason, I'm unable to have it as the background as this will cover the actual label text.
I don't want to set the UILabel's background color as because it will repeat as a pattern:
[self setBackgroundColor: [UIColor colorWithPatternImage:[UIImage imageNamed:#"someBg.png"]]];
Looking at the number of subviews to a raw UILabel it seems like the text isn't a UIView so adding the subview to index 0 won't help either.
I need the text to be ON TOP of the image background.
Any ideas?
Your options:
Wrap the label and the background image view in another container view.
Write your own label class that supports background images.
Anyhow I solved this by inheriting UITextField and adding the subview to that. This works since there's actually a UILabel subview within this control and adding it behind it naturally solves the problem.
Also, I disabled user interaction so that it behaves like a label.
I have created a flexible navigation bar in my app that will show custom buttons on the left, right, and in the middle. So far I have got working:
Right/Left/Middle - Custom Image and/or Text
Right/Left - Normal looking button with custom Image in it
Right/Left - Normal looking button with custom Text in it
By 'normal looking' I mean the default UIBarButtonItemStyle- just a nice shiny button.
My question is, how can I achieve the same look in the MIDDLE of the nav bar? I can do custom/text images by just creating a custom UIButton, and on the right / left I create a UIBarButtonItem from it, but in the middle I just add the UIButton view as a subview of the navbar.
I can't add a UIBarButtonItem to the navbar as a subview, and any UIButton I create doesn't look like a UIBarButtonItem.
The only workaround I can think of is to use a stretchable custom image that I steal from a screenshot. I'd rather avoid doing it this way. Am I missing something?
*********** UPDATE **************
The open source library Three20 will allow you to create UIButtons that look like UIBarButtonItems. Then you can add them to the bar view either by placing manually as a subview or by setting the title view.
I never understood why they didn't make UIBarButtonItems derive from UIViews (or even better, UIButtons) so they could be used elsewhere.
Sounds like you're on the right track, but need better artwork :-) You can get a large number of iPhone UI components in a Photoshop .PSD file from here. They have pre-rendered bar buttons which you can use as a base for a standard UIButton image. If you have Photoshop (or a decent drawing program) you can stretch the buttons from the middle to fit your size without getting the corners distorted. Just add the label and you should be good to go.
Put a flexible region on the left and right, they will offset each other causing anything between them to be centered