I'm trying to make a button that basically mimics the buttons seen on the iphone's home screen - it has a picture placed vertically above some text, and both are part of the button and behave appropriately (dim, clickable, etc) when highlighted.
I've tried putting the picture or the text into its own frame but that doesn't work because whichever is in the new frame doesn't dim with the rest of the button.
Using the background image property doesn't work because I want the image above the text - the area behind the text should be transparent. I would REALLY prefer a programming solution instead of going in and editing all my pictures.
Create a subclass of UIView, and have a UIImageView and UILabel as subviews, and position them appropriately using code.
You'd then have the UIImageView and UILabel as properties so that you could access them, like this:
myCustomButton.imageView.image = [UIImage imageNamed:#"..."];
myCustomButton.textLabel.text = #"...";
Or you could probably find a 3rd Party custom UIView, on the internet on github or something.
Jonathan's idea is a good one, but if you're only doing it with a couple images it's not worth the trouble. You can create a UIImage and a UILabel and then place them inside a UIButton in interface builder.
Still, it's always a good idea to learn about powerful features like subclassing.
Good luck,
Aurum Aquila
do this:
UIButton *btn_chat = [UIButton buttonWithType:UIButtonTypeCustom];
btn_chat.frame = CGRectMake(40, 50, 100, 30);//CGRectMake(20, 20, 200, 72);
UIImage *image = [UIImage imageNamed:#"chat.png"];
CGSize newSize = CGSizeMake(30, 30);
UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
[image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[btn_chat setImage:newImage forState:UIControlStateNormal];
btn_chat.imageEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);
[btn_chat setTitle:#"Chat" forState:UIControlStateNormal];
btn_chat.titleEdgeInsets = UIEdgeInsetsMake(0, 20, 0, 0);
btn_chat.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
[btn_chat addTarget:self action:#selector(menuSelection:) forControlEvents:UIControlEventTouchUpInside];
[btn_chat setTag:1001];
[self.view addSubview:btn_chat];
and it's done :)
Create a new initially transparent bitmap drawing context, draw your image to the top and text to the bottom. Then make a new image from this drawing context, and use that new image for the button.
Related
Could any one help me i want to add same image multiple times horizontally with same height and width. Important thing is i am creating image view dynamically i want to use same image view for all images! This is image i want to make horizontally like this but only one row needed like this.
You could achieve this by using stretchableImageWithLeftCapWidth:
UIImage *backgroundImage = [[UIImage imageNamed:#"SheetBackground.png"] stretchableImageWithLeftCapWidth:0.5 topCapHeight:0];
As per your request:
UIImage *backgroundImage = [[UIImage imageNamed:#"q4Ses.png"] stretchableImageWithLeftCapWidth:0.5 topCapHeight:0];
[_scro setBackgroundColor:[UIColor colorWithPatternImage:backgroundImage]];
And using your image:
The output is:
You can set this image on top of either UIScrollview, UIView and buttons. You do not need a for loop for that.
UPDATE:
The above code is for filling the entire background. If you wish to add only for one row then you have to create one UIView and set its colorWithPatternImage like below:
UIImage *backgroundImage = [[UIImage imageNamed:#"q4Ses.png"]
stretchableImageWithLeftCapWidth:1 topCapHeight:0];
UIView *v=[[UIView alloc]
initWithFrame:CGRectMake(0, 0, _scro.frame.size.width, 45)];
[v setBackgroundColor:[UIColor
colorWithPatternImage:backgroundImage]];
[_scro addSubview:v];
And the output:
Make a view of the height of image. But this view can have any width.
Then set your tile image in this view with following code.
UIImage *tiledImage = [UIImage imageNamed:#"myTiledImage.png"];
self.view.backgroundColor = [UIColor colorWithPatternImage:tiledImage];
This will get you the image tiled multiple times horizontally.
If the view spreads the image everywhere on screen then you'll have to add the following code to your view
self.view.clipToBounds = YES;
UIScrollView *myScrollView=[[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, 320, 480)];
CGFloat scrollWidth = 0.f;
for (int i=0;i<10;i++)//i=10,put as many image number u want to display
{
imageView = [[UIImageView alloc] initWithFrame:
CGRectMake(scrollWidth, 0, 80, 60.f)];
imageView.image=[UIImage imageNamed:#"urimagename"];
imageView.tag=i;
[myScrollView addSubview:imageView];
scrollWidth += 100;
}
myScrollView.contentSize = CGSizeMake(scrollWidth, 100);
EDIT:
You can achieve this in one more way.
CodenameLambda1's answer is better than the above one.But still some changes needs to be done in the #CodenameLambda1's answer..as the SOP's requirement is to display it in scrollview.So instead of self.view use scrollview.
UIScrollView *vie=[[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, 320, 60)];
UIImage *tiledImage = [UIImage imageNamed:#"login"];
vie.backgroundColor = [UIColor colorWithPatternImage:tiledImage];
vie.contentSize=CGSizeMake(1400,60);
vie.clipsToBounds = YES;
[self.view addSubview:vie];
I have two UIButtons in my app, which are custom buttons with background images, so they look like two dice. When my app is run on something not-iPhone 5 (not 4.0 inch screen) I want the to resize the buttons. I already have the code that checks for non-iPhone 5 devices(and it works), I just need to know how to change the size of the UIButtons.
I have tried lots of answers for similar questions, but so far I have not written any code that actually changes the size of my UIButtons.
I have written something like this in the "viewDidLoad" inside my "check-if-screen-is-non-iPhone-5"-statement:
button.frame = CGRectMake(90, 200, 100, 100);
The answer will depend on whether you're using Interface Builder or creating yoru button programatically. Most likely, you want to set the "content mode" of the button's imageView; then update the button's frame.
Here is an example:
UIImage *image = [UIImage imageNamed:#"close"];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.bounds = CGRectMake( 0, 0, image.size.width, image.size.height);
button.autoresizingMask = UIViewAutoresizingFlexibleHeight;
[button.imageView setContentMode:UIViewContentModeScaleAspectFit];
[button setImage:image forState:UIControlStateNormal];
Good luck.
Have a look at this image...
I want to design toolbar like this, Each UIBarButtonItem should be separated by a thin line. So I have inserted flexible space button in between each UIBarButtonItem (that helps me in aligning UIBarButtonItem while orientation changes), however if I set an image for that, its no more acting as flexible button, changes to normal UIBarbutton.
So I need an flexible space button with an image.. Any idea how to do it.
(OR)
How to design a UIToolbar like above... Any helps is really appreciated. Thanx
To set background image for UIBarbuttonItem
UIImage *faceImage = [UIImage imageNamed:#"facebook.png"];
UIButton *face = [UIButton buttonWithType:UIButtonTypeCustom];
face.bounds = CGRectMake( 0, 0, faceImage.size.width, faceImage.size.height );
[face setImage:faceImage forState:UIControlStateNormal];
UIBarButtonItem *faceBtn = [[UIBarButtonItem alloc] initWithCustomView:face];
I think this will help you..
UIImage* topImage = [UIImage imageNamed:#"TabBarGradient.png"];
// Create a new image context
UIGraphicsBeginImageContextWithOptions(CGSizeMake(width, topImage.size.height*2), NO, 0.0);
// Create a stretchable image for the top of the background and draw it
UIImage* stretchedTopImage = [topImage stretchableImageWithLeftCapWidth:0 topCapHeight:0];
[stretchedTopImage drawInRect:CGRectMake(0, 0, width, topImage.size.height)];
// Draw a solid black color for the bottom of the background
[[UIColor blackColor] set];
CGContextFillRect(UIGraphicsGetCurrentContext(), CGRectMake(0, topImage.size.height, width, topImage.size.height));
// Generate a new image
UIImage* resultImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return resultImage;
and for more detail you can check this...
http://idevrecipes.com/2011/01/04/how-does-the-twitter-iphone-app-implement-a-custom-tab-bar/
If didn't solve your problem..let me know..
I'm trying to display a top portion of an UIImage.
I know I can use the following code and display the middle portion. I'm just trying to figure out how to do the same for the top portion:
imageView.contentMode = UIViewContentModeScaleAspectFill;
imageView.clipsToBounds = YES;
The UIImage I get from the server is not necessarily the same size, so I cannot use UIViewContentModeTopLeft. I want a way to scale the image and show the top portion.
Thanks.
You want to display an arbitrary rectangle of your image, so the easiest way to go will to be to put your imageView inside a regular view. You can set the frame of the image view to display the bit you want and set the enclosing view to do the clipping.
e.g. you have a 1000 x 1000 px image and you want to display the rectangle 200,200 to 400,400
UIImageView* imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"SomeImage"]];
imageView.frame = CGRectMake( -200, -200, 1000, 1000);
UIView* enclosingView = [[UIView alloc] initWithFrame:CGRectMake( 0, 0, 200, 200);
enclosingView.clipsToBounds = YES;
[enclosingView addSubview: imageView];
Content mode doesn't matter much in this case, since you're setting the dimension of the image view to match the image.
One way is to call CGImageCreateWithImageInRect on your original image to create a new image with just the top portion.
Something like:
CGImageRef newImageRef = CGImageCreateWithImageInRect( oldImage.CGImage, CGRectMake(0,0,50,50) );
UIImage *newImage = [UIImage imageWithCGImage:newImageRef];
CGImageRelease( newImageRef );
then display newImage rather than oldImage.
Is there a way to achieve a blurry or glowing effect for the text? Or would I have to fetch the graphics context of the layer and then apply some kind of gauss algorithm on the pixels? I searched the documentation on this but it appears that shadows don't draw blurry and there's no method in NSString, UIFont or UILabel that could help to do it.
CGContextSetShadowWithColor can be (ab)used to draw blurred text. As it can be slow, it is best to draw it to a buffer and then reuse that:
UIFont *font = [UIFont systemFontOfSize:18.0f];
UIGraphicsBeginImageContext(CGSizeMake(200.0f, 50.0f));
CGContextSetShadowWithColor(UIGraphicsGetCurrentContext(), CGSizeMake(0.0f, -500.0f), 2.0f, [[UIColor blackColor] CGColor]);
[#"Blurred Text!" drawAtPoint:CGPointMake(5.0f, -500.0f) withFont:font];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[imageView setImage:image];
Old answer:
A simple option is to draw the text a number of times and offset the x/y coordinates by 1 each time. To speed it up you can cache it on an offscreen buffer.
You can intentionally position the label on a half pixel and you'll get a blurry effect. You won't have much control over it, but it will look blurry:
UILabel *labelOnWholePixel = [[UILabel alloc]
initWithFrame:CGRectMake(20.0f, 20.0f, 280.0f, 25.0f)];
[labelOnWholePixel setText:#"Whole Pixel"];
[labelOnWholePixel setBackgroundColor:[UIColor clearColor]];
UILabel *labelOnHalfPixel = [[UILabel alloc]
initWithFrame:CGRectMake(20.5f, 50.5f, 280.0f, 25.0f)];
[labelOnHalfPixel setText:#"Half Pixel"];
[labelOnHalfPixel setBackgroundColor:[UIColor clearColor]];
[[self view] addSubview:labelOnWholePixel];
[[self view] addSubview:labelOnHalfPixel];
I'm not sure, but it appears to me that the closer you are to the whole number in either direction, the clearer it gets, so you can control it a little.
Use photoshop or some other image editor to create a clear, blurry overlay. Save as a PNG. Load this PNG into an UIImageview and draw it on top of the UILabel. Adjust the alpha to alter the effect.
You could even create a specialized UILabel subclass to handle this with several degrees of blur.
Aside from antialiasing UILabel does not support blurring its text (or its shadow). You'll have to code it manually.